¿Que es el Reset CSS ?

Los Reset CSS son unas hojas de estilo en cascada que se suelen incluir al comienzo de un documento HTML, y cuya función es la de minimizar, en la medida de lo posible, las múltiples diferencias visuales que se dan a la hora de mostrar una misma página web, en diferentes navegadores, causa de que cada navegador implementa su hoja de estilos propia e interna, con determinados valores por defecto, que no siempre siguen la recomendación de la organización W3C.

El consorcio W3C, junto con su especificación de CSS 2.11 del 23 de abril de 2009, publicó en su recomendación, un valor por defecto para cada propiedad de CSS que deberían adoptar los agentes de usuario. Debido a que algunos navegadores hicieron caso omiso a sus indicaciones, los diseñadores web se han visto obligados a recurrir al uso de este tipo de trucos para garantizar la correcta visualización en la mayoría de navegadores.

Los Reset CSS contienen en su código fuente, definiciones para propiedades problemáticas que los diseñadores necesitan unificar desde un principio.

Por ejemplo, la mayoría de navegadores establece un margen por defecto entre el contenido de la página web y su propia ventana, cuyo valor varía de un navegador a otro. Los diseñadores web para subsanar esa diferencia, suelen declarar la siguiente línea al comienzo de sus hojas de estilo:

* { margin: 0; padding: 0; }

Esa única línea indica, y con el selector universal de CSS representado por un asterisco, que todos los elementos contenidos en el HTML al que se aplique, carecerán de márgenes. De esa manera, el diseñador se verá obligado a declarar después los márgenes necesarios en el diseño de su página web, en cada uno de los lugares donde sea necesario, sin tener que dejar ese aspecto a decisión de ningún navegador, y minimizando por tanto, las diferencias visuales entre los mismos.

Los Reset CSS pueden contener esa y otras muchas líneas de código que, en su conjunto, servirán al diseñador web para unificar su visualización entre navegadores.

Algunos Reset CSS famosos

El primer Reset CSS que cogió fama fue el publicado por Yahoo! UI Library, pero no fue un poco más tarde, hasta que Eric Meyer considerado un Gurú de las CSS, hizo su popular versión, cuando el término cogió una verdadera popularidad, entre gran cantidad de diseñadores web de todo el mundo, y el artículo donde Meyer publicó su propuesta fue enlazado por infinidad de Blogs.

Fuente.wikipedia

¿ Que es el Diseño web adaptable ?

El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.

Tanto la idea como el propósito del diseño web adaptable fueron previamente discutidos y descritos por el consorcio W3C en julio de 2008 en su recomendación «Mobile Web Best Practices» bajo el subtítulo «One Web».

Dicha recomendación, aunque específica para dispositivos móviles, puntualiza que está hecha en el contexto de «One Web», y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de sobremesa.3

El concepto de «One Web» hace referencia a la idea de construir una Web para todos (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything).

Hoy en día, la variedad de dispositivos existentes en el mercado ha provocado que la información disponible no sea accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegación es muy pobre.

El uso de dispositivos móviles está creciendo a un ritmo increíble, dispositivos como tablets y smartphones han incrementado sus ventas en los últimos años y la navegación en Internet mediante estos dispositivos es cada vez más común. Ese es el motivo por el que el diseño web adaptable se ha vuelto tan popular, pues es una técnica que proporciona una solución web que puede manejar la visualización web tanto de escritorio como de dispositivos.

Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PCs, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.

De esta forma se reducen los costes de creación y mantenimiento, pues se evita tener que desarrollar aplicaciones ad-hoc para versiones móviles, por ejemplo, una aplicación específica para iPhone, otra para móviles Android, etc.

Desde el punto de vista de la optimización de motores de búsqueda, sólo aparecería una URL en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. También se evitarían errores al acceder al sitio web en concreto desde los llamados «social links», es decir, desde enlaces que los usuarios comparten en medios sociales tales como Facebook, Twitter, etc y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.
fuente.wikipedia

Browser Support , herramienta para verificar el CSS en todos los navegadores

Browser Support es un sencillo motor de búsqueda que nos permite averiguar que propiedades CSS son soportados por los principales navegadores.

Su manejo es tan sencillo como lo es cualquier otro buscador web, simplemente tipea cualquier propiedad, pseudo-elemento o valor de CSS y de forma automática obtendrás una relación de los navegadores en los que es soportado.

Además este motor de búsqueda de propiedades CSS en navegadores dispone de una herramienta autocompletado, enlace a características relacionadas, links a la documentación oficial y tests (muchos de los cuales son de W3C CSS test suites) con los que conocer un poco mejor todo lo relacionado con nuestra búsqueda y hacer nuestro trabajo si cabe más fácil.

Muy interesante para que cualquier diseñador lo tenga a mano cada vez que lleva a cabo un proyecto, Browser Support también nos permite llevar a cabo el proceso inverso, es decir, seleccionar uno de los navegadores más importantes entre Chrome, Safari, Firefox, Internet Explorer y Opera, y obtener una relación de las características CSS soportadas por el mismo.

Cualquier usuario, diseñador y/o desarrollador interesado puede acceder de forma gratuita a Browser Support, sin necesidad de llevar a cabo ningún tipo de registro ni descargas desdewww.browsersupport.net.

fuente.desarrolloweb

CSS dinámico con Less

Less permite extender CSS con un comportamiento dinámico ayudando de forma importante a todo diseñador web interesado (ahorra tiempo y bytes).

Desarrollado por Alexis Sellier Less extiende CSS con variables, funciones, reglas anidadas y operaciones logrando que las hojas de estilo funcionen de manera mas inteligente y funcional.

Además de ser multiplataforma y open source, Less ejecuta tanto en el lado del cliente (IE 6 +, WebKit, Firefox) como en el lado del servidor, con Node.js y Rhino.

Interesados en aprender a trabajar con Less, actualmente en la versión estable 1.2.1, van a poder encontrar completa información desde http://lesscss.org/ o en español desde el website de uno de los colaboradores del proyecto.

Por último llamar la atención sobre herramientas que facilitan el trabajo con Less como Crunch, una aplicación gratuita y multiplataforma, desarrollada en Adobe AIR, que edita Less y compila a CSS mostrando resaltado de sintaxis y con soporte para múltiples pestañas.

fuente.desarrolloweb

Class Auto CMS

This class can be used to generate a basic content site.

It can present a form in an administration page protected with a password to let the administrator set several options about common site content sections that it supports.

The class can generate PHP file with definitions that set configuration options according to the options the user set in the form.

The main application script includes the class and the generated options to determine how to present the site based on the option values.

Currently the class can present site pages with automatic headers, footers, a menu bar with links to an about section, news section,products and services, a contact form.

The page presentation is configurable with CSS styles.

What is Innovative from Auto CMS

«Sometimes you need to create a simple institutional site for your company or for a customer, that only requires the same basic pages.

This class provides a very simple solution to let users setup simple sites without programming knowledge and without requiring a database server.

The class generates the necessary PHP code to customize the site page elements, such as headers, footers, menus and even an about section, contact form and a blog or news section.»

Manuel Lemos

Download Auto CMS

 

Compresor de archivos CSS & Javascript

Minify and GZip Compress JavaScript & CSS tool es una sencillo compresor online disponible para ser usado por cualquier desarrollador interesado.

Esta herramienta gratuita todavía en fase beta permite comprimir en un par de clics archivos CSS y Javascript, así como acceder a su descarga.

El manejo de Minify and GZip no supone ninguna dificultad y no requiere de registro previo.

Interesados pueden acceder a Minify and GZip Compress JavaScript & CSS tool.

fuente.desarrolloweb

Compresor online CSS

Excssive es una compresor instantáneo drag & drop que cualquier interesado puede usar de forma libre.

Basta con arrastrar y soltar los archivos CSS en la web de Excssive para reducir el tamaño de los archivos CSS manteniendo la calidad de los mismos.

Excssive combina todos los archivos en uno permitiéndonos modificar el orden de los mismos de forma intuitiva.

Esta herramienta de optimización para desarrolladores está inspirada, según reconoce su autor, en la propia de Yahoo bajo el nombre YUI Compressor .

Interesados pueden acceder a Excssive desde www.excssive.com.

fuente.desarrolloweb

CSS Semánticas para estar adelante de la competencia

Toda la información está basada en el post citado, así como los ficheros relacionados.

Recomendaciones de uso y escritura de código:

Usar las etiquetas HTML estrictamente para lo que se han concebido

Si se consigue crear un código XHTML lo más limpio y claro posible se verá reducido considerablemente el número de estilos propios que tendremos que crear y evitaremos la mayoría de los errores e inconsistencias comunes.

• Maquetar en base a capas (div), no usar tablas (table).
• Párrafos: (p)
• Encabezados: (h1, h2, … h6)
• Tablas: (table, thead/tr/th, tbody/tr/td)
• Listas: (ul/li, ol/li)
• Menús: basados en listas con el atributo display:inline

Uso de medidas relativas en los tamaños de las fuentes

Las medidas relativas son aquellas que no establecen un tamaño fijo en píxeles o puntos para un elemento. En concreto son el porcentaje (%) y el em (1em equivale a 100%, 1.2em a 120%…, 0.7em 70%, …)

Es muy importante este punto por varios aspectos:

• No todas las personas tienen el monitor a la misma resolución y nuestra tipografía le puede resultar muy pequeña o grande según el caso.
• Al establecer la medida de tipografía de manera relativa en la etiqueta body, se tomará el tamaño relativo al navegador y dispositivo que interprete la página. Esto es especialmente en dispositivos con pequeñas pantallas (móviles, pda, etc.).

Maquetación de layout fijo basado en capas:

Esta es una antigua polémica, el maquetado de tamaño fijo de ancho o el maquetado líquido o de tamaño variable.

Los estudios de usabilidad web aconsejan el uso de tamaños fijos adecuados a la resolución más usada por los usuarios de internet, intentando que el porcentaje discriminado sea el menor posible. La explicación de este aspecto se justifica por el constante crecimiento en las ventas de monitores de gran tamaño (17″ o más) y resolución (1024×768 en adelante).

La expansión de las páginas sobre todos en resoluciones de monitores panorámicos dificulta enormemente la legibilidad de los párrafos de texto.

Crear estilos o redefinirlos solo en el caso estrictamente necesario:

Si creamos nuestras páginas haciendo un uso adecuado de las etiquetas XHTML y seguimos las pautas descritas en este documento, se reducirá drásticamente la necesidad de creación de estilos innecesarios y redundantes, lo que conlleva enormes beneficios sobre todos relativos a la facilidad de mantenimiento y reducción de errores y comportamientos extraños.

fuente.articulosinformativos

La Historia y Evolución de CSS

Tras el reciente lanzamiento del primer borrador de CSS4 hemos encontrado un interesante post en graphicmania.net donde dar un repaso de la evolución de las hojas de estilo en cascada.

Este singular tour nos lleva a través de algunos de ejemplos de páginas web con la intención de dejar plasmado las posibilidades de cada una de las versiones de esta tecnología usada para definir la presentación de un documento.

La lista de ejemplos hace un recorrido desde el actual CSS3 hasta antes de la llegada de la primera recomendación de de las hojas de estilo en cascada realizada por el World WideWeb Consortium (W3C)en 1996.

Interesados pueden acceder a este repaso por la Historia web del CSS desde www.graphicmania.net.

fuente.desarrolloweb

Las mejores herramientas online para CSS

Interesante colección de generadores web con los que mejorar nuestro trabajo con CSS.

Es innegable el hecho que las hojas de estilo en cascada o CSS son consideradas como una parte esencial del trabajo de todo diseñador web.

No obstante, trabajar con CSS puede convertirse en una tarea que no solo reste tiempo de llevar a cabo otras actividades, sino que incluso pueda llegar a resultar ciertamente incomoda.

Slodive ha llevado a cabo una selección donde se incluyen las 25 mejores herramientas CSS que pueden resultar de interés para desarrolladores y diseñadores web.

Entre esta variada selección encontramos herramientas CSS para ahorrar tiempo en la escritura del código, para hacer plantillas, optimizadores de código CSS, CSS Sprites o generadores de menús, entre otras.

fuente:desarrolloweb