+100 recursos HTML5 y CSS3

Estas tecnologías están en boga, todos los diseñadores web estamos de enhorabuena desde que por fin somos nosotros los que movemos el mercado de los navegadores.

Los navegadores modernos saben que para competir deben ofrecer facilidades para renderizar bien y mejor las posibilidades de lo que se crea en la red.

Pasaron los tiempos de IE6, los quebraderos de cabeza con la compatibilidad de los distintos navegadores y llegó el tiempo en el que los quebraderos vienen con las versiones para dispositivos móviles. Seguimos aprendiendo…

Aprender HTML5 y CSS3

Para ayudar a adentrarnos en el diseño web actual os dejo +100 enlaces a utilidades para aprender HTML5 y CSS3 y como no de Javascript, asociada a la mayoría de proyectos webs.

Si queréis podéis empezar por esta presentación

Una colección de enlaces que he ido recogiendo estos últimos meses.

Lo he divido en las siguientes categorías:

• Libros, ebooks y presentaciones: para introducirnos con calma en HTML5 y CSS3, en inglés y en español
• Cheatsheets y webs de referencia: para consultas
• Generadores de códigos: para ahorrar tiempo
• Ejemplos y tutoriales: selección de webs y enlaces donde inspirarse y aprender
• Compatibilidad con navegadores (cross-browsers) y soluciones: saber si lo que queremos hacer es compatible con todos los navegadores y saber cómo solucionarlo.
• Cursos y Vídeotutoriales: algunos canales de YouTube y webs dedicados exclusivamente a HTML5 y CSS3
• Plantillas: plantillas listas para descargar, también para WordPress
• Frameworks y librerías.

Libros, ebooks y presentaciones

La red está repleta de información para aprender desde cero, os proponemos estos:

Libros, ebooks y presentaciones en inglés

1. Dive Into HTML5 http://diveintohtml5.info/ <- Altamente recomendado, es la biblia de HTML5
2. The Web Book http://www.the-web-book.com/browse/index.html
3. jQuery: Best Tutorials and Resources
4. HTML5 and JavaScript Projects eBook http://www.wowebook.pro/book/html5-and-javascript-projects/
5. HTML5 for Publishers – O’Reilly Media ebook gratuito http://shop.oreilly.com/product/0636920022473.do
6. Presentation: HTML5 101 http://icant.co.uk/talks/what-is-html5/#1
7. HTML5 Showcase for Web Developers: The Wow and the How http://www.htmlfivewow.com/slide1
8. Polyfilling The HTML5 Gaps With JavaScript http://addyosmani.com/polyfillthehtml5gaps/slides/#1
9. HTML5: The History and Terminology
10. Lee gratis el libro “HTML5 For Web Designers” | Blog Comunidad AdobeXpert http://blog.adobexpert.com/gratis-libro-html5-for-web-designers/

Libros, ebooks y presentaciones en español

1. 20 cosas que he aprendido sobre Internet y los navegadores http://www.20thingsilearned.com/es-ES/home
2. Manual HTML5 en español (PDF) http://theproc.es/files/5321
3. LibrosWeb.es – Libros gratuitos sobre HTML, CSS, JavaScript, AJAX y otras tecnologías web http://www.librosweb.es/ <- Muy recomendable, en español, aunque no han actualizado a HTML5 y CSS3 son buenos para iniciarte en CSS
4. Curso-HTML5-v1 http://es.scribd.com/doc/80268708/Curso-HTML5-v1 de Mejorando la web
5. Estilo & CSS3 https://www.slideshare.net/ccarruitero/estilo-css3
6. SEO + HTML5 http://jorgedelcasar.com/SEOwHTML5/

 

Cheatsheets y webs de referencia

1. Element Index | HTML5 Doctor http://html5doctor.com/element-index/
2. InstaCSS | Instant CSS Documentation Search http://instacss.com/
3. HTML5 Tag Reference http://www.w3schools.com/html/html5_intro.asp
4. CSS Reference http://www.w3schools.com/cssref/default.asp
5. HTML for Beginners: Getting Started With Web Design Made Easy
6. CSS3 properties explained | css3files.com http://www.css3files.com/
7. Periodic Table of the Elements – Josh Duck http://joshduck.com/periodic-table.html
8. Web Design and Applications – W3C http://www.w3.org/standards/webdesign/
9. HTML Standard http://www.whatwg.org/specs/web-apps/current-work/multipage/
10. Cheat Sheet CSS3 (PDF) http://downloads.gosquared.com/help_sheets/10/CSS3%20Help%20Sheet%20outlined.pdf
11. CSS Reference – MDN https://developer.mozilla.org/en/CSS/CSS_Reference
12. Cheat Sheet HTML5 (PDF) http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet1.pdf
13. HTML5 Cheat Sheets http://webdesignledger.com/resources/html5-cheat-sheets
14. HTML5 Reference Poster | XHTML-Lab http://www.xhtml-lab.com/html5poster
15. CSS3 Click Chart | CSS3 Browser Support and Information http://css3clickchart.com/
16. HTML5 Canvas Cheat Sheet – Nihilogic http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
17. HTML5 Diagrama de flujo http://html5doctor.com/downloads/h5d-sectioning-flowchart.png
18. 25 Useful Html5 Cheat Sheets and Tutorials For Web Developer http://smashinghub.com/25-useful-html5-cheat-sheets-and-tutorials-for-web-developer.htm
19. HTML5 Bookmarks – daily news articles and bookmarks
20. HTML Cheat Sheet (including new HTML5 tags) for Beginners
21. HTML 5 Cheat Sheet Infographic (PDF)

Compatibilidad con navegadores (cross-browsers) y soluciones

Todo HTML5 y CSS3 no es compatible con todos los navegadores. Podemos comprobarlo con:

1. When can I use… Support tables for HTML5, CSS3, etc  http://caniuse.com/ <- Tabla actualizada sobre compatibilidad HTML5 y CSS3 en navegadores y SO
2. Mobile HTML5 – compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices http://mobilehtml5.org/
3. CSS3 Selectors Test http://tools.css3.info/selectors-test/test.html Comprueba los selectores CSS3 compatibles con el navegador
4. HTML5 Please – Use the new and shiny responsibly http://html5please.us/
5. The CSS3 Test http://css3test.com/
6. Tablas de compatibilidad de selectores y propiedades CSS3 según navegador http://www.findmebyip.com/litmus/
7. Tabla de compatibilidad de navegadores para formularios HTML5  http://wufoo.com/html5/ 

Soluciones

1. Cómo hacer CSS3 compatible con Internet Explorer 6, 7 y 8 http://www.cristalab.com/tutoriales/como-hacer-css3-compatible-con-internet-explorer-6-7-y-8-c102333l/
2. Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8 http://selectivizr.com/
3. CSS3 PIE: CSS3 decorations for IE http://css3pie.com/ <- para q CSS3 sea compatible con IE6-9
4. Normalize.css: Make browsers render all elements more consistently. http://necolas.github.com/normalize.css/
5. Prefix free: Break free from CSS vendor prefix hell! http://leaverou.github.com/prefixfree/

Cursos y Vídeotutoriales

1. Aprende HTML5 – Curso Gratuito y Facilito | EfectoSocial http://www.efectosocial.net/2012/02/03/aprende-html5-curso-gratuito-y-facilito/
2. Mejorando la Web | un show en vivo de gente que crea Internet http://mejorando.la/ Estupendos webminar de Cristalab ( Cristalab: Curso de CSS3 y  HTML5)  y Maestros del Web
3. Aprende HTML, CSS y JavaScript jugando http://coderace.me
4. Learn Web Design, Web Development, and iOS Development – Treehouse http://teamtreehouse.com/
5. HTML5 and CSS3 – Adobe – The Expressive Web – Beta http://beta.theexpressiveweb.com/
6. Resumen del curso HTML5 http://msdn.microsoft.com/es-es/ie/hh749019 Del mismísimo Microsoft
7. Curso Publicaciones con HTML5 y CSS3 para tablets. Vídeos de muestra. añadir vídeo, efectos adicionales, cómo probar páginas en tablets
8. Curso HTML5 y CSS3. Vídeos de muestra: creación de círculos, formularios (Date) , transiciones de escala, transiciones de color.
9. Curso jQuery Mobile. Vídeos de muestra: introducción, navigation bar.

Plantillas

1. 40 Beautiful Free HTML5 & CSS3 Templates http://www.noupe.com/design/40-beautiful-free-html5-css3-templates.html
2. HTML5 – Dweamer – Dreamweaver Theme Builder | CodeCanyon http://codecanyon.net/item/dweamer-dreamweaver-theme-builder/122243 licenica: 8-40 dólares
3. MIX Online:Ai to Canvas Plug-In http://visitmix.com/labs/ai2canvas/documentation.html#code
4. 25 Fresh & Free HTML5 CSS3 Templates for Your Next Project http://skytechgeek.com/2012/01/25-fresh-free-html5-css3-templates-for-your-next-project/
5. 450+ CSS Layouts » HTML & CSS » Design Festival http://designfestival.com/450-css-layouts/
6. TEMPLATED – CSS, HTML5 and Responsive Site Templates

Themes para WordPress

1. HTML5 Reset :: A simple set of templates for any project http://html5reset.org/ <- Tb para sitios no generados con WP
2. PressWork http://presswork.me/ <- WordPress
3. Bones – A WordPress Development Theme Themble http://themble.com/bones/
4. Roots WordPress Theme | Rapidly create sites with HTML5 Boilerplate and Blueprint CSS or 960.gs http://www.rootstheme.com/
5. Underscores | A Starter Theme for WordPress

Frameworks, extensiones  y librerías

1. HTML5 Boilerplate – A rock-solid default template for HTML5 awesome. http://html5boilerplate.com/ <- Initializr – Start your HTML5 project in 15 seconds! http://www.initializr.com/ <- Con este generador creas un sitio en HTML5 basado en Bolierplate. -> http://foundation.zurb.com/ (responsive)
2. HTML5 Front End Development Framework | G5 Framework http://framework.gregbabula.info/
3. Jo HTML5 Mobile App Framework http://joapp.com/
4. Modernizr http://www.modernizr.com/ <- el más conocido y utilizado.
5. LimeJS HTML5 Game Framework http://www.limejs.com/
6. 52framework – The framework from the future, HTML5, CSS3, and more! http://52framework.com/
7. SwitchToHTML5 – The HTML5 Framework Generator http://switchtohtml5.com/ <- generador básico
8. perkins CSS3 LESS Framework http://p.erkins.com/
9. LESS « The Dynamic Stylesheet language http://lesscss.org/ –> Laker compendium – Designing digital publications in HTML5 http://www.lakercompendium.com/
10. jQuery Transit – CSS3 animations for jQuery http://ricostacruz.com/jquery.transit/
11. Diseña para móviles desde Fireworks con CSS3 Mobile pack
12. Detecta errores con holmes.css http://www.red-root.com/sandbox/holmes/
13. HTML KickStart  -> Set de recursos gratuitos HTML5, CSS3 y jQuery
14. Bootstrap, from Twitter
15. 19 frameworks y 15 Page Builders para WordPress | ceslava

Generadores de códigos

1. CSS3 Please! http://css3please.com/ Testear CSS3 sobre la marcha
2. AboutJs: ejemplo de usos de JavaScript que facilita además los códigos
3. CSS3 Generator http://css3generator.com/
4. CSS3.0 Maker http://www.css3maker.com/index.html
5. CSS3 Button Generator
6. Grid Designer 2 http://grid.mindplay.dk/
7. CSSPrefixer añade vendor-prefixes http://cssprefixer.appspot.com/
8. Wallaby | Adobe Flash FLA to HTML – Adobe Labs http://labs.adobe.com/technologies/wallaby/
9. Animate.css – a bunch of plug-and-play CSS animations http://daneden.me/animate/ <- ejemplos listos para usar de animación CSS
10. 15 grandes herramientas y generadores CSS3
11. Crea CSS al estilo Photoshop -> http://layerstyles.org/

Ejemplos y tutoriales

1. HTML5 Web Resources Sample Demos Tutorials Applications with HTML 5 http://www.hotscripts.com/category/scripts/html5/
2. Ejemplos: 70+ Inspirational Examples of Websites Designed With HTML5 http://www.instantshift.com/2011/07/05/70-inspirational-examples-of-websites-designed-with-html5/
3. Andrew Hoyer CSS3 animación de una persona caminando http://andrew-hoyer.com/blog/2010/10/21/walking/
4. 22 Useful HTML5 CSS3 Form Tutorials | SpyreStudios http://spyrestudios.com/22-useful-html5-css3-form-tutorials/
5. Using HTML5 Video and Audio in Modern Browsers http://www.sitepoint.com/using-html5-video-and-audio-in-modern-browsers/
6. How to draw the Twitter logo with 100% CSS. No javascript! No images! http://www.ecsspert.com/twitter.php
7. Using CSS3 Transitions, Transforms and Animation http://css3.bradshawenterprises.com/
8. 15 CSS3 Navigation Menu Tutorial and Techniques | Mystrious http://mystrious.com/15-css3-navigation-menu-tutorial-and-techniques/
9. Curing CSS3 Headaches in Older Browsers | Webdesigntuts+
10. 23 Must-Read Tutorials for Advanced HTML5/CSS3 Coders at DzineBlog.com – Design Blog & Inspiration http://dzineblog.com/2011/11/23-must-read-tutorials-for-advanced-html5css3-coders.html
11. Top 10 Practical Websites for HTML5 Design | Onextrapixel http://www.onextrapixel.com/2011/11/23/top-10-practical-websites-for-html5-design/
12. 12 Amazing CSS3 Tutorials to Try | UnderWorld Magazines http://www.underworldmagazines.com/12-amazing-css3-tutorials-to-try/
13. Start Using CSS3 Today: Techniques and Tutorials – Smashing Coding <- Recopilación y ejemplos, en Smashing Magazine, imprescindible.
14. 24 ways: Cleaner Code with CSS3 Selectors http://24ways.org/2009/cleaner-code-with-css3-selectors
15. CSS3 Secrets 10 things you might not know about CSS3 (explicado en español por Cristalab) <- Y el blog repleto de tutoriales de Lea Verou
16. Codrops <- Increíbles ejemplos, con demos y código muy explicado
17. Haz tus primeros pinitos con HTML5 · pcactual.com · Paso a paso Internet
18. Tips y recursos para empezar con HTML5 | Trazos Web
19. Geolocalización con HTML5 | Atrioweb blog http://blog.atrioweb.com/html5/geolocalizacion-con-html5
20. Usando CSS 3 hoy, por Germán Martínez
21. HTML5 Demos and Examples http://html5demos.com/
22. Referencias Importantes a HTML5 – una completa lista de enlaces en constante actualización de Foros del Web
23. http://dabblet.com/-> Un playground para jugar con HTML y CSS
24. CodePen – Front End Developer Playground & Code Editor in the Browser

Espero que os sean de utilidad, iré actualizando este entrada que empezó con 99 recursos.

Si conocéis más por favor dejadlos en los comentarios.