Cada día son más los diseñadores y desarrolladores web que apuestan por HTML5 y CSS3, pues ofrecen muchas ventajas sobre sus predecesores a la hora de enriquecer los diseños. Desde el canvas de vídeo de HTML5 hasta las propiedades de sombreado de CSS3, estos lenguajes sólo nos traen que oportunidades para crear un diseño web más atractivo a los ojos del usuario y más semántico para los buscadores.
En este artículo encontrarás una colección de herramientas de CSS3 y HTML5 que te facilitarán enormemente tu trabajo como profesional del diseño web. Veremos herramientas y frameworks que nos ayudarán a sacar el máximo partido de HTML5 y CSS3. También puede interesarte el artículo de 15 frameworks para desarrollo web.
Herramientas y frameworks de HTML5
HTML5 Boilerplate
Esta herramienta de HTML5 es la que a mí personalmente me resulta más útil, se actualiza de manera regular y que nos permite descargar diferentes versiones: con comentarios, sin comentarios o personalizada a nuestras necesidades. Al utilizar Modernizr las páginas web creadas con HTML5 Boilerplate se ven correctamente incluso en navegadores que no dan soporte a HTML5 y CSS3.
52framework
Tal y como su nombre bien indica, se trata de un framework para trabajar con HTML5, CSS3 y JavaScript. Incluye casi todo lo que te puedas imaginar: canvas de vídeo, validación de formularios, selectores de CSS3, grid, etc. Tienes disponibles varias demos para ver si se ajusta a tus necesidades antes de descargarlo.Este framework está recomendado por Smashing Magazine, por lo que vale la pena tenerlo en cuenta.
G5 Framework
Este framework es compatible con todos los navegadores populares y da soporte a HTML5, CSS3, PHP y jQuery, por lo que es una herramienta muy potente para los desarrolladores web. Este framework empezó como un proyecto personal que ha ido creciendo y que ahora nos ofrece muchos recursos.
Lime.js
Lime.js es un framework para desarrollo de juegos con HTML5 tanto para desktop como para dispositivos táctiles. Tiene muy buena documentación en inglés, por lo que si quieres desarrollar juegos con HTML5, este framework puede ser una buena opción.
Modernizr
Modernizr es una librería JavaScript open source que permite que HTML5 y CSS3 se muestre correctamente en navegadores antiguos que no dan soporte a estos lenguajes. Es muy fácil de usar y hay una amplia documentación online para aquellos que quieran saber más sobre su funcionamiento.
Herramientas para CSS3
Algunas de estas herramientas ya las vimos en el artículo de 5 herramientas excelentes de CSS3 para el diseño web
Selectivizr – Selectores CSS3
Selectivizr es una utilidad de JavaScript que emula las pseudoclases de CSS3 así como los selectores CSS3 en Internet Explorer 6-8. Es tan fácil como incluir el script en las páginas web y Selectivzr hace el resto.
CSS3 Please
El concepto es simple, salen las propiedades de CSS3 con valores predeterminados, que se pueden editar y modificar. Al editar el código la misma página web se actualiza ella sola como por arte de magia, mostrando las propiedades editadas.
CSSPrefixer
¿Odias los prefijos de los diferentes navegadores como -webkit, -moz, etc.? Entonces debes conocer esta herramienta, que te genera los prefijos de los diferentes navegadores cuando le das al botón “process”.
When can I use…
Esta herramienta no sólo es útil para CSS3, sino también para HTML5, archivos SVG, la API de JS, etc. El funcionamiento es muy simple, seleccionas la propiedad que te interesa y te muestra en que navegadores está implementada y en cuáles no.
Ceaser CSS Easing Animation Tool
Las transiciones de CSS3 ofrecen un amplio abanico de posibilidades, lo que la mayoría de nosotros nos quedamos con las transiciones lineales y poco más. Esta herramienta te facilita muchísimo el crear transiciones con CSS3, imprescindible si quieres implementar resultados increíbles!
CSSDesk
De todas las herramientas, ésta diría que es la más sencilla. Lo bueno que tiene es que te permite ver los resultados de manera inmediata en su página. Tiene un editor HTML y uno CSS donde puedes insertar el código que te interesa y ver los efectos en el panel lateral derecho.
Generador de código CSS3 para animaciones
Tú sólo pones los parámetros y el sistema te genera el código que puedes probar online.
Generador de gradientes de CSS3
No puede ser más fácil el crear un gradiente que con esta herramienta. Tu te limitas a especificar los parámetros y el sistema te genera el código.
Generador de sombra de CSS3
Intuitivo y fácil de usar, pues ves los resultados en el ejemplo que aparece en la pantalla. Tú te limitas a probar y el sistema te genera de manera automática el código.
¿Conoces alguna otra herramienta que te sea útil? ¿Te ha gustado el artículo? Deja un comentario.
Sandra Guerrero Sanmarti
@creativasfera
Últimos artículos porSandra Guerrero Sanmarti (ver todo)
- Modelo de Presupuesto para Diseño Web - 19/05/2013
- Plugins indispensables para la seguridad de WordPress - 17/05/2013
- Curso Completo para Convertirse en Desarrollador Web - 13/05/2013
Sandra,¿cómo se usarían los frameworks para html y css para el diseño?¿Sería como usar dreamweaver?porque yo para mis diseños web personalizados uso Dreamweaver,todo a mano…¿debería usar un framework?¿ayuda en el desarrollo?Tengo alguno bajado pero no sé usarlo…
Un saludo Sandra.
Todavía existe gente que usa DreamWeaber?
hola Yoli, la verdad es que no conozco Dreamweaver, no me gusta trabajar con editores WYSIWYG, yo sólo he trabajado con un framework de WordPress llamado Thematic, en el framework vienen todas las funciones y configuraciones básicas instaladas, lo que te facilitan el trabajo.
Es mejor trabar desde blog de notas y nunca estaras batallando para saber de donde biene el codigo.
en pocas palabras te hace mas creativo
Alguna herramienta de grillas pero responsive para diferentes tamaños.
gracias
Sí, aquí te dejo un enlace: Los Mejores Frameworks y Grids de CSS para Responsive Design
Yo utilizo sublime text 2 + filezilla + simpless pero me falta un editor que lleve un buen ftp interno… Es el único pro que le veo a dreamweaver
A ver, DreamWeaver es otra herramienta más, que como todas, puede emplearse bien o mal. Yo en el curro trabajo con NetBeans en proyectos complejos, pero en casa por comodidad uso DreamWeaver para páginas webs estáticas (e incluso para cositas algo más complejas como modificar un Joomla o un WordPress). Me da más que un editor de texto y no es tan excesivo como un IDE. Eso sí, para proyectos complejos siempre uso NetBeans.
Entre las herramientas que mas uso (aparte de las que ya nombran en el artículo):
- Gradient Editor (http://www.colorzilla.com/gradient-editor/) Me gusta más para editar gradientes
- css3-mediaqueries-js (https://code.google.com/p/css3-mediaqueries-js/) muy util para dar soporte para mediaqueries en IE8
- JSLint (http://www.jslint.com/) Importante para verificar y validar las aplicaciones javascript
Hola Julian, yo para los media queries de CSS3 en IE8 utilizo Respond. No conocía JSLint, gracias por tu aportación!
me encanto el post, muy bueno, utilizo boilterplate pero voy a probar otros, saludos colega!