Dit is een HTML5 presentatie
Gebruik → voor een volgende slide.
Zoom in/uit: Ctrl of Command + +/-
De frontend ninja’s van de VPRO:
<html>
<p>
<b>
<i>
<b>
<i>
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="http://www.w3.org/MarkUp/style/xhtml2.css"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> <html xmlns="http://www.w3.org/2002/06/xhtml2/" xml:lang="en" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2/ http://www.w3.org/MarkUp/SCHEMA/xhtml2.xsd" > <head> <title>Virtual Library</title> </head> <body> <p>Hallo wereld!</p> </body> </html>
<!doctype html> <html> <head> <link rel="stylesheet" href="style.css" /> <title>Title</title> </head> <body> <p>Hallo wereld</p> </body> </html>
<canvas>
<svg>
<audio>
<video>
<input>
types<section>
, <header>
, <footer>
, etc.<canvas>
<svg>
1/2svg
2/2<audio>
<audio src="http://files.vpro.nl/media/python.oga" controls></audio>
<video>
1/3<video src="http://files.vpro.nl/media/trololo.mp4" controls></video>
<video>
2/3<input> types
![]() |
toekomst van HTML: HTML5 (WHATWG) of XHTML2 (W3C ) ?
HTML5 wint oa vanwege de HTML5 Design Principles
You'll probably find the design principle, or multiple design principles, behind all good examples of anything that's been built collaboratively.
En juist deze principes kunnen er voor zorgen dat beide werkgroepen samen kunnen werken aan de toekomst van HTML
Be conservative in what you send, be liberal in what you accept
vb XHTML2: omdat het geserveerd moet worden als XML breekt de browser het renderen af al bij 1 error.
Perfecte JavaScript 101. De basis ‘and then some more’. Zien dus!
Dave Weinberger: Small pieces loosely joined
SVG is een onderdeel van je ‘toolbelt’, gecombineerd met CSS, HTML5 en JavaScript in staat tot veel. Zijn presentatie slides zijn hier een voorbeeld van.
Wanneer wel
Wanneer niet
Hoe?
Nog meer interessante links
1994 "World Wide Web: You click, we do the rest!" "Border-radius, isn't that something from the 70's? nobody is gonna use that!?" "The web didn't become popular because of the marketing" "The Human mind is more wired for beauty, scientists are wired for structure."
Highspeed praatje over website performance.
Een hoop praktische tips om vertragingen tegen te gaan:
Handige links:
"Be regular and orderly in your life so that you may be violent and original in your work" - Gustave Flaubert "A good workflow = more time to be creative" - Jina
Haar workflow:
Handige links:
5 elements to writing good reusable code:
Steps for writing reusable component code:
"Be consistent!"
Ethan Marcotte’s artikel op A List Apart barst een discussie los over Responsive Webdesign. Het betreft het gebruik van CSS media queries om de layout van een site aan te passen aan z’n omgeving, bijvoorbeeld met het oog op mobiele devices.
Discussie: Media Queries: Silver Bullets or Fools Gold?
"Design is the method of putting form and content together" - Paul Rand
Een goede presentatie over “thinking about the user” als het aankomt op mobiele devices en responsive (web)design:
Nu
Toekomst
Hay zal een goed verhaal houden over HTML5.
Kijk verder de video of bekijk zijn (net als Brad Neuburg) geheel in HTML5 geschreven en continu geupdate presentatie slides als uithangbord van de mogelijkheden die HTML5 biedt.
Ook handig: Modernizr, zijn HTML5 browser-capabillity detectie script.
Mooie CSS3 showcase van Meagan.
Een CSS3 property om naar uit te kijken is het specificeren van kleur in RGBA, A van alpha! Geen halftransparante achtergrondplaatjes meer nodig!
Handige links / resources
JavaScript performance directly affects user experience
De browser heeft een UI-thread die zowel JavaScript execution als UI updates regelt, maar niet tegelijkertijd. Beiden komen terecht in 1 UI queue.
0.1 second is about the limit for having the user feel that the system is reacting instantaneously
: Nielsen
Aanbeveling: beperk JavaScript execution tot < 50ms.
During page-load, the page doesn't render while JavaScript is downloaded, parsed and executed
page-load oplossingen
runtime oplossingen
In short: NO
"Accessibility is always bolted on instead of built-in. The earlier it is bolted on, the more robust it is."
De WAI-ARIA (Accessible Rich Internet Applications) specificatie moet ook door HTML5 worden ondersteund om het bolten-on te vergemakkelijken.
html5accessibility.com laat zien hoe ver de browsers zijn.
Hans Hillen toont nog een mooie screenreader demo (29e minuut in de video) welke ook aangeeft dat niet alleen de browsers voor accessibillity problemen zorgen.
Hans stipt daarnaast nog een goede Web Accessibillity resource aan, WebAIM
Wanneer gebruik je animaties?
2 animatie modellen
In de browser:
Leuke links
Wanneer welke animatie techniek?
"We focus too much on the bad things, that no ones shares with us instead other developers. But if we really look at it, a lot of our grief is home-made"
"The techonologies to build stuff with are pretty easy to learn and massively documented. Back when I started this was different. The main source of knowledge was view-source. This is not needed any more!"
"Our job is awesome. Like Chewbacca on a giant squirrel fighting nazi's with a crossbow"
Reasons to be cheerful – Fronteers 2010 |