HTML 5: un esquema de enlaces

16-09-2010 Luis Artola
Clasificado como: DESARROLLO DE SOFTWARE , html5, web sockets, web storage

Es probable que pronto David, Guille y yo comencemos un pequeño proyectillo en HTML5. Para ir calentando motores, he decidido publicar esquemáticamente los enlaces que he ido acumulando en mi Google Reader. El esquema se basa en la presentación de Html5Rocks.

Mi idea es ir trabajando este esquema e ir ampliándolo poco a poco. Me gustaría ir incluyendo sugerencias que me hagáis en los comentarios…

• selectors
  • sin artículos.
• Client side storage
• Web storage:
  • html5 local databases: introducción: http://blog.darkcrimson.com/2010/05/local-databases/
  • Web SQL Database: http://www.danilat.com/weblog/2010/05/18/sql-con-javascript-web-sql-database/
  • Adios, Gears: http://www.theserverside.com/news/thread.tss?thread_id=58830
• Application cache:
  • http://sentidoweb.com/2010/08/17/crear-aplicaciones-offline-con-html5.php
  • http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-offline-access-with-html5-application-cache/
• Communication
• Web Sockets:
  • http://blog.higher-order.net/2010/06/01/stomple-rc1-combining-websockets-and-reliable-messaging/
  • http://socket.io/
  • http://sentidoweb.com/2010/03/16/websockets-en-html5-2.php
  • http://bohuco.net/blog/2010/07/html5-websockets-example/
  • web sockets y proxy servers: http://www.infoq.com/articles/Web-Sockets-Proxy-Servers
  • web sockets versus commet: http://www.infoq.com/news/2010/03/websockets-bayeux
  • http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/
  • http://justinireland.com/real-time-embedded-user-interfaces-using-html-css-js-and-websockets/
  • http://pusherapp.com/
• Web Workers:
  • introducción: http://mattsnider.com/javascript/introducing-web-workers/
• Desktop experiencie
• Notifications:
  • sin artículos.
• Drag and drop:
  • http://www.anieto2k.com/2009/07/16/drag-drop-en-html5-sobre-firefox-3-5/
  • http://web.ontuts.com/tutoriales/drag-drop-en-html-5/
• Geolocation
  • http://mobile.tutsplus.com/tutorials/html5/html5-geolocation/
  • html –> semantic tags,  link relations and microdata, aria attributes,
  • http://ayudawordpress.com/html5-todas-las-nuevas-etiquetas/
  • new form field types (color, number, email, tel, range, search, placeholder, etc…)
  • http://net.tutsplus.com/tutorials/html-css-techniques/rethinking-forms-in-html5/
  • http://css-tricks.com/webkit-html5-search-inputs/
• Html audio and html video
• http://wpmu.org/10-beautiful-html5-video-audio-players-for-wordpress/
• Video and audio resources :http://woorkup.com/2010/06/05/fresh-resources-for-html5-video-and-audio/
• Media players:
  • http://protofunc.com/jme/index.html
  • http://www.mediafront.org/project/osmplayer
  • http://www.maestrosdelweb.com/editorial/handroll-convierte-videos-html5/
  • http://net.tutsplus.com/tutorials/html-css-techniques/build-a-custom-html5-video-player-free-premium-tutorial/
• La guerra por el video:
  • Microsoft a favor de html 5 y h.264: http://www.infoq.com/news/2010/04/Microsoft-HTML-5-H.264
  • Facebook: http://bitelia.com/2010/04/facebook-se-pasa-a-html5
  • Tools for integrating html 5 video in your website: http://mashable.com/2010/05/18/html5-video-tools/
  • google webM: open video format for the web: http://www.webmproject.org/
  • youporn se va a html 5: http://alt1040.com/2010/05/youporn-se-cambia-al-html5
  • apple en contra de webM: http://www.applesfera.com/apple/steve-jobs-se-posiciona-en-contra-del-formato-de-video-webm
  • El formato Google VP8 se hace opensource http://northtech.us/content/20100519/its-official-googles-vp8-goes-open-source
  • quién es quién en la guerra del video: http://www.genbeta.com/multimedia/la-guerra-del-video-en-html5-quien-es-quien
  • diez cosas que hace flash y no html 5: http://www.wirelust.com/2010/05/21/10-things-flash-can-do-today-that-html5-cant/
  • youtube flash vs html5: http://www.cookingideas.es/flash-versus-html5-segun-youtube-20100630.html
  • http://www.reelseo.com/youtubes-6-reasons-html5-replace-flash/
  • h.264 para streaming gratuito de por vida: http://alt1040.com/2010/08/golpe-de-mpeg-la-en-la-lucha-de-los-codecs-h264-para-streaming-gratuito-de-por-vida
  • apple potencia el h.264 publicando documentación para mejorar la decodificación por hardware
  • http://www.applesfera.com/apple/apple-abre-las-puertas-a-la-decodificacion-de-video-h264-en-las-tarjetas-nvidia
• Html canvas and html canvas 3d (WebGL):
  • http://www.rgraph.net/
  • http://www.catswhocode.com/blog/how-to-easily-create-charts-using-jquery-and-html5
  • http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/
• Juegos en Html5:
  • http://www.kesiev.com/akihabara/
  • http://www.benjoffe.com/code/games/torus/
  • los mejores juegos: http://savedelete.com/best-html5-canvas-games.html
  • game development in html5: http://www.slideshare.net/gawd/game-development-with-html5
  • Quake 2 en html 5: http://unpocodejava.wordpress.com/2010/08/17/quake-ii-ejecutandose-en-el-navegador-con-gwt-y-html-5/
• svg
  • sin artículos.
• new css selectors
  • flexible box model: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
  • botones en css3: http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/
• new font support
  • Google Font Directory: http://www.anieto2k.com/2010/05/20/google-font-directory-webfonts-disponibles-para-todos/
• text wrapping
• columns
• opacity
• hue/saturation/luminance color model
• rounded cortners, gradients, shadows
• Instant Web 2.0
• background enhancements, transitions, transforms (rotateY, scaleX, etc.. ),
• animations
• html storage:
  • http://sentidoweb.com/2010/08/16/tutorial-basico-de-html-storage.php

Artículos generales

• http://slides.html5rocks.com/  (http://www.html5rocks.com/)
• http://diveintohtml5.org/
• http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/
• http://html5demos.com/
• http://www.slideshare.net/kevinvandijk/html-5-css-3-4236708
• css 3: http://css3.bradshawenterprises.com/
• best html5 tutorials: http://www.1stwebdesigner.com/resources/the-ultimate-roundup-of-indispensable-and-helpful-html5-tutorials/
• wtf is html5 poster: http://www.focus.com/images/view/11905/
• Apple sobre html5: http://www.apple.com/html5/
• Basics: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
• html 5 for a better web: http://www.phpclasses.org/blog/post/98-HTML-5-for-a-better-Web.html
• http://net.tutsplus.com/tutorials/html-css-techniques/html5-apps-what-why-and-how/
• http://diveintohtml5.org/peeks-pokes-and-pointers.html
• http://www.kabytes.com/desarrollo/cheat-sheet-de-html-5/

Móviles

• http://www.theserverside.com/discussions/thread.tss?thread_id=60548
• http://mir.aculo.us/2010/07/26/learn-how-to-build-awesome-mobile-html5-apps/
• http://sixrevisions.com/web-development/html5-iphone-app/

Para empezar:

• http://www.anieto2k.com/2009/07/06/chuleta-html5/
• http://www.programacion.com/noticia/html5_boilerplate_1874

Frameworks

• Simpli5: http://jacwright.com/blog/428/simpli5-an-html5-javascript-framework/
• Jo: http://grrok.com/jo/
• Sencha Touch: http://dev.sencha.com/deploy/touch/getting-started.html
• Modernizr: http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
• 52 framework: http://www.guiabreve.com/52framework-framework-html5css3.htm
• Frame: http://frame.serverboy.net/
• Aloha WYSIWYG: http://aloha-editor.com/

Miscelaneo:

• Utilidades:Cómo soporta tu navegador html 5: http://html5test.com/
• Curiosidades:http://hakim.se/experiments/
• html 5 + css3 + jquery para hacer un menú drop-down: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/
• html 5 global attributes: http://net.tutsplus.com/tutorials/html-css-techniques/html5-globals-and-you/
• Consejos para desarrollar html5 para ipad: http://www.sitepoint.com/blogs/2010/06/23/develop-for-ipad-with-html5-trial-and-error/
• WordPress y html 5: http://ayudawordpress.com/plugins-wordpress-html5/
• security: html 5 securitiy cheatsheet: http://heideri.ch/jso/
• css 3D wordpress theme: http://legendthemes.com/2010/05/14/3d-css-wordpress-theme/

Amigüitos que también hablan del tema:

• Un compendio de enlaces como el mío hecho por La personalite: http://lapersonnalite.com/como-empezar-con-esto-del-html5/
• Acortador de url´s de guille hecho en html5! http://rcrt.es/
• Epplestun: http://epplestun.blogspot.com/2010/06/charlas-sobre-html5-y-javascript.html

Apuntes relacionados:

3 Respuestas a “HTML 5: un esquema de enlaces”

1. Guille dice:

   septiembre 16, 2010 a las 9:00 am

   Juegos: http://softlibre.barrapunto.com/article.pl?sid=10/09/14/0634211&from=rss&utm_source=twitterfeed&utm_medium=twitter
2. tie shop online dice:

   junio 2, 2011 a las 8:29 pm

   In design, we tend to think of simplicity in terms of recent trends towards minimalism. A simple design by this definition is one with lots of literal whitespace and very little on the page outside of what is absolutely necessary.
3. HTML5 video dice:

   octubre 9, 2012 a las 9:17 am

   no se olvide “socusoft HTML5 video player”, todo-en-uno la herramienta