Buscando utilidades para validación de código CSS hemos encontrado holmes.css – CSS Markup Detective. Se trata de una herramienta stand-alone de diagnóstico de hojas de estilo que nos muestra, resaltados, los trozos de código inválidos, inaccesibles, obsoletos (http://www.w3.org/TR/html5/obsolete.html#obsoletos) o que presentan una marcación HTML (incluido HTML5) errónea.
Continuar leyendo →
Tag archivados CSS
Holmes CSS detective: herramienta de diagnóstico de hojas de estilo
Comentarios desactivados
Frameworks CSS, plantillas y herramientas para arrancar un diseño web
A la hora de arrancar el diseño y desarrollo de un sitio web podemos valernos de multitud de herramientas y utilidades que nos pueden ayudar a simplificar el trabajo. Las colecciones de librerías incluidas en frameworks CSS, snippets con funcionalidades específicas, plantillas, etc. son algunos de los elementos en los que nos podemos apoyar para ello.
En este post incluimos algunas que nosotros utilizamos y nos resultan de especial ayuda. Hemos querido prestar especial atención a las herramientas que nos permiten implementar los nuevos estándares como son HTML5 y CSS3 y a las que nos facilitan el diseño y desarrollo de sitios en WordPress con estas tecnologías.
En la página “CSS: Herramientas para diseño web“ de este blog encontraréis algunas más, así como generadores de código, de grids, de botones, etc.
HTML5 y CSS3: 11 tutoriales para soluciones concretas
Como comentamos en el artículo “11 tendencias de diseño web para 2011” se espera que este sea el año en el que se produzca el uso intensivo de CSS3 y HTML5.
Mediante HTML5, podemos resolver parte de los elementos para los que, tradicionalmente, hemos utilizado Flash, aunque, todavía, con este nuevo estándar nos se pueden aplicar ciertas soluciones de diseño e interactividad que podemos lograr a través de Flash.
Por otra parte, las nuevas funcionalidades que nos ofrece CSS3 nos permiten ir dejando a un lado ciertos soluciones gráficas para las que antes exclusivamente necesitábamos imágenes: degradados, sombras, bordes redondeados de elementos gráficos, transformaciones, etc.
En este artículo incluimos referencias a tutoriales que nos pueden ayudar a comenzar a utilizar estos dos emergentes lenguajes de programación web. No se trata de tutoriales generales sobre ambas tecnologías, sino ejemplos de su aplicación a soluciones concretas como, entre otras situaciones, desarrollo de botones de acción en páginas web, desarrollo de formularios, aplicación de nuevas características de transformaciones y animaciones a casos concretos, interacción con jQuery, etc.
Guía de frameworks CSS gratuitos
Existen un buen número de razones para usar un framework para desarrollo de sitios web. Entre otras , este tipo de herramientas nos permiten acelerar el desarrollo, crear sitios más agradables estéticamente y nos pueden ayudar a eliminar algunos aspectos negativos de la (in)compatibilidad entre navegadores (aunque no todos ellos hacen esto, o lo hacen bien). Por otra parte, en algunos casos, y debido a la gran cantidad de entornos de desarrollo gratuitos para CSS existente, la decisión más complicada es elegir uno de ellos y, después, aprender a utilizarlos.
En la actualidad y en nuestra opinión, no existe un framework para CSS que destaque, de forma general, sobre los demás. La decisión sobre el uso de uno u otro marco depende de multitud de factores, aunque pensamos que el principal es el tipo de diseño web que queremos implementar. Existen frameworks destinados a diseños web en grid, otros más orientados a la tipografía de las páginas que creemos, algunos están diseñados para ensalzar determinados elementos de las páginas, etc.
Tampoco hay que olvidar la curva de aprendizaje que precisan unos y otros. Algunos marcos son ideales para diseñadores web que se inicien en este asunto y otros que necesitan un estudio intenso de sus funcionalidades y conocimientos avanzados.
En general, a la hora de elegir un framework CSS, hay que tener dos aspectos en cuenta:
- Asegurarnos que el entorno de desarrollo elegido es capaz de manejar el tipo de diseño escogido para nuestro sitio web y que soporta las funcionalidades que queremos implementar en el mismo.
- Nuestras propias capacidades para que, el conseguir los conocimientos adecuados sobre el entorno, no nos represente una barrera que nos impida sacar el máximo partido al mismo.
En las secciones de este blog dedicadas a herramientas de desarrollo web, podéis encontrar multitud de utilidades que nos pueden ayudar a encontrar un entorno de desarrollo que nos resulte cómodo. En este artículo (original de Cameron Chapman en Devsnippets y ampliado por nosotros), incluimos un listado de los frameworks CSS que consideramos más óptimos e indicamos sus principales características y ámbitos de aplicación. La decisión final sobre la elección de uno u otro dependerá de vosotros y de vuestras necesidades concretas…
Galerías en CSS para inspiración
Vía Blog Web Designer hemos conocido esta recopilación de 25 galerías desarrolladas en CSS que pueden servirnos de inspiración para desarrollos web en los que neesitemos implementar portfolios, catálogos de imágenes y, en general, en aquellos sitios web donde predominen los elementos gráficos.
Continuar leyendo →
Diseño web en grid: introducción a 960 Grid System
Un sistema en grid no es más que un archivo CSS que define una serie de estilos que te ayudan a organizar el contenido de una página web. Podemos pensar en ello como en una plantilla o una hoja cuadriculada. Las rejillas permiten la estabilidad y estructuración en un diseño de web, dando al diseñador una lógica para la construcción de la estética del sitio.
“El sistema de rejilla es una ayuda, no una garantía. Permite un gran número de posibles usos y cada diseñador puede buscar en ellos una solución adecuada a su estilo personal. Pero hay que aprender a utilizar el grid, es un arte que requiere práctica . “
Josef Müller-Brockmann
[slideshow id=8]
En este post comentaremos los aspectos basicos del diseño web en grid y los principios de uso de 960 Grid System.
Comentarios desactivados
- Liberada la nueva versión de WordPress 3.3 – Sonny
- Holmes CSS detective: herramienta de diagnóstico de hojas de estilo
- Scripts PHP para gestión de bases de datos
- Sitios web destacados por The CSS Awards [inspiración]
- Parallax Scrolling: introducción y ejemplos
- +600 iconos minimalistas gratis para diseño de interfaz de usuario
- 2 libros prácticos para aprender a diseñar sobre WordPress
- Cómo utilizar jQuery NIVO Image Slider en Drupal [tutorial]
- 50 diseños web con fondos con imagenes [inspiración]
- WordPress: plantilla destacada [septiembre - 2.011]
- Problemas con WordPress Stats
- Contenidos Flash vs Posicionamiento en buscadores
- Colección de 24 libros gratuitos sobre Blogs y redes sociales
- Estudio acerca de la seguridad en la autenticación de clientes Twitter
- jQuery: 35 tutoriales
- Documentación del W3C traducida al Español: XHTML, CSS, XML, y mucho más
- Seguridad WordPress: una vulnerabilidad y diez plugins de seguridad
- Firefox 3.5 se convierte en el navegador más popular a nivel mundial
- Plugins jQuery para manejo de tablas HTML
- Diseño web minimalista: principios, conceptos y ejemplos
