Tag Archives: web standards

Note-Taking Skills

Posted on by
Reply

A couple of months ago I was at a conference in Atlanta when I had an epiphany. I decided it would fun to take notes at the conference in HTML. After all, the content of the conference was web development and best practices. So I figured instead of writing about what the code should be, why not just write the code?

As it turns out, I had more fun, a longer attention span, increased retention, and far more enthusiasm about reviewing what I had learned. You wouldn’t understand the notes even if I showed them to you, but I wanted to post screenshots here because I think my notes are… well, beautiful. And beautifully coded!

What’s Hot [and Not] in HTML5 & CSS3

Posted on by
Reply

Courtesy of Chris Mills from Opera Software. @chrisdavidmills

  • HTML5 isn’t designed to replace HTML4
  • Adopts to the interactive nature of today’s web experience.
  • More accurate semantics (header, footer, etc.).
  • Features: Drag & Drop, Web workers, Web storage (cookies on crack), app cache, webdb, and more!
  • Syntax rules abstract more away from the developer.
  • Machine & people readable. e.g. <time datetime=”2010-06-04″>My birthday</time>
  • New form elements. e.g. input type=”range” “date” “url” “email” “slider”.
  • Built-in validation of forms! <input type=email required autofocus>
  • One problem: can’t customize validation error messages
  • <canvas id=”” width=”” height=””>Hi world</canvas> – Scriptable graphics API for drawing.
  • <video src=”” autoplay loop controls width=”” height=”” poster=”” preload=””>Alternate content if video isn’t supported by browser</video>
  •  <source src=”” type=”video/mp4″ “video/ogg”>Not much to see</video>
  • VIDEO is just another block-level element, customize it as you like. CSS, JS, etc.
  • Video Caption: <video></video><div class=”transcript”><p><span data-start=”1.3″ data-end=”2.5″>Closed captioning</span></p></div>
  • Internet Explorer is the ONLY browser not supporting HTML5 and CSS3
  • Fake-able in IE using JS: Dean Edwards’ HTML5 Library, Excanvas, SVG Web, Raphael JS for SVG
  • text-shadow: 1px 1px 1px 1px #fff;
    2px 2px 2px 2px #ccc
  • box-shadow, opacity, rgba(255,0,0,0.75), hsl(0,100%,60%), border-radius, transition-timing-function, transition-delay, transition-property, transition-duration, transform-origin, transform: scale(2)
  • CSS3 supports multiple background images!
  • Web Fonts – Download custom fonts along with web pages! FINALLY!
  • @font-face { font-family: “Blue Highway”; src: url(“http://www.com/fonts/blue.ttf”) format(“truetype”); } /* Reference at top of CSS */
  • Media Queries – Display styles depending on user attributes – e.g. screen size, etc. – @media all and (max-width:400px) {} – change layout accordingly
  • Attribute selectors – ^href= href$= title*= “chris”]:before { content: url(heart.jpg); – inaccessible if inserting text.
  • :nth-child(even) { }
  • There’s more! Multiple bg images, multiple col layout, CSS animations, 3D transforms, etc.
  • Opera web standards curriculum: www.opera.com/wsc

Opera developer site: dev.opera.com

www.html5doctor.com

All of the above information is provided by Opera Software under Creative Commons licensing. In other words, take it, use it, share it, spread it!

“Interact with Web Standards” .com