Este es in índice de tutoriales, páginas con ejemplos, frameworks y cualquier tipo de ayuda para empezar en HTML5. Este índice se centra en HTML5 pero no deja de lado tecnologías como CSS o JavaScript, la relación es muy estrecha para el desarrollo de contenidos en HTML5.
Con esto, voy a iniciar una aproximación personal a fondo en el diseño para dispositivos móviles, bajo el lema Mobile First, y luego adaptar esos diseños a tablets y pantallas de escritorio, o mantener varios diseños para el mismo contenido, ya veremos. Mi día a día para aprender y praticar la llevo en una lista de tareas con la filosofía GTD en OmniFocus, mis apuntes ‘en sucio’ los llevo en Evernote, donde guardo capturas, ideas, bocetos, códigos para reutilizar… En este sitio web plasmaré todo lo que aprenda.
Estáis tod@s invitados al viaje iniciático.
Tutoriales
- HTML5 Introduction – What is HTML5 Capable of, Features, and Resources
- Basic HTML5 Page Template
- Estructura de tags en HTML5
- HTML5 Embedded Media
- HTML5 Canvas: How And What animaciones, efectos, gráficos…
- Código HTML5 para sitios responisve’s para ver el código
Imágenes
- Imágenes para una web Responsive, para galería de fotos
- Fluid Images, adaptar contenido al ancho de contenido
- Imágenes con más resolución – Retina.js
- Slider de Imagen a ancho completo
- Imágenes Responsive con IIPImage
- A Pure CSS3 Cycling Slideshow
Mobile
- HTML5 Mobile First tutorial paso a paso
- Adaptar web al iPhone paso a paso
- Looking Beyond Common Media Query Breakpoints
- Primeros pasos con Modernizr. Instalación
- HTML5 y CSS3 con Modernizr
Webs completas – Responsive
- Web de ejemplo Responsive, paso a paso
- Responsive jQuery Masonry, crear el HTML, CSS y usar JavaScript
- Sistema de comentarios en tiempo real
Herramientas
- FitText.js Hacer el tamaño de fuente flexible
- This Is Responsive. – CSS-Tricks – Web de ejemplos
- 40+Useful Responsive Web Design Tools and Techniques
- CSS Hórus – A CSS framework for responsive and mobile websites
- Demos HTML + CSS + JS con ejemplos claros