Atrévete a crear el negocio de tus sueños

14 Herramientas de CSS3 y HTML5 Muy Útiles

html5-y-css3

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.

html5 boilerplate

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.

html5 boilerplate

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.

framework html5

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.

framework html5

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.

modernizr

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.

selectivzr

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.

css3

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”.

css3

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.

css3

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!

css3

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.

css3

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.

css3 animaciones

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.

css3 gradiente

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.

sombra css3

¿Conoces alguna otra herramienta que te sea útil? ¿Te ha gustado el artículo? Deja un comentario.

mi firma
Sandra Guerrero Sanmarti
¡Atrévete a crear el negocio de tus sueños! Porque hay que #emprender hoy para tener resultados mañana:-) + ¿te apuntas?
Sandra Guerrero Sanmarti
Sandra Guerrero Sanmarti
Sandra Guerrero Sanmarti

Comentarios

  • Yoli
    Responder

    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.

    • Eysenck Gómez

      Todavía existe gente que usa DreamWeaber?

      • Juan navarro

        Dreamweaver es lo más avanzado que hay, facil de aprender.
        Para me es el mejor

        • Sandra

          Yo la verdad es que detesto el código que genera Dreamweaver, prefiero mil veces hacerlo a mano..

    • Sandra

       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.

      • Msg_gtd

        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

  • Angel
    Responder

    Alguna herramienta de grillas pero responsive para diferentes tamaños.
    gracias

  • hasdmab
    Responder

    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

  • Yago Gonzalez
    Responder

    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.

  • Julian Lamprea
    Responder

    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

    • Sandra

      Hola Julian, yo para los media queries de CSS3 en IE8 utilizo Respond. No conocía JSLint, gracias por tu aportación!

  • Diseño Web
    Responder

    me encanto el post, muy bueno, utilizo boilterplate pero voy a probar otros, saludos colega!


¿Y tú qué opinas? Deja un comentario...