Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 83

Visitas el mes pasado: 163

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




10. Trucos CSS (V)

10.5 Herramientas y recursos

css

Validador.

Al igual que ocurre con el código HTML, también se puede validar el código CSS. Recordemos que validar es comprobar si la página cumple con las normas del lenguaje estándar. en este caso del CSS 2.1

La validación suele ser útil para encontrar errores. En muchas ocasiones, los errores se producen porque las reglas o propiedades están mal definidas o hay errores de sintaxis.

El W3C (World Wide Web Consortium) dispone de un validador online con el que validar reglas CSS sueltas, páginas con CSS incluído y archivos CSS independientes. Además podemos validar tanto archivos que están en la Web como los que tengamos en nuestro equipo. La página está en español y es la siguiente:

http://jigsaw.w3.org/css-validator/


Extensiónes de Mozilla

Las extensiones del navegador Mozilla son pequeños programas que se añaden al navegador para ampliar sus funciones. Aquí veremos algunas que pueden ser útiles para los diseñadores web.

Fireburg

Fireburg es una extensión del navegador mozilla que puedes descargar desde la página: https://addons.mozilla.org/es-ES/firefox/addon/firebug/?src=ss. Una vez descargado, debes instalarlo como cualquier otro programa.

Con fireburg se puede ver y analizar todo el código que afecta a la página. No sólo el Código HTML, sino también CSS, Javascript, y otros códigos. Para acceder a Fireburg pulsa en el menú "Herramientas" / "Desarrollador web" / "Fireburg" / "Abrir Fireburg", o también desde el icono que se muestra en la barra de estado (barra inferior a la derecha).

Web Developer

Es también una herramienta para ver y analizar el código de la página, esta extensión de Mozilla puede descargarse desde https://addons.mozilla.org/es-es/firefox/addon/web-developer/developers. Una vez instalado puedes acceder a él desde el menú "Herramientas" / "Web Developer". Se abren una serie de opciones, unas relacionadas con el código y otras con algunos tipos de elementos (formularios, imágenes, etc.) También tiene enlace al validador del W3C en el apartado "herramientas".

HTML Validator

En la página 19.1 Validación. ya nombramos esta extensión de Mozilla que sirve para encontrar errores en el codigo HTML.

Colorzilla

Esta extensión permite obtener el color de cualquier elemento de la página mediante una herramienta puntero, similar a la de los programas de tratamiento de imágenes. La puedes descargar en https://addons.mozilla.org/es-ES/firefox/addon/colorzilla/?src=ss. Para abrirla pulsa en el icono que verás en la barra de estado (barra inferior) a la izquierda. Al pasar el ratón por cualquier elemento, en la barra de estado verás el código del color en RGB decimal, RGB hexadecimal, y su posición en pixels. Si haces doble clic en el icono, se abrirá un cuadro de diálogo para seleccionar colores.

MeasureIt

Esta extensión permite medir la altura y la anchura de cualquier elemento de la página. Se descarga en https://addons.mozilla.org/es-ES/firefox/addon/measureit/developers y se abre mediante el icono que se muestra en la parte izquierda de la barra de estado (barra inferior).

IE Tab

permite visualizar con Internet Explorer cualquier página sin salir del navegador Mozilla. Una vez instalado, no tenemos más que pulsar el icono en la parte derecha de la barra de estado (barra inferior) para cambiar de navegador, para volver a Mozilla, lo pulsamos otra vez. Se descarga en https://addons.mozilla.org/firefox/addon/1419.

Otras extensiones.

El navegador Mozilla tiene otras muchas extensiones, que pueden tener variadas utilidades. Puedes mirarlas, y descargarte alguna que te interese en https://addons.mozilla.org/es-ES/firefox/.


Páginas de aplicaciones web.

Algunas páginas ponen a disposición del diseñador algunas aplicaciones que pueden ser de utilidad, como limpiar el código, poder ver el aspecto de la página en varios navegadores, etc. Estas son algunas de ellas.

Clean CSS : http://www.cleancss.com. Ordena, limpia, corrige y reduce el tamaño del código CSS.

Browsershots http://browsershots.org Muestra como se visualiza una misma pagina web en diferentes navegadores de diferentes sistemas operativos. (55 navegadores en total). El uso es gratuito y aunque el proceso es lento, se pueden ver y/o descargar las imagenes que muestran el aspecto de la pagina en cada navegador.

Stripe Generator http://www.stripegenerator.com .Permite generar imagenes preparadas para poder repetirse en todas direcciones de forma correcta para poder ser utilizadas como imagen de fondo.


Lista de selectores, propiedades y valores.

Otra herramienta que puede sernos útil es disponer de una lista con todas propiedades y valores del lenguaje CSS. Las descripciones deben ser lo más breves posibles, y deben estar ordenadas por funciones, debe ser un simple recordatorio para poder trabajar con seguridad. La última lección de este curso es una gúía-resumen que puede serviros de ayuda.

El W3C (World Wide Web Consortium) dispone de una "Guia de referencia Rápida, la cual tiene traducida al español en la página http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21


Plantillas o frameworks

Una plantilla o framework es un conjunto de herramientas, hojas de estilos y buenas prácticas que permiten al diseñador web olvidarse de las tareas repetitivas.

Las plantillas o frameworks CSS suelen incluir herramientas para:

Existen varios frameworks que podemos descargarnos desde la red. Todos ellos suelen tener varios archivos CSS para resetear las páginas, dar estilos uniformes, etc. Estas son algunas de ellas:

Blueprint : http://www.blueprintcss.org/ Una vez descargado, dentro de la carpeta blueprint/src tenemos varias hojas de estilos para resetear, igualar estilos en Internet Explorer, etc.

librería YUI de Yahoo : http://developer.yahoo.com/yui. La mayoría de los archivos de esta librería son para crear aplicaciones con javascript, pero también tiene varios archivos CSS estos se encuentran en la carpeta "build", y dentro de esta carpeta en las carpetas "cssreset" o "reset" (versión más antigua), "cssbase", "cssfonts", y "cssgrids".

librería yaml : http://www.yaml.de En esta librería encontramos diferentes hojas para diferentes medios (impreso, pantalla, etc).

Si buscas un poco en la web, seguramente encontrarás más páginas en donde podrás encontrar más colecciones de frameworks. En realidad los frameworks o plantillas que más se utilizan son los que te permiten resetear la página (poner los estilos a cero) o los que dan una estilo base para empezar a construir una página.


Nuevas tendencias en CSS

En este manual nos hemos referido siempre a la versión CSS 2.1. Sin embargo ya hemos visto en algunas páginas anteriores que ya está en marcha una nueva versión , el CSS 3. Esta nueva versión no es sólo una ampliación de las anteriores, sino que también incorpora algunas novedades para poder crear una página más dinámica, como las "transformaciones", poder "arrastrar y soltar" un elemento, o la posibilidad de incorporar movimiento a los elementos de la página.

La nueva versión CSS 3 todavía está en fase de pruebas, aunque la mayoría de los navegadores en sus ultimas versiones incluyen muchas de sus novedades. Para sabar más sobre CSS 3 puedes ver el Manual de CSS3 en la sección "Nuevas Tendencias".

Una de las novedades más interesantes de CSS3 es la de poder crear animaciones de una forma sencilla y sin tener que utilizar código de programación. Dedicamos a esto un manual de Animación en CSS en la sección "Nuevas Tendencias"




Si seguimos sólo el manual de CSS iremos al último tema donde veremos un resumen de los selectores y propiedades CSS:

Resumen CSS

Si seguimos el manual de HTML y CSS al mismo tiempo veremos en los dos últimos temas los resumenes de lo visto hasta ahora. Continuaremos con el resumen de HTML.

Resumen HTML



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com