I was looking at an HTML5 presentation and was wondering if anybody knew how the actual presentation was created. You can zoom in and out and view all the slides. You can also navigate with your keyboard.
Here's the site with the slideshow: http://slides.html5rocks.com/#slide5
First of all, it's not really mimicking PowerPoint. It's surpassing PowerPoint. :) Second, it's doing what the URL implies: rocking your world with HTML 5. Each slide is an example of markup and CSS (and Javascript) available in HTML 5. To find out all about how they do it, right-click on the page and choose "View Source" ... it will show you all the markup and scripting etc.
You can definitely do as Robusto suggests and view source and go from there.
But you might find it easier to get a more stripped version by going to http://studio.html5rocks.com/#Deck and downloading the sample from there. It's the same thing basically but has fewer external dependencies and fewer initial slides so it might be easier to work with. Basically, put the content of each slide in a <div class="slide">...</div> the way you see it with the four sample slides in the source code.
There is a very useful CSS3, HTML5 library called impress.js at http://bartaz.github.com/impress.js/
Related
I'm developing a web scraping tool in Python, and I need to get intimately acquainted with the functions of various HTML tags on certain sites. Unfortunately, the "view source" that Chrome, Firefox, and Safari offer does not output very well formatted HTML source code -- it tends to place a huge number of tags on the same line. Do the browsers offer any plugins that may be able to clean things up a bit, or do I need to get/develop some kind of tool in Python that takes dirty HTML as input and outputs cleanly formatted HTML?
Since I work primarily with Chrome, the best examples I can think of are Code Formatter (Chrome)
This isn't automatic; you have to copy and paste the entire page into the app. Also the app window is small (this unalterable to my knowledge), but relatively effective.
...and JavaScript and CSS Beautifier
Much more effective and clean, but only works, as the title suggests, with .Js and CSS.
With Firefox you can select (highlight - I am writing for beginners also) the text, and once it is selected, release the left mouse button and right click within the selected area and choose "View selection source." You can then copy the highlighted text and paste it.
My composite example:
View selection source
I have a course work for which I have to make a (as advanced as possible) WYSIWYG web page editor in VB.NET (2010). It should have a visual editor with drag-drop support for several elements such as anchors, images, tables etc., and it should generate HTML based on that structure.
I don't know where to begin though.. I have some experience with vb.net, I made a tabbed notepad vaguely following a tutorial, but I don't know how to make this drag-drop thingy in a richtextbox.
I've searched for a tutorial, but most of them are just too simple - a text editor with browser control rendering the HTML.. I found one really nice and advanced, but it's in german :-|
So, if anyone knows any resources / tutorials I could use to start things I'll appreciate it.
I won't start with a richtextbox. Do you want to realize it in WPF or Forms (I would recommend WPF)?
In WPF there is relative simple a Drag-And-Drop behavior for elements (see http://msdn.microsoft.com/en-en/library/ms742859.aspx).
I would start with some simple elements (e.g. TextBoxes) and drag-drop them from some sort of toolbox onto a grid with fixed columns and rows (and later use a canvas). And then generate the HTML-Code from that.
In general, most of the WYSIWYG browser based editors are written in Javascript using an editable DIV.
A good example is tinymce:
http://www.tinymce.com/
Download, including full source code, is available here:
http://www.tinymce.com/download/download.php
You can use CKEditor. Its one of the best WYSIWYG editor i have worked with. Its highly customizable and opensource.
Given below is the URL for the website:
http://ckeditor.com/
I'm in the process of writing a website and I want some tabs on the side of my website. I want the website to flow well, so I don't want a simple graphical link to a website, but rather an interactive tab system where you can click on what you want and you will get there instantly.
My experience is limited to XHTML and CSS, so I probably am not advanced enough to know how to do this, but I am willing to learn anything needed to accomplish making my vision reality.
Sorry I can't give examples. I know I've seen it before, I just can't think of where.
Use Javascript; I would recommend jQuery.
Approach 1: The idea is to initially hide the contents of the tab, then show the corresponding one when a tab is clicked. There's already a JQuery Plugin for this: http://jqueryui.com/demos/tabs/
Approach 2: If you have huge contents, I would suggest to use AJAX to load the contents of each tab on demand. This way, all of the contents are not loaded in one go thus saving bandwidth and improving performance. However, this approach needs knowledge in server-side programming, in a way this is more advanced than Approach 1.
There are plenty of examples of HTML/CSS layouts on the internet. Here are some resources:
http://www.maxdesign.com.au/articles/css-layouts/
http://www.code-sucks.com/css%20layouts/
I am trying to imitate this tutorial about creating a simple Apple-themed breadcrumb found here:
http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx
Even after looking at the updated example and downloading the source code from here:
http://www.lostsockdesign.com.au/apple-breadcrumb/index.html
I cannot tell how only the HTML and CSS "knows" which page it is currently.
Obviously, if your browser is pointed to "http://www.lostsockdesign.com.au/apple-breadcrumb/index2.html" the browser knows you are on this page, but what part of the HTML or CSS specifies that the breadcrumb should leave out the graphics for the subsequent pages, and fade out the current page graphic?
Sorry for the simple question.. xD
UPDATE:
OK, now that that's solved, anyone have a suggestion for the simplest way to effect a script to work with this tut?
It doesn't.
That tutorial is simply for styling, not for generating the breadcrumbs; you have to do that part yourself, through some sort of scripting or manually.
Re: Update
Breadcrumbs are essentially the current path down the tree that is your site. Start with a site map (not in the XML, SEO sense, but in the actual page structure of your site. For instance:
Home
JavaScript
Vanilla
Gallery
Lightbox
Dice Roller
jQuery
Cycle
Click Tracker
Blog
RSS
Web Development
Object Oriented CSS
Currying Functions in JavaScript
CSS Reset Files
Gaming
Review: Super Mario Bros.
Camping Strategy in Oregon Trail
So Your Mom Wants to Play Wii Golf
Portfolio
DEA Website
We <3 Kittens
Nobody Likes IE6
So, if you're on the page "CSS Reset Files", you follow the tree from the (not shown) root, and show every level you find in the breadcrumbs, resulting in this:
My Site -> Blog -> CSS -> CSS Reset Files
This data can be stored in the database and pulled out using the server side language of your choice, or it could be automatically generated based on directory structure using server-side or client-side scripts, or you could manually code them into each of your pages.
How you do it is entirely up to you, but this is the basic concept.
You don't use HTML and CSS (CSS3 has some limited features like this, but I don't think they're quite ready for prime time yet) to figure out what page you are on. Usually server side software (such as a CMS) is used to output the breadcrumbs, complete with CSS class names that indicate which page is the current one etc.
I've been given the task of doing some work customizing an artist's space in MySpace. It seems that you sort of hack the HTML you want into your edit profile page (which has several empty boxes). The MySpace page, it seems, is already HTML so you can only hack into that. Suggested "tweaks" include incomplete HTML code (e.g., a <DIV> tag without a </DIV> tag to supress certain sections) and stylesheet pieces that you can "place anywhere" (meaning somewhere on your edit profile page). And the best one is that sites that offer layouts say, "Layout Code - Copy and Paste the code at the bottom of your 'I'd Like to Meet' Section!"
This cannot possibly be this lame, can it?
Is there any coherent guide to customizing MySpace pages for programmers/HTML designers? Is there a coherent DOM (including things like .contactTable etc.)? Could it be that all the tweaks are just hacks people have figured out from looking at the generated HTML?
Thanks!
This shouldn't be too hard if you whip out Firebug and do a bunch of "Inspect > click on page > edit CSS in Firebug's editor" work to see what you can learn about the structure of the page. Then mock it up to roughly how you want it and note down which elements and which styles need work and figure out how to get that set up in the profile editor.
Try approaching this from the point of view of a challenge. On the upside, MySpace allows you access to the DOM so you can screw with all sorts of things. On the downside, their choice of HTML composition is somewhat arguable.
You hit the nail on the head with your final question. The MySpace DOM is a disgusting set of nearly-infinitely nested tables. Normally, people edit the page by finding those sites that let you "cut and paste" and use their generated CSS since they've already done the hard work for isolating the proper elements.
Good luck... unfortunately, you are really going to need it. =/
Your fears are correct. MySpace "customization" is a bunch of hacks. Good luck.
You can a lot of information in this link: http://spiff-myspace.blogspot.com/
I think the same of the others answers: customize MySpace page is a difficult and complex task.
Regards,