Aprende HTML5 y CSS3 en Tecnologías México.

Aprender HTML5 y CSS3.

En este Post te enseñamos a adentrarte al maravilloso mundo de la Tecnología Web actual,  contando con 99 enlaces a utilidades para aprender HTML5 y CSS3 y como no de Javascript, asociada a la mayoría de proyectos webs. (Si necesitas algo más, escribe un comentario).

Son una colección de enlaces que hemos ido recogiendo estos últimos meses y que hemos compartido con muchos usuarios entre ellos destacados Profesores Investigadores Universitarios, alumnos y claro que para todas las personas que quieren conocer un poco más sobre esto.

Hemos dividido 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, y te proponemos lo siguiente:

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 Fundamentals http://jqfundamentals.com/
  4. HTML5 and JavaScript Projects eBookhttp://www.wowebook.pro/book/html5-and-javascript-projects/
  5. HTML5 for Publishers – O’Reilly Media ebook gratuitohttp://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 Howhttp://www.htmlfivewow.com/slide1
  8. Polyfilling The HTML5 Gaps With JavaScripthttp://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 navegadoreshttp://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 http://www.slideshare.net/ccarruitero/estilo-css3
  6. SEO + HTML5 http://jorgedelcasar.com/SEOwHTML5/

Cheatsheets y webs de referencia

  1. Element Index | HTML5 Doctorhttp://html5doctor.com/element-index/
  2. InstaCSS | Instant CSS Documentation Searchhttp://instacss.com/
  3. HTML5 Tag Reference http://with.link/guidetohtml5
  4. CSS Reference http://www.w3schools.com/cssref/default.asp
  5. CSS3 properties explained | css3files.comhttp://www.css3files.com/
  6. Periodic Table of the Elements – Josh Duckhttp://joshduck.com/periodic-table.html
  7. Web Design and Applications – W3Chttp://www.w3.org/standards/webdesign/
  8. HTML Standard http://www.whatwg.org/specs/web-apps/current-work/multipage/
  9. Cheat Sheet CSS3 (PDF)http://downloads.gosquared.com/help_sheets/10/CSS3%20Help%20Sheet%20outlined.pdf
  10. CSS Reference – MDNhttps://developer.mozilla.org/en/CSS/CSS_Reference
  11. Cheat Sheet HTML5 (PDF) http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet1.pdf
  12. HTML5 Cheat Sheetshttp://webdesignledger.com/resources/html5-cheat-sheets
  13. HTML5 Reference Poster | XHTML-Lab http://www.xhtml-lab.com/html5poster
  14. CSS3 Click Chart | CSS3 Browser Support and Informationhttp://css3clickchart.com/
  15. HTML5 Canvas Cheat Sheet – Nihilogichttp://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
  16. HTML5 Diagrama de flujohttp://html5doctor.com/downloads/h5d-sectioning-flowchart.png
  17. 25 Useful Html5 Cheat Sheets and Tutorials For Web Developerhttp://smashinghub.com/25-useful-html5-cheat-sheets-and-tutorials-for-web-developer.htm
  18. HTML5 Bookmarks – daily news articles and bookmarks

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 deviceshttp://mobilehtml5.org/
  3. CSS3 Selectors Test http://tools.css3.info/selectors-test/test.htmlComprueba los selectores CSS3 compatibles con el navegador
  4. HTML5 Please – Use the new and shiny responsiblyhttp://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-8http://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 | Efecto Social 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 CSS3HTML5)  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 – Betahttp://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 Templateshttp://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-Inhttp://visitmix.com/labs/ai2canvas/documentation.html#code
  4. 25 Fresh & Free HTML5 CSS3 Templates for Your Next Projecthttp://skytechgeek.com/2012/01/25-fresh-free-html5-css3-templates-for-your-next-project/
  5. 450+ CSS Layouts » HTML & CSS » Design Festivalhttp://designfestival.com/450-css-layouts/

Themes para WordPress

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

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

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. CSS Prefixer añade vendor-prefixeshttp://cssprefixer.appspot.com/
  8. Wallaby | Adobe Flash FLA to HTML – Adobe Labshttp://labs.adobe.com/technologies/wallaby/
  9. Animate.css – a bunch of plug-and-play CSS animationshttp://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 caminandohttp://andrew-hoyer.com/blog/2010/10/21/walking/
  4. 22 Useful HTML5 CSS3 Form Tutorials | SpyreStudioshttp://spyrestudios.com/22-useful-html5-css3-form-tutorials/
  5. Using HTML5 Video and Audio in Modern Browsershttp://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 Animationhttp://css3.bradshawenterprises.com/
  8. 15 CSS3 Navigation Menu Tutorial and Techniques | Mystrioushttp://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 & Inspirationhttp://dzineblog.com/2011/11/23-must-read-tutorials-for-advanced-html5css3-coders.html
  11. Top 10 Practical Websites for HTML5 Design | Onextrapixelhttp://www.onextrapixel.com/2011/11/23/top-10-practical-websites-for-html5-design/
  12. 12 Amazing CSS3 Tutorials to Try | UnderWorld Magazineshttp://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 Selectorshttp://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 bloghttp://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

Esperamos que este post sea de mucha utilidad para ustedes.

Y recuerden que contamos con una Tienda en línea dónde puedes adquirir muchos productos informáticos.

Si conoces algo más déjanos un comentario y con mucho gusto lo subiremos para que más personas entren a este impresionante mundo de la web.

Tecnologías México

«Hacemos de la Web un Arte»

Comenta desde Facebook

No olvides dejar tus comentarios