99 utilidades HTML5 y CSS3

(by: http://ceslava.com/blog)

El próximo lunes 20 hablaré de HTML5 y CSS3 en la Escuela de Arte de Sevilla.

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…html5-css3

Aprender HTML5 y CSS3

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

Una colección de enlaces que he ido recogiendo estos últimos meses y que he compartido con los alumnos del curso de HTML5 y CSS3 en vídeotutorial, gratuito para trabajadores por cuenta ajena.

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 Fundamentals http://jqfundamentals.com/book/
  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

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. Lee gratis el libro “HTML5 For Web Designers” | Blog Comunidad AdobeXpert http://blog.adobexpert.com/gratis-libro-html5-for-web-designers/
    5. Curso-HTML5-v1 http://es.scribd.com/doc/80268708/Curso-HTML5-v1 de Mejorando la web
    6. Estilo & CSS3

     

    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/html5/html5_reference.asp
    4. CSS Reference http://www.w3schools.com/cssref/default.asp
    5. CSS3 properties explained | css3files.com http://www.css3files.com/
    6. Periodic Table of the Elements – Josh Duck http://joshduck.com/periodic-table.html
    7. Web Design and Applications – W3C http://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 – MDN https://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 Sheets http://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 Information http://css3clickchart.com/
    15. HTML5 Canvas Cheat Sheet – Nihilogic http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
    16. HTML5 Diagrama de flujo
      Media_httphtml5doctor_idocy
    17. 25 Useful Html5 Cheat Sheets and Tutorials For Web Developer http://smashinghub.com/25-useful-html5-cheat-sheets-and-tutorials-for-web-developer.htm

    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/

    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 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 – Beta http://beta.theexpressiveweb.com/
    6. Resumen del curso HTML5 http://msdn.microsoft.com/es-es/ie/hh749019 Del mismísimo Microsoft

    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/

    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/

    Frameworks  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.
    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/

    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

    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/

    Espero que os sean de utilidad, si conocéis más por favor dejadlos en los comentarios.


    Cursos de diseño gratuitos para trabajadores

    Muchas gracias por leerme, si necesitas cualquier información contacta conmigo.

    @ceslava en Twitter ceslava en Facebook Cientos de cursos y vídeotutoriales de diseño


    original post: http://ceslava.com/blog/99-utilidades-html5-y-css3/?utm_source=feedburner&utm…

    Anuncios

    Responder

    Introduce tus datos o haz clic en un icono para iniciar sesión:

    Logo de WordPress.com

    Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

    Imagen de Twitter

    Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

    Foto de Facebook

    Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

    Google+ photo

    Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

    Conectando a %s

    A %d blogueros les gusta esto: