This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Table of Contents
Part 1 - HTML5
XHTML vs. HTML5
Christopher Schmitt dives right into the issues XHTML actually delivered, despite having been touted as ‘the next great thing’. Validation was a primary problem with XHTML – in fact research showed that only 5% of sites were actually validating. The “pain” of XHTML was realized in its inability to be easily-manipulated by multiple users, rendering it obscure and unwieldy to maintain. Secondly, adoption was a problem with XHTML, which could be tied directly to the adoption rate of IE6. Another issue was the limited number of elements it offered - especially when dealing with large amounts of content. A look at microformats - little process templates created by Tantek Çelik. Get the book Microformats Made Simple, by Emily Lewis and visit http://microformats.org/ to get a good foundation. The BBC quit using microformats when closed-captioning would only expose underlying data instead of text (ie: long/lat location vs city name). Significant changes in the web –video, audio, etc. – continue to drive the need for functionality beyond what HTML was initially designed to do. In real life, aligning blueprints with reality is rarely feasible – usually, users dictate the function of the “object” and the web is no exception. A quote by Frank Lloyd Wright -“Take care of the luxuries and the necessities will take care of themselves” – is the essence of the approach to HTML5. They’re taking all that worked in HTML and building HTML5 with all the “luxuries” in its foundation - leaving XHTML behind. Christopher reviews the agenda for this talk and gives a rundown of his experience: Co-author of Interact with Web Standards, The HTML Cookbook and The CSS Cookbook.
Building with HTML5
DOCTYPE for HTML5 <!DOCTYPE html> vs the more complex HTML4 and XHTML is an exceptional improvement. An exercise using the HTML5 Markup Validation Service at http://validator.w3.org/#validate_by_input to create a valid webpage. SYNTAX changes for HTML5 include no longer requiring quotes around attributes like XHTML: <img src=”file.png” />. HTML5 also brings back uppercase properties <IMG SRC=file.png />. It’s set-up to intuitively know what you’re trying to do, regardless of how you type it. PAGE STRUCTURE eliminates DIVs and uses simplified elements; this can sometimes lead to some confusion about the relationship with old DIVs. Molly Holzchiag, with Opera, offers one-to-one definitions. DIVs are thus eliminated unless there is not already an HTML5 hook defined. New, simplified elements don’t work in older browsers, which had to be accommodated by some javascript code. A good example is provided at: http://ejohn.org/blog/html5-shiv/ TIP: You still need to use display block for IE to ensure it displays correctly. Progressively Enhanced HTML5 (Infused with SHIM) using modernizr tool (http://modernizr.com/) to update older browsers and test feature efficacy.
HTML5 Audio & Video
The HTML5 AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS. Only certain browsers support certain audio file formats – therefore, add multiple source files to act as “back-ups” to accommodate any browser. Q&A: Will a browser be tripped up by multiple playable formats? Nope, it’ll pick the first one it can play. Is there a specific order for formats? Nope. The old way of requesting source code to include a video on your webpage is obsolete with HTML5 video sourcing directs you to the video. Required HTML5 VIDEO element attributes are WIDTH, HEIGHT, IMO, POSTER, VIDEO, AUTOPLAY, LOOP and CONTROL if you like to share! HTML5 supports CODECs: Ogg (Vorbis) without worrying about patents, H.264 and WebM (wrapper for VP8 and Ogg audio streams). As with audio, only certain browsers support certain video formats – using tools like http://firefogg.org/. Christopher heartily endorses using the open-source VLC video player http://www.videolan.org/vlc/ that can play/convert almost anything. HTML5 VIDEO resources: Mark Pilgrim’s tutorial http://diveintohtml5.info/video.html HTML5’s VIDEO element is part of the DOM and can therefore be manipulated to create custom video players without using Flash.
HTML5 Video Captions
Historically, Flash captioning has been ridiculously cumbersome, though its function is proven to help literacy, etc. http://www.idonline.org/article/35793 Quick & Dirty Captioning in HTML5 (1) get the jCaps plugin at http://github.com/johnmcc/jCaps (2) download the video transcription from YouTube just for the timecodes and save as an SRT file (3) open the file and edit text then add to the video with track sourcing. SIDE NOTE: Ensure accessibility by offering text and HTML versions to broaden readership.
HTML5 Geolocation
HTML5 GEOLOCATION element allows you to use plugins to enhance web user experience ie: pointing you to nearest location of a BBQ joint. Grab the jQuery plugin at http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin Use microformat for addresses called hCard via http://microformats.org/code/hcard/creator to convert to a useful format. Then simply load each microformat address. Result is a GoogleMaps-enhanced geolocation feature – http://2010.incontrolconference.com/eats/ Goodbye XHTML! Additional recommended resources: Universal Design for Web Applications by Matt May and Wendy Chisholm, Bulletproof Ajax by Jeremy Keith, Designing with Progressive Enhancement by Filament Group and Microformats Made Simple by Emily Lewis.
Part 2 - CSS3
CSS3 Color & Opacity
CSS is a consolidation of 50 modules being simultaneously developed and updated rather than one long doc http://www.w3.org/Style/CSS/current-work#CSS3 . CSS3 color and opacity uses background as primary and overlapping color with some level of opacity – widely supported, though not with IE6. Use the filter property to use opacity in IE6, changing the RGBA value to a hex value.
CSS3 Text: Selection & Columns
CSS3 uses ellipses to control text overflow – and is supported by all browsers, even IE6! Text-selection in CSS3 uses a PSEUDO-ELEMENT to let you set text color and background color of the selection. Text columns in CSS3 has you set column width and set padding, or “gutters” around text and is set up to automatically flow/wrap to next column. Brief Q&A where he hits the reasons for using -moz, -webkit, -O and -MS prefixes, showing how they ensure the version of the specs your page will access. In addition to CSS3 columns, jQuery offers columns support too
CSS3 Text: @font-face & Shadows
Use @font-face to set fonts – different font files are supported by different browsers pretty much breaking out by IE and then everyone else. An interesting blog to check out for font face implementation is: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ . Use http://fontsquirrel.com and Google Fonts for commercially-free fonts or www.typekit.com for licensed fonts. Since font files are notoriously large, gzip them or try the new file format, WOFF of already-compressed files complete with font metadata http://hacks.mozilla.org/2009/10/woff/ , which vendors love. Text-shadow and bevel text-shadow is really easy to use by just setting the “glow” pixels and color. You can set more than one value for text-shadow. Setting the text to white and applying a text shadow, called “Solar Text-Shadow” needs to have a back-up color set, just in case.
CSS3 Images
Like text-shadow, box-shadow works to set glow around a box – accomplished automatically vs the “old” days. Border-image has you set the border width and set the image of a border over the top of it for a design element. Use STRETCH value to set up element and to have it resize according to the size of the text within it. Other values you can use for border-image are REPEAT, ROUND, and SPACE. Border-radius is just what it sounds like – setting top, left, right, bottom for which Firefox and Webkit have their own prefixes.
CSS3 Effects
Image masks – only in webkit for now – shown in an example putting a gloss over a photo to create a headshot look. Gradients, already discussed in the color section, can use the Ultimate CSS Gradient Generator at http://colorzilla.com/gradient-editor/ Patterns can be generated at http://lea.verou.me/css3patterns/ Gradient-masks naturally follow as the combination of the gradient effect over an image. Transform, or rotate, elements using CSS3. NOTE: Versions of IE prior to IE9 will only transform in 90⁰ increments. Animating links is easier when you understand the cubic-bezier curve which “maps” the duration and delay of each part of the animation. The Ceaser CSS Easing Animation Tool helps you by letting you visually manipulate the cubic-bezier curve at http://matthew/ein.com/ceaser/
Advanced CSS3 Animations
Example of complex animating links shows that you can use many types of animation properties to enhance your page by hovering over elements. Animating elements requires you to set a roadmap for the element and then apply animation/transition timing and recurrence. Recommended resources are: “When Can I Use…” at http://caniuse.com/ - Modernizr at http://www.modernizr.com/ - The CSS Cookbook, 3rd Edition available at http://oreilly.com/catalog/9780596155940 - the CSS3 Sandbox at http://westciv.com/tools/gradients/ - and “10 Amazing Examples of Innovative CSS3 Animation” at http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation/
Part 3 - Building the American Flag in CSS3
How we solve problems
We solve design problems based on physical limitations, our experience, and our browsers. Browsers give you default values for styling – you can do a CSS Reset that first zeroes those out before applying CSS3 styles. Testing your limits gives you new experiences, which helps you push into new design areas.
Exercise: Build an American Flag
Breakout exercise: 15 minutes to build an American Flag with CSS and HTML - try this exercise on your own at this point and see how it goes! Class examples and approaches to building the American Flag with CSS and HTML5.
American Flag: Layout
Preparing to create the flag with semantic markup Volunteer-listed HTML elements Talking about the total number of HTML elements, 91, and how it relates to semantic markup Some common HTML errors Box model for laying out HTML elements, and the importance of CSS resets in browsers
American Flag: Resets
CSS resets are vital to ensure a page conforms regardless of browser. Beginnings of Christopher Schmitt’s American Flag built in HTML Clearing out content to remove excess clutter Normal flow is the default method Absolute positioning complicates any text resizing; relative positioning works within the browser to “trick” it. Attributes and Attribute Selectors ensure everything is in working order, then Christopher executes the stripes of the flag.
American Flag: Data Attributes and Stripes
HTML5 Data Attributes are a convenient way to add customization to elements and embed information. Subtle gradients and CSS3 Gradient picker tools from http://www.westciv.com/tools/gradients/ Placing the blue square on the flag by using layers and absolute positioning, then adding subtle gradients. Older, messier solution for placing the stars Spreading out governors’ names where stars will be Using http://www.fontsquirrel.com to find a font with stars in it. FontSquirrel allows you to generate the font for just a specific character (in this case, a star) so you don’t need to download the entire large file.
American Flag: Stars
Adding the stars, removing the names, adding subtle gradients Using jQuery to add interactivity: everything on the map is clickable Final Touches to Christopher’s flag: the star rotates when hovered, thanks to Transform, box shadow, making fireworks images with multiple background images for behind the flag.
American Flag: Wrap-up
Questions, answers and discussions on Christopher’s flag solution Recap of presentation: testing what we know, decrease our limitations, expand our skill set. Additional resources: http://caniuse.com to find out which browsers support which properties; http://instacss.com checks CSS specs; http://css-tricks.com features new mind-blowing CSS tricks almost daily
Comments and Q&A
Closing comments Final questions and group discussions