HTML5 Hacking - Yahoo! Open Hack Day
•Descargar como KEY, PDF•
3 recomendaciones•806 vistas
This presentation was created for future hackers at Yahoo! Open Hack events. It shows what HTML5 features are great for a 24 hour hack, useful tools, and suggestions.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a HTML5 Hacking - Yahoo! Open Hack Day
Similar a HTML5 Hacking - Yahoo! Open Hack Day (20)
Más de Ted Drake
Más de Ted Drake (20)
Último
Último (20)
HTML5 Hacking - Yahoo! Open Hack Day
- 3. HTML5 Tags
- 4. Hackable Tags • <section>Div with a header</section> • <article>Self contained content</article> • <nav>Main or secondary navigation</nav> • <aside>Secondary info</aside> • <mark>contextual</mark>
- 5. Meter It <meter value="1">Full activity,</meter> <meter value="0.75">High activity,</meter> <meter value="0.5">Moderate activity,</meter> <meter value="0.25">Low activity,</meter> <meter value="0">No activity,</meter> document.meter.setAttribute ('value', '.6'); Y.one('meter').setAttribute ('value', '.6');
- 6. HTML5 Attributes The new hotness “Fire” Some rights reserved by matthewvenn
- 7. data-* • Custom attribute to store data • element.dataset.[attr]
- 8. <div id="test" data-name="rem" data- height="short"> This element has data </div> el.dataset.name = "rem" el.dataset.height = "short"
- 9. contenteditable • Allow users to edit the page. • Store the changes with local storage <p contenteditable=”true”>foo</p>
- 10. Forms
- 11. New Features • Newdate, color, url, email, tel, number, range type: input types and attributes: attribute: autofocus, required, pattern • New CSS pseudo-classes: input:required, input:valid, input:focus:invalid • Browser validation: pattern="https?://(?:www.)?twitter.com/.+"
- 13. rounded corners + gradients
- 14. Cool Fonts
- 15. CSS2 <div class=”outer> <div class=”inner”> <a href=”#”>foo</a> </div> </div>
- 16. CSS3 <a href=”#”>foo</a> a:before, a:after { content=””; background:#fff; width: 10px; height:10px; position:absolute; display:block; }
- 17. Trigger Hardware Acceleration .foo { translate3d(0, 0, 0); }
- 18. 3D transformations .container { transform-style: preserve-3d; perspective: 800; } .one { transform: rotateY(0) translateZ(110px); } .two { transform: rotateY(90deg) translateZ(110px); } .three { transform: rotateY(180deg) translateZ(110px); } .four { transform: rotateY(270deg) translateZ(110px); }
- 20. CSS3 + JS = no Flash • JS triggers class changes at particular moments • CSS classes handle specific transformations • The Wheels of Steel
- 21. Video
- 23. Audio
- 24. Canvas & SVG “Canvas” Some rights reserved by Molly Des Jardin
- 26. SVG
- 27. HTML5 JavaScript The newesthotnesshotness TheThe new JS super new hotness “Fire” Some rights reserved by matthewvenn
- 28. What’s new? •Web Workers: Multi-threading •Web Sockets: Push notification •Offline Storage: Airplane Mode, Caching •Local Storage: Super Cookies •Device Integration: geolocation •Hashchange Event: url# change triggers JS •FileReader API: read contents of file •File API: better access to files
- 29. Web Workers Prefetching and/or caching data for later use • Code syntax highlighting or real-time text formatting • Spell checker • Analyzing video or audio data • Background I/O or polling of webservices • Processing large arrays or JSON responses • Image filtering in <canvas> • Updating many rows of a local web database
- 30. COMET is so 2006 a low-complexity, low-latency, bi- directional communication system that has a pretty simple API for web developers.
- 31. Offline Storage H • Airplane mode is the future • <html manifest="/cache.manifest"> • .htaccess: AddType text/cache-manifest .manifest CACHE MANIFEST /clock.css /clock.js /clock-face.jpg
- 32. Local Storage • Cookies on steroids • Key/Value pairs • Save the user’s status (games) var foo = localStorage["bar"]; localStorage["bar"] = foo;
- 33. Geolocation • User has to give permission • Easier user interaction • Geo is huge, how can you customize the users experience.
- 34. Hashchange URL • Changing the hash value in url trigger JS • test.html#foo vs test.html#bar •
- 35. File API • Chrome supports extended file integration • Drag file onto web page from desktop • Fast upload without flash • Not supported by other browsers
- 36. ARIA • Make your application accessible • Attributes define how a user should expect a widget to behave • Define role, states, and values • role=”toolbar”, aria-isinvalid=”true”, aria- value-max=”10”
- 37. Resources • HTML5 Doctor • HTML5 Wow • Can I Use? • YUI Library • Mozilla Developer Network • HTML5: The Next Web
Notas del editor
- This presentation is geared towards hackers preparing for a hack day event. \nI&#x2019;ve glossed over some important HTML5 features that may not be as useful in a 24 hour hack period.\nI&#x2019;m also not worried about Internet Explorer in this presentation as hackers will typically build for webkit or firefox during this sprint.\n
- With only 24 hours, you need to refine your scope.\nchoose what devices/browsers to support. (Safari/Chrome are good choices)\nDon&#x2019;t use elements that are not supported or add to the hack (new HTML5 tags, some input types)\nUse elements that will save time and make your hack more impressive (local storage, CSS3, web workers)\n
- Add display:block to new CSS files to render consistently\nIE doesn&#x2019;t recognize these without javascript, but you&#x2019;re not going to design a hack for IE6.\nNew tags provide semantic value, reduces need for divitis and classitis.\nhttp://caniuse.com/#cats=HTML5\n
- add display:block to all but mark. Using these can make your CSS cleaner.\n
- Generate a progress bar via the browser.\nsupported by Chrome and Opera.\nthe text will display in non-supported browsers.\n
- While the new tags are great, they&#x2019;re not going to help your hack much. \nThese new attributes are going to make your code and hack much more interesting\n\n
- \n
- supported in current versions of firefox, opera, safari, and chrome.\nnot supported in mobile except opera mobile\nyou can use getAttribute in IE, and mobile\n
- support is spotty, who knows what IE will do.\nGreat example of combining with localstorage\nhttp://html5demos.com/contenteditable\n
- HTML5 has introduced new form inputs that will significantly reduce the complexity of programming. \nStart using these today for better user interaction\nThey are backwards compatible\n
- http://yaccessibilityblog.com/examples/forms/html5-form.html\nsome input types generate complex interactions, best supported in opera and webkit\nmobile phones change their keyboard layouts based on input type.\n
- CSS3 provides significant improvement in performance\nCSS3 replaces images for reduced http requests\nCSS3 gradients, rounded corners, pseudo elements, fonts, shadows, animation, selectors\n
- While the code isn&#x2019;t difficult, the variations between browsers make it cumbersome to do yourself. Use online tools during hack day\nrounded corner generator: http://cssround.com/\ngradient generator: http://www.colorzilla.com/gradient-editor/ \n
- Define your custom font face, pointing to the font files on your server.\nNow use them in your style sheets.\nLook for fonts that are free and allow embedding.\nhttp://www.google.com/webfonts easiest way to use custom fonts\n
- Extra wrappers allow hooks for styles\n
- We&#x2019;ve use content=&#x201D;.&#x201D; in the past for self-clearing floats. \npseudo-elements can be given dimensions, backgrounds, borders, etc.\ngood tutorial http://css-tricks.com/14001-tabs-with-round-out-borders/\nstyles above are just an example of how this content can be modified. \n
- trigger the gpu as well as cpu.\npros: much faster for animations\ncons: increased memory usage\ncss animation triggers it, not js animation.\n
- http://www.htmlfivewow.com/slide45\nsupported in web kit and ios safari\n
- http://www.htmlfivewow.com/slide43\n
- \n
- New video tag allows native display of videos without flash\ndifferent browsers support different file types, so there is some duplicated effort.\nthe next slide shows the events that can be monitored \n
- you can use javascript to change the page based on these events. \nAdd captioning, change secondary module, surface context specific ads based on caption track...\nThink of it as an API to explore\nhttp://butterapp.org/\n
- Audio playback as native function. Just like video, there are different formats for different browsers.\nHTML5 functionality for generating and analyzing audio is poorly supported\nhttps://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html\njquery annotation http://paulirish.com/demo/annotate \n
- Canvas is an empty container waiting to be manipulated by JavaScript\nDon&#x2019;t use canvas for text. It&#x2019;s not accessible at this point.\nCanvas is great for infographics, animation, visual elements, games \n
- http://hakim.se/experiments/html5/wave/03/\nhttp://www.sinuousgame.com/\nhttp://www.html5rocks.com/en/tutorials/canvas/performance \n\n
- Scalable Vector Graphics have been around for a while\nFlash is a form of SVG\nData is in the page&#x2019;s DOM and there is better accessibility than canvas\ngood for data intensive animation\nhttp://svg-wow.org/photoAlbum/album.svg\n
- HTML5 takes the best of the AJAX hotness and standardizes it.\nIncreased communication between browser and device\nApplication behavior standardized\n
- File Reader is not supported in Safari\nChrome allows js to get info from device&#x2019;s movement sensors\nChrome is the only browser to fully support file apis\nlook at file options if your hack uses android/chrome: http://www.htmlfivewow.com/slide10\n
- http://hacks.mozilla.org/2009/07/working-smarter-not-harder/\nhttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-usecases \n
- http://www.xtranormal.com/watch/7991991/web-sockets-we-are-the-first\nbest support with Safari and Chrome. Firefox also supports it, but may require user permission\n\n\n
- Hacker super feature!\nThis works great with the YUI MVC platform http://new.yuilibrary.com/yui/docs/app/app-todo.html\nCache needs to know what pages to save, single page sites are easier to support\nThis also helps site performance while still online\nhttp://hacks.mozilla.org/2010/01/offline-web-applications/\n
- http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html\n
- Geo specific customized content is a no-brainer.\nGo beyond the map\nLocal specific headlines, offers, dating, what else?\nGeolocation is the first device integration. Future: device movement, camera, battery?\n
- https://developer.mozilla.org/en/DOM/window.onhashchange\nhttp://yuilibrary.com/yui/docs/app/app-todo.html\n
- http://www.htmlfivewow.com/slide10\n
- ARIA articles by the access lab: http://yaccessibilityblog.com/library/tag/aria\nhttp://www.w3.org/WAI/intro/aria\n\n\n
- \n