Diseño web

Empezar de Cero una Web

Qué vas a encontrar en esta sección:Empezar de Cero a Hacer una Web – Como crear una pagina web paso a paso

Guía de capítulos: Empezar de Cero una Web

1. Usabilidad web. Principios básicos

Cosas que hay que tener en cuenta para hacer una web más fácil de usar por todos y

atraer más visitantes.

2. Hacer un sitio web accesible. Accesibilidad

Pautas para hacer un sitio web accesible y llegar a más visitantes. Respetando estas

directrices llegaremos a más usuarios dentro de la red.

3. Hosting. Comparativa de empresas de alojamiento web

Hosting web: comparativa de empresas de alojamiento para elegir el hosting más

adecuado a tus necesidades y presupuesto.

4. Hosting. Alojamiento web

Guía sobre hosting web. Claves para conseguir el mejor alojamiento web. Consejos

para obtener un buen servicio de hosting.

5. Como subir la web al servidor por FTP

Guía sobre como subir la web al servidor para que sea visible desde cualquier parte

del mundo en Internet.

6. Accesibilidad web. Pautas esenciales de accesibilidad

Guía sobre accesibilidad web. Haz que todos tus potenciales usuarios puedan visitar

tu web.

7. Primeros pasos para aprender a hacer una página web

Guía sobre como hacer una web. Aprende a hacer una web gratis desde el principio y

de forma fácil.

8. Analizar tu audiencia. Clave de éxito en la Web

Aprende a analizar tu audiencia para conocer sus gustos y necesidades y poder

montar un negocio exitoso.

9. Como planificar una página web

Planifica los objetivos y recursos de tu web para ahorrar tiempo de desarrollo y tener

éxito en Internet.

10.Encontrar un nicho de mercado rentable para tu página web

Para tener éxito con tu web, tendrás que dirigirte a un público muy específico dentro

de un tema concreto.

11.Como organizar una página web. Diseño de la estructura

Ideas básicas para crear una estructura para tu web efectiva y usable que llegue a

más visitantes

12.Por qué registrar tu propio nombre de dominio

Por que es importante tener un nombre de dominio y consejos en el registro.

13.Como añadir imágenes a una página web

Guía sobre como añadir imágenes a una página web y darles formato.

14.Tratamiento de imágenes para la web

Edición y uso de los distintos tipos de imágenes en la web, así como su optimización

para que ocupen lo menos posible.

15.Como guardar las páginas web en el servidor

Como guardar las páginas web para que no haya problemas al subirlas al servidor.

16.Programas para hacer tus páginas web

Guía de los programas de edición web, ya sean editores de texto como WYSIWYG y

también una breve reseña a los templates o plantillas web prefabricadas.

17.Crear la página web. Consejos

Consejos para crear tus páginas web de forma correcta. Hacer buenas páginas web

desde el principio, más amigables a buscadores, mejor diseñadas y más accesibles.

18.Nombres de dominios. Claves para adquirir un buen dominio

Todas las claves para adquirir un buen dominio y tener presencia en Internet.

19.Consejos al registrar un nombre de dominio

Claves para adquirir un dominio adecuado para tu proyecto web y empezar en

Internet con buen pie.

20.Mantenimiento de una página web

Guía para llevar al día el mantenimiento de tu página web y no caer en el olvido.

21.Actualizar la página web. La importancia del contenido

Actualiza tu web con frecuencia para seguir creciendo. Lo más importante es el

contenido.

22.Colgar la página web en Internet

Un resumen básico sobre lo que hay que hacer para subir una web a Internet.

23.Herramientas para hacer una página web. Editor imágenes, HTML y FTP

Aprende desde cero como hacer una web. Herramientas básicas: editor de imágenes,

editor HTML y clientes FTP.

24.Beneficios de la usabilidad web

Beneficios de la usabilidad web y consejos prácticos para hacer sitios más usables.

Pónselo fácil a tus usarios para encontrar lo que buscan en tu web.

25.Sistema de navegación de la página web

Aprende a crear un buen sistema de navegación para tu página web y haz que tus

visitantes encuentren lo que buscan sin problemas.

26.Conceptos básicos de HTML

Conceptos básicos de HTML. Etiquetas fundamentales y estructura básica de una

página web.

27.Compatibilidad de tu web con distintos navegadores

Podremos estar satisfechos si conseguimos que se vea igual de bien en los más

importantes, como Explorer, Firefox, Opera, Safari y Mozilla.

28.Normas elementales en HTML

Vamos a ver unas normas básicas en el uso del HTML, aprendiendo a utilizar las

etiquetas y elementos de este lenguaje de creación de páginas web.

29.Ejemplo de estructura de una página HTML

En este tutorial vamos a explicar las partes de una estructura básica de una página

hecha en HTML.

30.Introducción a los elementos y etiquetas de HTML

Un archivo HTML es un archivo de texto normal, salvo por tener etiquetas de formato

o marcaje. En HTML, usamos "etiquetas" para crear la estructura de una página web.

31.HTML – XHTML Doctype o versión del documento de una página web

Antes de comenzar a hacer la página web en sí, tenemos que decirle al navegador

qué versión de HTML vamos a utilizar para que sepa interpretarlo correctamente.

32.Dar formato a un texto en HTML. Etiquetas HTML para poner texto en una web

A contiunuación os muestro un listado de etiquetas válidas para formatear textos en

html y darles el estilo y apariencia deseados.

33.Como se deben utilizar los lenguajes HTML y XHTML

Consejos útiles para una mejor utilización de los lenguajes HTML y XHTML.

34.Manejo de JavaScript con XHTML

El manejo de scripts es una parte fundamental para lograr un balance adecuado en el

frontend de nuestros sitios, en este artículo vemos como conjuntar XHTML y

Javascript.

Usabilidad web. Principios básicos

Resumen: Cosas que hay que tener en cuenta para hacer una web más fácil de usar por todos y atraer más visitantes.

a Organización Internacional para la Estandarización (ISO) ofrece dos definiciones

deusabilidad:

ISO/IEC 9126:

“La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido,

usado y ser atractivo para el usuario, en condiciones específicas de uso”

ISO/IEC 9241:

“Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos

específicos a usuarios específicos en un contexto de uso específico”

La distinción entre usabilidad – facilidad de uso – y accesibilidad, es difícil y en muchos

casos innecesaria. Además, la accesibilidad debe ser entendida como parte de y al mismo

tiemporequisito para la usabilidad, puesto que la accesibilidad no sólo implica la necesidad

de facilitar acceso, sino también la de facilitar el uso. No obstante, no está de más dar

unas indicaciones generales sobre usabilidad en particular.

En informática, la usabilidad está muy relacionada con la accesibilidad, hasta el punto de

que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de estos

expertos es Jakob Nielsen, el cual definió la usabilidad en el 2003 como “un atributo de

calidad que mide lo fáciles de usar que son las interfaces web”. Otra definición clarificadora

es la de Redish (2000), para quien es preciso diseñar sitios web para que los usuarios

sean capaces de “encontrar lo que necesitan, entender lo que encuentran y actuar

apropiadamente… dentro del tiempo y esfuerzo que ellos consideran adecuado para esa

tarea”.

La usabilidad parte de los principios del diseño universal o diseño para todos. La buena

usabilidad puede lograrse mediante el diseño centrado en el usuario (que no

necesariamente dirigido por él), aunque se emplean diversas técnicas. El diseñador de

usabilidad proporciona un punto de vista independiente de las metas de

la programación porque el papel del diseñador es actuar como defensor del usuario. Por

ejemplo, tras interactuar con los usuarios, el diseñador de usabilidad puede identificar

necesidades funcionales o errores de diseño que no hayan sido anticipados.

La usabilidad implica hacerse preguntas como las siguientes, que pueden responderse

realizando análisis de usuarios / visitantes y tareas al planificar un proyecto web:

¿Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender?

¿Qué quieren o necesitan hacer los visitantes?

¿Cuál es la formación general de los usuarios?

¿Cuál es el contexto en el que el visitante está trabajando?

¿Qué debe dejarse a la máquina? ¿Qué al usuario?

Otras consideraciones incluyen:

¿Pueden realizar fácilmente sus tareas previstas? Por ejemplo, ¿pueden realizar las

tareas previstas a la velocidad esperada?

¿Cuánta preparación necesitan los visitantes?

¿Qué documentación u otro material de apoyo están disponible para ayudar al

usuario? ¿Puede éste hallar las respuestas que buscan en estos medios?

¿Cuáles y cuántos errores cometen los usuarios cuando interactúan con el producto?

¿Puede el visitante recuperarse de los errores? ¿Qué ha de hacer para ello? ¿Ayuda

el producto a recuperarse de los errores? Por ejemplo, ¿muestra el sofware mensajes

de error informativos y no amenazantes?

¿Se han tomado medidas para cubrir las necesidades especiales de los usuarios con

discapacidades? (Es decir, ¿se ha tenido en cuenta la accesibilidad?)

Todos estos temas te permitirán, además, fidelizar visitas, es decir, hacer que tus

visitantes vuelvan una y otra vez, puesto que al ponerles fácil la navegación por tu sitio

mejorarás mucho la imagen de tu web.

Principios básicos en los que se basa la usabilidad Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una

interacción efectiva con el sistema o producto. Está relacionada con la sintetización,

familiaridad, la generalización de los conocimientos previos y la consistencia.

Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema

pueden intercambiar información. También abarca la posibilidad de diálogo, la

multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la

optimización entre el usuario y el sistema.

Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos.

Está relacionada con la capacidad de observación del usuario, de recuperación de

información y de ajuste de la tarea al usuario.

Hacer un sitio web accesible. Accesibilidad

Resumen: Pautas para hacer un sitio web accesible y llegar a más visitantes. Respetando estas directrices llegaremos a más usuarios dentro de la red.

1. Posibles limitaciones de acceso a la web

Discapacidades:

Deficiencias visuales: ceguera, visión reducida y problemas en visualización de color

entre otros.

Deficiencias motrices: hacen referencia a la capacidad de movilidad del usuario.

Estos usuarios no suelen ser capaces de interactuar con el sistema a través de

dispositivos de entrada tradicionales, por lo que utilizan dispositivos alternativos. Por

ejemplo, basados en voz.

Deficiencias auditivas: aunque si bien es cierto que son menos limitadoras en el

acceso y uso de contenidos web, puesto que el canal sonoro es mucho menos usado

que el visual, aún así, conviene tener presentes las limitaciones y barreras derivadas

de esta discapacidad, como es el caso del lenguaje.

Deficiencias cognitivas y de lenguaje: las personas con estas deficiencias tienen

problemas en el uso del lenguaje, la lectura, percepción, memoria, etc.

No obstante, la discapacidad no es el único tipo de limitación que dificulta la accesibilidad

a los contenidos. Además de las limitaciones propias del individuo, existen otras derivadas

de características del equipo de navegación o del entorno ambiental desde donde accede

a la web, como por ejemplo, usuarios que utilicen pantallas pequeñas, accedan desde

entornos llenos de humo, su navegador no soporte los scripts utilizados en nuestra web,

etc. Todo ello muy relacionado también con la usabilidad, ya que cuanto más fácil de

manejar es una web, más accesible parece ser.

2. Hacer un sitio web accesibleHacer un sitio web accesible puede ser algo sencillo o difícil, depende de muchos factores

como por ejemplo, el tipo de contenido, el tamaño y la complejidad del sitio, así como de

las herramientas de desarrollo y el entorno. Esto incluye no sólo la utilización de un

lenguaje claro y simple, sino también proporcionar mecanismos comprensibles para

navegar dentro de cada página y entre las páginas del sitio web. Al proporcionar

herramientas de navegación e información orientativas en las páginas se maximizará la

accesibilidad y la usabilidad del sitio web.

Si, por otro lado, todas las ventajas propuestas hasta ahora no son suficientes para

convencerte de que la accesibilidad es importante, tal vez sí lo haga el decirte que la

accesibilidad web afecta al posicionamiento en los buscadores. Parece extraño en un

principio, pero suele decirse que el robot de Google es el usuario ciego más activo de

Internet, y la razón para decir esto es que muchas de las optimizaciones necesarias para

conseguir una buena accesibilidad, lo son también para conseguir una indexación correcta

por parte de los buscadores.

Muchas de las características de accesibilidad de un sitio se implementan de forma

sencilla si se planean desde el principio del desarrollo de la página web y se utilizan de

forma correcta los lenguajes de programación como el HTML, mientras que la modificación

de un sitio web para hacerlo accesible puede ser muy laboriosa y requerir gran esfuerzo,

por lo que es muy aconsejable empezar desde el principio pensando en la accesibilidad.

No obstante, aunque requiere mayor esfuerzo, también es posible y aconsejable modificar

un sitio web ya diseñado para hacerlo más accesible.

A grandes rasgos, hay que tener en cuenta lo siguiente en los dos casos:

Imágenes y animaciones: usa el atributo alt para describir la función de cada

elemento visual.

Mapas de imagen: usa el elemento map y texto para las zonas activas.

Multimedia: pon subtítulos y transcripción del sonido, y descripción del vídeo.

Enlaces de hipertexto: usa texto que tenga sentido leído fuera de contexto. Por

ejemplo, no utilices expresiones como “click aquí”.

Organización de las páginas: usa encabezados, listas y estructura consistente. Usa

CSS para la maquetación donde sea posible.

Figuras y diagramas: puedes optar por explicarlos brevemente en la pagina o bien

usar el atributo longdesc.

Scripts, applets y plug-ins: ofrece contenido alternativo para dichos elementos.

Marcos: Usa el elemento noframes y títulos con sentido.

Tablas: Facilita la lectura línea a línea. Resume los contenidos en textos

comprensibles y sencillos.

3. Evaluación de la accesibilidad de un sitio webEvaluar la accesibilidad a lo largo del desarrollo de un sitio web permite encontrar

problemas de accesibilidad desde el principio, cuando es más fácil resolverlos. Hay

herramientas de evaluación que ayudan a realizar evaluaciones de accesibilidad. No

obstante, ninguna herramienta en sí misma puede determinar si un sitio cumple o no las

pautas de accesibilidad. Para determinar si un sitio web es accesible, es necesaria la

evaluación humana.

El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la

accesibilidad es el W3C, en especial su grupo de trabajo WAI. En España una de las

asociaciones que trabaja en este campo es el SIDAR.

Así mismo, existen diversas herramientas en español de comprobación de la accesibilidad,

comoTAW, HERA y Examinator.

Hosting. Comparativa de empresas de alojamiento web

Resumen: Hosting web: comparativa de empresas de alojamiento para elegir el hosting más adecuado a tus necesidades y presupuesto.

Esta comparativa de empresas de alojamiento web está dividida en dos tablas. La primera

de las tablas de la comparativa está dedicada a empresas de hosting españolas, la

mayoría de ellas muy conocidas. La segunda parte de la comparativa de alojamiento está

centrada en empresas estadounidenses, las cuales ofrecen bastantes más servicios a

mejores precios, pero con el inconveniente de tener soporte en inglés y no estar

físicamente en España. A partir de aquí, puedes sopesar las ventajas e inconvenientes de

elegir una u otra empresa de hospedaje web.

En las tablas de comparativa de empresas de alojamiento web, se muestran las

características generales de los planes básicos de varias empresas de hosting para que

puedas comparar de forma global entre ellas (si te interesa saber más en profundidad

sobre alguna pincha en su enlace). Insisto en que son los planes básicos de cada

empresa, tanto de las españolas como de las extranjera, aunque la diferencia en los

recursos ofrecidos entre unas y otras sea grande.

Empresas

españolas

Abansy

s

(plan

inicial)

Acens

(plan

premier)

Arsys

(plan

personal)

Cdmon

(mini

plan)

Dinahost

(plan

personal)

Hostalia

(plan

inicio)

Minerva

(mini

plan)

Plataforma Linux Linux o

Windows

Linux o

Windows

NI Linux o

Windows

NI Linux

Nº dominios 1 1 1 NI NI 1 NI

Espacio en

disco

250 MB 75 MB 200 MB 50 MB 100 MB 100 MB 200 MB

Transferencia

mensual*

Ilimitada 3,5 GB 2 GB 1 GB 1 GB 4 GB 2 GB

Precio por año 36 € 287 € 59 € 25 € 54 € 59 € 29 €

Cuentas correo 10 10 20 1 20 20 10

MySQL* No No No Sí No No 10

FTP 5 Ilimitadas 1 1 1 1 10

SSI* Sí Sí NI* Sí No Sí Sí

PHP* Sí Sí No Sí No Sí Sí

CGI* Sí Sí NI Sí No Sí Sí

Perl* Sí Sí No Sí No Sí Sí

Antivirus Sí Sí Opcional Opcional No Sí No

Estadísticas

web

Sí Sí Sí Sí Sí Sí Sí

Directorios

protegidos

Sí No No Sí No Sí Sí

Empresas

extranjeras

3Essentials

(starter)

Arvixe

(personal

plan)

dh2

(personal

plan)

HostGo

(GoStarter

)

Hostony

(profi)

Dreamhost

(Crazy

Domain

Insane!)

Pronet

(basic

dollar)

Plataforma Windows Linux Linux o

Windows

NI Linux NI NI

Nº dominios 0 0 0 1 10 1 0

Espacio en

disco

3 GB 500 MB 5 GB 2 GB 200 GB 200 GB 325 MB

Transferencia

mensual

100 GB 5 GB 300 GB 100 GB 2.000 GB 2.000 GB 3 GB

Precio por

año

48 $ 30 $ 48 $ 77,5 $ 94 $ 120 $ 18 $

Cuentas

correo

Ilimitadas Ilimitada

s

3.000 50 Ilimitadas 3.000 Ilimitada

s

MySQL 1 Ilimitada

s

30 Ilimitadas Ilimitadas Ilimitadas NI

FTP 1 Ilimitada

s

30 50 Ilimitadas 75 Ilimitada

s

SSI Sí Sí Sí Sí Sí Sí No

PHP Sí Sí Sí Sí Sí Sí No

CGI Sí Sí Sí Sí Sí Sí No

Perl Sí Sí Sí Sí Sí Sí No

Antivirus NI Firewall Sí Sí NI Sí No

Estadísticas

web

Sí Sí Sí Sí Sí NI No

Directorios

protegidos

Sí Sí Sí NI Sí Sí Sí

* NI = no indicado en la referencia del plan.

Transferencia mensual = cantidad de tráfico mensual generado por tu página. Por ejemplo:

si una página pesa 100 Kb (incluyendo imágenes) y es visitada 10 veces al día, generará

un tráfico de 30 Mb al mes.

MySQL = gestor de bases de datos

SSI = comandos que se insertan en HTML para ejecutar guiones CGI, insertar archivos,

insertar la fecha y la hora, etc.

PHP = lenguaje de programación que se ejecuta en el servidor y permite integrar multitud

de funcionalidades en páginas HTML así como trabajar con bases de datos.

CGI = programas que incorporan interactividad a tu web. Hay muchos cgis gratuitos y

genéricos como estadísticas, libros de visitas, relojes, calendarios, etc.

Perl = lenguaje de programación muy utilizado para el desarrollo de programas CGI.

Si deseas buscar otras empresas o planes de hosting, entra en BuscaHost (principalmente

hosting español) o en FindMyHosting (principalmente hosting extranjero).

Hosting. Alojamiento web

Resumen: Guía sobre hosting web. Claves para conseguir el mejor alojamiento web. Consejos para obtener un buen servicio de hosting.

Una vez construida tu página web, necesitas subirla a un servidor que esté

permanentemente conectado a Internet para que los visitantes pueda verla a cualquier

hora del día, los 7 días de la semana y desde cualquier lugar del mundo. Lo más normal es

que para este fin recurras al servicio que te proporcione una empresa de hosting, ya que

éstas empresas tienen toda la infraestructura necesaria para tener los servidores

permanente conectados a Internet. Este tipo de servicios suele recibir el nombre de web

hosting, hosting web, hospedaje web, alojamiento o alojamiento web.

> Tabla comparativa de empresas de alojamiento web <  

> Tabla comparativa de empresas de alojamiento web en Windows <

Como más o menos se puede intuir por lo dicho anteriormente, un hosting web es un

servicio de alojamiento de páginas que gestionan empresas especializadas en el sector.

Las empresas que se dedican a este servicio proporcionan espacio de un servidor a sus

clientes para que la web esté accesible permanentemente.

1. Tipos de Alojamiento Web(fuente: wikipedia)

El alojamiento web se divide en seis tipos: gratuitos, compartidos, revendedores,

servidores virtuales, servidores dedicados y de co-locación.

Alojamiento gratuito: es recomendable a la hora de publicar páginas personales, trabajos

poco ambiciosos, cuando se está empezando o simplemente cuando no queremos o

podemos gastar dinero en el hosting. Estos servicios generalmente agregan publicidad en

los sitios y tienen un espacio y tráfico web limitado.

Alojamiento compartido (virtual hosting): Estos servicios son de pago, y por ese motivo

suelen tener como norma general mayores prestaciones y recursos disponibles que los

gratuitos. Además, muchos de ellos suelen incluir en el plan de hosting el dominio. En este

tipo de servicio se alojan las webs de varios clientes en un mismo servidor, de ahí el

nombre. Resulta una alternativa muy buena para pequeños y medianos clientes, es un

servicio económico y tiene buen rendimiento.

Alojamiento revendedor (reseller): Este servicio de alojamiento está diseñado para

grandes usuarios o personas que venden el servicio de hosting a otras personas. Estos

paquetes cuentan con gran cantidad de espacio y de dominios disponibles para cada

cuenta.

Servidores virtuales (VPS, Virtual Private Server): Mediante el uso de una máquina

virtual, la empresa ofrece el control de un ordenador aparentemente no compartido. Así se

pueden administrar varios dominios de forma fácil y económica, además de elegir los

programas que se ejecutan en el servidor. Por ello, es el tipo de producto recomendado

para empresas de diseño y programación web.

Servidores dedicados: El término servidor dedicado se refiere a una forma avanzada de

alojamiento web en la cual el cliente alquila o compra un ordenador completo, y por tanto

tiene el control completo y la responsabilidad de administrarlo. El cuidado físico de la

máquina y de la conectividad a Internet es tarea de la empresa de alojamiento, que suele

tenerlo en un centro de datos.

Co-locación (housing): Este servicio consiste básicamente en vender o alquilar un

espacio físico de un centro de datos para que el cliente coloque ahí su propio ordenador.

La empresa le da la corriente y la conexión a Internet, pero el ordenador servidor lo elige

completamente el usuario (hasta el hardware).

2. Hosting gratuito vs. de pagoElegir entre un hosting gratuito y un hosting de pago depende de nuestras necesidades y

el uso que le vayamos a dar a la página. Si tienes un proyecto pequeño en mente y no

necesitas herramientas o recursos complejos (base de datos MySQL, ASP, CGI, etc.) la

opción de hosting gratis puede ser una buena opción. Por otro lado, si estás empezando a

dar los primeros pasos en el mundo de la publicación web, tal vez también sea

recomendable que comiences en un servidor gratuito y conforme vaya creciendo tu

proyecto des el paso a los hostings de pago.

Los alojamientos de pago ofrecen mejores recursos e infraestructuras para hospedar tus

webs, por lo que son recomendables cuando tengas una web con bastante tráfico, un

proyecto serio o necesites utilizar tecnología más avanzada, como pueden ser las bases

de datos o php. Estos hostings suelen ofrecer más espacio web, mayor tráfico mensual,

bases de datos y soportar múltiples lenguajes de programación, por lo que ofrecen más

flexibilidad a la hora de diseñar tu página.

No obstante, aunque la mayoría de los hostings gratuitos tienen poca calidad en

comparación con los de pago, hay honrosas excepciones, como es el caso

de freewebs.com.

3. Hosting Windows vs. hosting LinuxDependiendo del tipo de programación y los servicios que usemos o tengamos pensado

usar nos decantaremos por un tipo de alojamiento web u otro. Por norma general es mejor

utilizar:

Windows Hosting: cuando usemos o queramos usar alguna de estas tecnologías:

Windows,ASP, ASP.NET, bases de datos Access, SQL Server o IIS y usuarios que

publiquen su web mediante las extensiones de FrontPage.

Linux Hosting: cuando usemos o queramos usar alguna de estas tecnologías:

Linux, PHP, Python, JSP, Perl, C, MySQL o Apache. Los hosting Linux suelen ser más

baratos que los Windows hosting, la razón está clara, no hay que pagar las licencias del

servidor, puesto que las licencias de Linux son gratuitas. Otra de las razones es que hay

mejores herramientas para la administración de servidores Linux que abaratan el coste de

administración de un servidor Linux. Recuerda que este tipo de servicios está optimizado

para entornos Linux.

En la siguiente página se muestra una comparativa de empresas de

hospedaje estadounidenses y españolas para que puedas elegir más fácilmente lo mejor

para ti.

Como subir la web al servidor por FTP

Resumen: Guía sobre como subir la web al servidor para que sea visible desde cualquier parte del mundo en Internet.

Guía de CuteFTPUna de las dudas más comunes cuando acabas un proyecto web por primera vez es:

¿cómo subir mi página web? ¿qué hago para que esté mi web en Internet?.

Pues bien, una vez tengas tu web lista para compartirla con el resto del mundo, necesitas

subir los archivos HTML, imágenes y todos los demás contenidos creados a tu servidor

web (alalojamiento web que tengas). Es decir, que tienes que subir la página web a

Internet o de otro modo sólo podrás verla tú desde tu ordenador. Para ello, lo más sencillo

es usar un cliente FTP, ya que agilizas muchos pasos del proceso de subir archivos al

servidor. Además, el modo de trabajo es similar en muchos aspectos al (tan) famoso

explorador de Windows, por lo que si no estás muy acostumbrado a manejar estos

programas su aprendizaje será rápido (¿quién no conoce Windows?).

Antes de nada, lo primero es conseguir un cliente FTP. En esta guía voy a utilizar

el cliente Cute FTP por ser con el que trabajo normalmente, pero el proceso es bastante

similar para todos los clientes. Bájate el programa para empezar con la explicación: Cute

FTP.

Instalación de Cute FTPA día de hoy, la última versión de este cliente FTP es la 8.0.3, por tanto es con esa con la

que trabajaremos en este artículo (exactamente con la versión de prueba) para explicar

como subir la web al servidor.

Bien, una vez descargado el programa lo ejecutamos. Tendremos que seguir una serie de

pasos comunes a toda instalación, como elegir el directorio para instalarlo, el tipo de

instalación (típica, compacta o personalizada). En este caso elegimos típica, la instalación

comienza enseguida y no presenta mayores problemas.

Configuración de Cute FTPUna vez instalado el programa, al ser una versión de prueba, te ofrece la opción de

introducir la licencia del programa o continuar, nosotros le damos a continuar y nos

aparece una pantalla con el siguiente cuadro de diálogo:

Llegados a este punto, necesitamos los siguientes datos para configurar el cliente

CuteFTP, los cuales debe proporcionarte tu servicio de hosting:

1. Dirección de tu servidor web.

2. Contraseña y usuario para acceder al servidor web vía FTP.

Donde pone Host Address debes introducir el nombre del servidor, y en Site Name el

nombre que le quieras poner a la configuración que estamos haciendo (puedes poner el

nombre de tu web o cualquier otra cosa con tal de que luego sepas qué es). Hacemos clic

en siguiente.

La próxima pantalla es similar a la anterior, pero en este caso debes introducir el nombre

de usuario de tu cuenta FTP (User Name) y la clave de dicha cuenta (password). Otra vez

damos a siguiente.

Ahora nos pide que seleccionemos la carpeta local con la que queremos trabajar (Default

Local Folder), no es necesario que seleccionemos carpeta remota por el momento (Default

Remote Folder). La carpeta local debería ser la carpeta en la que tienes los archivos de tu

web. Le damos a siguiente nuevamente y a continuación a finalizar. Una vez conectado al

servidor, ya podemos empezar a subir archivos.

Subir la página web al servidorLa siguiente pantalla que aparece es similar a esta:

(clic para ampliar)

Me he permitido dibujar algunas flechas para explicar un poco la estructura básica del

cliente cute FTP:

1. La flecha verde señala la carpeta de tu disco duro, esa que configuraste como carpeta

local. En ella deberías tener todos los archivos de la web que has hecho.

2. La flecha roja señala el servidor web. Es el sitio al que tendrás que copiar los archivos

que tienes en tu disco duro.

Ahora ya podemos empezar a subir la web, para ello lo que tienes que hacer es

seleccionar los archivos de tu carpeta local que quieras copiar al servidor y arrastrarlos:

Otras operaciones sencillas1. Borrar y renombrar archivos del servidor: para hacerlo sólo tienes que seleccionar el

archivo que quieras borrar, renombrar, etc. hacer clic en el botón derecho del ratón y

pulsar en la opción del menú emergente:

Para borrar la opción a seleccionar es delete, para cambiar el nombre del archivo rename,

para ver el código fuente view, para editarlo edit…

2. Cambiar permisos de escritura: para cambiar los permisos de escritura de un archivo

tienes que seguir los mismos pasos que para borrar, editar, etc. Es decir, seleccionas el

archivo, pulsas el botón derecho del ratón y haces clic en la opción llamada Properties /

CHMOD. Te aparece una pantalla como esta en que que puedes dar los permisos de

escritura que necesites para cada archivo o carpeta:

Nota: si buscascomo hacer FTP con MACpincha en el enlace.

Accesibilidad web. Pautas esenciales de accesibilidad

Resumen: Guía sobre accesibilidad web. Haz que todos tus potenciales usuarios puedan visitar tu web.

Existen millones de personas con discapacidad que no pueden utilizar la web.

Actualmente, la mayoría de los sitios y los software web presentan barreras de

accesibilidad, lo que está dando lugar a situaciones de imposibilidad de acceso a la

información por parte de aquellos usuarios con discapacidades. Cuanto más software

y sitios web accesibles estén disponibles, más personas con discapacidad podrán utilizar

la web y contribuir de forma más eficiente.

La accesibilidad web hace referencia a la capacidad de acceso a la web y a sus

contenidos por todas las personas, independientemente de las limitaciones propias del

individuo (discapacidades, idioma, conocimientos, experiencia, etc.) o de características de

su equipo de navegación o el entorno ambiental desde donde accede a la web. La idea

más importante en la accesibilidad web consiste en mostrar a los creadores de páginas

web todas las alternativas yherramientas web disponibles para hacer que sus páginas

sean legibles y comprensibles para el mayor número de usuarios, de forma que todas las

personas puedan navegar por la web en cualquier condición.

Es muy importante que la web sea accesible para así proporcionar un acceso equitativo e

igualdad de oportunidades a las personas con discapacidad. Una página web

accesible puede ayudar a personas con discapacidad a que participen más activamente

en la sociedad. Piensa que el esfuerzo que hagas en hacer tu web más accesible también

te beneficiará a ti, puesto que es más probable que los visitantes vuelvan a una página de

fácil acceso que a otra que no lo es, por lo que estarás fidelizando visitas. Por otro lado, la

accesibilidad está muy relacionada con lausabilidad web, que consiste en facilitar la

navegación a tus visitantes para que les sea más sencillo acceder a los contenidos que les

ofreces.

Pautas de accesibilidad webPara hacer el contenido web accesible, se han desarrollado las denominadas Pautas de

Accesibilidad al Contenido en la Web (WCAG), cuya función principal es guiar el diseño

de páginas web hacia un diseño accesible, reduciendo de esta forma barreras a la

información. WCAG consiste en 14 pautas que proporcionan soluciones de diseño y que

utilizan como ejemplo situaciones comunes en las que el diseño de una página puede

producir problemas de acceso a la información. Las Pautas contienen además una serie

de puntos de verificación que ayudan a detectar posibles errores, describen cómo hacer

páginas accesibles sin sacrificar el diseño, ofreciendo esa flexibilidad que es necesaria

para que la información sea accesible bajo diferentes situaciones y proporcionando

métodos que permiten su transformación en páginas útiles e inteligibles.

Cada punto de verificación está asignado a uno de los tres niveles de prioridad

establecidos por las pautas:

Prioridad 1: son aquellos puntos que un desarrollador web tiene que cumplir ya que,

de otra manera, ciertos grupos de usuarios no podrían acceder a la información del

sitio web.

Prioridad 2: son aquellos puntos que un desarrollador web debería cumplir ya que, si

no fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios.

Prioridad 3: son aquellos puntos que un desarrollador web debería cumplir ya que, de

otra forma, algunos usuarios experimentarían ciertas dificultades para acceder a la

información.

En función a estos puntos de verificación se establecen los niveles de conformidad de

accesibilidad :

Nivel de Conformidad “A”: todos los puntos de verificación de prioridad 1 se

satisfacen.

Nivel de Conformidad Doble “AA”: todos los puntos de verificación de prioridad 1 y 2

se satisfacen.

Nivel de Conformidad Triple “AAA”: todos los puntos de verificación de prioridad 1,2

y 3 se satisfacen.

Componentes esenciales de accesibilidad web Contenido: información presente en una página o aplicación web. Esto incluye texto,

imágenes y sonidos, código que define la estructura, etc.

Navegadores web, reproductores multimedia y otros “agentes de usuario”.

Lectores de pantalla, teclados alternativos, software de escaneo, etc.

Conocimiento de los usuarios y experiencia en la utilización Web.

Desarrolladores – diseñadores, codificadores, autores, etc.

Software para crea páginas web, para evaluar la accesibilidad web, validadores de

HTML, validadores de CSS, etc.

Primeros pasos para aprender a hacer una página web

Resumen: Guía sobre como hacer una web. Aprende a hacer una web gratis desde el principio y de forma fácil.

AVISO: este artículo es un capítulo introductorio al resto del manual. En él no se dan

explicaciones específicas sobre la creación de páginas web, simplemente se introduce al

lector en materia para que según sus necesidades e inquietudes profundice en los temas

que le interesen mediante los enlaces que se van sugiriendo durante la lectura. Para una

explicación más concreta sobre los pasos a seguir para hacer una web, hay que leer el

manual completo, no sólo este artículo.

Ahora podemos empezar. Antes de nada, decir que el desarrollo web es un proceso

creativo y personal en el que cada uno decide cómo hacer las cosas, por lo que estos

pasos que te propongo aquí son sólo eso, propuestas, ideas, sugerencias o como quieras

llamarlo. Cada uno después puede optar por hacer las cosas como prefiera.

No obstante, puede ser interesante que visites las

secciones accesibilidad, usabilidad yposicionamiento en buscadores antes de comenzar a

elaborar tu trabajo, ya que cuando las leas comprenderás que hay que tener muchas

cosas en cuenta a la hora de elaborar una web y sus contenidos si queremos tener cierto

éxito.

Una vez aclarado esto, hay que decir que para el diseño de páginas web debemos tener

en cuenta varias etapas:

1. Planteamiento de objetivos para tu página webEsta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel

para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web.

La planificación de tu web debe incluir:

Breve descripción de los contenidos de la página, su título principal, etc.

Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)

Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi

público objetivo, etc.

Hardware, software, documentación que necesito para realizarla y de qué dispongo

realmente.

Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas

físicos, etc. para adaptar la página a sus características.

Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos

específicos, etc.

2. Estructurar el contenido de la páginaEs conveniente que dibujemos un organigrama con todas las partes del sitio web,

distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos

multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la

página web. Antes de empezar a desarrollar tu página web en el ordenador, debes tener

muy claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc. cosas

que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo

inútil y pérdidas de tiempo. Hay varias maneras de estructurar el contenido de una web:

En árbol: Esta estructura está compuesta por una página principal que enlaza con otras

páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta manera

se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último

se debe pasar por todos los intermedios. Esta estructura es poco navegable si tenemos

una web con muchas páginas, porque para ver las páginas de otra rama tenemos que

retroceder hasta la página principal, haciendo la navegación muy pesada.

En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya

que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas

las anteriores. Es una estructuración muy adecuada para la presentación de manuales o

aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para

conseguir su objetivo.

Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están

jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista.

Esta estructura es mucho más navegable y práctica, puesto que permite poder

desplazarse de rama en rama sin necesidad de volver a la página principal para hacerlo.

En red: Esta estructura supone que todas las páginas de la web están conectadas entre

sí, por lo que es una estructura más compleja y menos ordenada. Su ventaja es que desde

cada página podemos ir a cualquier otra del sitio. No obstante, requiere mucha

planificación para evitar ofrecer al visitante un caos de enlaces innecesarios.

Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a

recopilar información para confeccionar cada sección de tu página web. Conforme vayas

investigando sobre el tema de la web, casi con seguridad irás realizando modificaciones

tanto en su estructura como en sus contenidos para adaptarla mejor a lo que has

aprendido, por lo que es conveniente que trabajes sobre borradores, no con versiones

definitivas, te ahorrarás mucho trabajo. Por ejemplo, puedes haber decidido hacer una web

sobre Ferrari, y en cuanto a su diseño querer colocar un menú a la izquierda con las

secciones principales, un cuerpo central con el contenido de la sección y una última

columna a la derecha donde insertar tu publicidad. No obstante, puede ocurrir fácilmente

que al buscar información sobre su escudería encuentres tanta y tan diversa que llegues a

la conclusión de que es más cómodo para los visitantes colocar un menú de

navegación específico de la sección en la izquierda y el principal en la derecha para que

puedan navegar por la sección con rapidez. Por lo que si ya hiciste la página definitiva de

la sección llamada escudería, tendrás que retocarla para adaptarla a tus nuevas

necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario.

3. Diseñar la página webUna vez tengas hecha la estructura, recopilada bastante información y completado el

contenido de varias secciones, tienes suficiente material como para saber con más

precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una de

las páginas de tu web, indicando los elementos interactivos y gráficos que van a intervenir

en cada una. Para esto, y fundamentalmente para manejar los vínculos entre documentos,

se creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para

estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las

páginas web. A la hora de empezar con el diseño, ten en cuenta que:

La estructura de la página debe ser lo más lógica posible facilitando la navegación a

tus visitantes (es importante en este punto la usabilidad). Ninguna página puede

quedar huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas.

Si esto ocurre, es probable que el usuario cierre nuestra página y entre en otra en la

que le sea más fácil navegar por los contenidos.

Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML,

ya que así podrás hacer todo lo que quieras sin depender de editores gráficos como

Dreamweaver (ver manual Dreamweaver), tendrás más flexibilidad y opciones a la

hora de realizar tus diseños, podrás corregir tu código y saber qué es lo que falla

cuando te de errores, entenderás cómo funcionan las páginas de otros webmasters,

etc. En esta misma página, hay un manual HTML muy completo que puedes mirar.

Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para

crear una página atractiva y bien diseñada. Con las hojas de estilo puedes crear un

archivo que te sirva para dar una mejor apariencia a todas tus páginas a la vez, y

siempre que quieras cambiar el aspecto de tu web, sólo tendrás que modificar ese

archivo en lugar de ir una por una revisando cada página de la misma. Si quieres

aprender a usar este lenguaje, en esta misma web hay un manual completo de hojas

de estilo o CSS.

Analizar tu audiencia. Clave de éxito en la Web

Resumen: Aprende a analizar tu audiencia para conocer sus gustos y necesidades y poder montar un negocio exitoso.

Los futuros usuarios de una web deben ser tenidos en cuenta a la hora de diseñarla.

Planear con cuidado tus objetivos es crucial para que un proyecto web tenga éxito. Piensa

en quiénes serán tus lectores, porqué querrían visitar tu web y hasta qué punto puede

interesarles realmente lo que vas a ofrecerles.

Si lanzas un proyecto web sin planificar a qué audiencia específica va a ir dirigido, es

probable que lo estés condenando al fracaso antes de empezar. Puede suceder, y no en

pocas ocasiones de hecho, que lo que piensas que será un éxito en ventas sea un rotundo

fracaso, o que lo que ofreces a tus visitantes no tenga la acogida que esperabas y pase sin

pena ni gloria por el enorme mundo de la WWW. Una razón importante para que esto pase

es que no hayas analizado bien tu nicho de mercado (tus futuros clientes) y lo que

ofrezcas no sea un producto atractivo para ese sector al que te estás enfocando.

La solución a esto es conseguir tráfico segmentado (visitantes interesado en tus productos

o contenidos), y para ello hay varias estrategias.

Estrategias para conocer a tu audiencia

Vigila a la competencia

Si estás planeando lanzar una web supongo que conocerás otras páginas de temática

similar a la tuya. Una buena forma de empezar a conocer los gustos de tu audiencia es

analizar las páginas de la competencia. Mira qué ofrecen, qué secciones tienen, cómo

estructuran los contenidos. Si tienen comentarios en sus artículos o productos analízalos

tambien, observa cuáles generan más polémica, qué dudas plantenan en base a ellos los

usuarios, etc.

Sigue los foros

Localiza foros que hablen sobre la temática de tu web y mira qué asuntos son los más

tratados, las dudas que se exponen, las cosas que les desagradan y les gustan a la

audiencia, o incluso puedes montar una encuesta improvisada para preguntarles sobre lo

que les interesa. Más o menos en la línea de lo anterior.

No te olvides del posicionamiento

El posicionamiento en buscadores es fundamental para lograr el éxito de una web. Estar

en los primeros resultados de los buscadores para las palabras clave que tengan que ver

con tu mercado es una de las mejores formas de segmentar tráfico que existen. Piénsalo

un momento, ¿quién puede haber más interesado en la PSP que vendes en tu web que

alguien que busca información sobre ella en un buscador?.

Cuando realices tus campañas de posicionamiento, procura focalizarlas para promocionar

laspalabras clave más relacionadas con tu web. Por ejemplo, si tienes una tienda de flores

online, algunas palabras que te interesaría posicionar serían “comprar flores” “compra de

flores” “tienda de flores”, etc. Así que cuando des de alta tu web en directorios,

intercambies enlaces y cualquier otra cosa, no te olvides de escribir como título del enlace

tus palabras clave.

En la guía de posicionamiento en buscadores hay más artículos para aprender a

posicionar una web correctamente.

Adwords

Adwords es el sistema publicitario de Google y uno de los más importantes de la Red (por

no decir el más importante). Los anunciantes pagan por aparecer en los promeros puestos

de los resultados de búsqueda para las palabras clave que ellos eligen, y también para

aparecer en páginas webs de su campo. Cuando comienzas un proyecto web y aún tienes

pocas visitas (audiencia), o cuando quieres promocionar un producto específico, un

servicio o cualquier otra cosa, utilizar Adwords puede ser muy útil, ya que es una potente

herramienta para segmentar el tráfico si se usa bien.

Lo mismo que ocurre con el posicionamiento, con Adwords se deben elegir bien las

palabras clave que se van a usar para hacer los anuncios, hay que probar constantemente

cuáles son los más rentables e ir afinando nuestra campaña publicitaria para acercarnos a

nuestra audiencia, pero es una gran fuente de visitas interesadas en nuestros contenidos

si sabemos usarlo como se debe y puede indicarnos que palabras clave atraen más

visitantes interesados en nuestros productos para centrarnos en ellas en el

posicionamiento.

No caigas en el error de anunciarte por palabras muy genéricas, esto es una pérdida de

tiempo. Párate a pensar cuáles son las partes más jugosas de tu web y a qué clase de

personas les interesaría para centrarte en ellas.

Encuestas

Las encuestas son una de las formas tradicionales de sondear a tus usuarios acerca de

sus gustos. Son un buen recurso porque te permiten plantear la duda exacta que creas

oportuno a tu audiencia. Puedes preguntarles si les gusta un producto concreto, si

consideran util tal sección, qué tipo de contenido les gustaría que se incluyera y cualquier

otra cosa que se te ocurra.

No obstante, es una forma de conocer a tu audiencia que resulta útil sobre todo una vez la

web está creada y funcionando, para ir adaptándonos a los cambios que surgen en el

mercado.

Hay servicios de encuestas gratuitos por ahí que te ahorran tener que instalar scripts en tu

web, depende de los gustos de cada uno, pero algunos interesantes

son: interrogantes,tusencuestas.com, encuestas ya.com, etc.

Estadísticas

En la misma línea que lo anterior, las estadísticas web sirven para conocer a tu audiencia

después de que la página está hecha. Es útil mirar cuáles son las páginas más visitadas

de tu sitio para seguir creando contenido, cuál es el porcentaje de abondonos en la página

de acceso (señal de que no les interesa lo que ven), el número de páginas visitadas por

usuario, el tiempo que permanecen en la web, etc.

Algunas estadísticas gratuitas realmente útiles son: Google Analytics y StatCounter.

Webs sociales

Hay que adaptarse a las nuevas tendencias que surgen en Internet si queremos ser los

primeros en nuestro campo, y actualmente el tema de las webs sociales del tipo Digg o

Menéame se ha vuelto muy popular. Con algo de ingenio podemos utilizar esto para

nuestro beneficio conociendo un poquito más sobre nuestra audiencia.

Una primera opcción que tenemos con las webs sociales es analizar las noticias que envía

la gente acerca del tema que trata nuestra web. Por ejemplo, si tu web es sobre coches

sería bueno que empezaras buscando esa palabra en alguna de las muchas webs sociales

que existen actualmente, para ver cuáles son las noticias más votadas y cuáles las que

menos interesan. En general, ver que se cuece en tu campo. Otra opción, si tienes algún

pluggin instalado para que tus usuarios puedan enviar noticias a estas páginas, es ver

cuáles son las noticias dentro de tu web que más envía la gente. Es de suponer que son

éstas las que consideran más interesantes y por tanto, puedes seguir escribiendo en

relación a esos temas.

Una vez conozcas un poco más a tu audiencia y les proporciones los contenidos que les

interesan, verás como ciertos cambios ocurren en tu web. Por ejemplo, es esperable que

el número de páginas vistas por usuario aumente, los suscriptores a tu feed o a tu boletín

de novedades, los productos vendidos, etc. además de contribuir a la fidelización de

usuarios. No obstante, no es bueno relajarse y dejar de analizar a tu audiencia, ya que los

gustos de la gente cambian y lo que te resulta rentable hoy puede no serlo mañana. No

dejes de revisar tus estadísticas, a tu competencia y lo que se habla en los foros.

Recuerda, conocer el tipo de productos e información que tu audiencia quiere es necesario

para el desarrollo del contenido y el diseño apropiado de tu web.

Como planificar una página web

Resumen: Planifica los objetivos y recursos de tu web para ahorrar tiempo de desarrollo y tener éxito en Internet.

Una vez has establecido tu nicho de mercado y has analizado tu audiencia el siguiente

paso esplanificar los recursos de la web.

Muchas páginas web son desarrolladas sobre la marcha sin una planificación concreta de

sus objetivos y recursos. Como consecuencia, muchos sitios duran poco en Internet

perdiendo la oportunidad de convertirse en buenos proyectos. Pensar antes de actuar, y

estar seguros de que tenemos los recursos, capacidades y posibilidades suficientes para

hacer que un proyecto tenga éxito, son partes fundamentales (y olvidadas) del diseño web.

Este proceso inicial implica elegir un tipo determinado de audiencia y unos objetivos claros.

Productos y objetivosDebes elegir el producto que vas a ofrecer a tus visitantes, ya sea información, objetos

físicos o servicios. ¿Es algo que vas a hacer desde casa o necesitas un soporte externo?,

¿quién gestionará la venta?… También sería bueno tener una idea de lo que quieres

conseguir con tu web, montar un negocio, una web informativa, pasar el rato…

Recursos ¿Soy capaz yo solo de hacer una web?: si la respuesta es no, ya puedes empezar

aaprender HTML y estudiar tutoriales como éste. Descubrirás que el diseño web no es

tan difícil como en un principio parece.

¿Qué ancho de banda necesito?: normalmente al empezar un proyecto pequeño con 1

GB tendrás suficiente, pero hay calculadoras muy buenas que te pueden ayudar a

estimar el ancho de banda que necesitarás.

¿Cuánto espacio para almacenar la web?: por lo general no necesitarás más de 100 ó

200 MB para empezar y te sobrará.

¿De cuánto dinero dispongo?: hoy en día no hace falta gastarse mucho dinero para

tener una página en Internet. El precio de los dominios es asequible para la mayoría y

losservicios de alojamiento web también tienen precios competitivos. Por lo demás,

deberás decidir si gastar una parte de tu presupuesto en publicidad como Adsense o a

otro tipo de servicios como listas de correo y demás. Obviamente, con un poco de

paciencia se pueden encontrar un montón de buenos servicios gratuitos, no compres

lo primero que encuentres.

Tecnología ¿Con qué lenguaje desarrollo la página web?: para páginas estáticas que no se

actualizan muy a menudo, el HTML es más que suficiente, pero si planeas tener una

página muy actualizada y con contenido dinámico es mejor decantarse por lenguajes

como PHP o ASP.

¿Qué tipo de soporte voy a proporcionar?: es importante incluir funcionalidades en la

página web que faciliten la comunicación con el usuario. Imprescindible un formulario

de contacto o el área de preguntas frecuentes, como opcionales los foros o chats

pueden añadir valor a la web.

¿Voy a utilizar registro de usuarios?: si vas a ofrecer secciones exclusivas para

usuarios o cosas así, la tecnología necesaria será más complicada que para hacer una

página basada en html, necesitarás trabajar con bases de datos.

¿Cómo analizo el uso de mi web?: necesitas analizar tu audiencia para saber si vas

por buen camino. No se puede crear una web de éxito a ciegas, es importante que

utilices unsistema de estadísticas web que te oriente en las decisiones que tomes

acerca de tu web. Uno gratuito bastante bueno es StatCounter.

Encontrar un nicho de mercado rentable para tu página web

Resumen: Para tener éxito con tu web, tendrás que dirigirte a un público muy específico dentro de un tema concreto.

Si quieres hacerte un hueco en la sobrecargada Red, tendrás que escoger muy bien

tu nicho de mercado, es decir, tendrás que dirigirte a un público muy específico dentro

de un tema concreto. Por ejemplo, el tema del automovilismo está bastante explotado en

Internet, pero puedes centrarte en algo específico dentro de este mercado que no tenga

tanta oferta (competencia), como podrían ser coches de la marca A. Puedes seguir

afinando un poco más y centrarte en hacer únicamente revisiones de coches de la marca

A, o incluso más y hacer sólo revisiones de monovolúmenes de la marca A. Tal vez en un

nicho de mercado tan específico tengas más oportunidades de destacar.

Por lo dicho hasta ahora tal vez puedas pensar que al centrarte en algo tan concreto el

número de potenciales usuarios es mucho menor que hablando de todos los coches de la

marca A. En parte llevas razón, hay muchas más búsquedas relacionadas con todos los

coches que sólo con monovolúmenes, pero eso al fin y al cabo no es importante si no vas

a conseguir estar el primero en buscadores para las búsquedas que te interesan. No tiene

importancia que mucha gente busque sobre ese tema si no te van a encontrar a ti. En

cambio, centrándote en un nicho más pequeño, aunque haya menos potenciales

visitantes tienes más probabilidades de que lleguen a tu web porque no hay tanta

competencia.

El verdadero potencial se encuentra en los nichos pequeños, ahí es donde puedes

conseguir un éxito aceptable. Además, hacer una web sobre un tema muy genérico implica

mucho más esfuerzo. Todo el material que hay que reunir, la elaboración de textos, el

tiempo que requiere… Es mejor profundizar mucho en un tema y ser el mejor en él, que

intentar abarcar demasiado y no destacar en nada.

La clave es esta: no intentes contentar a todo el mundo, conviértete en un especialista.

Razones por las que un nicho de mercado pequeño es bueno para ti Puedes concentrar tus esfuerzos en un tema concreto para ofrecer cosas novedosas,

dar mucha información y destacar.

El posicionamiento en buscadores te será más fácil al centrarte en un mercado en el

que no hay tanta competencia como para otros más genéricos.

Es más fácil definir el público objetivo. Al ser un tema muy concreto, definir el tipo de

audiencia y centrarte en lo que necesitan es más sencillo.

Los esfuerzo y recursos requeridos para desarrollar un proyecto así son menores.

Trabajar para un tema genérico requiere conocimientos y tiempo que en la mayoría de

los casos no se tienen.

Para elegir tu nicho de mercado debes tener en cuenta tus hobbies, los temas que

dominas, que te gustan y te motivan. Tener ganas de trabajar en algo es la mejor manera

de hacerlo bien. No elijas un tema para tu web que no te interese o no te guste porque te

acabarás aburriendo y la tarea resultará desagradable.

Elegir el nicho de mercado adecuado El nicho de mercado adecuado es aquel en el que tienes posibilidades de tener una

alta visibilidad y accesibilidad a las personas que se beneficiarán de lo que ofreces.

Es aquel en el que puedes emplear tu talento, tus conocimientos y es además una

afición.

Cómo encontrar un buen nicho de mercado Encuentra temas o productos que te apasionen y conozcas en profundidad.

Calcula las posibilidades de cada tema que hayas seleccionado anteriormente. Para

eso:

o Determina la demanda: una forma de hacerlo puede ser elaborar una lista con las

palabras o frases relacionadas con cada tema e investigarlas con la herramienta

de palabras clave de Adwords. Esta herramienta te ofrece datos sobre el número

de búsquedas que pueden orientarte para saber si a la gente le interesa el tema o

no.

o Determina la competencia: con la misma herramienta anterior puedes ver la

competencia que hay para cada palabra seleccionada. La clave está en elegir los

temas que tengan más demanda y menos competencia.

Realiza sondeos: una vez hayas escogido uno o varios de los temas para tu página

web en base a los parámetros anteriores, es conveniente hacer una encuesta para

estimar el grado de aceptación que tendría tu página y decantarte por alguno. Hay

páginas web como ya.com que tienen montada toda una comunidad alrededor de

las encuestas. Puedes poner tu encuesta en estos sitios para intentar que la conteste

el mayor número de personas posibles, o también puedes preguntar en foros y zonas

de debate.

Como organizar una página web. Diseño de la estructura

Resumen: Ideas básicas para crear una estructura para tu web efectiva y usable que llegue a más visitantes

Llegados a este punto necesita definir la organización de la información de tu sitio web. Es

decir, ha llegado el momento de crear la estructura de tu web, su esqueleto, la base que

soportará todo lo demás. La forma en que estructures el contenido de tu web será

determinante para que los usuarios encuentren o no lo que buscan (algo muy relacionado

con la usabilidad). Por tanto, ésta debe facilitar y agilizar al máximo la búsqueda de

información de tus visitantes. Al mismo tiempo, también es importante diseñar la estructura

de forma que actualizaciones futuras de la web no obliguen a cambiar muchas partes de la

página.

Para crear la estructura, puede ser útil hacer un inventario de todo el material que vas a

exponer en la página e ir organizándolo en un primero momento por temas para después

construir gráficamente la estructura de la web.

Aunque poca gente lo hace, es muy útil construir varios prototipos (o bocetos) de tu web y

probar la reacción de los usuarios ante ellos. Esto de comprobar la reacción parece más

complicado de lo que crees, pero un método casero y sencillo que puede aportar

información para saber si la estructura del sitio es fácil de comprender y manejar, es hacer

varias plantillas con diferentes estructuras y pedir a amigos y familiares que naveguen por

ellas y nos den su impresión. Cuál les resulta más fácil de entender, más atractiva, en cuál

se encuentra mejor una determinada información, en cuál están más claros los contenidos

a los que dirigen los enlaces, etc.

Página de inicioLa página de inicio es la principal puerta de entrada de visitas a tu página, por lo que

debe poder atrapar al mayor número de visitantes que entren. Para ello, debes adaptar su

estructura a tu público objetivo, haciendo bien visibles los contenidos que más pueden

interesarles. También es importante dejar claro desde el principio el tema de la web, y para

eso la página de inicio es una buena herramienta. Especifica claramente qué se va a

encontrar el usuario al explorar tu página, a la gente no le gusta perder el tiempo y a ti no

te interesan visitas de este tipo porque no aportan ningún beneficio a tu web.

Por otro lado, algo tan sencillo como incluir un enlace bien visible a la página principal en

todas tus páginas facilita muchísimo la navegación. En este sentido, algo que se usa

mucho y también ayuda a los usuarios a navegar por tu web es poner un enlace en el

banner o logo de la cabecera que apunte a la página principal del sitio.

Diseño del menú de navegaciónUna de las cosas más importantes a la hora de estructurar la página es el diseño del menú

de navegación.

Echa un vistazo a la estructura inicial que creaste, ¿cuáles son las secciones más

grandes?, ¿cuáles agrupan más contenido?, esas pueden ser las secciones que incluyas

en el menú principal y que sería conveniente que aparecieran en cada página de tu web

para facilitar la navegación. Ahora bien, una vez dentro de cada sección concreta, el menú

puede modificarse para mostrar las opciones específicas que ofrece esa sección (además

de enlaces a las secciones principales).

No hay que olvidar que otro tipo de páginas como información acerca de la web, aviso

legal, política de privacidad, formulario de contacto, etc, deben estar convenientemente

visibles, por lo que muchas páginas optan por incluir un menú horizontal a pie de página

para enlazar con estas secciones.

Tipos de estructuras de sitios webYa se han comentado en este tutorial los principales tipos de estructuras que se usan en la

web, si te interesa puedes echarle un vistazo al artículo:

Estructurar el contenido de la página web.

Por qué registrar tu propio nombre de dominio

Resumen: Por que es importante tener un nombre de dominio y consejos en el registro.

Si tienes una página web pero no un nombre de dominio propio, del tipo www.miweb.com,

deberías considerar seriamente registrar uno. Como se ha dicho hasta la saciedad, un

nombre de dominio es tu marca en Internet, la forma que tendrán los demás de

reconocerte y recordarte.

Lo mejor sería tener en cuenta el registro del dominio desde el primer momento, cuando te

dedicas a planificar la web, los objetivos, de qué va a tratar, el dinero de que dispones, etc.

Pero si ya la tienes hecha siempre puedes plantearte esta posibilidad después.

La importancia de tener un nombre de dominio Si tienes un negocio o pretendes tener una web seria, un dominio propio te

proporcionará credibilidad y un sentido de estabilidad. Las páginas gratuitas, del

tipo www.geocities.com/miespacioweb/pagina.html pueden estar bien si no vas en

serio, pero para hacer una web importante o un negocio es muy conveniente utilizar un

nombre de dominio propio.

Si eliges un nombre de dominio que refleje bien los objetivos de tu página y que

además sea fácil, tus visitantes lo recordarán más fácilmente y podrán regresar a ti con

mayor probabilidad si necesitan lo que tu ofreces.

Si cambias de hosting no tendrás que modificar nada del código de tu web. La

mayoría de los dominios gratuitos los ofrecen las empresas que brindan espacio web

gratuito, por lo que si pasado un tiempo no estás contento con ese hosting, al cambiar

a otra empresa tendrás que cambiar de dirección web. Esto es muy malo para

el posicionamiento en buscadores, pues supone empezar de nuevo en

la promoción del dominio, empezar a subir posiciones otra vez, conseguir enlaces, etc.

Si tienes contratado un servicio de alojamiento web para tu página, el nombre de

dominio parece el siguiente paso.Piénsalo, sabes la importancia de tener un buen

hosting; no hay publicidad que tu no hayas contratado, no salen popups molestos, es

rápido de cargar y falla lo menos posible. Todo eso mejora la experiencia del usuario,

te da credibilidad y cierta seguridad. Un nombre de dominio refuerza esa credibilidad

de los usuarios en lo que ofreces.

Cosas que hay que saber para registrar un dominioEn primer lugar, el precio anual de un nombre de dominio es bastante bajo, lo que

implica que es asequible para la mayoría de personas que tienen una web. Es cierto que

varía según el país, en España por ejemplo se pueden registrar por un precio entre los 9-

10 euros y los 20 aproximadamente. Cada tanto hay ofertas que te permiten conseguir

dominios a precios más bajos aún, y también hay compañías que te cobrarán más por

ellos si te dejas. El punto está en comparar precios y servicios.

Es muy importante que la empresa te asegure tener el control del dominio, poder modificar

la dirección a la que apuntan las DNS si lo deseas y figurar como propietario del mismo.

De lo contrario puedes tener problemas para dirigirlo a otro hosting, renovarlo, etc.

No te preocupes si al buscar un nombre de dominio para tu web descubres que las

palabras que querías están registradas ya. Es muy frecuente, la clave está en encontrar un

equilibrio entre la originalidad y la práctica. Por ejemplo, puede que a tu tienda de flores le

viniera muy bien tener el dominio www.ventadeflores.com, pero está cogido, por lo que

puedes probar con www.ventadeflorespaco.com, o cosas parecidas.

Por último, recuerda que el registro de dominio no es para toda la vida, tienes que estar

atento cada año para renovarlo y no pasarte del plazo, o de lo contrario alguna persona

podría adelantarse y renovarlo a su nombre, lo que significa que todo el trabajo que hayas

hecho en base a ese dominio lo habrás perdido.

Como añadir imágenes a una página web

Resumen: Guía sobre como añadir imágenes a una página web y darles formato.

Para añadir imágenes a una página web hay que escribir el siguiente código HTML:

<img src="archivo.jpg">

src indica la ruta del archivo. Si el archivo de imagen se encuentra en la mísma carpeta

que la página web se escribiría como en el ejemplo, pero si se encuentra en una carpeta

distinta la ruta podría ser así:

src="carpeta/archivo.jpg".

También se puede llamar a una imagen con la dirección completa:

src="http://www.web.com/images/archivo.gif".

Ahora bien, es conveniente añadir otros atributos al código de la imagen:

Alto y ancho: es conveniente determinar el ancho y alto de una imagen para evitar al

navegador operaciones innecesarias y facilitar que cargue más rápido la página. Para

esto se utilizan las etiquetas height (alto) y width (ancho). Siempre es recomendable

establecer estos atributos. Por ejemplo:

<img src="archivo.jpg" width="300" height="150">

En este caso la imagen tendría un ancho de 300 píxeles y un alto de 150 píxeles.

Imágenes con enlaces: uno de los mayores usos que se le dan a las imágenes en la

webes el de vinculr archivos, utilizarlas como enlaces. Ejemplo:

<a href="carpeta/web.html"><img src="archivo.gif"></a>

Donde href establece la ruta de la página a la que dirigirá la imagen. Otro ejemplo:

<a href="http://www.lawebera.es/">

<img src="carpeta/archivo.gif"></a>

Atributo alt: este atributo especifica un texto alternativo que se muestra en lugar de la

imagen cuando ésta no existe o el navegador no es capaz de cargarla. En estos

casos, el texto alternativo es la única forma que tienen los visitantes de conocer el

contenido de la imagen. El atributo alt se expresa así:

<img src="nombrearchivo.jpg"

alt="texto alternativo a mi gusto">

Establecer el borde: toda imagen en la web puede tener un borde de un grosor

determinado. Según tus preferencias podrás determinar si la imagen tiene o no borde,

y en caso de tenerlo su grosor. Ejemplos:

Imagen sin borde:

<img src="nombrearchivo.jpg" border="0">

Imagen con borde de 3 píxeles:

<img src="nombrearchivo.jpg" border="3">

Atributos completos del código de la imagen

Con todo lo anterior, podemos definir bastante bien las propiedades básicas de la imagen

(recordemos que es muy importante el uso de imagenes en los blogs y en portales web).

Para denifir otro tipo de detalles visuales hay que hacer uso de CSS. Veamos un ejemplo

con lo aprendido:

<a href="paginaweb.html">

<img src="archivo.gif" width="300"

height="150" border="5"

alt="texto alternativo de la imagen"></a>

Algunos errores comunes en la utilización de imágenes en la web Reducir el tamaño de la imagen directamente en el editor de HTML: si haces esto, no

estás reduciendo realmente la imagen, le estás diciendo al navegador que la

redimensione en el momento, pero su tamaño (y lo que ocupa) sigue siendo igual y la

página tarda una eternidad en cargar. Como consecuencia, puede ocurrir que tengas

una imagen muy pequena en tu web que tarda mucho en cargar, porque en realidad es

enorme. Para cambiar el tamaño de una imagen utiliza un editor de imágenes, así el

peso también se reducirá y la página web tardará menos en cargar.

Usar imágenes en formato BMP: por suerte, este formato está desapareciendo cada

vez más de la web, y digo con suerte porque es un tipo de formato que no comprime la

imagen, por lo que ésta es muy pesada y ralentiza mucho la carga de la página. Es

mejor usar imágenes .gif, .jpg o .png.

No poner etiquetas alt: las imágenes son importantes en la web, pero no añaden

contenido a la página, por lo que añadir una pequeña descripción a la imagen resulta

muy útil de cara al posicionamiento en buscadores ya que da información a los

buscadores acerca del tema de tu web. Ni que decir tiene que en los navegadores en

los que las imágenes no se muestran en su lugar aparece el texto escrito en esta

etiqueta, por lo que los usuarios que los utilizan tienen una guía para saber qué

imagen había si escribes un texto descriptivo, algo que mejora mucho la accesibilidad

web.

Donde encontrar imágenes webUna alternativa a la creación de imágenes propias para tu web, es utilizar las que existen

disponibles en Internet para su libre uso. Algunas páginas donde puedes comenzar a

buscar son:

FreeFoto.com : cuenta con una enorme colección de fotografías que se pueden usar

libremente para complementar nuestras webs.

IconShock : esta web tiene una sección de iconos gratuitos para utilizar en nuestra

página web de muy buena calidad.

FreeImages.co.uk : en la línea de las anteriores webs, cuentan con una gran colección

de imágenes listas para usar.

Yotophoto : en un buscador de imágenes con licencia copyleft, GNU y demás licencias

que permiten la distribución. Muy útil.

Para añadir imágenes a una página web hay que escribir el siguiente código HTML:

<img src="archivo.jpg">

src indica la ruta del archivo. Si el archivo de imagen se encuentra en la mísma carpeta

que la página web se escribiría como en el ejemplo, pero si se encuentra en una carpeta

distinta la ruta podría ser así:

src="carpeta/archivo.jpg".

También se puede llamar a una imagen con la dirección completa:

src="http://www.web.com/images/archivo.gif".

Ahora bien, es conveniente añadir otros atributos al código de la imagen:

Alto y ancho: es conveniente determinar el ancho y alto de una imagen para evitar al

navegador operaciones innecesarias y facilitar que cargue más rápido la página. Para

esto se utilizan las etiquetas height (alto) y width (ancho). Siempre es recomendable

establecer estos atributos. Por ejemplo:

<img src="archivo.jpg" width="300" height="150">

En este caso la imagen tendría un ancho de 300 píxeles y un alto de 150 píxeles.

Imágenes con enlaces: uno de los mayores usos que se le dan a las imágenes en la

webes el de vinculr archivos, utilizarlas como enlaces. Ejemplo:

<a href="carpeta/web.html"><img src="archivo.gif"></a>

Donde href establece la ruta de la página a la que dirigirá la imagen. Otro ejemplo:

<a href="http://www.lawebera.es/">

<img src="carpeta/archivo.gif"></a>

Atributo alt: este atributo especifica un texto alternativo que se muestra en lugar de la

imagen cuando ésta no existe o el navegador no es capaz de cargarla. En estos

casos, el texto alternativo es la única forma que tienen los visitantes de conocer el

contenido de la imagen. El atributo alt se expresa así:

<img src="nombrearchivo.jpg"

alt="texto alternativo a mi gusto">

Establecer el borde: toda imagen en la web puede tener un borde de un grosor

determinado. Según tus preferencias podrás determinar si la imagen tiene o no borde,

y en caso de tenerlo su grosor. Ejemplos:

Imagen sin borde:

<img src="nombrearchivo.jpg" border="0">

Imagen con borde de 3 píxeles:

<img src="nombrearchivo.jpg" border="3">

Atributos completos del código de la imagen

Con todo lo anterior, podemos definir bastante bien las propiedades básicas de la imagen

(recordemos que es muy importante el uso de imagenes en los blogs y en portales web).

Para denifir otro tipo de detalles visuales hay que hacer uso de CSS. Veamos un ejemplo

con lo aprendido:

<a href="paginaweb.html">

<img src="archivo.gif" width="300"

height="150" border="5"

alt="texto alternativo de la imagen"></a>

Algunos errores comunes en la utilización de imágenes en la web Reducir el tamaño de la imagen directamente en el editor de HTML: si haces esto, no

estás reduciendo realmente la imagen, le estás diciendo al navegador que la

redimensione en el momento, pero su tamaño (y lo que ocupa) sigue siendo igual y la

página tarda una eternidad en cargar. Como consecuencia, puede ocurrir que tengas

una imagen muy pequena en tu web que tarda mucho en cargar, porque en realidad es

enorme. Para cambiar el tamaño de una imagen utiliza un editor de imágenes, así el

peso también se reducirá y la página web tardará menos en cargar.

Usar imágenes en formato BMP: por suerte, este formato está desapareciendo cada

vez más de la web, y digo con suerte porque es un tipo de formato que no comprime la

imagen, por lo que ésta es muy pesada y ralentiza mucho la carga de la página. Es

mejor usar imágenes .gif, .jpg o .png.

No poner etiquetas alt: las imágenes son importantes en la web, pero no añaden

contenido a la página, por lo que añadir una pequeña descripción a la imagen resulta

muy útil de cara al posicionamiento en buscadores ya que da información a los

buscadores acerca del tema de tu web. Ni que decir tiene que en los navegadores en

los que las imágenes no se muestran en su lugar aparece el texto escrito en esta

etiqueta, por lo que los usuarios que los utilizan tienen una guía para saber qué

imagen había si escribes un texto descriptivo, algo que mejora mucho la accesibilidad

web.

Donde encontrar imágenes webUna alternativa a la creación de imágenes propias para tu web, es utilizar las que existen

disponibles en Internet para su libre uso. Algunas páginas donde puedes comenzar a

buscar son:

FreeFoto.com : cuenta con una enorme colección de fotografías que se pueden usar

libremente para complementar nuestras webs.

IconShock : esta web tiene una sección de iconos gratuitos para utilizar en nuestra

página web de muy buena calidad.

FreeImages.co.uk : en la línea de las anteriores webs, cuentan con una gran colección

de imágenes listas para usar.

Yotophoto : en un buscador de imágenes con licencia copyleft, GNU y demás licencias

que permiten la distribución. Muy útil.

Tratamiento de imágenes para la web

Resumen: Edición y uso de los distintos tipos de imágenes en la web, así como su optimización para que ocupen lo menos posible.

Las imágenes son una parte importante de la web. De hecho, la mayoría de las páginas

web distribuyen su espacio entre texto e imágenes.

Éstas añaden una nota de color a los sitios y si se usan correctamente, ayudan al usuario

a entender de lo que se está hablando.

Tipos de imágenesLos formatos de imágenes web más usados son .gif, .jpg y .png:

GIF: es un formato de archivo sin pérdida, es decir, se conserva cada pixel de la

imágen original, lo que implica que el tamaño suele ser mayor que en formatos .JPG.

No obstante, para gráficos sencillos con pocos colores es muy eficiente. Sin duda su

mayor ventaja frente a los otros formatos es que permite crear animaciones

JPG: comprime mucho más las imágenes que los formatos .GIF, por lo que los

archivos pesan menos. Es excelente para trabajar con fotografías de muchos colores y

texturas, mantiene la calidad con pesos de imagen realmente bajos. Como

inconveniente pierde algo de información y puede afectar a su calidad, pero en la

mayoría de los casos no es apreciable a simple vista. No permite crear imágenes

animadas.

PNG: este formato surgió como alternativa al .GIF debido a algunos problemas legales

que empezaron a surgir de su uso. Es, por tanto, muy similar a éste, salvo que no

permite crear animaciones.

Herramientas de edición de imágenesYa se comentó brevemente en este manual (hacer una web) un poco acerca de

los editores de imágenes. Si haces páginas webs deberías tener en tu ordenador un

programa de este tipo para poder editar las imágenes a tu gusto.

Algunos programas muy buenos son Gimp (gratuito) o Photoshop (de pago, aunque existe

versión de prueba), lo mejor es que pruebes tu mismo el que más te gusta.

Edición de imágenesPara crear tu web, necesitarás algún programa de edición de imágenes que te permita

modificarlas, cambiar el tamaño, añadirles notas de texto, cambiar el formato y sobre todo

optimizarlas para la web.

Puede parecer algo complementario, pero conforme vayas creando tu web te darás cuenta

de que necesitas un programa que te permita editar tus imágenes, ya sea de forma

sencilla, como por ejemplo recortando o ampliando su tamaño, o con métodos más

sofisticados como los filtros de imagen.

Algunas de las cosas más básicas que se pueden hacer con estos editores de imágenes y

que nos sirven de ejemplo, son:

Recortar una imagen

Esto es muy útil para eliminar de la imagen partes que no queremos. Por ejemplo, puede

venirte muy bien la foto de un paisaje como este, pero no querer incluir el marco amarillo:

Redimensionar la imagen

A menudo una imagen es más grande o más pequeña de lo que necesitamos, y aunque

puede establecerse su tamaño exacto mediante los atributos width y height, no es la forma

adecuada de cambiar su tamaño, ya que en realidad no lo estamos modificando, lo que

estamos cambiando es su forma de verse en el navegador (el archivo sigue teniendo el

mismo tamaño). La mejor opción es utilizar un programa de dibujo como el Photoshop que

cambie el tamaño real de la imagen.

Rotar una imagen

En ocasiones es útil cambiar la orientación de una imagen, pra esto se puede usar

cualquier editor gráfico. Puede rotarse de forma vertical u horizontal en varios angulos, en

la mayoría de los programas buenos te permite rotar la imagen un número determinado de

grados.

Filtros de imagen

Los filtros pueden llegar a transformar una imagen por completo dándole efectos

increíbles. Con ellos, podrás dar a tus imágenes un aire diferente. Lo mejor para

comprenderlo es ver algunos ejemplos, éstos en concreto han sido hecho con Photoshop:

Imagen original:

Filtros aplicados:

Optimizar las imágenesCon optimizar imágenes me refiero a conseguir que ocupen lo menos posible y conserven

una buena calidad de imagen. Si las imágenes son muy pesadas (si su tamaño es muy

grande), laspáginas web tardan mucho en cargar y hacemos esperar a los usuarios, lo que

no conviene en ningún caso. Cuanto menos ocupen más rápido cargará tu página y menos

harás esperar a tus visitantes.

Algunas direcciones útiles para optimizar imágenes online son Virtualzone,

o SiteReportCard.

Como guardar las páginas web en el servidor

Resumen: Como guardar las páginas web para que no haya problemas al subirlas al servidor.

Una vez tienes hecha la página, ésta debe ser guardada en formato HTML para que pueda

ser vista en los diferentes navegadores y no te de errores al subir los archivos al servidor

web   . Para esto, tienes que elegir guardar como HTML, así toda la estructura que hayas

creado, con sus enlaces, colores, tamaños de fuente y demás, se guardarán

correctamente.

Pero tienes que tener algunas cosas en cuenta para elegir el nombre del archivo:

El nombre no puede contener espacios: No puedes guardar una página con el

nombrepagina web.html, ésta debería guardarse de alguna de estas

formas: paginaweb.html,pagina_web.html o pagina-web.html. Normalmente

los servidores web no permiten archivos con espacios, así que siempre hay que utiliza

guiones o varias palabras juntas.

El archivo siempre debe acabar en HTML o HTM: la extensión del archivo debe

ser .html o .htm para que te guarde la página web en el formato correcto y no haya

errores. Puedes usar uno de los dos indistintamente, funcionan igual, pero

personalmente considero que es más correcto usar .html, al fin y al cabo estamos

hablando de lenguaje HTML, no HTM. En el caso de páginas dinámicas si extensión

debe ser .php, .asp, etc. dependiendo de la tencología que utilices. Para páginas

estáticas puedes usar la extensión .html.

No están permitidos los acentos ni símbolos extraños: como $, %, ^, &. No puedes

guardar una página como página^web.html, por ejemplo, más que nada porque

al subirla a tu servidor tendrás problemas en la mayoría de hostings, normalmente no

se suelen permitir archivos con estos caracteres especiales.

No escribas los nombres de archivo en mayúsculas: es mucho mejor

utilizarpaginaweb.html que PAGINAWEB.HTML. La página se vería igual de las dos

maneras, en este caso los servidores web no suelen tener problemas para mostrarlas,

el problema es que la gente suele escribir las direcciones web en minúsculas. Al

escribir una dirección directamente en el navegador, ésta se busca tal cual se ha

escrito (incluyendo mayúsculas y minúsculas), por lo que si tu página tiene el nombre

en mayúsculas y un visitante lo escribe bien, pero en minúsculas (que es lo más

habitual), dará un error 404 (página no encontrada). Esto sucede porque se diferencia

entre mayúsculas y minúsculas, dando lugar a considerarlo como distintos archivos.

Nota que para el navegador son diferentes todos estos archivos, aunque tengan el

mismo nombre: web.html, WEB.html, WEB.HTML, Web.html, WeB.Html, etc.

Si quieres saber como se hace una web desde cero, puedes leer el manual empezar de

cero a hacer una web. También es conveniente profundizar más en la estructura del

lenguaje HTML, para ello puedes aprender a través de algún manual de HTML, tendrás

mayor control sobre el desarrollo de tu web y te será más fácil hacer cambios y

mantenerla.

Programas para hacer tus páginas web

Resumen: Guía de los programas de edición web, ya sean editores de texto como WYSIWYG y también una breve reseña a los templates o plantillas web prefabricadas.

Usar un editor visual de HTML (WYSIWYG)Algunos editores muy conocidos son Dreamweaver, Go Live o NVU. Son software

especializado en la creación de sitios web, construidos para crear y modificar el

código HTML, CSS, PHP, etc. de tus páginas web. Tienen funciones muy útiles para un

diseñador web, como el editor gráfico, que te permite crear webs con pocos conocimientos

de HTML ya que se asemeja a un procesador de textos. Otras funciones muy interesantes

de estos programas son el permitir remplazar código de múltiples páginas a la vez, la

comprobación de errores de programación en el código, previsualizar las páginas en

diferentes navegadores, etc. En esta misma web hay unmanual de Dreamweaver para que

aprendas a manejarlo.

Lo más interesante sin duda para una persona que está aprendiendo a hacer webs es el

editor gráfico. Tú creas la página como si del Word se tratara; escribes el texto, los títulos,

pones las imágenes, eliges los colores, etc. y el programa te guarda la página con el

código HTML listo. Es lo que se llama What You See Is What You Get (WYSIWYG), lo que

ves es lo que obtienes. Se les llama así con razón, puesto que utilizandolos no es

necesario escribir nada de código HTML para crear una página web.

La desventaja que tienen estos programas es que si no sabes nada de HTML el diseño de

tu página va a estar algo limitado, porque con el editor gráfico se pueden hacer cosas

básicas o intermedias, pero para funciones más complicadas es muy recomendable saber

un poco de HTML.

Usar un editor de textos o de HTMLSi sabes HTML una buena opción es programar tú mismo todo el código de tu web

medianteeditores de código fuente como el Block de notas de Windows (no está

diseñado para eso pero puede usarse), o algunos un poco más especializados

como Notepad. Éste último te colorea el código de diferentes tonos según el tipo de código

que tenga la página, lo cual resulta muy útil para buscar fragmentos de un vistazo.

Los editores de texto son programas simples pero muy eficaces que permiten

guardar documentos de texto sin formato. Al no ofrecer ningún tipo de guía visual, al

contrario que los editores HTML o WYSIWYG, son los más complicados de utilizar

para los que empiezar a hacer páginas web.

Los editores de HTML son básicamente editores de texto diseñados específicamente

para hacer páginas web, por tanto traen incorporadas funcionalidades que no tienen

los editores de texto genéricos, y que facilitan mucho las cosas.

Otros recursos para hacer tus webs

Usar plantillas prefabricadas (templates)

Una plantilla prefabricada (o template) es un diseño ya hecho listo para que lo personalices

y adaptes a tu web. En realidad el diseño ya está hecho, osea que no tendrás que “hacer

la web” literalmente, pero en tus manos está adaptarlo exáctamente a lo que quieras.

Obviamente para adaptarlo a tus necesidades tendrás que utilizar un editor WYSIWYG o

HTML, según tus gustos.

Algunos ejemplos de plantillas web (templates) disponibles en Internet:

Las plantillas web se pueden encontrar en varios formatos, como Photoshop o HTML. En

la mayoría de los casos, estos templates son compatibles con los editores web más

conocidos, como Dreamweaver o FrontPage, por lo que pueden modificarse

tranquilamente.

Las plantillas web son una forma de conseguir un diseño atractivo sin necesidad de tener

muchos conocimientos de desarrollo de páginas web, o también una forma de inspirarte

para crear tu propio diseño (mirando lo que han hecho otros pueden surgirte ideas).

Algunos sitios de templates bastante populares son: Template Monster, Open Source Web

Design o Template World.

Crear la página web. Consejos

Resumen: Consejos para crear tus páginas web de forma correcta. Hacer buenas páginas web desde el principio, más amigables a buscadores, mejor diseñadas y más accesibles.

Tips iniciales para hacer una página webHay algunas ideas que se deben tener en cuenta a la hora de ponerse a diseñar la página

web. Algunos consejos:

Usa CSS (hoja de estilos)

Separa el contenido del diseño de tu web usando hojas de estilos (CSS). Es mucho más

fácil editarlo después, les gusta más a los buscadores, y las páginas cargan más rápido.

La era de las tablas ha muerto.

Simplifica

La web soporta multitud de formatos, desde imágenes animadas, hasta sonidos,

presentanciones en flash, videos… Todos estos recursos deben usarse con cautela, si

recargas la web con gifs animados o le pones un sonido que tus usuarios no puedan quitar

si así lo quieren, es muy probable que se marchen. Es mejor optar por un diseño sencillo

que recargarlo en exceso.

Enlaces correctos

Usa palabras que indiquen claramente a donde dirige el enlace, no pongas cosas como

“click aquí” o “este sitio”, el visitante no sabrá a donde va. Diferencia claramente qué es un

enlace de lo que no lo es poniendo un color diferente al texto del enlace, así tus usuarios

podrán localizarlos con rapidez y visitarlos si les interesa.

Estructura del texto

Crea listas de ideas, párrafos, frases en negrita y en cursiva, subapartados y cualquier otra

cosa para diferencias partes en tus contenidos. La gente en la web lee deprisa, así que

procura que la lectura de lo más importante pueda hacerse de un vistazo rápido.

Tipo de fuente

Intenta usar fuentes comunes como Verdana o Arial, que casi con toda seguridad la

tendrán instaladas en sus ordenadores todos los usuarios que te visiten. Si la fuente que

tienes en tu web no está disponible en el ordenador del usuario, mostrará el texto con otro

tipo de fuente, lo que puede llegar a desajustarte el diseño.

Color del texto y del fondo

Procura usar un color de texto y fondo que haga buen contraste para facilitar al máximo la

lectura del texto de tu web. Si de por sí leer en una pantalla cansa más que hacerlo en

papel impreso, imagina lo que debe ser si no distingues bien la letra del fondo. Algunos

ejemplos:

Fondos claros

Usa fondos de pantalla sencillos o directamente no los uses. Los fondos complicados, con

muchos dibujos o colores pueden distraer al usuario del contenido de tu web o incluso

dificultarle su lectura.

Imágenes

Los gráficos son un recurso de diseño útil. Le añaden una nota de color a tu web y le

permiten tomarse una pausa al usuario, pero no recargues la página con imágenes que no

lleven a nada. Si pones imágenes que sirvan para algo, para decorar, para explicar algo,

para poner ejemplos, etc. Optimízalas para que pesen lo menos posible y las páginas no

tarden mucho en cargarse (a la gente no le gusta esperar). En relación a esto puedes

leer como añadir imágenes a una web y el tratamiento de imágenes para la web.

Navegación clara

No les hagas al visitante adivinar donde está cada cosa o a qué página dirige cada enlace.

Si el usuario no sabe a donde ir para conseguir lo que venía buscando se marchará sin

pensárselo, en Internet hay miles de alternativas a tu página. Asegúrate de que los enlaces

importante son bien visibles, crea un mapa web, pon enlaces importantes también en el pie

de página, incluye un enlace a la página principal en todas tus páginas, etc.

Compatibilidad con navegadores

No hagas una web que sólo se vea en Internet Explorer. Es uno de los errores más

comunes de la gente que empieza a hacer webs. Que se vea bien en un navegador no

significa que se vea bien en todos, debes asegurarte que se be correctamente por lo

menos en los más importantes (Firefox, Netscape, Opera…). Para comprobarlo puedes

usar herramientas como BrowserShots o instalar los navegadores más usados en tu

ordenador y probar cómo se ven las páginas web en ellos.

Resolución de pantalla

No todos los ordenadores tienen la misma resolución de pantalla, al igual que con el tema

de losnavegadores, debes asegurarte de que tu diseño se vea bien a 800×600, 1024×768,

etc.

Revisa posibles fallos

Frecuentemente debes revisar tu web en busca de posibles fallos, éstos no les gustan ni a

los visitantes ni a los buscadores. Uno de los más comunes es el tener enlaces rotos

(enlaces con una dirección incorrecta). Puedes revisarlos con la herramienta online de

LaWebera, comprobar enlaces rotos.

Páginas en construcción

No llenes el sitio de páginas en construcción. Si todavía no tienes creada una sección no la

tienes, no pasa nada, pero es frustrante pinchar un enlace esperando encontrar algo y ver

la típica pantalla de página en construcción, no da una buena imagen de tu web.

Como alternativa, puedes anunciar futuros contenidos o productos en la web del tipo,

“próximamente herramienta gratuita para…”. A parte de evitar la mala sensación que dejan

las páginas en construcción, puedes crear expectativas acerca de novedades y conseguir

que tus visitantes vuelvan.

Poner un buscador en tu web

Si tu web tiene muchos contenidos o páginas, puede ser útil incluir un buscador para que

tus usuarios encuentren más fácilmente lo que buscan. Es un valor adicional para tu web y

mejora mucho la usabilidad.

Para poner un buscador en tu web, puedes utilizar programas gratuitos como Google

Coop oFree Find.

Nombres de dominios. Claves para adquirir un buen dominio

Si estás pensando en adquirir un dominio para tu página web, te diré que seguramente sea

una buena decisión si tienes intención de continuar en Internet durante largo tiempo, pero

antes, tal vez sea conveniente saber algunas cosas para evitar sorpresas desagradables y

errores sin vuelta atrás.

¿Qué es un dominio?Un nombre de dominio es una identidad en Internet. Sirve para asignar una dirección y

localizar computadoras en la Web. Los humanos tenemos más facilidad para recordar

nombres que para recordar números, de modo que nosotros llamamos a un servidor por su

nombre. Por tal razón nació un sistema que sustituye las direcciones IP numéricas de los

ordenadores por nombres que al usuario le sean claras, las DNS. Por ejemplo, es más fácil

recordar lawebera.es que una dirección IP como podría ser 168.168.2.3. Entonces, cuando

introduces en la barra de tu navegador el nombre de dominio lawebera.es, los DNS

(Domain Name Servers) lo traducen a su respectiva IP conectándote al servidor que aloja

estas páginas.

Así, fue creado un sistema que está organizado de forma jerárquica, del mismo modo que

el sistema de las direcciones IP. En dicho sistema, un nombre de una dirección (domain

name) pertenece a un top-level-domain. Los Top-level-domains (TLD) se encuentran al

final delnombre de dominio. Se trata más que nada de abreviaturas identificadoras de los

países o de tipos de actividades. Por ejemplo:

.com = comercial

.org = organización sin ánimo de lucro

.net = red general

.biz = compañías

.name = personas privadas

.info = servicios de información de todo tipo

.es = España

.it = Italia

.de = Alemania

.gov = entidades públicas estadounidenses

Por tanto, hay varios tipos de dominios y quien crea el dominio es diferente para cada

caso. El organismo que crea un dominio se llama registry y hay un único registry para cada

tipo de dominios. Estos registry son grandes organismos, como por ejemplo:

ESNIC para dominios .es

AFILIAS para dominios .info

VERISIGN para dominios .com

El organismo que estableció y vigila todo el sistema de nombres se llama ICANN, el cual

además es el encargado de crear nuevos dominios y asignarlos a nuevos registry.

Normalmente, los usuarios no pueden comprar directamente al registry un dominio, si no

que éstos venden dominios sólo a una serie de empresas autorizadas, denominadas

registradores. Una vez que un propietario decide comprar un dominio por medio del

registrador, se informa al registry que actúa como en una licencia más. Entonces, la

persona pasa a ser propietaria y administradora del dominio durante el tiempo establecido

en el contrato. Esta transmisión tiene carácter contractual y, por lo tanto, legal.

Además, es importante resaltar que los nombres de dominio son únicos, es decir, no

puedes registrar un dominio que pertenece a otra persona, por lo que para registrar un

dominio primero hemos de asegurarnos que está libre. Esto puede saberse fácilmente

entrando en cualquier página que se dedique al registro de dominios, suelen poner en su

portada un cuadro para que busques el dominio que te interesa y veas si está libre o no.

Dominios, subdominios, dominios de primer nivel, etc.Analicemos el dominio www.lawebera.es. El .es es un TLD (Top Level Domain) o dominio

de primer nivel (.com, .org, .net y demás también lo son). lawebera sería un dominio de

segundo nivel perteneciente al TLD .es. Los dominios de segundo nivel son los que están

abiertos al registro, es decir, podemos registrar un nombre de dominio de segundo nivel de

cualquiera de los TLD disponibles (esto es lo que verdaderamente registras cuando

registras un dominio). A su vez, el dueño del dominio de segundo nivel (www.lawebera.es)

puede crear los subdominios que quiera directamente en el servidor DNS (por ejemplo,

www.subdominio.lawebera.es).

¿Qué tamaño máximo puede tener un dominio y qué caracteres son válidos en los nombres de dominio?Se pueden utilizar dominios hasta de 67 caracteres de largo. Números y letras son

permitidos en el contenido de los dominios, pero no se permiten espacios ni caracteres

especiales (por ejemplo, =, &, $, ñ, tildes, etc.).

Consejos al registrar un nombre de dominio

Resumen: Claves para adquirir un dominio adecuado para tu proyecto web y empezar en Internet con buen pie.

¿Qué es un servidor DNS?Cada página web tiene una dirección IP asignada. La función de los servidores DNS es

traducir el nombre de cada página a su correspondiente dirección IP. Entonces, DNS

(Domain Name System) es un sistema que traduce un nombre de dominio a un número IP

y, de esta forma, se localiza el servidor donde reside un sitio Web. Comúnmente, los

dominios necesitan dos servidores DNS para ser localizados en Internet, y suelen tener

nombres como estos:

ns1.servidor_de_tu_empresa_de_hosting.net

ns2.servidor_de_tu_empresa_de_hosting.net

¿Qué es la redirección de un dominio?Muchos webmasters tienen alojada su página en sitios gratuitos, lo que significa que

suelen tener una dirección larga y poco profesional. Por ejemplo,

www.hostinggratis.com/usuarios/nombre. Para evitar este problema, y debido también al

bajo costo que supone registrar un dominio hoy en día (como media unos 10 ó 15 € al

año), muchos webmasters optan por comprar un dominio propio del tipo .com, .es, etc. En

estos casos, se necesita redireccionar el dominio al hosting ya existente, es decir, hacer

que el dominio apunte a las páginas que ya tienes para que cuando alguien escriba tu

nuevo dominio en su navegador se muestre la página que elijas.

¿Qué diferencia hay entre dominios .com, .net, .org, etc.?Aunque inicialmente los dominio .com estaban destinados a empresas, los .net a servicios

de red, los .org a organizaciones, etc., actualmente esto ha perdido su significado y se

pueden utilizar indistintamente. Además, los buscadores tampoco hacen distinciones entre

unos y otros.

Recomendaciones

¿Es recomendable registrar un dominio desde el principio de tener una web o hay que esperar un poco a que tenga cierto éxito?

Es altamente recomendable empezar con tu propio dominio y no con un dominio gratuito.

Si no empiezas con él, todo el trabajo que hagas promocionando tu web y consiguiendo

enlaces, así como el posicionamiento en los buscadores que logres, lo perderás cuando

necesites o quieras tu propio dominio ya que tu dirección será diferente. En relación a esto

te puede interesar el tema de los nombres de dominio con palabras clave.

Hay personas que como solución a este problema, registran su dominio y siguen

manteniendo el antiguo pero redireccionado al nuevo. No obstante, lo mejor es empezar

bien desde el principio, así tendrás todos los enlaces que consigas y todas las entradas en

los directorios web apuntando al dominio propio.

¿Qué extensión elegir?

Teniendo en cuenta que a los buscadores les da igual la extensión del dominio, y a las

personas que los visitan por lo general también, tienes bastante flexibilidad a la hora de

registrar un nombre de dominio. No obstante, nunca está de más intentar adecuar la

extensión del dominio al contenido del sitio que quieras crear. Por ejemplo, si vas a crear

una página web para una ONG, puede ser más adecuado registrar un dominio .org

(organización sin ánimo de lucro) que un .com (comercial), aunque esto no es muy

importante hoy en día.

Personalmente, pienso que es mejor elegir extensiones más genéricas o extendidas, como

los .com, .net, .org, .info y .es. A no ser que lo que necesitas sea una palabra clave

realmente importante, no recomendaría registrar otra extensión. También es

importante elegir un buen nombre de dominio.

¿Afecta la extensión al posicionamiento en los buscadores?

No, no la tienen en cuenta. Tu posición vendrá dada por como optimices el sitio, el

contenido, las palabras clave, los enlaces, etc. Aunque es cierto que los sitios que

son .com suelen aparecer con más frecuencia entre las primeras posiciones de los

buscadores, eso puede ser debido a causas ajenas al tipo de extensión del dominio. Por

ejemplo, hay muchos mas sitios con extensión .com que con otras extensiones y, además,

esos sitios por lo general llevan más tiempo en Internet (recuerda que los .info o .biz no

existían hasta hace pocos años).

Consejos finalesTen cuidado con las empresas de hosting que te ofrecen el dominio gratis al contratarles el

hosting, si en algún momento quieres transferir tu dominio a otra empresa (cosa no poco

frecuente) es probable que te pongan muchas dificultades para hacerlo e intenten

retenerte con ellos, o incluso que hayan registrado el dominio a su nombre, por lo que lo

controlarían ellos, no tú.

Desconfía de las empresas que te ofrecen de un dominio por menos de 7 u 8 €. Un precio

tan bajo no es normal, y ni mucho menos les da para ganar dinero, pero lo hacen a costa

de reducir al mínimo sus gastos, por lo que los servicios que ofrecen no suelen ser muy

buenos (se nota sobre todo en la atención al cliente). Además, es probable que dichas

empresas utilicen esos precios bajos para atraer clientes y ofrecerles otros servicios, como

alojamiento web, correo, diseño web, etc. con los que esperan recuperar lo que no ganan

con la venta de dominios.

Antes de contratar los servicios de un registrador de dominios, asegúrate de tener el

control del dominio, figurar como propietario en el registro y de que te faciliten un gestor de

DNS.

Bajo mi punto de vista, lo mejor es registra el dominio con una empresa y el alojamiento

web con otra diferente, cada una especialista en su campo.

Mantenimiento de una página web

Resumen: Guía para llevar al día el mantenimiento de tu página web y no caer en el olvido.

No abandones tu proyecto a su suerte una vez lo hayas planificado, creado y colgado en

Internet. La clave del éxito es el trabajo constante, y este no debería acabar nunca si

quieres conseguir buenos resultados y muchas visitas.

Si quieres que tus visitantes vuelvan, debes darles algo nuevo que visitar, corregir errores

y mantener tu sitio vivo y al día.

Como decíamos, un sitio web debe ser revisado constantemente en busca de mejoras

que hacer (en el diseño, la navegación por las páginas, las herramientas que ofrece, etc.) y

de errores que reparar. En base a los datos de las estadísticas web [logs], puede que te

veas en la necesidad de cambiar algunas cosas. Por ejemplo, puedes notar que mucha

gente abandona tu web en la página de inicio, por lo que sería conveniente plantearse su

reestructuración. O puedes descubrir que la mayoría de las personas que entran a tu

página buscan un tipo específico de contenido dentro de todo lo que ofreces, por lo que

una buena idea sería ofrecer más contenido de ese tipo.

¿Por qué mantenerse al día?

Ayuda a mantener a tus visitantes pendientes, vuelven.

Ayuda a mejorar y mantener el posicionamiento en buscadores.

La web crece y con ella su importancia.

Si dejas de cuidar tu trabajo con el tiempo todo lo que has hecho se perderá. Las

visitas no vienen solas.

El contenido es el reyUno de los grandes problemas de muchas páginas web es encontrar buen contenido que

añadir a su sitio, y sobre todo contenido único. Si no dispones de tiempo para hacer tus

propiosartículos o reportajes, sería bueno que publicaras artículos de otros autores que te

den permiso para hacerlo (por ejemplo, artículos con licencia copyleft).

Hay portales que se dedican a recopilar este tipo de artículos de libre distribución, los

cuales puedes usar en tu web. Por desgracia, en español hay pocos, la mayoría se

encuentran en inglés, pero algunos de los que te pueden servir son: Yugler o Articulandia.

Nuevas funcionalidades para tu webAdemás de actualizar el contenido de la web, según vaya creciendo tu página

seguramente pienses en añadir nuevas herramientas que te faciliten el trabajo, el uso de la

página a tus visitantes, el crecimiento de la misma. etc. Puedes añadir muchas utilidades a

tu página web, como foros, un libro de visitas, un buscador interno, encuestas, etc. Todas

estas cosas aumentan el valor de tu web y dan a tus visitantes una razón más para volver.

No tengas pereza en añadirlas.

Revisar los enlacesCon el paso del tiempo algunas páginas cambian su URL y si tienes enlaces hacia ellas,

cuando esto pasa, el enlace que tenías deja de tener valor e incluso molesta porque no

lleva a ningún sitio, o como mucho a una página de error. Por ejemplo:

Seguro que alguna vez has pinchado en un enlace de una web y te ha salido una página

de error parecida a la anterior diciendo que la página no existe o no se encuentra. Es un

mensaje molesto que debes evitar a toda costa que vean los visitantes de tu web.

¿Qué se puede hacer al respecto? sencillo, revisar los enlaces con frecuencia en busca

deenlaces rotos. Para ello, tienes herramientas online como la herramienta de

LaWebera.es paracomprobar enlaces rotos que escanean tu página en busca de links que

ya no funcionan. También hay otras herramientas muy buenas por ahí que puedes usar de

forma gratuita.

Contacto con el usuarioSiempre es bueno poner una página de contacto para que tus visitantes puedan mandarte

un mensaje si lo ven oportuno. Este recurso también es útil de cara al mantenimiento de la

web, puesto que no es extraño que algunos visitantes te informen acerca de errores que

han visto y puede que tu no, o cosas que les gustaría encontrar en tu página web.

Actualizar la página web. La importancia del contenido

Resumen: Actualiza tu web con frecuencia para seguir creciendo. Lo más importante es el contenido.

Para que la página web se mantenga viva y los usuarios sigan visitándola hay que

actualizarla constantemente, además de dedicarse a su mantenimiento, para que todo

funcione bien.

Con actualizar la web me refiero a añadir periódicamente nuevos contenidos y recursos

que resulten útiles a tus potenciales visitantes. Pero tan importante como añadir nuevo

contenido a tu web es eliminar el que se encuentra desfasado o modificarlo para que siga

siendo útil y vigente. Por ejemplo, si hablas de economía no puedes dejar sin modificar los

valores de la bolsa,

puesto que mañana ya no será válidos. En este caso debes actualizarlos constantemente.

Ideas generales al actualizar tu web Mantener un sito web no es fácil. Si no actualizas sus contenidos no tendrás nada que

ofrecer a tus visitantes habituales e irás perdiendo popularidad poco a poco.

Hazlo simple: creando páginas complicadas sólo conseguirás que te sea más difícil

actualizar. Procura simplificar al máximo la forma de actualizar las páginas de tu web.

Por ejemplo, si vas a crear una nueva página con un artículo, es mucho más fácil

utilizar como base para hacerla una página que tengas ya existente que montarla toda

de cero.

Se constante: si en tu página has puesto que actualizas una vez al mes procura

cumplirlo siempre. No prometas nada que no puedas cumplir y si ves que el trabajo te

sobrepasa, mejor que no engañes a tus usuarios y pongas una fecha de actualización

más ajustada a la realidad. Piensa lo frustrante que debe ser entrar en una página

esperando una actualización prometida y encontrarte que no está cuando debería.

Comprueba los cambios antes de colgar las páginas en Internet: antes de actualizar

tu web y dejar que tus visitantes la vean, es muy importante revisar los cambios para

ver que todo está bien. Es muy fácil cometer pequeños errores al modificar las

páginas, ya sean en el propio código HTML o en el contenido que estás agregando.

Por eso, conviene que visualices las páginas en un navegador antes de dejar que

otros las vean para buscar esos pequeños fallos y repararlos.

Contenido, contenido, contenidoComo ya he dicho otras veces en este manual (empezar de cero a hacer webs), el

contenido es el rey. La actualización de la página web tiene que significar añadir nuevo

contenido a tu sitio, útil para el usuario. El contenido (texto) es lo que ansían encontrar

los buscadores en tu web cuando la escanean, es de lo que se nutren y en lo que se

basan para mostrar sus resultados de búsqueda. Por eso, cuanto más contenido (y mucho

mejor si es contenido único) más visitas recibirás de los buscadores.

¿Qué hay de nuevo?Cuando actualizas la web con nuevos contenidos es importante que se lo hagas saber a

tus visitantes. Para ello es muy recomendable que reserves un espacio en la página de

inicio o donde creas oportuno para citar las novedades de tu web.

También puedes ponérselo un poco más fácil a tus visitantes y crear un boletín de

novedades con el que enviarles un correo cada vez que actualizas tu página web. Hay que

tener especial cuidado con las listas de correo, evitando a toda costa enviar mensajes a

personas que no nos lo hayan pedido expresamente y guardando su información personal

con recelo, de lo contrario puedes tener algunos problemas legales.

Copias de seguridad (backups)Una de las cosas más importantes a la hora de hacer actualizaciones en tu web es tener

siempre una copia de seguridad de tu trabajo anterior. Si algo sale mal siempre puedes

recuperar lo que ya tenías.

Las copias de seguridad son algo que no se debe descuidar en ningún caso, porque

cuando menos te lo esperas te ves repentinamente cambiando de hosting, o tu servidor ha

tenido problemas y se ha perdido información de la que tenías colgada en Internet. En

estos casos, o tienes una copia de seguridad o vuelves a empezar.

Muchos servicios de alojamiento web profesional realizan copias de seguridad periódicas

de los archivos que almacenas en sus servidores, pero no todos lo hacen, por lo que vigila

este dato al contratar el hosting en una empresa de alojamiento web.

¿Cada cuánto actualizar la página web?No hay una fecha exacta. Puedes actualizar diariamente, semanalmente, mensualmente,

bimensualmente… depende del tipo de web y los servicios que ofrezcas. Por ejemplo,

los blogs, por el tipo de formato web que utilizan son páginas que se prestan a la

actualización diaria o semanal. En cambio, páginas web de empresa no suelen requerir

una actualización tan constante, puede que con una vez al mes o cada par de meses les

baste.

Colgar la página web en Internet

Resumen: Un resumen básico sobre lo que hay que hacer para subir una web a Internet.

Para colgar la web en Internet y que todo el mundo pueda verla necesitas una serie de

recursos. No basta con planear la página web y desarrollar la web. Una vez la tienes

creada hay que hacerla accesible a cualquiera que quiera visitarla. Para ello, los siguientes

pasos pueden ayudarte.

1. Contratar un servicio de alojamiento webEl alojamiento web (hosting) es esencial para que puedas subir a Internet todos los

archivos que has creado para tu web, junto con las imágenes y carpetas.

Cuando contrates el alojamiento web, tendrás que subir todos los archivos que creaste al

espacio web que te dará la empresa de hosting, por lo que tendrás que tener cuidado

cuando estés haciendo la web de usar enlaces relativos en lugar de absolutos para que

funcionen correctamente al subirlos a tu espacio web. Si organizas bien los archivos de tu

página web en carpetas y enlazas por medio de enlaces relativos no tendrás problema.

Hay muchas empresas de alojamiento web, así que hay que tener cuidado de no elegir la

primera que encontramos. Tienes ofertas hosting gratuito y de pago suficiente para elegir,

por lo que sería conveniente que revisaras a fondo varias empresas que te gusten y mires

en foros que opinan otros webmasters sobre ellas para que vayas viendo si son de fiar o

no, qué tal es el soporte técnico, si son rápidos sus servidores, si fallan con frecuencia y

sobre todo como responden cuando hay problemas. Un consejo importante, desconfía de

las empresas que te ofrecen espacio ilimitado o tráfico ilimitado… eso no parece posible

darlo realmente a día de hoy.

Procura hacer todo lo posible por elegir un alojamiento web de calidad, te ahorrarás

muchos problemas.

2. Registrar un nombre de dominioPara que alguien pueda visitar tu página, esta debe estar en una dirección concreta, y para

eso están los dominios. Puede decirse que dan una dirección a las páginas de tu web para

que puedan ser encontradas por cualquiera que lo desee.

Hay nombres de dominio gratuitos y de pago, te recomiendo los de pago, aunque eres

libre de elegir lo que te apetezca. Un nombre de dominio gratuito suele ser una dirección

larga, del tipo www.empresadehosting.com/usuario/web/index.html dificil de recordar y

poco profesional, además de que con frecuencia insertan publicidad en tu página (lo

mismo que muchos hostings gratuitos),mientras que los nombres de dominio de pago son

los típicos miweb.com, paginaweb.net, etc. mucho más profesionales y en la mayoría de

los casos más cortos y sencillos de recordar.

Actualmente el precio de los dominios es bastante asequible para la mayoría de

webmasters, por lo que es una opción muy recomendable si quieres tener una página web

seria. Nunca está de más leer algunos consejos para registrar un nombre de dominio y no

tener problemas. También es recomendable pensar bien para elegir un buen nombre de

dominio porque será como tu marca en internet.

3. Subir los archivos a tu espacio webUna vez tienes el dominio y el hosting lo siguiente es subir todos los archivos de la web al

espacio que te da el hosting. Lo más típico es subir la web por FTP, pero algunas

empresas de alojamiento web ofrecen la opción de subir y gestionar los archivos mediante

una aplicación online.

Subir los archivos mediante FTP es muy sencillo. El servicio de hosting te proporcionará

unos datos para conectarte a tu espacio web mediante tu programa de FTP y una vez te

conectes sólo tendrás que copiar todos los archivos y carpetas en tu espacio.

Una vez subido todo el material es bueno revisar la web para comprobar que se vea bien

en Internet, los enlaces funcionen, las imágenes se muestren, etc.

Herramientas para hacer una página web. Editor imágenes, HTML y FTP

Resumen: Aprende desde cero como hacer una web. Herramientas básicas: editor de imágenes, editor HTML y clientes FTP.

Conforme vayas aprendiendo a hacer webs, irás descubriendo cantidad de herramientas y

programas útiles en el desarrollo de páginas web. En realidad, se puede decir que

prácticamente hay programas para todo. El objetivo de este artículo no es ofrecer una lista

pormenorizada, sólo pretende ser una guía introductoria para saber por dónde empezar a

trabajar, dede un nivel muy básico para que todos aquellos que quieran iniciarse en esto

del diseño web encuentren cosas por donde empezar.

En este artículo vamos a tratar de describir las principales (e imprescindibles) herramientas

para la realización de un proyecto web, pero conviente que antes sepamos dar

los primeros pasos para hacer una web y evitar así perder el tiempo en trabajos que estén

mal definidos.

1. Editor de HTMLLa principal herramienta va a ser el programa con el que vas crear el código HTML. Si

tienes una sólida base de conocimientos del lenguaje HTML, lo mejor es utilizar un simple

editor de texto como puede ser el bloc de notas de Windows o el editor Emacs en el caso

de Linux. También hay otros editores de texto, como NotePad, que están diseñados

especialmente para hacer páginas webs, y colorean cada etiqueta HTML de un color,

haciendo más fácil la lectura del código fuente.

Pero si por comodidad o porque estás empezando no dominas el lenguaje HTML, también

se puede hacer la web de una forma más visual con programas como pueden

ser FrontPage oDreamweaver. Por otro lado, no está demás contar con programas de este

tipo, puesto que ofrecen otras funcionalidades muy interesantes para editar un sitio web,

como comprobación y actualización de enlaces, cambios en múltiples páginas, plantillas

prediseñadas, validación del código, etc.

2. Editor de imágenesSi vas a utilizar imágenes en tu página web (banners, gifs animados, logos, etc.), deberás

tener algún software que te permita crear y/o retocar imágenes tanto animadas como

estáticas. Con él podrás, entre otras cosas, optimizar las imágenes, cambiar su formato o

crear imágenes propias para botones o menús de navegación. Existen una gran cantidad

de software para este tipo de tareas. Además, muchos de ellos los podrás encontrar

completamente gratis (freeware) o de uso temporalmente limitado (shareware). Te

recomiendo que le eches un vistazo a; Adobe Photoshop(edición y retoque de imágenes

en mapa de bits), Flash (para crear animaciones) y Freehand oCorelDraw (para crear

imágenes vectoriales). Todos ellos son de pago, si te interesa un programa gratuito y no

por ello de baja calidad, te recomiendo Gimp, muy bueno.

No obstante, hay que añadir imágenes a nuestras páginas con moderación y sólo cuando

éstas tengan un fin (añadir más atractivo a la información presentada, explicar

gráficamente lo expuesto, etc.), ya que las imágenes, debido al peso que tienen, son uno

de los principales factores de que muchas páginas web tarden tanto en cargar (los

visitantes pueden irse hartos de tanto esperar). Por otro lado, la sobrecarga de imágenes

tampoco es aconsejada de cara alposicionamiento en los buscadores, ya que cuantas más

imágenes pones menos texto indexable por los buscadores puedes introducir en tu página.

Ten en cuenta que a los buscadores les gustan las páginas ricas en contenido, las

imágenes deben ser como norma general un complemento de la información que ofreces.

Los formatos más aconsejables para imágenes en la web son .jpg y .gif, ya que son

formatos comprimidos que reducen sensiblemente su tamaño.

De todas formas, siempre es recomendable aunque tengamos pocas imágenes

optimizarlas para que ocupen menos y, por tanto, la página tarde menos en

cargar. Optimizar las imágenesbásicamente quiere decir reducir su tamaño, evitando al

máximo la pérdida de calidad. Nuestros visitantes nos lo agradecerán y se puede hacer

desde Internet totalmente gratis, por ejemploaquí.

3. Cliente FTPPara poder publicar una página web, normalmente deberás disponer de un programa que

se conecte mediante FTP al servidor de tu hosting. Con este programa podrás subir los

archivos de tu página a tu servidor para que todo el que quiera pueda acceder a ellas. Por

lo general, el FTP se conecta con tu servidor, mostrándote lo que tienes almacenado en él

(tu directorio remoto), al mismo tiempo que te muestra lo que tienes en tu sitio local (tu pc).

Son herramientas muy sencillas, que permiten copiar archivos en tu servidor web y

también copiar archivos de tu servidor a tu ordenador. Algunos clientes de FTP básicos

vienen integrados en los sistemas operativos. Sin embargo, hay disponibles clientes FTP

con más funcionalidades, habitualmente en forma de shareware/freeware para Windows y

como software libre para sistemas de tipo Unix. Muchos navegadores recientes también

llevan integrados clientes FTP. Algunos conocidos son;Cute FTP, SmartFTP y FileZilla

FTP.

En resumen, teniendo un programa para hacer tus páginas, otro para retocar y crear

imágenes y otro para subir los resultados a tu servidor, puedes ir empezando a adentrarte

en el mundo del diseño web.

Beneficios de la usabilidad web

Resumen: Beneficios de la usabilidad web y consejos prácticos para hacer sitios más usables. Pónselo fácil a tus usarios para encontrar lo que buscan en tu web.

Son diversos son beneficios que aporta la usabilidad a la web, por eso hay que tenerla en

cuenta desde los primeros momentos del diseño y desarrollo web de un sitio. En el

momento deorganizar los cotenidos de la web es importante pensar en la usabilidad, te

aportará beneficios como:

La usabilidad permite mayor rapidez en la realización de tareas y reduce las pérdidas

de tiempo.

El aprendizaje del manejo de la web es mucho más rápido e intuituvo, y el usuario

enseguida se familiariza con la página, haciendo nuestros productos o servicios más

visibles.

Los visitantes se sienten más seguros y necesitan menos ayuda por parte del soporte

técnico de la web, con la consiguiente reducción de costes y esfuerzos y una

percepción más positiva de la visitas.

2. Consejos prácticosUna web útil debe anticiparse a las necesidades del usuario, el cual debe tener el control

sobre el sitio web en el sentido de poder navegar con soltura y realizar las acciones que

desee sin dificultad. Los usuarios deben ser capaces de alcanzar sus objetivos con un

mínimo esfuerzo y unos resultados máximos, lo que implica que desde el principio el

visitante sea capaz de usar de forma intuitiva los recursos que se le ofrecen.

El color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser

suficientemente grande. Los colores han de utilizarse con precaución de forma que el

contenido sea legible. Aunque pueda parecer apropiado que diferentes áreas tengan

diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio.

Revisa los enlaces periódicamente para evitar enlaces rotos o enlaces a webs que ya no

existen.

Evita en la medida de lo posible elementos invisibles de navegación como pueden ser

los menús desplegables, indicaciones ocultas, etc. Pueden quedar estéticamente

atractivos una vez descubiertos, pero obligan al usuario a adivinar dónde están colocados

y cómo se utilizan. Los visitantes no deben sufrir sobrecarga de información. Cuando un

usuario visita un sitio web y no sabe donde comenzar a leer, existe sobrecarga de

información.

Ofrece de forma clara a los usuarios de tu web un medio de contacto con el administrador,

esto mejora la opinión sobre la web al no encontrarse sólo ante las posibles dificultades

que puedan surgir y fomenta la comunicación entre el diseñador y el potencial cliente. Para

ello es muy útil utilizar formularios implementados directamente en el sitio web, ya que

evitas al visitante tener que abrir su gestor de correo electrónico y le ahorras tiempo.

Además, algunos consejos concretos para diferentes partes de la web son:

Cabeceras del sitio: incluir solo las opciones fundamentales, que estén bien definidas

tanto en su significado como en su representación. Evita imágenes grandes y pesadas

(tamaño) pues te restan espacio para poner contenidos y demoran la carga de la

página.

Registro de usuarios: permite que tus usuarios naveguen por la web sin necesidad

de registrarse, ofréceles información útil para que sepan qué ofreces en tu página. Por

ejemplo, permite el libre acceso a la consulta de las subastas antes de pujar, consulta

de los catálogos de tus productos y poder buscar en todo el sitio antes de registrarse.

Puedes crear secciones exclusivas para usuarios dándoles motivos para que se

registren cuando quieran, por ejemplo, para adquirir un producto de tu catálogo o para

la descarga de software. Simplifica el formulario de registro, solicita sólo la información

necesaria.

Formularios: procura reducir al máximo el numero de campos, no pidas información

que no necesitas sólo por tenerla. Tener que rellenar formularios de registro muy

grandes puede hacer que algunos visitantes cambien de opinión y dejen tu página.

Piensa que cuanto más corto es, menos pereza da rellenarlo. Evita los combos, es

más rápido escribir que seleccionar la opción en el combo, además la página pesará

menos sin ellos por lo que el usuario acabará antes el proceso.

Enlaces: procura que la palabra enlazada indique claramente el destino. Por ejemplo,

para enlazar una página de diseño web:

Bien: entra en la página de diseño web para ver más información.

Mal: para ver más información sobre diseño web pincha aquí.

Color de fondo: si el texto es extenso, es recomendable usar un fondo claro

(preferiblemente blanco) y texto oscuro (preferiblemente negro).

Velocidad de carga de la página: reduciendo el peso de la página podemos hacer

que el usuario visite más páginas en el mismo tiempo de conexión. En un sitio donde

las páginas bajan con rapidez no da pereza pinchar en los enlaces para seguir

leyendo. Añadir demasiados elementos gráficos o códigos muy complejos sólo genera

páginas más lentas, por lo que nadie va a apreciar la mejora si al final la web tarda

mucho en cargar. Puedes calcular el tiempo de carga de tu página web y decidir si

neesitas optimizar imágenes, código JavaScript, etc.

Buscador: si tienes una web con muchas páginas (incluso si no) puedes ser muy útil

proporcionar un buscador interno para que tus visitantes puedan moverse con más

facilidad y encontrar rápidamente la información que están buscando. Hay buscadores

gratuitos muy buenos, como atomz.com.

Sistema de navegación de la página web

Resumen: Aprende a crear un buen sistema de navegación para tu página web y haz que tus visitantes encuentren lo que buscan sin problemas.

Un buen sistema de navegación es imprescindible en toda página web. Es una parte

importante de la organización de la estructura de la web. Que el usuario sea capaz de

moverse con soltura y facilidad por las distintas páginas del sitio, que encuentre lo que

busca rápidamente, que no se pierda yendo de un enlace a otro sin saber donde está, que

no quede colgado en una página concreta sin poder navegar por otras o volver atrás… son

algunas de los aspectos que hay que cuidar en la navegación de un sitio web. Veamos

algunos puntos importantes.

La página de inicioLa página de inicio de tu web es la puerta principal de acceso a tu web. Por ella entrarán la

mayor parte de visitantes, por lo que hay que cuidar al máximo cada detalle.

Si tu sitio web es pequeño, puedes permitirte el lujo de enlazar a todas las páginas de tu

web desde la página principal, así el usuario tiene a su alcance toda la información

disponible en el sitio. Pero en muchos casos incluir un enlace a cada página convertiría en

un caos a la portada del sitio debido a la gran cantidad de páginas internas. En estos

casos lo más conveniente sería enlazar a las secciones principales de la web, desde las

cuales se enlazaría al contenido de esa sección concreta, etc.

Menú de navegaciónEl menú de una página web es la principal herramienta de navegación que le podemos

facilitar al visitante para que encuentre lo que busca. Es imprescindible para que las

personas encuentren las demás páginas de la web, además del índice.

Los menús de navegación son básicamente listas de enlaces a las diferentes páginas o

secciones de la web. De su estructuración dependerá en gran medida que los visitantes

encuentren lo que buscan, por lo que es conveniente pensarse dos veces cómo hacerlo

antes de implementarlo en la web.

Hay varios tipos de menús de navegación; podemos encontrarlos en

disposición horizontal;

O vertical;

Como mencionamos antes, para sitios web con un número de páginas pequeño puede ser

bueno enlazar a todas ellas desde cada página para que el usuario tenga en todo

momento la información disponible en la web a su alcance. Por ejemplo, si es una página

web informativa sobre tu empresa y no tiene otra finalidad, puede que cuente con 10 ó 15

páginas en total, las cuales pueden perfectamente ser enlazadas desde cada página

individual. Sin embargo, cuando una web contiene mucha información este tipo de menús

tiene poco sentido, porque entonces tendríamos menús con cientos de enlaces, algo

excesivamente largo para ser usable. Lo normal en estos casos es enlazar desde la

página principal a las secciones más importantes, y desde cada una de ellas a sus

contenidos concretos.

Pie de páginaEl pié de página de la web también puede usarse para mejorar la navegación del sitio.

Normalmente no se utiliza para poner enlaces a todas las secciones (para eso ya está el

menú), pero sí para poner enlaces importantes o que consideras que deben aparecer en

todas las páginas de la web, por ejemplo información legal sobre tu empresa, direcciones

de contacto, políticas de uso del sitio, etc.

Evitar páginas huérfanasUna página huérfana es aquella desde la cual no se puede acceder a ninguna otra.

Cuando el usuario se encuentra con una de estas páginas la confusión y el enfado pueden

ser importantes. Es cierto que dándole al botón “atrás” del navegador o modificando el

campo de la url puede llegarse perfectamente a otra página del sitio, pero no todo el

mundo tiene porqué saberlo, y hacer a la gente molestarse demasiado en navegar por un

sitio es signo de falta de usabilidad web. No cuesta nada poner en cada página al menos

un enlace a la principal.

Enlazar siempre al índiceUna de las formas de evitar páginas huérfanas y que mejora sin duda la navegabilidad de

una web es incluir en cada página del sitio un enlace al índice.

Parece bastante extendido el enlazar a la página principal del sitio mediante el banner o

logo de cabecera. Así, el usuario siempre tiene un recurso para volver al principio y buscar

lo que necesita.

Ruta de acceso o ¿dónde estoy?Es frecuente que aunque el usuario pueda navegar con facilidad por las páginas de tu sitio

no sepa exactamente donde está. Para evitar esto es muy útil incluir el camino que se

sigue desde la página principal, pasando por las secciones (principales) hasta la página

concreta en la que se encuentra el usuario. No hace falta que indiques cada uno de los

pasos, con los más importantes es suficiente, no es cuestión de que se convierta en una

guía interminable. Un ejemplo de esto lo encontramos en LaWebera.es:

Es conveniente que cada parte de la ruta tenga su enlace correspondiente, de forma que

el usuario pueda ir a esa categoría si lo desea. Sin el enlace a cada sitio, la ruta de acceso

pierde sentido ya que le dice al usuario donde está pero no le da alternativas.

Incluir un buscadorPara páginas web con mucho contenido es realmente útil la inclusión de un buscador

interno que permita a los usuarios buscar directamente los temas que le interesan.

Páginas web didácticas, de manuales, etc. son sitios que tienen mucho contenido

distribuido a su vez en muchas páginas. Buscar una información concreta en ellas puede

ser complicado dado el volumen de archivos que contienen. Los buscadores mejor la

experiencia del usuario en el sitio web y le ayudan a ahorrar tiempo en su búsqueda de

información.

Hay herramientas gratuitas muy buenas para poner un buscador en tu web. Por

ejemplo: Google Co-op o Atomz.

Conceptos básicos de HTML

Resumen: Conceptos básicos de HTML. Etiquetas fundamentales y estructura básica de una página web.

HTML se basa en principalmente en etiquetas, que son como instrucciones para dar

formato a las diferentes partes de una página web. Para toda persona interesada en crear

páginas web es importante conocer al menos nociones básicas de este lenguaje, de esta

forma podemos comprender como están hechas las páginas web, desarrollar sitios con

más flexibilidad y mejor construidos.

Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en

negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir

imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas

sea importante para hacer páginas web, mejor dicho imprescindible.

Etiquetas básicas <HTML>: indica el comienzo del documento HTML.

<HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título

(<title>) de la web, una descripción y otras informaciones relacionadas con el

contenido de la página.

<BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar

una web. En el body van los textos, las imágenes y todos los contenidos de la web.

<H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer

determinados textos de la página como titulares, suelen tener un tamaño de fuente

mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en

buscadores.

<A>: define los enlaces.

<TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.

<P>: el texto dentro de esta etiqueta forma un párrafo.

<IMG>: imágenes.

<BR>: salto de línea.

<UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso

de <LI>definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL>

tendremos listas ordenadas.

<B> y <STRONG>: se utilizan para resaltar el texto.

<U>: texto subrayado.

<I>: texto en cursiva.

Ejemplo de página básica

<html> <head>

<title>Título de la página</title>

</head>

<body>

<h1>Encabezado de la página</h2>

<h3>Encabezado de menor tamaño</h3>

<p>Este es el texto de un párrafo.</p>

<p>Este es el texto de otro párrafo. Dentro de este párrafo,

pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo

que quieras.</p>

<p>También podemos poner listas como la siguiente:</p>

<ul>

<li>Guión número uno.</li>

<li>Guión número dos.</li>

<li>Guión número tres.</li>

</ul>

</body>

</html>

Y para que lo entiendas mejor, una página básica con su correspondiente código HTML:

Compatibilidad de tu web con distintos navegadores

Resumen: Podremos estar satisfechos si conseguimos que se vea igual de bien en los más importantes, como Explorer, Firefox, Opera, Safari y Mozilla.

¿Qué es la compatibilidad web?Que una web sea compatible con todos los navegadores significa que se vea igual (o muy

similar) en todos ellos. Obviamente esto es bastante complicado, podremos estar

satisfechos si conseguimos que se vea igual de bien en los más importantes, como

Explorer, Firefox, Opera, Safari y Mozilla. Si consigues que se vea bien en estos 5,

conseguirás que el 99% de tus usuarios vea correctamente tu web.

El problema radical en que no todos los navegadores interpretan en código HTML y CSS

de la misma manera, entre ellos existen pequeñas variaciones que son las que hacen que

el resultado no sea el mismo de unos a otros. Algunas de esas diferencias son tan

importantes que pueden hacer que partes de tu web no funcionen o no se vean, y como el

propósito de hacer una web es que la vea el mayor número de personas (y que éstas la

vean correctamente), nos interesa que la web funcione en el mayor número de

navegadores posibles.

Por tanto, a la hora de hacer una página web no es suficiente con preocuparse

por centrarnos en la audiencia adecuada, registrar un nombre de dominio rompedor o

tener un diseño agradable al usuario. Todo esto puede verse ensombrecido si un usuario

no ve la página correctamente al entrar con un navegador que no has tenido en cuenta al

crearla.

Para que veas un ejemplo leve de lo que hablamos, aquí puedes apreciar como se ve una

página web en diferentes navegadores. Por supuesto es ficticia y el diseño está hecho

descuidado a propósito:

 

 

Como hemos dicho, hay casos de incompatibilidad más graves en los que el diseño se

desajusta, no cabe completo en pantalla, scripts o menús que se comportan de manera

diferente de un navegador a otro… en fin, un desastre, sobre todo si tu web es un negocio

en línea o una página de empresa que requieren cuidar el aspecto al máximo para atraer

al cliente.

Mejorar la compatibilidad con navegadores

Validar el código de tu sitio web

Validar el código de tu web en base a los estándares del W3C es un buen hábito que

conviene que cojas cuanto antes mejor. Básicamente consiste en escanear tu web en

busca de errores de programación para una vez detectados poder corregirlos. Además, a

parte de detectar errores de codificación te proporciona una breve explicación del error,

por lo que aprenderás cosas nuevas validando tu web. Tener una página sin errores es

importante porque maximiza la compatibilidad entre navegadores al mismo tiempo que te

asegura que tu código siga valiendo para futuras revisiones de HTML, CSS, etc.

Tómate tu tiempo para validar el código CSS de tu web. Eso hará que te sea más fácil

conseguir que tu sitio se vea igual en los distintos navegadores ya que hará que tengas un

código más limpio y sobre todo sin errores.

Para validar tu CSS lo mejor es usar las herramientas disponibles, ya que si te propones

hacerlo manualmente la tarea será difícil y larga. Además, es muy sencillo que se te pasen

errores, mientras que usando herramientas online no ocurrirá. El validador de CSS del

W3C es la mejor opción para ello, ya que esta entidad es la que se encarga de crear los

estándares de la web.

Resetear los estilos CSS

Si no usas ningún estilo CSS en los elementos de tu página igualmente tendrán un

aspecto determinado. Los títulos tienen una tamaño según su importancia (H1, H2, H3…),

los márgenes tienen un tamaño determinado, las citas llevan sangría, etc. Muchos de

estos valores por defecto, son iguales de unos navegadores a otros pero otros no, y esos

precisamente son los que te crearán problemas a la hora de conseguir que tu web se vea

igual en los diferentes navegadores, ya que por mucho estilo que les des, su valor

predeterminado sigue contando.

Por eso, resetear tu hoja de estilos es una de las mejores medidas que podemos adoptar

para prevenir el problema de la incompatibilidad entre navegadores, ya que por

defecto, todos los elementos HTML tienen unos atributos CSS predeterminados. Así, los

márgenes, espacios y tamaños de fuente de títulos (entre otros) pueden tener diferentes

propiedades por defecto de un navegador a otro y provocar que se vean diferentes por

mucho formato que le demos nosotros. Al resetear el CSS digamos que ponemos a cero

esos valores por defecto y podemos empezar desde el principio a dar el formato que

nosotros queramos, controlando el aspecto de cada elemento mucho mejor. Para resetear

el CSS se escribe un código CSS al principio de tu hoja de estilos, y después todo lo que

tu vayas creando. El código de Eric Meyer es una de las formas más conocidas que

tenemos de resetear el CSS de nuestra web, muy efectivo:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: "";

}

blockquote, q {

quotes: "" "";

}

Por otro lado, una forma más sencilla, aunque no tan completa, de anular los valores por

defecto que más problemas suelen dar (margin y padding) es poner el siguiente código al

principio de tu hoja de estilos y luego las reglas que vayas creando:

* {margin:0; padding:0}

Lo que hace este código es dar un margin y padding de 0 a todas las propiedades CSS.

Evidentemente no es tan completo como el anterior código, pero si no quieres complicarte

mucho la vida o necesitas ahorrar espacio reduciendo la hoja de estilos, este código

también quita muchos problemas.

Usa técnicas soportadas

CSS ofrece un montón de técnicas para mejorar el aspecto de nuestras páginas web, pero

no todas son bien soportadas por los navegadores. Lo mejor es intentar evitar el uso de

propiedades que puedan causarnos problemas con algunos navegadores, en especial con

los más usados por los visitantes (IE, Firefox…). En general, usando buenas prácticas en

CSSminimizamos el riesgo de incompatibilidades entre navegadores.

Diseñar para Firefox, no para Explorer

Una de las cosas que han hecho a Firefox tan popular es que es uno de los más

completos navegadores en cuanto a respetar los estándares web se refiere. Y como él hay

muchos otros (cada vez más) que se preocupan por seguir al máximo los estándares del

W3C. Por tanto,diseñando para Firefox estamos minimizando el uso de reglas indebidas o

malinterpretadas, ya que el aspecto que nos devuelve el navegador de lo que

programamos se acerca mucho más a la regla general que diseñando en Internet Explorer.

Diseñar optimizando para Firefox hace de nuestro código un código más limpio, más

estándar, y por tanto más universal. Una vez funcione en Firefox, puedes empezar a

pensar en que tu sitio se vea bien en Explorer. Si lo haces al revés, cuando consigas que

se vea bien en Explorer tendrás que ir arreglando el código para que se vea bien uno por

uno en el resto de navegadores, mucho más trabajo ¿no?.

Normas elementales en HTML

Resumen: Vamos a ver unas normas básicas en el uso del HTML, aprendiendo a utilizar las etiquetas y elementos de este lenguaje de creación de páginas web.

Este tutorial está basado en las recomendaciones del W3C (y II), donde la idea es utilizar

CSSsiempre que sea posible, pero seguir incluyendo HTML semántico para maximizar

lacompatibilidad con navegadores antiguos.

Junto con esta guía, te recomiendo que leas los siguientes documentos:

Conceptos básicos de HTML .

Videotutoriales de HTML  y HTML básico.

Como hacer buenas páginas en HTML .

Todos los capítulos del subapartado Crear la página web de este manual.

Etiquetas y elementos HTML son interruptores on / off para los distintos tipos de

formateo de texto. A menos que se especifique lo contrario, todo etiqueta de apertura

(como <head>) necesita un cierre ( un "off") en su etiqueta de final (</ head>). Ejemplo:

<html>

...

</html>

Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya

que esto hace que sea más fácil seguir tu propio marcado y que sea más fácil de leer.

Además, en el momento en el que estés preparado para dar el salto a XHTML (el lenguaje

que está pensado para reemplazar a HTML) te será más fácil, ya que en XHTML todas las

etiquetas deben cerrarse.

Con frecuencia verás diseños HTML con código indentado como el que se muestra a

continuación, es decir, código tabulado con sangrías, de forma que los bloque de texto se

mueven hacia la derecha insertando espacios para separarlos del texto adyacente que

forme otras estructuras diferentes. Esto hace que sea más fácil leerlo y comprobar qué

etiquetas de cierre se refieren a qué etiquetas. Por ejemplo, esto es claramente erróneo:

<p>

<strong>

    texto en negrita

  <em>texto en negrita y cursiva

texto sólo en cursiva

  </em>

</ p>

Sin embargo, esto es válido:

<p>

 <strong>

   texto en negrita

    <em>

      texto en negrita y cursiva

    </em>

   </strong>

   <em>

    texto solo en cursiva

   </em>

</p>

Etiquetas, elementos y atributosYa hemos visto lo que es una etiqueta en HTML, y que hay etiquetas de apertura y (en la

mayoría de los casos) etiquetas de cierre. El navegador lee estas etiquetas y crea una

representación interna de lo que leyó. Esta representación interna se conoce como

unelemento. Entonces, el navegador “decide” cómo mostrar el elemento en la pantalla.

Además, no todos los elementos se muestran en pantalla (como el HEAD),y por el

contrario algunos elementos siempre existen, incluso si no los creaste en tu código fuente

(como el HTML, HEAD oBODY).

Algunos elementos aceptan parámetros adicionales. Por ejemplo, el elemento A puede

aceptar el parámetro HREF, que lo convierte en un enlace. Estos parámetros son

conocidos comoatributos, y se crean así:

<a href="nombre-de-archivo.html">

Ten en cuenta que en HTML, las etiquetas y nombres de atributos se puede escribir en

cualquier circunstancia. Algunos diseñadores web tienden a utilizar mayúsculas para

destacarlos en elcódigo fuente, otros escriben todo en minúsculas para hacerlos más

fáciles de traducir a XHTML más tarde si es necesario. Mi consejo es que adoptes esta

segunda opción, lo lógico es con el tiempo acabar creando páginas en XHTML. De todas

maneras, cualquiera de las dos formas es correcta en HTML.

Ejemplo de estructura de una página HTML

Resumen: En este tutorial vamos a explicar las partes de una estructura básica de una página hecha en HTML.

En este tutorial vamos a explicar las partes de una estructura básica de una página

hecha en HTML. Como veremos, la sección del body (donde va toda la información que

se muestra al usuario), puede y debe hacerse más compleja, conteniendo capas y

estructuras que conformes los menús, el contenido y el pie de página, entre otros.

Junto con esta guía, te recomiendo que leas los siguientes documentos:

Conceptos básicos de HTML .

Normas elementales en HTML .

Videotutoriales de HTML  y HTML básico.

Como hacer buenas páginas en HTML .

Todos los capítulos del subapartado Crear una página web de este manual.

Introducción

Cada página HTML debe constar de dos secciones:

1. El HEAD o cabecera, donde está la información sobre la página web, como el título,

una breve descripción y algunas palabras clave. También puede contener información

de estilos (CSS) y librerías JavaScript.

2. El BODY o cuerpo, donde está todo el contenido que el usuario va a ver en su

navegador.

Las siguientes etiquetas HTML se utilizan para construir la estructura básica de una web:

<html> significa el inicio (y final) del documento.

<head> significa el inicio (y final) de la sección de cabecera del documento.

<title> Es el título del documento. Esto se muestra por la mayoría de los navegadores

como título de la ventana, cuando agregas una web a favoritos, etc. Los motores de

búsqueda  como Google suelen utilizarlo también como título en los resultados de

búsqueda, por lo que es muy importante para la optimización de la página web y

el SEO en general. Por todo esto, debes escoger muy bien el título de cada página de

tu sitio web y procurar que todos sean únicos y descriptivos.

<body> significa el inicio (y final) del contenido visible del documento (lo que ve el

usuario final).

Estructura básica en HTML

Un ejemplo completo de un documento HTML sería (ojo, sólo la estructura básica):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <title>Título de ejemplo</title>

  </head>

  <body>

    <p>¡Esta es mi web!</p>

  </body>

</html>

Introducción a los elementos y etiquetas de HTML

¿Qué es el HTML?HTML es un lenguaje de marcado, y es por mucho el lenguaje más comúnmente utilizado

en la Web. Los lenguajes de marcado dan forma a un documento HTML. Determinan qué

partes son encabezados, qué partes párrafos, qué partes listas, qué partes enlaces, etc.

HTML significa Lenguaje de Marcas de Hipertexto (Hyper Text Markup Language). El

HTML fue desarrollado por el científico Tim Berners-Lee en 1990.

Un archivo HTML es un archivo de texto normal, salvo por el hecho de que contiene

etiquetas de formato o marcaje. En HTML, usamos "etiquetas" (tags) para crear la

estructura de una página web. Estas etiquetas indican al navegador cómo mostrar el texto

y las imágenes en el documento. Los archivos HTML deben tener la extensión .htm o .html

para que se interpreten correctamente por un navegador como Internet Explorer. Al ser un

archivo de texto, se puede crear un archivo HTML utilizando cualquier editor de

texto corriente, como el Bloc de notas, WordPad o MSWord, etc.

Etiquetas lógicas en HTML (logical inline tags)Las etiquetas lógicas HTML están diseñadas para describir (en el explorador) el

significado del texto que encierran. Esto tiene un impacto importante en los motores de

búsqueda como Google (y en el SEO), puesto que los buscadores analizan esas

"etiquetas" para intentar averiguar de qué trata una página web. Hay muchas etiquetas

lógicas en HTML, entre otras:

<strong> : marca un texto en negrita, denota importancia.

<em>: destaca un texto – por lo general hace que los navegadores muestren el texto

en cursiva.

<span>: una etiqueta de línea neutral. – Para darle un aspecto diferente se usa CSS.

<div>: un elemento de bloque neutral. – Para darle un aspecto diferente también se

usa CSS.

Aunque estas etiquetas lógicas tienen una forma predeterminada de mostrarse en los

navegadores (como Internet Explorer o Firefox), se entiende que el CSS se debería utilizar

para darles la apariencia deseada y crear así el diseño de una página web.

Etiquetas de bloque vs etiquetas de líneaEn HTML, las etiquetas son "de línea" o "elementos de bloque".

Elementos de bloque en HTML (block elements)Un elemento de bloque digamos que existe en su propia caja virtual y está siempre

seguido por un salto de línea (un enter). En otras palabras, un elemento en bloque rompe

el flujo del texto para crear un espacio propio alrededor de sí mismo que ningún otro

elemento puede invadir.

Elementos de línea en HTML (inline elements)Las etiquetas de línea (o elementos de línea), en cambio, sí forman parte del "flujo" del

texto en el que se insertan y no forman esa caja virtual de la que hablábamos, ni tienen

saltos de línea. Los elementos de línea siguen el flujo normal del texto. Por ejemplo en el

siguiente texto:

Este es un ejemplo de un elemento de línea en HTML.

El texto en negrita está contenido dentro de un elemento de línea o inline tag, en este caso

<strong>. Aquí el código:

<p>Este es un ejemplo de un <strong>elemento de

línea</strong> en HTML.</p>

Así, un ejemplo de una etiqueta de bloque es un <div> (caja) ó un <p> (párrafo) y un

ejemplo de una etiqueta de línea es la <b> (negrita). Para entender este concepto lo más

sencillo es probar lo que sucede en un texto cuando se introducen ambos, haz la prueba.

HTML – XHTML Doctype o versión del documento de una página web

Resumen: Antes de comenzar a hacer la página web en sí, tenemos que decirle al navegador qué versión de HTML vamos a utilizar para que sepa interpretarlo correctamente.

Antes de comenzar a hacer la página web en sí, tenemos que decirle al navegador qué

versión de HTML vamos a utilizar para que sepa interpretarlo correctamente. Aquí tienes

un resumen con las características de cada doctype.

HTML 4.01 Transitional, Strict, Frameset

Hay tres versiones de HTML 4.01, y cada una tiene sus propios fines, así que lo mejor es

que elijas la más adecuada para tu proyecto y tu nivel de conocimiento.

HTML Strict

Es la versión más limpia y simple de HTML. Con este doctype sólo puedes usar las partes

del HTML que se refieren a la estructura y, en general, no permite utilizar las partes que se

relacionan con el estilo (algunas etiquetas de HTML permiten realizar un diseño básico,

pero esto por suerte ha sido reemplazado por el CSS). Si haces tus páginas web

basándote en esta versión de HTML te será mucho más fácil pasar a XHTML en un futuro.

HTML Transitional

Esta es la versión mixta. Se permite el uso de etiquetas de estilo, que realmente no tienen

cabida en HTML, pero que se introdujeron antes de que el CSS existiera. En general, es

mejor mantener el marcado (HTML) y el estilo (CSS) totalmente independiente, ya que

esto hace más fácil cambiar el aspecto de la web más tarde, e incluso compartir el mismo

estilo en varias páginas web, pero si todavía no dominas HTML y CSS, este doctype

seguramente sea la mejor elección.

HMTL Frameset

Esta versión de HTML permite utilizar un conjunto de marcos (frames) en lugar del BOBY,

por lo que puedes combinar varias páginas en una sola.

Parece una tontería, pero es muy importante que definas el tipo de documento de tu web,

como se muestra a continuación, para obtener una interpretación correcta de tu código

fuente en todos los navegadores actuales. Si no lo haces corres el riesgo de que la página

no se vea como tu quieres.

Este código debería ser lo primero que aparezca en el código fuente de tu página, antes

incluso de la etiqueta HTML. Los tres doctypes para HTML 4.01 son:

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

El DOCTYPE en HTML 5

HTML 5, el futuro del HTML, aboga por el uso de un doctype simple:

<!DOCTYPE HTML>

De hecho, en el borrador se refiere a los doctypes como un "todo inútil, pero necesario",

cuyo propósito es asegurarse de que los navegadores interpreten las páginas web de

forma correcta. El doctype último hará esto mismo y además de forma simplificada. Si

haces una página web en HTML 5, este doctype debería ser tu primera elección, a menos

que necesites para validar tus páginas web versiones anteriores de este lenguaje.

XHTML 1.0 Transitional, Strict, Frameset

Utiliza XHTML 1.0 Transitional cuando tu página web se ajuste a las normas básicas

XHTML, pero todavía utilices algunas etiquetas HTML para la presentación (estilo):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

Utiliza XHTML 1.0 Strict cuando tu página web se ajuste a las normas de XHTML y los

usos de CSS para la separación total entre contenido y presentación. Puede ser un poco

más complicado de validar para diseñadores novatos, pero el resultado final merece la

pena. Las páginas son más semánticas y ordenadas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

XHTML 1.0 Frameset es idéntico al doctype transitional, excepto en el uso de la etiqueta

<frameset> en lugar de <body>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

frameset.dtd">

XHTML 1.1 DTD

XHTML 1.1 declaration. Visita el sitio del WC3 para una visión general y de lo que ha

cambiado desde la versión  1,0 de XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Dar formato a un texto en HTML. Etiquetas HTML para poner texto en una web

Resumen: A contiunuación os muestro un listado de etiquetas válidas para formatear textos en html y darles el estilo y apariencia deseados.

A contiunuación os muestro un listado de etiquetas válidas para formatear textos en html y

darles el estilo y apariencia deseados en tus páginas web.

La idea es usar las etiquetas apropiadas para cada situación y tipo de texto, dotando de

unmarcado semántico adecuado, es decir, darle mayor significado al contenido de la web

de cara a tus visitantes, a los buscadores, navegadores, etc.

El uso de las etiquetas HTML para texto, al igual que cualquier otro elemento de tu

página web, se debe usar combinado con CSS para controlar la expresión exacta de estas

etiquetas en pantalla.

Por supuesto no es necesario usar todas estas etiquetas para hacer buenas páginas web,

pero sí que conviene saber que existen para poder aplicarlas cuando sea necesario.

La agrupación aquí expuesta es personal, simplemente para ayudar al lector a encontrar

un etiqueta concreta para un fin también concreto. Por supuesto se admiten sugerencias.

Etiquetas válidas fundamentales para dar formato a un texto

Resaltar textos

<strong> Texto de mayor importancia</ strong>

Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor

importancia a ciertas palabras o frases dentro de un texto. Es una etiqueta importante para

el posicionamiento web.

<b>texto en negrita</ b> 

La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor

importacia es más correcto usar <strong>.

<em> texto en cursiva </ em>

Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una

manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.

<h1> títulos y encabezados</ h1>

Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden

dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6.

Estas etiquetas título son importantes para el SEO.

<big>texto más grande</ big> 

Una forma rápida de aumentar el tamaño de la fuente. Para hacer el texto más pequeño

sin usar css se usa <small>.

<sub> subíndice</ sub>

Muestra el texto dentro de estas etiquetas por debajo de la línea normal, a modo de un

subíndice.

<sup> superíndice </ sup>

Muestra el texto dentro de estas etiquetas por encima de la línea normal, a modo de un

superíndice.

Estructura y disposición de textos en la página

<div>bloque de texto</ div>

Establece un bloque personalizado de contenido en tu página. Se utilizan sobre todo junto

con las hojas de estilos para crear capas y estructuras web.

<span> Bloque de texto en línea</ span>

Similar a la etiqueta div, pero el texto contenido dentro de esta etiqueta sigue el flujo

normal del resto, mientras que el texto contenido dentro de la etiqueta <div> actúa como

un bloque separándolo visualmente del resto. Puedes leer más información

sobre elementos y etiquetas en HTML.

Texto preformateado

<pre> texto preformateado</ pre>

Soportes de texto preformateado. Si envuelve alrededor de este texto, que va a seguir la

forma

del texto en el código – es decir, sin formato extra tiene que poner pulg Si tienes espacio

que en su código, éste aparecerá espaciadas en la página.

<samp> Textos de ejemplo</ samp>

Se utiliza para mostrar un ejemplo en pantalla, por lo general de una salida de un

programa, un script, etc. Es similar en uso a la etiqueta <code>.

<code> código</ code>

Establece el texto como código, se usa mucho en páginas como esta, para ejemplos de

código fuente.

Citas y Referencias

<blockquote>cita larga</ blockquote> 

Sangría todo el bloque de texto de ambas partes y añade saltos de línea superior e

inferior. Se utiliza para citas largas.

<cite>cita</ cite> 

Muestra una cita (el título de una obra a la que estás haciendo referencia, por ejemplo).

<q>citas pequeñas</q>

Se usa para entrecomillar una cita pequeña. A diferencia de <blockquote>, no presenta el

texto en un bloque separado sino que sigue el flujo normal de la página.

<dfn> definición</ dfn> 

Pues eso, para formatear un texto en HTML como una definición.

<abbr>abreviaturas</ abbr> 

Denota una abreviatura, utilizar el atributo   title  para darle el significado completo.

<acronym>acrónimos</ acronym> 

Lo mismo que la anterior. Sólo que en lugar de para abreviaturas se usa para acrónimos.

 

Si te interesa, puedes ver ejemplos reales de como se muestran las diferentes etiquetas de

texto en la página web de w3 schools.

Crear una galería de imágenes solo con CSS y HTML

Resumen: Presentación de un código hecho de una galería de imágenes desarrollada completamente en CSS y HTML, explicada de forma que puedan realizarse las modificaciones que se deseen.

Muchas veces sucede que, por desconocer todo el potencial que ofrecen los recursos web

más elementales, se aplican herramientas más complejas y que no todos los ordenadores

ni todos los navegadores aceptan. CSS es una poderosa herramienta que brinda una

infinidad de recursos que no siempre son bien explotados.

Un ejemplo de ello, lo hemos dado con el menú desplegable realizado completamente con

CSS y HTML, sin necesidad de aplicar otros lenguajes o animaciones de ningún tipo. Este

mismo tipo de recursos nos permite mostrar algunos contenidos de forma tal que simulan

ser dinámicos.

El ejemplo que hoy traemos, se trata de una galería de imágenes muy sencilla, con muy

poco código, como veremos más adelante, y que está basada en los

mismos principios con que fue desarrollado el mencionado menú desplegable. Es más,

este ejemplo es aún más sencillo. Pero no por sencillo deja de ser atractivo.

Lo que necesitaremosPara poder realizar el ejercicio, necesitarán de algunos archivos de imagen que están

contenidos en el ejemplo terminado que pueden descargar desde aquí. Luego de

descargado el archivo y descomprimido, encontrarán un archivo HTML y un archivo CSS,

que tienen el ejemplo ya terminado.

Junto a ellos, se encuentra una carpeta “img” que contiene todas las imágenes

necesarias. Dentro de esta carpeta se encuentran dos carpetas más, llamadas “chicas” y

“grandes” que son las que tienen las imágenes que utilizaremos en la galería de imágenes

propiamente dicha.

El ejemplo ya terminado pueden verlo aquí.

Conceptos generalesPodríamos decir que este trabajo está basado fundamentalmente en un solo concepto, y

es el de la visibilidad de las capas. Con CSS podemos determinar si una capa es visible o

no mediante el empleo de la etiqueta “visibility”, que puede tener los valores visible,

hidden y collapse.

La galería de imágenes constará de una serie de imágenes en miniatura (thumbnails)

alineadas en forma ordenada en dos columnas. Cuando se pasa el puntero por estas

imágenes, aparece en un recuadro ubicado a la derecha de estas dos columnas la imagen

ampliada. Para realizar esto, debemos emplear una etiqueta y uno de sus posibles valores,

que para este ejemplo es fundamental: “position: absolute”.

Ahora explicaremos los principios de funcionamiento. Cada par de imágenes (una imagen

ampliada con su respectivo thumbnail) se encuentran formando parte del mismo ítem de

lista. Cada una de estas imágenes que forman el par, tienen una clase diferente (min y

max). La clase min define los atributos del thumbnail.

La clase “max” es la que se refiere a la imagen ampliada, y que tiene una posición

absoluta y un valor “hidden” de su atributo “visibility”, lo que hace que en condiciones

normales esta imagen no se encuentre visible.

Se emplea una pseudo-clase vinculada a la clase “max” (“a:hover .max”), que es la que

hace que el atributo “visibility” adquiera valor “visible” cuando el puntero se posa sobre

cualquier elemento que compone el ítem de la lista.

Desarrollo del ejemploComo pueden apreciar, para que el tema quede más claro se han definido todos los

atributos CSS que están relacionados con la galería en si misma, en un archivo CSS

diferente (“galería.css”) del que contiene los atributos de los restantes componentes de la

página, de forma que el tema pueda verse con mayor claridad.

Estructura

En primer lugar, definiremos la estructura del menú, que consta simplemente de dos listas

no ordenadas (ul), conteniendo cada una de ellas cuatro ítems (li). Las listas tienen sus

atributos definidos por la clase “cat”. Como ya dijimos, cada uno de los ítems contiene dos

imágenes.

Ubicación de los thumbnails

En primer lugar, debemos ubicar las imágenes en miniatura en dos columnas (cada

columna es una lista diferente) y para ello debemos definir en el archivo CSS los atributos

de la clase “min” que se encuentran contenidos en los ítems (li).

?

1

2

3

4

5

6

7

8

9

.cat {

list-style-type: none;

margin: 0 0 25px 10px; /* Eliminacion de viñeta en IE6 */

padding: 0px; /* Eliminacion de viñeta en IE6 */

float:left;

}

li .min {

width: 75px;

height: 64px;

padding: 6px 20px 20px 7px;

10

11}

La primera clase define que la lista no tendrá estilo de lista, se definen los márgenes y el

relleno para que se vea como queremos, y le damos el valor “left” a la propiedad “float”,

de forma que ambas listas se ubiquen una al lado de la otra flotando a la izquierda. Luego,

se definen los atributos de las dimensiones de cada uno de los ítems y el relleno de los

mismos, en la regla “li .min”.

Imágenes grandes

Cuando vemos el ejemplo que hemos desarrollado hasta aquí, vemos que se nos presenta

un gran espacio en blanco que solo aparecerá cubierto por las imágenes grandes cuando

el puntero se pose sobre los thumbnails. Es por esta razón, que incorporamos una imagen

que contendrá un mensaje con instrucciones para el usuario, de forma tal que todo el

espacio quedará cubierto.

Esto lo realizamos empleando una capa con posicionamiento absoluto, y cuyos atributos

aparecen definidos en el archivo CSS con el identificador “#base”:

?

1

2

3

4

5

6

7

8

9

#base {

width: 410px;

height: 310px;

border: solid 1px #ccc;

position: absolute;

top: 250px; /* Provoca la separacion del borde superior */

left: 500px; /* Separa la imagen grande de la pequeña */

background: url(img/galeria.png);

}

Como vemos, tiene un ancho y una altura definidos. Como hemos querido agregar un

borde que aparecerá separado 5px a cada lado de la imagen, las dimensiones son 10px

más grandes que las de las imágenes. A su vez, esta capa tiene una imagen de relleno,

que es la que se presenta cuando ninguna de las imágenes de la galería está visible.

Ahora solo resta definir el posicionamiento de las imágenes grandes, así como su

condición de visibilidad, por lo que definiremos a todos los elementos contenidos dentro de

un ítem de lista con la clase “.max”.

?

1

2

3

4

5

6

li .max{

visibility: hidden;

position: absolute;

top: 256px; /* Provoca la separacion del borde superior */

left: 506px; /* Separa la imagen grande de la pequeña */

}

Como vemos, se define que en condiciones normales estos elementos (imágenes) estarán

no visibles. La posición (top y left) son seis pixeles más que los de la capa “#base”,

debido al relleno de 5px por lado que hemos definido y al borde de 1px que tiene dicha

capa.

A continuación, mediante el empleo de una pseudo-clase, haremos que la capa sea visible

cuando el puntero se pose sobre cualquier elemento con enlace contenido dentro del ítem

de lista:

?

1

2

3

a:hover .max {

visibility: visible;

}

El ejemplo ya terminado pueden verlo aquí.

ConclusiónComo pueden ver, el ejemplo es extremadamente sencillo. Se puede ampliar, colocar una

mayor cantidad de columnas, modificar las posiciones o cualquier otra cosa que su

imaginación les dicte, sin mayores dificultades.

La especificidad en Hojas de Estilo CSS

Resumen: Un pequeño pero eficaz consejo que puedo dar para todos aquellos que empiezan a desarrollar sus primeras hojas de estilo CSS,

es tener en cuenta el factor de la especificidad en CSS, su influencia y la manera de controlarlo.

Un pequeño pero eficaz consejo que puedo dar para todos aquellos que empiezan a

desarrollar sus primeras hojas de estilo CSS, es tener en cuenta el factor de

la especificidad en CSS, su influencia y la manera de controlarlo.

La especificidad es una propiedad pocas veces valorada por muchos desarrolladores web

novatos, y que por lo mismo puede causar la desesperación de más de uno al momento de

aplicar estilos a nuestro código.

¿Qué es la especificidad en CSS?¿En qué consiste? Básicamente la especificidad se refiere al valor que toma cada uno de

los elementos de una hoja de estilo, hay selectores que tienen más peso e importancia que

otros, es decir más especificidad.

Entre más especificidad exista, tendremos menos posibilidades de equivocarnos al aplicar

el estilo que queremos a cierto elemento, y es ahí donde la desesperación de no obtener lo

que queremos desaparecerá.

Como calcular la especificidad CSSExiste una forma sencilla de calcular la especificidad CSS, es mediante una fórmula

considerada incluso como un cálculo ya estandarizado. Consiste en sumar los puntos

totales de una sentencia CSS en base a los selectores o elementos de los que está

compuesto.

Se le da un valor de 1 punto a un elemento simple como una etiqueta a, p o div, a un

selector de clase se le da el valor de 10 puntos y a un selector de id se le da un valor de

100 puntos, siendo únicamente superado por los atributos de estilos a los que se les da un

valor de 1000 puntos.

Es decir; supongamos que queremos agregar un estilo los párrafos de nuestro documento,

si agregamos en nuestro CSS un selector p{…}, este será utilizado para dar estilo a todos

los párrafos del HTML, pero sólo se le dará el valor total de 1 punto, esto quiere decir que

tiene poco especificidad.

Por lo cual si existe otro selector en el mismo CSS que diga así “.par p{…}” tendrá mayor

importancia que el anterior, ya que le estamos agregando una clase por lo que la

especificidad aumenta en 10 puntos es decir 10 puntos por el selector clase más 1 punto

por el elemento nos da 11 puntos.

De la misma manera esto se aplica para los id, si agregamos una línea que diga “#parr

p{…}” esta tomará el valor de 101 puntos de especificidad, por lo que será la más

importante, así podemos crear combinaciones para que los estilos se apliquen

correctamente.

Un ejemplo de especificidad con CSSCon el siguiente código CSS:

p{

background: crimson;//Especificidad de 1 punto

}

.par{

background: pink;//Especificidad de 10 puntos

}

p.par{

background: maroon;//Especificidad de 11 puntos

}

#parr{

background: orange;//Especificidad de 100 puntos

}

p#parr{

background: red;//Especificidad de 101 puntos

}

p.par#parr{

background:green;//Especificidad de 111 puntos

}

Obtendré los siguientes resultados si inserto este bloque en mi HTML:

<p>El fondo de este párrafo será color carmesí</p>

<p class="par">El fondo de este párrafo será color

granate</p>

<div class="par">Este div tendrá el fondo de color

rosa</div>

<p id="parr" class="par">El fondo de este párrafo

será de color verde</p>

<p id="parr" style="background: black;">El fondo de

este párrafo será negro porque use un atributo de

estilo dentro de la etiqueta</p>

<p id="parr">El fondo de este párrafo será rojo</p>

Tengan en mente estos números al momento de realizar sus CSS y no se confundirán al

momento de desplegar su web en su navegador, ya que obtendrán lo que calcularon.

Fondos con gradientes – degradados con CSS3

Resumen: En este artículo explicamos las dos formas que hay de hacer fondos con gradientes en CSS3, con códigos de ejemplo para entender mejor el procedimiento.

Los gradientes o degradados son una de las técnicas más utilizadas por el diseño

gráfico para resaltar y estilizar fondos en las páginas web. Su aplicación en casi cualquier

situación puede resultar beneficiosa para agregar cierta personalidad al sitio, creando en el

mayor número de situaciones una mejor sensación que al utilizar un fondo monocromático.

El uso del término gradiente se refiere a la creación de una transición gradual, suave y sin

saltos bruscos, de un color a otro creando una secuencia de colores que puede ser

utilizada para crear efectos como el de sombra y desvanecimiento.

Antes de la llegada de las hojas de estilo y la programación dinámica, los gradientes eran

realizados únicamente con programas de ilustración, teniendo que crear dicho degradado

de manera manual y una vez termino había que cargar la imagen en nuestro servidor web

y colocarla como fondo de nuestro sitio.

Con el paso del tiempo hubo quienes se aventuraron a crear ciertos scripts o programas

para colocar gradientes de forma dinámica desde el lado del servidor web, calculando y

estableciendo las propiedades de estilo con lenguajes como PHP.

Crear un programa o una imagen únicamente para mostrar dicho efecto en nuestro fondo

resultaba bastante inflexible, y pronto fue considerado como una mala práctica por el

tiempo que se consumía en cargar el sitio o quizás porque en algunos navegadores el

efecto no era el esperado.

Con la llegada de CSS3 y su incorporación en la mayoría de los navegadores de

renombre, ahora tenemos la oportunidad de crear gradientes de manera sencilla, con el

menor de los esfuerzos, sin necesidad de algún programa de edición digital como

Photoshop y con sólo código, nada de imágenes.

Formas de crear degradados para tus fondos con CSS3Hasta el momento existen dos formas establecidas por CSS3 para crear un gradiente,

ya que desafortunadamente Webkit y Mozilla no llegaron a un acuerdo en lo que a este

tema se refiere, aunque los dos hayan adoptado la misma sintaxis para casi el resto de

CSS3.

Webkit es un framework que esta presente en navegadores como Safari y Chrome,

mientras que el kit de Mozilla controla el CSS3 en Firefox. Es esto y la sintaxis lo único que

diferencia a los dos códigos que utilizaremos en este artículo, ya que producen

básicamente el mismo resultado.

La sintaxis del gradiente Webkit es la siguiente:

-webkit-gradient(<tipo>, <punto> [, <radio>]?, <punto> [, <radio>? [, <parada>]*)

El tipo puede ser “linear” o “radial”, es decir que el degradado se haga mediante lineas o

mediante círculos Un punto es un par de valores separados por espacios, puede ser

indicado con números, porcentajes o las palabras clave “top”, “bottom”, “left” y “right”.

Radio es un número y sólo se puede especificar cuando el tipo de degradado es radial.

Una parada es una función con dos argumentos, un número y un color, indicando donde

debe terminar el gradiente, también se pueden utilizar las funciones “from” y “to” para

especificar esto.

Entonces, si queremos definir un degradado lineal que abarque todo el fondo de nuestra

página y que vaya del color “granate” al color “carmesí”, incluiremos en nuestro CSS la

siguiente línea:

body{

background: -webkit-gradient(linear, 0 0, 0 100%, from(maroon), to(crimson));

}

De esta manera estamos indicando con “linear” que es de tipo lineal, “0 0” que va de la

esquina superior izquierda, “0 100%” hasta la esquina inferior izquierda, “from(maroon)” de

granate, “to(crimson)” a carmesí.

Es entonces que si queremos que el gradiente únicamente cubra una parte del fondo basta

con cambiar el porcentaje en el segundo parámetro, si indicamos “0 20%” el degradado se

terminará en el 20% del fondo y el otro 80% será del color que le dimos al final en la

función “to()”.

En caso de que queramos incluir un tercer color en el gradiente utilizaremos “color-stop” de

la siguiente manera:

background: -webkit-gradient(linear, 0 0, 0 100%, from(maroon), color-stop(50%, crimson), color-stop(90%, red) );

Esto indica que el color carmesí empezara en el 50% y el color rojo en el 90%, creando un

gradiente entre tres colores lo que da un efecto diferente a los degradados comunes.

Como mencioné al principio, se pueden hacer fondos con gradiente en CSS3 de dos

maneras. Ya vimos como poder realizar el efecto con Webkit, ahora veamos como hacer

un fondo con gradiente con Mozilla. Primero que nada la sintaxis aquí sería de la

siguiente manera:

-moz-linear-gradient( [<punto> || <ángulo>,]? <parada>, <parada> [, <parada>]*)

El “tipo” en este caso está definidio al inicio de la sentencia, como vemos linear está en el

nombre “-moz-linear-gradient”, el “punto” está para definir la posición horizontal y vertical

en donde iniciará el degradado, y se puede usar con porcentaje, pixeles, o palabras claves

(left, center, right para horizontal y top, center, bottom para vertical), si no es especificado

se inicia en el centro por defecto.

También se puede usar un ángulo en vez de dar un punto, por ejemplo si damos 15deg

(15 grados) en la sentencia “-moz-linear-gradient (left 15deg, marron, crismon);”

obtendremos un degradado que inicia con 15 grados de inclinación de izquierda a derecha.

Al igual que en Webkit, con Mozilla se puede utilizar el “color-stop” como parada para

definir hasta donde queremos que llegue un color, y donde inicia otro.

ConclusionesComo podemos ver son sentencias muy parecidas que varían en muy pocas situaciones,

con ellas podemos crear miles de combinaciones y experimentando podemos llegar a

crear efectos muy buenos para nuestro sitio Web.

Recuerda que Internet Explorer aún no puede interpretrar CSS3 por lo tanto tampoco

gradientes, en cuanto a Safari y Firefox si tienes una versión mayor a la tres podrás

usarlos, al igual que en Google Chrome.

Para no dejar a nadie resentido o con un fondo que tu no quieres mostrar, trata de incluir

un color base para aquellos navegadores que aún no soporten el gradiente, esto lo puedes

hacer simplemente incluyendo dentro de “body” en el CSS la siguiente sentencia

“background: #000000;”, con esto si el usuario usa Internet Explorer verá el fondo de color

negro.

Animar texto con CSS3 y WebKit para Chrome y Safari

Resumen: Explicación del uso de las etiquetas pulse y bounce, integradas dentro del motor WebKit (Chrome y Safari) para animar textos con CSS· puro.

na de las grandes maravillas sobre el uso del CSS es que con muy poco puedes lograr

bastante, es sorprendente como con pequeños cambios que hagas a tu código, unos

cuantos atributos o un ajuste de clases, puedes crear un mejor ambiente para atraer,

agradar y lograr que el aspecto de tu sitio web sea más placentero.

Muchas veces nos olvidamos de los detalles, cuando en muchas ocasiones estos son

fundamentales para lograr el enganche con los visitantes de tu web. La información

necesita presentarse de manera adecuada, y con los detalles podemos dar ese toque de

diferencia que hará que un usuario prefiera nuestro sitio sobre los otros.

En la actualidad, los navegadores permiten experimentar a gran escala con las hojas de

estilo, con excepción de Internet Explorer, todos soportan la mayoría de las propiedades

con las que cuenta este lenguaje. En este caso vamos a hablar de distintos tipos de

animaciones hechas con CSS.

Animaciones de texto con CSSUno de los pequeños pero poderosos efectos que podemos crear hoy en día de manera

fácil, es la animación de texto. Las animaciones, comúnmente conocidas en el ambiente

del diseño, consisten en agregar un efecto de movimiento a un objeto, en nuestro caso al

texto o a un div, lo que le agrega la sensación de que está en diferentes planos en ciertos

momentos.

En el pasado existían etiquetas como “marquee” o “blink” que podían agregar ciertas

animaciones primitivas a nuestro texto, llegó a tal grado el mal uso de ellas que

actualmente se encuentran descontinuadas, y al verlas en una página pueden causar la

indigestión de más de uno.

Hasta hace poco para realizar este efecto de manera correcta se tenía que recurrir a

herramientas de diseño como Flash. En este momento CSS3 nos ofrece la capacidad para

crearlo al agregar unas cuantas líneas de código a nuestra hoja de estilo.

Las animaciones CSS (@-webkit-keyframes) son parte del paquete propuesto por WebKit

para la estandarización de CSS3, es por ello que actualmente sólo pueden ser

visualizadas en Google Chrome y Safari. Su objetivo es poder brindar al desarrollador la

capacidad de crear y realizar contenido gráfico sencillo pero a la vez enriquecedor.

Tipos de animaciones de texto con WebKit

Podemos manejar dos tipos de animación, “pulse” y “bounce”, efectos bastante conocidos

para aquellos que han manejado algún programa de diseño anteriormente. Para

agregarlos a nuestro objeto, no hay que tener un dominio total de CSS, basta con agregar

las siguientes líneas en nuestro CSS;

?

1 @-webkit-keyframes pulse {

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

   from {

   opacity: 0.0; /* Nivel de transparencia inicial */

   font-size: 50px; /* Tamaño inicial de la font en la animación */

   }

   to {

   opacity: 0.8; /* Nivel de Transparencia final */

   font-size: 100px; /* Tamaño final de la font en la animación */

   }

   }

   #animacionpulse {

   -webkit-animation-name: pulse; /* El nombre del efecto que estamos agregando */

   -webkit-animation-duration: 2s; /* Tiempo que durará la animación */

   -webkit-animation-iteration-count: infinite; /* Las veces que queremos reproducir la animación */

   -webkit-animation-timing-function: ease-in-out;

   -webkit-animation-direction: alternate; /* Propiedad utilizada para que el texto regrese al tamaño de origen de manera gradual */

   }

?

1

2

3

4

5

6

7

8

9

10

@-webkit-keyframes bounce {

from {

left: 0px;

}

to {

left: 200px;

}

}

#animacionbounce {

-webkit-animation-name: bounce;

-webkit-animation-duration: 2s;

11

12

13

14

15

16

17

18

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

width: 50%;

padding: 0.2em 1em;

position: relative;  /*La posición relative es necesaria */

background: crimson;

}

Y finalmente agregamos las siguientes líneas en el body de nuestro sitio:

?

1 <div id="animacionpulse" style="font-family: Arial; text-align: center;"> Probando Pulse!

?

1 <div id="animacionbounce"> Probando Bounce! </div>

Lo que hacemos básicamente es agregar la librería de animaciones @-webkit-keyframes,

después especificamos que tipo de efecto queremos usar ya sea “pulse” como en el primer

caso, o “bounce” como en el segundo, y procedemos a dar los valores necesarios para

que se efectué la acción.

>>> Aquí podemos ver la demo. <<< (recuerda que sólo se ve en Google Chrome y Safari)

Como podemos observar los dos efectos son bastantes sencillos de aplicar y muy

parecidos en composición, y si experimentamos podemos crear efectos más elaborados y

complejos agregando atributos a estas estructuras básicas.

Crear banners animados con CSS y WebKit

Una de las funcionalidades que podemos darle a este efecto, es para crear un banner con

una atmósfera donde el elemento seleccionado se encuentre en movimiento mientras que

el resto de los elementos se encuentren estáticos o se difumen, y así lograr centrar la

atención en ese punto.

Para realizarlo basta con aplicar el elemento “webkit-transform” que nos permite

modificar la estructura del div al momento de la animación. El código CSS sería el

siguiente:

?

1 @-webkit-keyframes pulse {

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

  0% {

  background-color: black;

  opacity: 1.0;

  -webkit-transform: scale(1.0) rotate(0deg);

  }

  20% {

  background-color: black;

  opacity: 0.8;

  -webkit-transform: scale(1.2) rotate(-5deg);

  }

  40% {

  background-color: black;

  opacity: 0.6;

  -webkit-transform: scale(1.0) rotate(5deg);

  }

  55% {

  background-color: black;

  opacity: 0.8;

  -webkit-transform: scale(2.0) rotate(0deg);

  }

  65% {

  background-color: black;

  opacity: 0.9;

  -webkit-transform: scale(2.0) rotate(0deg);

  }

  100% {

  background-color: black;

  opacity: 1.0;

  -webkit-transform: scale(2.0) rotate(0deg);

  }

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

  }

  .banner {

  -webkit-animation-name: pulse;

  -webkit-animation-duration: 2s;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-timing-function: ease-in-out;

  -webkit-animation-direction: alternate;

  color:FFF;

  background-color: black;

  width: 10%;

  padding: 0.2em 1em;

  margin: 6em;

  }

Y el HTML correspondiente:

?

1

2

3

4

<div>

   <p>Coches usados!

       <span style="font-size:12px">Ven y conoce el nuevo carro 3008. Maneja hacia el futuro!</span> </p>

</div>

Con esto obtenemos un recuadro en movimiento de color negro con el mensaje que

incluimos en el div con clase “banner”.

>>> Aquí podemos ver la demo. <<< (recuerda que sólo se ve en Google Chrome y Safari)

ConclusionesComo en todos los casos del diseño, no hay que exagerar el uso de un efecto, la cuestión

aquí es saber donde y cuando aplicar cada técnica. El exceso sólo puede confundir e

incluso abrumar a la persona que navega por nuestro sitio salga de nuestro hosting.

El animar un texto produce un resultado bastante atractivo, pero no por ello se deberá

aplicar a todo el texto que nos lleguemos a encontrar. Debemos saber bien la función de

cada parte de nuestro sitio y al tener esto como noción, nuestro mismo sentido común nos

dirá en donde aplicarlo.

Por ejemplo, imagina que tenemos una página de blog donde constantemente exponemos

cierta cantidad de artículos, ahora visualiza todos esos escritos con un efecto de

animación, es algo frustrante ¿No lo crees?, no queremos que este efecto pronto se

convierta en otra etiqueta “blink”.

Por otra parte, es muy importante tener en cuenta que este efecto no se visualiza en todos

los navegadores ni mucho menos, sino que sólo se ve en Chrome y Safari por el momento.

Esperemos que con el tiempo se integre en la estandarización de CSS3 y el resto de

navegadores lo implementen.

La propiedad overflow de CSS en la maquetación de páginas web

Resumen: De gran utilidad y poco utilizada, la propiedad CSS2 "overflow" puede resultar de gran utilidad en la maquetación de páginas web.

La aparición de CSS 2 brindó a los diseñadores de páginas web algunos elementos que

brindan una mayor ductilidad a la hora de distribuir los contenidos en el diseño. Una de las

propiedades introducidas es “overflow”, que posibilita una distribución más eficaz de

las capas   en el diseño.

En muchas ocasiones, es necesario para mantener ciertas proporciones en el diseño,

asignar a las capas (elementos DIV) determinadas dimensiones, tanto en ancho como en

altura. Cuando esto sucede, al momento de introducir los contenidos es posible que los

mismos excedan las dimensiones asignadas.

Con CSS1, cuando esto sucedía, lo más frecuente era que las capas aumentaran de

tamaño hasta cubrir completamente el espacio necesario para los contenidos introducidos.

Usualmente, este aumento de tamaño de las capas se produce en la altura.

Para evitar este efecto, en CSS2 se introdujo el atributo “overflow”, que sirve para recortar

los contenidos que exceden el tamaño de las capas. Pero también sirve para que, en caso

de que se desee que el contenido en exceso sea visible, se agreguen a la capa barras de

desplazamiento que permitan que el usuario acceda al resto del contenido y la capa

mantenga el tamaño deseado. Los valores que pueden asignarse a este atributo son

cuatro:

Visible: Este es el valor que tiene por defecto cualquier capa cuyo atributo overflow no

se ha enunciado. Cuando se asigna este valor al atributo overflow de una capa, la

misma puede tener diferentes comportamientos de acuerdo al navegador del usuario.

En los navegadores Firefox, Google Chrome, Opera, Safari, Internet Explorer 7 y 8, la

capa mantendrá su tamaño y el contenido desbordará la misma. En cambio,

en Internet Explorer 6, la capa aumenta de tamaño hasta cubrir la totalidad de los

contenidos ingresados.

Hidden: Cuando se da este valor al atributo overflow y los contenidos superan en

tamaño a las dimensiones de la capa, los contenidos se recortan al finalizar el tamaño

indicado, quedando invisibles el resto de los contenidos. También en este caso, y bajo

determinadas circunstancias, Internet Explorer 6 y 7 pueden dar algunos errores. En

el resto de los navegadores, funciona correctamente en cualquier circunstancia.

Scroll: Este valor de la propiedad overflow, hace que la capa mantenga las

dimensiones asignadas, y el contenido se mantiene visible en su totalidad, gracias a

que aparecen barras de desplazamiento que permiten desplazarse para tener acceso

al resto del contenido que no es visible en la capa. Es importante destacar que, aún en

el caso de que los contenidos no superen el tamaño de la capa, las barras de

desplazamiento se mostrarán de todas formas.

Auto: Al asignarse el valor “auto” (automático), el comportamiento de la capa será

similar al que se obtiene al asignar el valor “scroll” en caso de que los contenidos

superen el tamaño de la capa, apareciendo las barras de desplazamiento. La

diferencia con el valor anterior radica en que, en los casos en que los contenidos no

superen el tamaño de la capa, las barras de desplazamiento no aparecen, como si

sucede en el caso de asignarse el valor “scroll”.

La utilidad de este atributo es múltiple, y permite un manejo más adecuado de las capas,

sobre todo en los casos en que las capas deben tener tamaños determinados para cumplir

con los requisitos de un diseño.

Veamos ahora como funcionan cada uno de estos valores. Para el ejemplo siguiente,

crearemoscuatro capas iguales con dimensiones definidas, tanto en altura como en

ancho, e introduciremos un texto lo suficientemente largo como para que sea superior a

dicho tamaño. Crearemos cuatro capas flotantes a la izquierda para que se ubiquen una al

lado de la otra.

Para seguir el ejemplo, crearemos dos archivos, el html y el archivo css. Los códigos que

deberemos introducir serán los siguientes:

<html>

<head>

<title>Ejemplo overflow</title>

<link rel="stylesheet" type="text/css" href="estilo.css" />

</head>

<body>

<div id="capa1">

<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>

<p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>

</div>

<div id="capa2">

<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>

<p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>

</div>

<div id="capa3">

<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>

<p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris

consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>

</div>

<div id="capa4">

<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>

<p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>

</div>

</body>

</html>

Y luego el archivo CSS:

#capa1, #capa2, #capa3, #capa4 {

width: 200px;

height: 200px;

padding: 5px;

margin: 5px;

border: solid 1px #840;

background: #fca;

float: left;

overflow: visible;

}

#capa2 {

overflow: hidden;

}

#capa3 {

overflow: scroll;

}

#capa4 {

overflow: auto;

}

Si empleamos Internet Explorer 7 u 8, Mozilla Firefox, Google Chrome, Safari u Opera, el

resultado deberá ser el siguiente:

Mientras tanto, si viéramos la página generada desde un navegador Internet Explorer 6, el

resultado sería el siguiente:

El ejemplo de Internet Explorer 6 solo lo hemos colocado con la finalidad de mostrar que

en algunos casos, es necesario hacer correcciones para este navegador, ya que toma de

modo diferente las propiedades CSS y no se basa en el estándar.

En la primera capa, vemos que la misma ha mantenido su tamaño, pero el contenido se

desborda de la misma. En el segundo, con el valor “hidden”, vemos que el contenido

queda recortado y no es posible acceder al mismo por parte de quien está viendo la

página.

En el tercer caso, habiéndose marcado el valor “scroll“, puede apreciarse que la

capamantiene su tamaño y el contenido no se desborda de la capa y pueden verse las

barras de desplazamiento horizontal y vertical, aún cuando la barra de desplazamiento

horizontal no es necesaria dado que el contenido desborda hacia abajo. En el último caso,

con el valor “auto”, la única barra de desplazamiento que aparece es la vertical, ya que la

barra de desplazamiento horizontal no es necesaria.

Soluciones a los problemas de visualización en Internet Explorer

Resumen: Damos un repaso a las técnicas más usadas para lidiar con la tarea de conseguir que nuestra web se vea bien en todos los navegadores, poniendo especial atención a Internet Explorer, puesto que es el que más problemas causa.

Si estás creando una página web y te encuentras ya en la fase de maquetación web,

entonces estás en la fase en la que llega la hora de convertir tu diseño en realidad. Se

trata de plasmar aquello que tenías pensado en HTML y CSS. Esto puede resultar

emocionante, pero muchas otras veces, y más si se cuenta con poca experiencia, puede

llegar a ser desesperante.

El problema de la visualización en Internet ExplorerConforme se avanza en este proceso de maquetación, uno se da cuenta que no es

suficiente con maquetar intentando que se vea bien en TÚ navegador, hay que intentar

que todo usuario que entre a tu web desde cualquier otro navegador, pueda verla tan

bien como tú. Intuitivamente cabría pensar que esto sucede así por defecto, que sin que

tengamos que hacer nada la página se va a ver siempre tal y como la estamos viendo

nosotros en nuestro navegador.

Nada más lejos de la realidad, cada navegador es un mundo, o mejor dicho tiene una

forma ligeramente distinta de renderizar el HTML y el CSS. En el caso de Internet Explorer,

cada una de sus versiones (ie6, ie7, ie8…) tiene una forma MUY distinta de interpretar el

código que tú estás escribiendo. Como resultado tenemos un gran problema, un usuario

que entre a tu web desdeInternet Explorer 6 muy probablemente no va a ver lo mismo que

está viendo un usuario que entra desde Firefox, o incluso desde Internet Explorer 7 u 8.

La solución puede resultar complicada, sobre todo sin experiencia, puesto que conforme

arreglas los estropicios de un navegador, con frecuencia algo se estropea en otro.

Internet Explorer 6 y 7, un duro reto para los diseñadoresPor mi experiencia de los años que llevo trabajando como diseñadora web, si el código

que estás construyendo está bien hecho y si el CSS es correcto, tu web debería verse bien

en todos los navegadores comunes, salvo en Internet Explorer 6 y a veces en ie7. Los

navegadores más comunes, que suponen un 99% de la cuota de mercado, son estos:

Internet Explorer 6+, Firefox 3+, Chrome, Safari yOpera 9+.

Como decía, si tu web está bien hecha, los problemas de visualización los vas a tener con

Internet Explorer 7 y 6. El uso de Internet Explorer 6, un navegador que tiene más de 10

años, tiende a desaparecer aunque a veces parezca lo contrario, pero aún lo usa un % de

usuarios importante, por lo que no hay que perderlo de vista en nuestros diseños.

Parece mentira que todavía tengamos estos problemas los diseñadores web. Vamos a ver

muy pronto la implantación universal de lenguajes tan avanzados como HTML5 o CSS3,

tenemos frameworks de JavaScript como jQuery, que hace efectos increíbles en las

páginas web… pero todavía no somos capaces de librarnos de Internet Explorer 6.

Entonces, ¿qué hacemos con Internet Explorer?Si estás familiarizado con el diseño de páginas web y más en concreto con el uso de CSS,

sabrás lo que son los hacks (y seguramente los habrás aplicado más de una vez). Para

quien no lo sepa, los hacks son trucos que usamos los diseñadores para conseguir que las

páginas web se vean igual en todos los navegadores, jugamos con los errores de los

navegadores para conseguir una correcta visualización.

Como profesional, no recomiendo su uso. Los hacks son trucos, trampitas que hemos

tenido la suerte de descubrir, pero que al fin y al cabo tienen un comportamiento extraño y

no habitual, por lo que no podemos estar seguros de que sigan comportándose así en un

futuro. Si maquetas tu web usando un hack y éste deja de ser útil dentro de un año, ten por

seguro que tu web se verá mal nuevamente.

Hay otras técnicas más recomendables para conseguir que se vea bien tu web en distintos

navegadores. Las vemos a continuación.

Usar un reset para CSS

Los navegadores tienen por defecto un estilo básico para el código HTML. Por ejemplo los

encabezados (H1, H2, etc.) se visualizan por defecto a mayor tamaño y en negrita, los

enlaces en azul y subrayados, se dan márgenes y paddings a ciertos elementos, etc. Esto

puede provocar comportamientos extraños de las propiedades CSS a la hora de diseñar

nuestras páginas web, y la mayoría de los problemas de compatibilidad entre navegadores

pueden venir de ahí sin saber nosotros porqué. Lo mejor es empezar una hoja en blanco

de verdad, y para eso tenemos que resetearla. Yo suelo usar el reset de Eric Meyer, pero

hay otros, como el de Yahoo!.

A parte de usar un reset prefabricado, como estos que os presento, lo ideal es adaptarlo a

cada diseño en el que trabajemos para lograr una mayor flexibilidad y no escribir código

innecesariamente.

Usar una hoja de estilos distinta para Internet Explorer

Aquí viene la parte más importante de este artículo, donde aprenderemos como hacer

una hoja de estilos para Internet Explorer o incluso para una versión concreta del

mismo. Para lograr esto se usan los comentarios condicionales, que son etiquetas que

Internet Explorer interpreta, mientras que el resto de navegadores las toman como simples

comentarios y las ignoran. Por tanto, todo lo que vaya dentro de esas etiquetas sólo será

leído por Internet Explorer. Esa es toda la magia, ¿bonito no?.

Para usar los comentarios condicionales en Internet Explorer, tenemos que escribir en el

código fuente de nuestra web, dentro de las etiquetas <head> y </head>, las siguientes

líneas:

?

1

2

3

4

<link rel="stylesheet" type="text/css" href="general.css" />

<!--[if IE]>

    <link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

Con esto básicamente estamos proporcionado a Internet Explorer una hoja de estilos

(ie.css) que el resto de navegadores no pueden leer. Como veis colocaremos ENCIMA la

hoja de estilos común a todos los navegadores (general.css), y debajo los comentarios

condicionales con la hoja de estilos para Internet Explorer, donde pondremos todas las

correcciones necesarias.

Un ejemplo, si te encuentras haciendo la maquetación de una web y tienes un problema

con los márgenes del id #header, por ejemplo, puedes darle un margen en el CSS común

(que leerán todos los navegadores, incluido Internet Explorer) y darle un margen distinto

en el CSS para Explorer (que sólo leerá Explorer, y sobrescribirá el valor del CSS común).

Usar una hoja de estilos para una versión concreta de Internet Explorer

Esto también es posible, y lo haremos igualmente por medio de los comentarios

condicionales. En el código anterior, tendremos que sustituir estas líneas:

?

1

2

3

<!--[if IE]>

    <link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

Por alguna de las siguientes, dependiendo de a qué versión de Explorer queramos

apuntar:

Comentarios condicionales para todos los navegadores menos IE

?

1

2

3

<!--[if !IE]>

    <link rel="stylesheet" type="text/css" href="no-ie.css" />

 <![endif]-->

Comentarios condicionales sólo para IE 7

?

1

2

3

<!--[if IE 7]>

    <link rel="stylesheet" type="text/css" href="ie7.css">

<![endif]-->

Comentarios condicionales sólo para IE 6

?

1

2

3

<!--[if IE 6]>

    <link rel="stylesheet" type="text/css" href="ie6.css" />

<![endif]-->

Comentarios condicionales sólo para IE 5

?

1

2

3

<!--[if IE 5]>

    <link rel="stylesheet" type="text/css" href="ie5.css" />

<![endif]-->

Comentarios condicionales sólo para IE 5.5

?

1

2

3

<!--[if IE 5.5]>

    <link rel="stylesheet" type="text/css" href="ie55.css" />

<![endif]-->

Comentarios condicionales para IE 6 y versiones más antiguas

?

1

2

3

<!--[if lt IE 7]>

    <link rel="stylesheet" type="text/css" href="ie6-old.css" />

<![endif]-->

?

1

2

3

<!--[if lte IE 6]>

    <link rel="stylesheet" type="text/css" href="ie6-old.css" />

<![endif]-->

Comentarios condicionales para IE 7 y versiones más antiguas

?

1

2

3

<!--[if lt IE 8]>

    <link rel="stylesheet" type="text/css" href="ie7-old.css" />

<![endif]-->

?

1

2

3

<!--[if lte IE 7]>

    <link rel="stylesheet" type="text/css" href="ie7-old.css" />

<![endif]-->

Comentarios condicionales para IE 8 y versiones más antiguas

?

1

2

3

<!--[if lt IE 9]>

    <link rel="stylesheet" type="text/css" href="ie8-old.css" />

<![endif]-->

?

1

2

3

<!--[if lte IE 8]>

    <link rel="stylesheet" type="text/css" href="ie8-old.css" />

<![endif]-->

Comentarios condicionales para IE 6 y versiones más modernas

?

1

2

3

<!--[if gt IE 5.5]>

    <link rel="stylesheet" type="text/css" href="ie6-up.css" />

<![endif]-->

?

1

2

3

<!--[if gte IE 6]>

    <link rel="stylesheet" type="text/css" href="ie6-up.css" />

<![endif]-->

Comentarios condicionales para IE 7 y versiones más modernas

?

1

2

3

<!--[if gt IE 6]>

    <link rel="stylesheet" type="text/css" href="ie7-up.css" />

<![endif]-->

?

1

2

3

<!--[if gte IE 7]>

    <link rel="stylesheet" type="text/css" href="ie7-up.css" />

<![endif]-->

Comentarios condicionales para IE 8 y versiones más modernas

?

1

2

3

<!--[if gt IE 7]>

    <link rel="stylesheet" type="text/css" href="ie8-up.css" />

<![endif]-->

?

1

2

3

<!--[if gte IE 8]>

    <link rel="stylesheet" type="text/css" href="ie8-up.css" />

<![endif]-->

Otras alternativas: Universal IE 6 CSS

Diseñar una página web y conseguir que una web se vea bien en Internet Explorer 6 es

una tarea muy complicada. Muchas empresas y profesionales están dejando poco a poco

de dar soporte a este navegador, ignorándolo en sus diseños. Esto es debido

principalmente a que su uso se está reduciendo con el paso del tiempo en beneficio del

uso de navegadores más modernos y seguros. Y no nos engañemos, también se debe a

que resulta muchas veces una pesadilla lidiar con este navegador.

En lugar de ignorar por completo a sus usuarios, y permitir que una web se vea

rematadamente mal en ie6, podemos optar por una solución alternativa que no deje fuera

al porcentaje de usuarios nada despreciable que aún siguen utilizándolo.

Para ello, la gente de for a beautiful web ha creado un proyecto interesante, universal IE 6

CSS. Básicamente lo que han hecho es crear una hoja de estilos muy básica que permite

que nuestra web se visualice correctamente en Internet Explorer 6. Este es el código que

hay que poner:

?

1

2

3

4

5

6

7

8

9

10

11

<!--[if !IE 6]>

  <link rel="stylesheet" type="text/css" media="screen, projection" href="css-comun.css"

<!--<![endif]-->

<!--[if gte IE 7]>

  <link rel="stylesheet" type="text/css" media="screen, projection" href="css-ie.css"

<![endif]-->

<!--[if lte IE 6]>

  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css

<![endif]-->

Ahora sí, con el uso de estas técnicas, estaremos en mejores condiciones de hacer

páginas web que puedan ser visualizadas y navegadas del mismo modo (en la manera de

lo posible) en todos los navegadores.

Cambiar el estilo CSS de una web dinámicamente. Parte I – JavaScript

Resumen: Vemos una primera parte de este mini-manual que vamos a tener sobre cómo modificar dinamicamente los estilos CSS en nuestra página web. En esta primera parte vemos como hacerlo con JavaScript.

En numerosas ocasiones, varios desarrolladores y/o diseñadores web se han topado con

la necesidad de llevar a cabo una adaptación dinámica de estilos en espacios de un sitio

Web. Es común encontrar clientes y patrocinadores que deseen mostrar un conjunto

estandarizado de información arraigado por distintos estilos, con el objetivo de adaptarse

al medio o al momento.

Dichos estilos, generados en base a los patrones de diseño de nuestra elección, se

plasmarán en el sitio en algún momento, que será determinado por alguna condición y/o

variable establecida previamente, y con ello lograr obtener el dinamismo necesario para

desplegar dicha información con distintos patrones de estilo.

Este dinamismo es especialmente útil para aquellos proyectos donde es preciso plasmar

varios mensajes en poco espacio, o donde se desea manejar un ambiente más ad hoc a la

situación del visitante de nuestro sitio.

El uso de estilos mediante CSS nos permite crear toneladas de trucos ingeniosos y

adaptaciones increíbles, especialmente con la incursión de CSS3 ha ido adentrándose en

terrenos anteriormente desconocidos para las hojas de estilo, pero como lenguaje en

muchas circunstancias su función sigue limitándose a lo estilístico.

Su manejo de dinamismo no ha sido bien adaptado, y es por ello que en esta clase de

proyectos es aún recomendable respaldarnos y utilizar un lenguaje como JavaScript, o en

su defecto un lenguaje del lado servidor como PHP, que nos permita llevar a cabo el uso

de variables dinámicas y condicionamiento.

Cambiar estilos CSS dinámicamente con JavaScriptMediante JavaScript obtenemos la capacidad de crear funciones que nos regresen

resultados basados en operaciones y cálculos, podemos obtener los atributos de los

elementos, nos permite manejar clases predefinidas para tomar directamente datos y

utilizarlos como condicionales, e incluso nos da la posibilidad de obtener información de

APIs o Webservices, para que en base a los datos recibidos podamos cambiar el estilo de

nuestro sitio, sin necesidad de usar bases de datos o hosting sofisticado.

Supongamos que hemos sido requeridos para desarrollar una página web o blog donde el

color del fondo pueda ser elegido por el usuario. Al incorporar a JavaScript al juego del

diseño, esta tarea será tan sencilla de codificar que en menos de lo que esperamos será

totalmente funcional.

El primer paso es conocer la estructura que utiliza JavaScript paraa manejar el estilo

CSS de todos aquellos elementos que cuentan con una id asignada, a los que llamaremos

objetos. Un objeto tendrá varios atributos los cuales podemos llamar adhiriendo un punto

al nombre del objeto, seguido del nombre del atributo que queremos obtener o modificar

(objeto.atributo), por ejemplo si tenemos un elemento “div” cuyo “id” es “header”, al

momento de escribir “header.style” estamos llamando al atributo “style” de dicho elemento.

También podemos mandar llamar con el nombre de la etiqueta del elemento, en el caso

del ejemplo anterior, si escribimos “div.style” llamaremos a todos los elementos “div” que

se encuentran en nuestro código, dentro de los cuales también se encuentra el “div

header”.

Para modificar los atributos de estilo CSS existen dos formas básicas, la primera es

recurrir al atributo “style” y la segunda modificar el atributo “class”. En lo personal me

inclino más por utilizar la segunda opción pues es más fácil de manejar, controlar y

estandarizar el estilo de esa manera.

Como nuestro objetivo es modificar el fondo de toda la página, entonces debemos adaptar

la sintaxis para que modifique directamente el elemento “body”, para lo que podemos

recurrir al elemento “document” de JavaScript.

Tomando en cuenta todos los factores, la estructura quedará conformada como alguna de

las siguientes maneras, “document.body.style.backgroundColor” o

“document.body.className=’nombre’”.

Ahora debemos determinar de que manera el usuario podrá elegir el color de fondo, puede

ser mediante elementos de formulario como un “select box” donde elija una opción, un

campo de texto donde inserte el nombre, o podemos recurrir a un elemento más visual y

hacerlo mediante un menú que muestre los colores de fondo disponibles.

Si utilizamos el atributo “style” nuestro código debe quedar estructurado de la siguiente

manera:

?

1

2

3

4

5

6

7

8

9

<html>

<header>

<style>

body    {

background-color: #000000;

color: #FFFFFF;

padding: 20px;

font: 18px Arial, Tahoma;

}

div {

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

width: 50px;

height: 50px;

border: 1px solid #FFFFFF;

}

</style>

<script>

function cambiar_fondo_con_style(colorsel){

var color = document.getElementById(colorsel).style.backgroundColor;

document.body.style.backgroundColor= color;

}

</script>

</header>

<body>

<p>Da click en un recuadro para cambiar el fondo de la página</p>

<div id = "1" style = "background-color: #999;" onclick = "cambiar_fondo_con_style(id)"></div>

<div id = "2" style = "background-color: #333;" onclick = "cambiar_fondo_con_style(id)"></div>

<div id = "3" style = "background-color: #666;" onclick = "cambiar_fondo_con_style(id)"></div>

</body>

</html>

Agregamos los estilos necesarios para agregar color al cuerpo y letras de la página, así

como para darle una medida estándar a los recuadros del menú donde elegiremos el color.

>>> Puedes ver el ejemplo funcionando aquí <<<

Creamos una función para el cambio dinámico de fondo, a la cual le enviaremos como

parámetro el “id” de los recuadros. Dentro de esta función guardamos en una variable de

nombre “color” el código que corresponde al color de ese recuadro y finalmente asignamos

ese código al fondo del elemento body.

Dicha función será llamada mediante un evento “onclick” agregado en cada elemento “div”,

para que al momento de dar click con el puntero del Mouse sobre algún recuadro,

automáticamente tome el color de éste como fondo.

Pero si deseamos utilizar class en vez del atributo “style” lo que debemos hacer es

estructurar nuestro código de la siguiente manera:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<html>

<header>

<style>

body    {

background-color: #000000;

color: #FFFFFF;

padding: 20px;

font: 18px Arial, Tahoma;

}

div {

width: 50px;

height: 50px;

border: 1px solid #FFFFFF;

}

.fondo1 {

background-color: #999;

}

.fondo2 {

background-color: #333;

}

.fondo3 {

background-color: #666;

}

</style>

<script>

function cambiar_fondo_con_class(id){

document.body.className='fondo'+id;

25

26

27

28

29

30

31

32

33

34

35

36

37

}

</script>

</header>

<body>

<p>Da click en un recuadro para cambiar el fondo de la página</p>

<div id="1" class ="fondo1" onclick="cambiar_fondo_con_class(id)"></div>

<div id="2" class ="fondo2" onclick="cambiar_fondo_con_class(id)"></div>

<div id="3" class ="fondo3" onclick="cambiar_fondo_con_class(id)"></div>

</body>

</html>

>>> Puedes ver el ejemplo funcionando aquí <<<

De esta manera nos ahorramos utilizar el atributo dentro de cada elemento y la función de

JavaScript queda mucho más limpia.

Continuaremos cambiando el CSS dinámicamente con PHP en el siguiente artículo…

Cambiar el estilo CSS de una web dinámicamente. Parte II – PHPResumen: Vemos la segunda parte de este mini-manual que vamos a tener sobre cómo modificar dinamicamente los estilos CSS en nuestra página web. En esta segunda parte vemos como hacerlo con PHP.

Retomando el tutorial para cambiar el CSS dinámicamente, en el anterior capítulo vimos

como cambiar el CSS por medio de JavaScript, ahora hablaremos de cómo cambiar el

css dinámicamente utilizando PHP.

Por su parte PHP, al ser un lenguaje del lado servidor nos abre una gama más extensa de

posibilidades a realizar, en el caso del ejemplo que acabamos de realizar con JavaScript,

se puede adaptar y agregar la funcionalidad de guardar en una variable de sesión o en su

defecto en una cookie, el fondo que eligió el usuario para así cada vez que este ingrese, el

fondo sea justo el escogido.

El manejo de información obtenida mediante formularios se vuelve más sencillo con PHP,

al contar con los métodos GET y POST podemos crear un formulario sencillo para que el

cliente elija las características que más le agraden para el sitio.

Podemos crear un formulario en PHP que de la opción de elegir un color de fondo de una

lista desplegable, o incluso podemos dar la opción para que el usuario ingrese el nombre

del color de fondo que quiera, todo esto de la siguiente manera:

<html>

<head>

<title>Elegir color de fondo con PHP</title>

<?php

$fondo = $_GET['colorlista'];

$nombre = $_GET['nombrecolor'];

?>

<style>

body {

<?php

if (empty($nombre)) {

if (!empty($fondo)) { ?>

background: <?php echo $fondo ?>;

<?php

} else { ?>

background: LimeGreen ;

<?php } ?>

<?php

} else {

?>

background: <?php echo $nombre?>;

<?php

}

?>

}

</style>

</head>

<body>

<form action="#" method="GET">

<span>Selecciona un color de la lista: </span>

<select id=”colorlista” name="colorlista">

<option value="LimeGreen" <?php if($_GET['color']=="LimeGreen") echo "selected="selected""; ?> >Lima</option>

<option value="YellowGreen" <?php if($_GET['color']=="YellowGreen") echo "selected="selected""; ?> >Amarillo verdoso</option>

<option value="Crimson" <?php if($_GET['color']=="Crimson") echo "selected="selected""; ?> >Carmesí</option>

<option value="SteelBlue" <?php if($_GET['color']=="SteelBlue") echo "selected="selected""; ?> >Azul Acero</option>

</select>

<span>ó Escribe el nombre en inglés de un color:</span>

<input type="text" name="nombrecolor" /><br/>

<input name="cambiarfondo" type="submit" value="Cambiar el fondo!" />

</form>

</body>

</html>

Creamos un formulario con dos campos, un select box y un input text, donde utilizamos

elmétodo GET para obtener la información una vez enviada a través del botón

“cambiarfondo”, una vez recibida creamos las condiciones para cambiar el fondo del sitio

mediante CSS, imprimiendo el valor recibido dentro del atributo “background” del

elemento “body”.

Al crear un código como el siguiente, podemos agregar una gran interactividad con el

usuario, y podemos ampliar el dinamismo si aplicamos herramientas de AJAX para obtener

una respuesta inmediata del servidor y no tener que esperar a que el visitante de click en

el botón.

Esta misma metodología podemos aplicarla para realizar cambios dinámicos a todos

los fondosde los diferentes elementos de nuestra página, podemos modificar los bordes,

sombras e inclusoanimaciones gracias a las nuevas propiedades de CSS3.

Las posibilidades son muchas, es cuestión de invertir un poco de tiempo y aplicar nuestro

ingenio para poder hacer maravillas. En el siguiente artículo de esta entrega veremos

como podemos adaptar y jugar con el ambiente de nuestro sitio, basándonos en la hora en

que nos visitan.

Menú y galería de imágenes tipo slide con CSS y HTML

Resumen: Como conseguir la simulación de un "efecto slide" en menús y galerías de imágenes, solo con CSS y HTML.

En otros artículos hemos visto como se puede simular algunos efectos dinámicos

empleando soloCSS   y HTML. En este artículo les proponemos simular un slide de

imágenes para un menú vertical u horizontal o para una galería de imágenes. A

continuación desarrollaremos el ejemplo con los códigos correspondientes explicados, de

forma que se pueda comprender el funcionamiento y aplicarlo en la forma que se crea más

conveniente.

Este efecto es más sencillo que los casos mostrados anteriormente, y nos muestra que

para conseguir algunos efectos interesantes no es necesario utilizar códigos complejos,

emplearscripts   en otros lenguajes o utilizar animaciones. Basta con conocer los principios

básicos de lamaquetación   y el potencial de las hojas de estilo en cascada y emplear un

poco de imaginación.

Mientras preparamos los archivos para que puedan descargarlos y mostrar el ejemplo

terminado para que lo puedan ver en funcionamiento, pueden copiar los códigos que se

encuentran en el artículo.

Principio de funcionamientoEl principio en el cual está basado este ejemplo, es mucho más simple que en los casos

del menú desplegable y la galería de imágenes que hemos descrito en otros artículos, y se

basa en el comportamiento de las capas flotantes y la utilización de la pseudoclase :hover.

La pseudoclase :hover se utiliza para modificar los parámetros de un elemento cuando

elpuntero pasa sobre él. Normalmente se le utiliza para que se modifique un enlace   y

cambie de color o cambie el subrayado cuando el puntero se posa sobre él. Pero también

se pueden modificar otras propiedades, como las dimensiones (width y height, ancho y

altura) de una imagen o una capa.

Ejemplo

Puedes ver el ejemplo en funcionamiento aquí: slide con CSS y HTML, y también

puedesdescargarte los archivos del ejemplo.

Los códigos HTML y CSSEn primer lugar les dejaremos el código HTML:

<html>

<head>

<title>Ejemplo</title>

<link rel="stylesheet" href="estilo.css" type="text/css" />

</head>

<body>

<div id="izquierda">

<ul id="menu">

<li><a href="#"><img src="img/1.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/2.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/3.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/4.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/5.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/6.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/7.jpg" alt="#" title="#" /></a></li>

</ul>

</div>

<div class="derecha">

<ul id="menu2">

<li><a href="#"><img src="img/21.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/22.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/23.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/24.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/25.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/26.jpg" alt="#" title="#" /></a></li>

<li><a href="#"><img src="img/27.jpg" alt="#" title="#" /></a></li>

</ul>

</div>

<div class="derecha">

<ul id="galeria">

<li><img src="img/31.jpg" alt="#" title="#" /></li>

<li><img src="img/32.jpg" alt="#" title="#" /></li>

<li><img src="img/33.jpg" alt="#" title="#" /></li>

<li><img src="img/34.jpg" alt="#" title="#" /></li>

<li><img src="img/35.jpg" alt="#" title="#" /></li>

<li><img src="img/36.jpg" alt="#" title="#" /></li>

<li><img src="img/37.jpg" alt="#" title="#" /></li>

</ul>

</div>

</body>

</html>

A continuación, les damos el código del archivo CSS, que se llamará “estilo.css” y se debe

ubicar en el mismo directorio que la página “index.html”. En caso de querer renombrar el

archivo o colocarlo dentro de un subdirectorio, como se hace normalmente, se debe

modificar la ruta del enlace que se encuentra entre <head> y </head>.

/* CAPAS CONTENEDORAS */

#izquierda {

width: 170px;

float: left;

}

.derecha {

width: 750px;

float: left;

}

/* ELEMENTOS DEL MENU LATERAL */

#menu {

padding:0;

margin:0 auto;

list-style-type:none;

width:160px;

height:312px;

}

#menu li a {

height:30px;

width:160px;

float:left;

border-bottom:2px solid #fff;

overflow: hidden;

}

#menu li a img {

border:0;

}

#menu li a:hover {

height:120px;

}

/* ELEMENTOS DEL MENU SUPERIOR */

#menu2 {

padding:0;

margin:0 auto;

list-style-type:none;

height:120px;

width:354px;

}

#menu2 li a {

width:30px;

height:120px;

float:left;

border-right:2px solid #fff;

overflow: hidden;

}

#menu2 li a img {

border:0;

}

#menu2 li a:hover {

background:#eee;

width:160px;

}

/* ELEMENTOS DE LA GALERIA DE IMAGENES */

#galeria {

padding:0;

margin:40px auto 0 auto;

list-style-type:none;

height:300px;

width:774px;

border:1px solid #888;

}

#galeria li {

width:60px;

height:300px;

float:left;

border-left:2px solid #000;

}

#galeria li img {

height:300px;

width:60px;

border:0;

}

#galeria li:hover {

background:#eee;

width:400px;

}

#galeria li:hover img {

width:400px;

}

ExplicaciónEn primer lugar diremos que el ejemplo se encuentra dividido en tres capas flotantes, una

a la izquierda, en forma de columna lateral, donde se ubica el ejemplo de menú vertical. A

la derecha, dos capas contienen el menú horizontal y el ejemplo de una galería de

imágenes, una arriba y la otra abajo. Las capas utilizadas utilizan un identificador

(#izquierda) y una clase (.derecha) y son flotantes a la izquierda.

La capa contenedora

En los menús y la galería se emplea el mismo código con leves modificaciones. En

primer lugar, debemos limitar el tamaño de la capa que contiene el menú, que tiene el

identificador #menu en el archivo CSS, lo que debe ser bien calculado ya que un error en

esto puede originar fallas en el funcionamiento. El ancho de esta capa debe ser el ancho

de las imágenes que se utilizarán, que en este caso es de 160 pixeles.

El cálculo debe hacerse en la altura de la capa contenedora. Colocaremos siete imágenes,

que en su tamaño plegado tendrán 30 pixeles mas 2 pixeles del borde blanco, es decir, un

total de 32 pixeles, y en su tamaño desplegado es de 120. Como el tamaño de la capa

debe ser igual al de seis imágenes plegadas y una desplegada, el cálculo que se debe

hacer es (6*32) + 120, lo que da un total de 312 pixeles.

Otras propiedades utilizadas son el margen, que en este caso es 0 auto, para que se

centre en la capa contenedora; en esta capa también se determina que las listas no

tendrán estilo de lista, para que no aparezcan los marcadores de ítems.

Los ítems

En el caso de los menús, cada uno de los ítems de la lista contiene un enlace, por lo que

para darles el formato a todos, utilizaremos #menu li a (formato del ítem que contiene un

enlace dentro de la capa #menu).

Las propiedades que determinaremos son las de las imágenes contraídas, por lo que la

altura será de 30 pixeles. Para que las capas se superpongan y no queden desplegadas

(válido solo para los menús, ya que el caso de la galería tiene la diferencia que las

imágenes contraídas están redimensionadas), es necesario que los ítems de menú sean

flotantes, lo que queda indicado con la propiedad correspondiente.

Para ganar en efecto decorativo, se ha determinado que cada ítem de menú tenga un

borde blanco de 2 pixeles. Luego, se determina que todo lo que sobresalga de las

dimensiones de la capa quede invisible mediante la propiedad “overflow:hidden”. De no

colocarse, todas las imágenes quedarán en su tamaño original.

Imágenes con enlaces

Las imágenes con enlace tienen por defecto un borde azul de 1 pixel, que debe ser

eliminado para que el mismo no se vea, utilizando la propiedad “border: 0” en “#menu li a

img”, es decir, en las imágenes con enlace en un ítem de menú dentro de la capa

“#menu”.

Las imágenes desplegadas

Cuando el puntero pasa o se posa sobre una de las imágenes contraídas, se activa

lapseudoclase :hover, que en este caso determina que la altura de la imagen pase de los

30 pixeles a los 120 pixeles, que es la medida real de cada una de las imágenes utilizadas.

El efecto

Cuando una de las imágenes contraídas, desplaza hacia abajo a las capas que se

encuentran debajo de ella, excepto la última, que solo completa el espacio disponible en la

capa #menu, haciendo que se parezca a un efecto slide rápido.

El menú horizontalEl caso del menú horizontal es igual que el anterior, con la excepción que la capa base, en

este caso #menu2, es más ancha que alta, al igual que las dimensiones de las imágenes

contraídas, con lo que el desplazamiento forzosamente se realiza hacia la derecha. El

cálculo de las dimensiones de la capa #menu2 debe realizarse con el ancho de las

imágenes, en lugar de la altura como en el caso anterior. Otra diferencia, es que el borde

de la capa contraída está a la izquierda.

La galería de imágenesLa galería de imágenes es igual al ejemplo del menú horizontal (puede hacerse también

con desplazamiento vertical), con la excepción de que no contiene enlaces, con lo que el

código cambia ligeramente.

Como hacer fondos “elásticos” para títulos y menús

Resumen: Como hacer para que un fondo de imágenes se adapte a la longitud del texto, siguiendo dos métodos diferentes. Ejemplo en títulos y en menús.

Las capacidades de CSS   son enormes, lo que permiten que, con un poco de imaginación,

se puedan realizar efectos muy atractivos. En el presente artículo, mostraremos dos

formas de hacer que el fondo se adapte a la extensión del texto, algo que como verán a

continuación, parte de conceptos básicos muy simples.

Algunos de los conceptos elementales que emplearemos en adelante, pueden verse en los

siguientes artículos:

Utilización de la repetición y posición de fondos en la maquetación de páginas web

Diseño de menus y submenus con CSS

Títulos con fondo “elástico”En primer lugar, veremos cómo hacer que el fondo de un título   o subtítulo tome el tamaño

necesario para cubrir la extensión del texto asignado. Pero además, veremos que se trata

de un primer método, ya que en el ejemplo siguiente, utilizaremos otra forma de hacerlo.

Estos dos métodos, pueden utilizarse en cualquier tipo de texto que sea necesario que

cuente con un fondo.

Para seguir ambos ejemplos, crearemos una sola página web en HTML o XHTML, y

crearemos unarchivo CSS que colocaremos en una carpeta que denominaremos

“archivos”. Para albergar las imágenes, crearemos un fichero que llamaremos “imágenes”.

Ambas carpetas estarán en la raíz del sitio, es decir, en la misma carpeta en la que se

encontrará el archivo HTML. En caso de que deseemos modificar esta estructura,

deberemos realizar los cambios correspondientes en los enlaces de los códigos que

presentaremos como ejemplo.

Para realizar el ejemplo, deberán además, descargar las siguientes imágenes,

simplemente copiándolas desde esta página

En primer lugar, daremos los códigos de ejemplo, para que puedan ver como se han

dispuesto los diferentes elementos, para luego ir detallando la forma en que funciona. En

primer lugar, elcódigo HTML:

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >

<head>

<title>Títulos líquidos</title>

<link rel="stylesheet" type="text/css" href="archivos/estilos.css" />

</head>

<body>

<div id="pagina">

<div id="titulo">

<h2>Subtítulo de la página</h2>

</div>

<div id="titulo">

<h2>Entrar</h2>

</div>

<div id="titulo">

<h2>Título más largo que los anteriores, para ver como se comporta.</h2>

</div>

</div>

</body>

</html>

A continuación, el código CSS:

html {

margin: 0;

padding: 0;

}

#pagina {

width: 900px;

margin: 0 auto;

}

#titulo {

height: 63px;

background: url(../imagenes/der.jpg) no-repeat right;

padding: 0;

display: table;

}

#titulo h2 {

height: 45px;

padding: 18px 50px 0px 50px;

background: url(../imagenes/izq.jpg) no-repeat left;

font: bold 20px arial, helvetica, sans-serif;

color: white;

}

En el archivo HTML podemos ver que en primer lugar encontramos una capa marcada con

el identificador “pagina”, que sirve simplemente para acotar el espacio a 900 pixeles y

centrar todo el trabajo. En el archivo CSS, además, hemos eliminado el margin y

padding que los navegadores muestran por defecto para la etiqueta <html>.

Entrando en el ejemplo, vemos que cada título está compuesto por una capa y un título

<h2> dentro de la misma. La capa título tiene una altura de 63 pixeles, que se

corresponde con la altura de la imagen que utilizaremos como fondo. La imagen que se

coloca como fondo de esta capa, es lo suficientemente ancha como para que, en caso de

que el título se extienda por todo el ancho de la página, este espacio quede cubierto.

Para que el borde redondeado de la imagen seleccionada aparezca a la derecha, se

debeposicionar   la imagen de fondo hacia la derecha, colocando el valor “right” en la

propiedad “background-position” o utilizando el método abreviado, como está en el

ejemplo, colocando el valor al final del enlace a la imagen. Con esto, la imagen comenzará

a visualizarse desde la derecha, por lo que lo que “sobre”, quedará cortado por la

izquierda.

Pero ahora nos encontramos con el inconveniente de que la capa tratará de ocupar todo el

ancho disponible. Para que esto no suceda y se limite a cubrir el espacio ocupado por el

texto, agregamos el valor “table” a la propiedad “display”. Esto quiere decir que esta capa

se comportará como una tabla, las que en caso de no estar determinadas sus

dimensiones, solo ocupan el espacio determinado por el contenido.

El borde izquierdo y el contenido está determinado por la etiqueta “<h2>”. Además de

disponer la forma en que se visualizará el texto (fuente, color, etc.), se le agrega

como fondo la imagen que da el borde izquierdo. Al contrario de la imagen de fondo de la

capa, esta imagen debe posicionarse a la izquierda y sin márgenes. Al estar superpuesta

a la imagen de fondo de la capa, da el efecto de que se trata del principio de una misma

imagen. La parte que ofrece mayores dificultades, es combinar la altura con el relleno

superior (padding-top). Se debe tener en cuenta que el tamaño final de un objeto es la

suma de las dimensiones otorgadas al mismo más el relleno y los bordes.

Por ello, para que el texto se vea en la mitad del fondo, se adoptó un relleno superior de 18

pixeles, lo que fue necesario descontar de la altura (45px + 18px = 63px). Para que el

texto no comience encima del doblez que muestra la imagen, fue necesario establecer un

relleno a la izquierda de 50 pixeles, que para que el texto se muestre centrado, fue

necesario compensar con un relleno igual a la derecha.

Menú con ítems de fondo “elástico”El ejemplo anterior, puede trasladarse a cualquier elemento, incluyendo los ítems de

menú. Pero para desarrollar el ejemplo que seguiremos ahora, hemos optado por hacerlo

de otra forma, que también puede aplicarse al ejemplo anterior sin mayores dificultades, y

que consiste en realizarlo al revés. Si se sigue el ejemplo anterior, es necesario agregar el

siguiente código al archivo HTML:

<div id="menu">

<ul>

<li><a href="#">Ítem 1</a></li>

<li><a href="#">Otro ítem más</a></li>

<li><a href="#">Ítem de menú</a></li>

<li><a href="#">Corto</a></li>

<li><a href="#">Ítem más largo aún</a></li>

</ul>

</div>

Y las siguientes líneas en el archivo CSS:

#menu ul {

list-style: none;

}

#menu ul li {

float: left;

background: url(../imagenes/izq-menu.jpg) no-repeat left;

margin-left: 10px;

}

#menu ul li a {

text-decoration: none;

color: white;

font: bold 12px arial, helvetica, sans-serif;

background: url(../imagenes/der-menu.jpg) no-repeat right;

margin-left: 20px;

padding: 0 30px 0 10px;

line-height: 32px;

display: block;

}

#menu ul li a:hover {

color: black;

text-decoration: underline;

}

Como puede verse, se trata simplemente de una lista, a la cual se le han quitado los

marcadores de los ítems (list-style: none), aunque esto no es imprescindible y solo se trata

de algo estético. Luego se hace que los ítems de menú sean flotantes   y se le asigna un

fondo, el que se trata de una imagen larga que se posiciona a la izquierda, de forma que

el borde redondeado izquierdo es proporcionado por la misma.

Luego se hace que el ítem que contiene un enlace (#menu ul li a) también presente una

imagen de fondo, la que en este caso se muestra a la derecha y solo contiene el borde

derecho de la imagen final. A diferencia del ejemplo anterior, es necesario otorgar un

margen izquierdo igual al ancho de la imagen de fondo del lado izquierdo, para que la

imagen más larga no se monte encima de la corta. Para determinar la altura del ítem, se

emplea la propiedad line-height en lugar de dar un valor de la altura.

ConclusiónPara conseguir algunos efectos, es posible emplear varios métodos diferentes, todos

válidos y que dan el mismo resultado. En CSS no existen límites para el desarrollo, por lo

que el único límite con que se cuenta, es el de la propia imaginación.

Simular frames (marcos) con HTML y CSS

Resumen: Efecto muy sencillo donde se simula la utilización de marcos, y que solo se realiza con HTML y CSS.

A pesar de ser un recurso muy interesante desde el punto de vista de las posibilidades que

genera, tanto para los webmasters como para los usuarios, el uso de frames o marcos ha

sido cuestionado debido a que supone dificultades para el posicionamiento en

buscadores de la página que los utiliza.

Sin embargo, en el caso de que se desee utilizar algo similar para brindar a los usuarios la

posibilidad de cambiar los contenidos que se muestran en la página mediante el uso de

un menú(sin que esto implique navegar   a otra página) puede utilizarse un

recurso CSS   que mostraremos a continuación y simular la utilización de marcos.

Este recurso ya lo hemos utilizado en la creación de una galería de imágenes solo con

HTML y CSS, y también guarda similitudes con la creación de menús

desplegables utilizando estos lenguajes.

Principios de funcionamientoEl “secreto” de este recurso consiste en que ambos contenidos se encuentran presentes

en doscapas   superpuestas. El efecto se consigue con la utilización de capas

con posicionamiento absoluto, con ancho y alto fijos, y cuyos contenidos que desborden no

sean visibles utilizando el valor “hidden” de la propiedad “overflow”.

Se utilizan enlaces para que “llamen” al contenido deseado, el que en forma automática se

mostrará por encima del otro contenido.

Desarrollo

El archivo HTML

Trabajaremos con dos archivos, el HTML   y un archivo CSS. Para el ejemplo, hemos

elegido crear una página en XHMTL 1.1. Colocaremos en el encabezado del documento el

título del mismo y el enlace para la hoja de estilo.

Luego de colocar el título mediante el uso de etiquetas h1, ubicaremos las dos capas

principales, que tendrán posicionamiento absoluto. La primera, que tendrá el identificador

“columna”, que contendrá la lista que hace las veces de menú. La segunda, llamada

“contenido”, que será la que tendrá en su interior las dos capas con los contenidos que se

alternarán, que tendrán los identificadores “marco1” y “marco2”.

Dentro de éstos últimos, colocaremos contenidos de ejemplo, para mostrar el efecto en

toda su magnitud. En los ítems del menú   que se colocará en la columna izquierda, se

colocarán enlaces a las capas “marco1” y “marco2”, que son enlaces internos. Cuando se

coloca un enlace interno, nos lleva a una parte de la página donde hemos colocado

un ancla. En este caso, se utilizan los propios identificadores CSS como destino de los

enlaces, solo que en lugar de navegar   a otra parte de la página, se nos mostrará una capa

que se encuentra oculta por otra:

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<head>

<title>Ejemplo</title>

<link rel="stylesheet" type="text/css" href="estilo.css" />

</head>

<body>

<h1>Ejemplo de simulación de marcos o frames</h1>

<div id="columna">

<h2>Menú</h2>

<ul>

<li><a href="#marco1">Marco 1</a></li>

<li><a href="#marco2">Marco 2</a></li>

</ul>

</div>

<div id="contenido">

<div id="marco1">

<h2>Contenido 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper sem quis felis pulvinar laoreet. Donec euismod erat semper diam sodales non vehicula mauris elementum. Aliquam commodo sollicitudin nisl, eget consequat turpis tempor vitae. Suspendisse rhoncus erat nec tellus vulputate ac egestas nulla tristique. Mauris nisl enim, fringilla non dapibus ac, tincidunt ullamcorper ligula. Etiam ut tellus eros. Donec congue dignissim feugiat. Aenean pellentesque convallis leo ut facilisis. Vestibulum ac turpis quis felis vestibulum vulputate a ac eros. Aenean ultricies sapien quis sapien congue nec rhoncus ligula consectetur. Nam dolor orci, feugiat vel vestibulum sit amet, pellentesque quis sem. Proin tempus mauris quis lacus tempus fringilla. Cras ut justo nec nunc porta hendrerit.</p>

<p>Nulla turpis nunc, posuere at varius a, fermentum non orci. Aenean condimentum erat vel justo luctus consequat. Donec vehicula erat in risus pretium faucibus. Curabitur tempus vehicula libero non commodo. Nullam eu mauris a nulla molestie sodales eu vitae ligula. Nulla elementum sem quis dolor tincidunt nec pellentesque mauris ultrices. Maecenas imperdiet, erat ac porta rutrum, metus elit lacinia lectus, sit amet pulvinar risus metus

quis tortor. Morbi sed nisi turpis, sit amet convallis nulla. Fusce quis ullamcorper mauris. Integer commodo semper posuere. Fusce elementum nisl ac augue consequat nec pulvinar dolor laoreet. Mauris nulla tortor, mollis quis imperdiet vel, rhoncus quis erat. Aliquam lectus metus, consectetur vitae feugiat vel, tincidunt nec velit. </p>

</div>

<div id="marco2">

<h2>Contenido 2</h2>

<p>Nam urna nisl, blandit vitae molestie id, mattis ut augue. Ut sit amet libero felis, at scelerisque neque. Nulla luctus porta sapien, vel imperdiet odio euismod et. Donec id adipiscing felis. Nam pellentesque mollis pellentesque. Aliquam vel diam nec ante consectetur auctor sed vitae augue. Fusce erat massa, volutpat ac vulputate ac, dictum non arcu. Phasellus suscipit bibendum massa vel iaculis. Nullam bibendum viverra orci id aliquet. Duis consequat neque id lectus aliquet sed feugiat nisl adipiscing. Nunc suscipit est nec purus faucibus ultrices. </p>

<p>Mauris at velit nulla, id bibendum neque. Nullam et augue id elit convallis fringilla vel non urna. Nulla lectus ante, fermentum nec dapibus vitae, tincidunt vel lectus. Pellentesque luctus quam a mi mollis gravida. Curabitur est lorem, aliquam sed varius nec, adipiscing vel sapien. Donec at tortor tellus. Suspendisse vitae neque vitae odio mollis ultricies ac sed mi. Aenean et nisl non mauris

molestie tempor et sed eros. Maecenas scelerisque placerat eros et bibendum. Mauris venenatis, enim sodales elementum consectetur, tellus nisi euismod sem, dapibus pulvinar lectus lorem nec enim. Quisque auctor fermentum scelerisque. Etiam sed nulla quis eros pellentesque convallis sit amet eu neque. Aenean mattis placerat vehicula. Cras eget lacus odio. Cras commodo fringilla pharetra. In eget lacus metus, dignissim rutrum diam. Fusce sed magna ut nulla cursus feugiat. Fusce fringilla quam id quam auctor feugiat. Nulla tincidunt venenatis diam, in varius libero imperdiet vitae. </p>

</div>

</div>

</body>

</html>

El archivo CSS

Lo más interesante de este ejemplo se encuentra en las propiedades CSS y en la

utilización de los enlaces   para llamar a las capas. En primer lugar, se colocarán todas las

propiedades necesarios para dar un determinado formato a los distintos elementos que

componen la página, como párrafos, títulos, listas, etc.

Luego detallaremos las propiedades de la capa que contendrá la lista y que servirá como

una especie barra lateral (sidebar), cuyas propiedades no detallaremos porque no tienen

interés para el ejemplo.

La capa “contenido”, también tiene posición absoluta y se ha determinado que el

contenido que la desborde no sea visible, ya que de otro modo, cuando una de las capas

tiene contenido excesivo, este desbordará hacia abajo, aún cuando la capa visible sea la

otra.

Finalmente, se han dado las dimensiones para las capas “marco1” y “marco2”, que

simplemente serán de 100% tanto para el ancho como para la altura, ocupando la totalidad

de la capa que los contiene. Gracias a ello, cuando una de las dos capas es llamada por el

enlace correspondiente, ésta cubre totalmente a la otra capa.

html {

font: normal 13px arial,helvetica,sans-serif;

}

h1 {

text-align: center;

color: #987;

}

h2 {

text-align: center;

color: #777;

}

ul {

list-style: circle;

color: #888;

}

ul li a {

color: #888;

text-decoration: none;

font-weight: bold;

}

ul li a:hover {

color: #f00;

}

p {

color: #456;

}

/* Capas del ejemplo */

div#columna {

border: solid 1px #ccc;

position: absolute;

left: 30px;

top: 80px;

width: 150px;

height: 350px;

}

div#contenido {

border: solid 1px #ccc;

position: absolute;

overflow: hidden;

left: 200px;

top: 80px;

width: 580px;

height: 350px;

padding: 0 20px;

}

div#marco1, div#marco2 {

height: 100%;

width: 100%;

}

ConclusiónEste es otro ejemplo de como, con elementos muy simples de HTML y CSS, se pueden

conseguir efectos que suplanten a elementos más complejos y que pueden darnos

dificultades en elposicionamiento   o en la accesibilidad   de la página.

Cambiar el estilo CSS de una web dinámicamente. Parte III – Las horas del díaResumen: En esta tercera parte vamos a empezar a ver como cambiar el estilo CSS de una web dinámicamente en función de las horas del día.

El dinamismo adoptado en nuestro sitio, puede llevarse a un mayor grado de

personalización y autenticidad con la adopción de rutinas de desarrollo más complejas,

elaboradas especialmente para modificar el diseño de una página dinámicamente en

base a factores que detonen los distintos estilos.

Podemos innovar y buscar formas únicas de mezclar nuestros CSS con funciones de

JavaScript o algún lenguaje del lado servidor, para poder ofrecerle a nuestro usuario una

experiencia distinta a la que ofrecen el resto de los sitios, creando ambientes más ad hoc a

lo que al visitante le gusta.

Es muy poco común que se juegue con factores cruzados en CSS, muchas veces

utilizamos funciones que van de JavaScript a PHP y viceversa, utilizamos JSON y XML

para enviar y recibir datos, AJAX para respuestas instantáneas, pero en muy pocas

ocasiones aprovechamos el dinamismo para aplicarlo a los estilos.

Podemos empezar a buscar implementar diseños basados en los resultados obtenidos por

funciones de JavaScript, con ejemplos sencillos como mostrar un estilo en base a la parte

del día en que nos visita el usuario.

El hecho de cambiar la apariencia de nuestro sitio web en base a la hora o período del día

en que nos visitan, añade especialización en nuestros diseños, puede mejorar la

experiencia del visitante y por su puesto divertir o entretener, dependiendo del tipo o sector

de visitantes que tenemos comúnmente.

Existen dos maneras esenciales para realizar esta tarea, la primera y más sencilla de ellas

esutilizar JavaScript, gracias a sus funciones podemos desplegar los estilos en base a la

hora que tiene el usuario en su computadora, puesto que es un lenguaje del lado cliente,

donde no hay necesidad de descargar ni instalar algo para desarrollar la aplicación.

La otra parte, es realizarlo mediante algún lenguaje de lado del servidor, como es el caso

común de PHP, ASP.NET o JSP, que a diferencia de JavaScript nos desplegará el estilo

en base a la hora del servidor donde se encuentre nuestra aplicación, es por ello que para

poder utilizar esta opción tenemos que tener instalado y funcionado una infraestructura

que actúe como servidor Web en una computadora.

Ambas maneras se pueden utilizar, todo depende de que enfoque queramos darle a lo que

vamos a desarrollar, puesto que esencialmente hacen lo mismo y al final obtendremos un

resultado bastante similar, pero también dependerá de que tan relacionados estemos con

uno u otro lenguaje.

Una vez definido si vamos a cambiar estilos CSS dinámicamente desde el lado del

cliente o del servidor, debemos empezar a pensar en el aspecto del diseño, lo fundamental

es definir cuantos “layouts” queremos mostrar a los largo del día, dato necesario para

establecer el intervalo de tiempo que durará cada estilo.

Se puede presentar la necesidad de mostrar únicamente dos estilos diferentes, uno para el

día y otro para la noche, o se puede optar por tener estilos más concretos los cuales

pueden irse rotando cada cierto número de horas, todo dependerá de la especificidad que

queramos imprimir en la experiencia del usuario al navegar por el sitio.

Como base del ejercicio podemos desarrollar un estilo distinto para las tres etapas más

relevantes del día, la mañana, tarde y la noche, los cuales cambiarán el aspecto del sitio

cada ocho horas, calculo basado en las 24 horas que tiene el día, divididas entre las 3

etapas que lo conforman nos da como resultado 8 horas por cada estilo, aunque esto es

en gran parte relativo y si agregamos otros estilos para etapas como el amanecer y el

ocaso podemos asignar menos tiempo a estas, todo depende de perspectivas.

Fundamentándonos en el número establecido de estilos que deseamos, empezaremos a

diseñar patrones y combinaciones de colores relacionados a cada etapa del día, tomando

lo relevante de cada una de ellas y distinguiendo lo que observamos en el ambiente en las

horas que conforman la etapa.

Debemos trabajar sobre una estructura base, la cual muestre de manera correcta los

colores establecidos. Es recomendable, en un principio, desarrollar un template sencillo

para ir identificando de que manera se acoplaran los colores y adaptarlos a nuestros

gustos, para ello es aconsejable usar una estructura web que contenga los divs más

comunes en un sitio, una cabecera, un menú, un contenedor, un div para contenido

escrito, alguna barra lateral y un pie de página.

Partiendo de esto, nuestro código HTML luciría de la siguiente manera:

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<div id ="principal">

<div id="contenedor">

<div id="cabecera">

<h1 id="titulo">Estilos de Prueba</h1>

<div id="descripcion">CSS basado en las etapas del día.</div>

</div>

<div id="navegacion">

</div>

<div id="contenido">

<div>

<h3>Artículo de Prueba</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum augue, dictum luctus blandit vestibulum, sagittis eu tortor. Pellentesque ut enim quis est semper pretium at rhoncus leo. Integer vitae nibh sed turpis varius porta a et ipsum.</p>

<p></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum augue, dictum luctus blandit vestibulum, sagittis eu tortor. Pellentesque ut enim quis est semper pretium at rhoncus leo. Integer vitae nibh sed turpis varius porta a et ipsum. Curabitur venenatis odio vitae augue dapibus mattis at id leo. Ut enim enim, tincidunt sit amet congue non, molestie sed orci. Nunc adipiscing, est nec iaculis laoreet, lectus ipsum tincidunt elit, mattis facilisis urna quam vitae elit. Nullam eu elit a purus gravida mattis. Vivamus pharetra eleifend nunc nec malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Pellentesque consequat, lacus pretium dapibus eleifend, nulla ante vulputate augue, id elementum nunc odio ut ante. Morbi purus dolor, lobortis ut eleifend ut, fringilla vel quam. Proin quis arcu eu est tristique adipiscing. Mauris ligula mi, egestas sed commodo eget, vulputate quis justo. Curabitur dictum porta risus in facilisis. Vivamus quis malesuada ipsum. Sed varius faucibus tincidunt. Quisque luctus erat a dolor molestie consequat. </p>

</div>

</div>

<div>

<ul>

<li>Lorem ipsum</li>

<li>Dolor sit amet</li>

<li>Consectetur adipiscing</li>

<li>Lorem ipsum</li>

<li>Dolor sit amet</li>

<li>Consectetur adipiscing</li>

<li>Lorem ipsum</li>

<li>Dolor sit amet</li>

<li>Consectetur adipiscing</li>

<li>Lorem ipsum</li>

<li>Dolor sit amet</li>

<li>Consectetur adipiscing</li>

</ul>

</div>

<div>

<ul>

<li>Lorem ipsum</li>

<li>Dolor sit amet</li>

<li>Consectetur adipiscing</li>

<li>Lorem ipsum</li>

<li>Dolor sit amet</li>

<li>Consectetur adipiscing</li>

<li>Lorem ipsum</li>

<li>Dolor sit amet</li>

<li>Consectetur adipiscing</li>

<li>Lorem ipsum</li>

<li>Dolor sit amet</li>

<li>Consectetur adipiscing</li>

</ul>

</div>

<div style="display: block;" id="pie"> </div>

</div>

</div>

</body>

</html>

El entorno se ira creando agregando los colores que escogimos a dicha estructura, en el

ejemplo que estamos desarrollando para este artículo, se escogieron colores amarillo claro

para la mañana, naranja-marrón para la tarde y negro-gris para la noche.

Continúa…

CSS avanzado: la propiedad “content”

Resumen: Una de las propiedades menos conocidas de CSS 2.1, pero que tiene un potencial enorme. En un futuro no muy lejano, cuando la

mayoría de los navegadores respeten los estándares, su uso seguramente se incrementará.

La razón fundamental para que muchos diseñadores de páginas web optaran por no

utilizar algunas propiedades CSS avanzadas es que no eran soportadas por algunos

navegadores, como por ejemplo las versiones 6 y 7 de Internet Explorer. Utilizar algunas

de estas útiles propiedades, podría significar que buena parte del trabajo de diseño no

fuera visible con estos navegadores, lo que implica que buena parte del público no pudiera

ver los mismos resultados que cualquiera de los usuarios que utilizan navegadores que

respetan los estándares de la W3C, como Opera, Safari y Mozilla Firefox.

Sin embargo, con la aparición de Internet Explorer 8 que soporta estas propiedades CSS,

y suponiendo que buena parte del público que utiliza versiones anteriores de Internet

Explorer terminará con el tiempo actualizando su navegador, es de esperarse que los

diseñadores tengan la posibilidad de utilizar este tipo de recursos con total libertad.

La propiedad “content”Esta propiedad tiene la capacidad de generar contenido en forma dinámica, y solo

puede ser aplicada a los pseudo-elementos :before y :after y suele utilizarse en

combinación con las propiedades “counter-reset” y “counter-increment”, como veremos

más adelante.

Los valores que se utilizan son tan variados como posibilidades de elementos a introducir

existen: cadenas de texto, URL’s, apertura y cierre de comillas, contadores, etc. Su valor

inicial es “normal”, que en la práctica (si bien desde el punto de vista lógico tienen un valor

diferente) cumple la misma función que el valor “none”, ya que ambos evitan que el

pseudo-elemento que se aplica no se genere. Dado que el valor generado forma parte del

elemento, hereda todas las propiedades CSS.

Otros valores que pueden utilizarse, son open-quote, close-quote, no-open-quote y no-

close-quote, que siempre deben estar acompañados de la propiedad “quotes” en cuyo

valor se debe introducir el tipo de comillas que se utilizará. El valor más avanzado que

puede utilizarse, es el que permite mostrar el valor de una propiedad utilizada en el

elemento sobre el que se utiliza esta propiedad, mediante la utilización del valor “attr()”.

Debemos señalar que el empleo de esta propiedad es controvertida por parte de muchos

desarrolladores, ya que éstos consideran que la generación de contenidos dinámicos no

forma parte de las atribuciones de CSS, cuyo cometido es controlar el aspecto y la

presentación de los contenidos. Sin embargo, el hecho de que forme parte del estándar,

significa que puede utilizársele libremente y que genera un código válido como cualquier

otra propiedad CSS.

Sintaxis y ejemplos

Si bien la sintaxis es similar a la que se utiliza en el resto de las propiedades CSS, algunas

de las características propias de esta propiedad hacen que pueda tornarse un poco más

compleja. Dado que se aplica solo a los pseudo-elementos “:before” y “:after”, se debe

tener especial cuidado de colocarlos junto a la etiqueta correspondiente. Téngase en

cuenta que en el caso de que se quiera introducir una cadena de texto como valor, el texto

debe ser colocado entre comillas dobles. Veamos un ejemplo:

?

1

2

3

p:before  {

  content: "Hola a todos: "

  }

En el ejemplo, se ha introducido como valor una cadena de texto, que aparecerá antes de

cualquier texto que se introduzca en los párrafos de la página. Si se quiere evitar que este

texto aparezca solo en algunos párrafos, bastará con marcar con un identificador o una

clase al o a los párrafos que se desee, como puede verse en el ejemplo siguiente:

?

1

2

3

p.hola:before {

  content: "Hola a casi todos: "

  }

?

1 <p class="hola">Estamos bien</p>

En el ejemplo que damos, todos los párrafos marcados con la clase “hola” se iniciarán con

la cadena de texto que se incluye. Las complicaciones pueden comenzar cuando se

necesite utilizar algunos símbolos propios de la sintaxis CSS en el texto a incluir, como

pueden ser las comillas o cualquier otro símbolo utilizado en la sintaxis, lo que producirá

un conflicto con las comillas que deben incluirse en la cadena de texto para que los

navegadores la identifiquen como tales, en cuyo caso se deberá optar por insertar comillas

simples (‘) o colocar una barra invertida () delante de cada una de las comillas:

?

1

2

3

p.simple:before {

  content: "Contenido 'CSS' "

  }

4

5

6

7

p.barra:before  {

  content: "Contenido "CSS" "

  }

Las cadenas de texto utilizadas como valor de esta propiedad, solo se toman como texto

plano, por lo que en caso de utilizarse etiquetas HTML, éstas se mostrarán como parte del

texto y no generarán ningún otro efecto.

Como se dijo anteriormente, también puede utilizarse para abrir y cerrar comillas utilizando

los valores “open-quote” y “close-quote”, y deben estar acompañados de la propiedad

“quotes” que llevará como valores las comillas que se utilizarán para la apertura y cierre.

En caso de que las comillas que se utilicen sean del mismo tipo (“) que las que se emplean

para encerrar el valor, se deben utilizar el símbolo () de escape para que no se genere

conflicto.

?

1

2

3

4

5

6

7

8

9

10

11

blockquote {

  quotes: "" " " "";

  }

blockquote:before {

  content: open-quote;

  }

blockquote:after {

  content: close-quote;

}

?

1 <blockquote>Nota especial</blockquote>

También pueden utilizarse los valores “no-open-quote” y “no-close-quote”, que sirven

para evitar que aparezcan las comillas de apertura y cierre, pero manteniendo

la jerarquía en el anidamiento de las comillas.

El valor “attr()” introduce antes o después (según se utilice “:after” o “:before”) el valor del

atributo que se coloque entre los paréntesis. Estos atributos son, por ejemplo, “title”,

“href”, etc. En caso de que este atributo no se encuentre presente en el elemento, se

generará una cadena de texto vacía. Veamos un ejemplo de la utilización llamando al

atributo “title”:

?

1

2

3

4

5

6

7

p:before  {

  content: " (" attr(title) ")"

  }

a:after {

  content: " (" attr(href) ")";

}

?

1

2

<p title="titulo">Título</p>

<a href="http://www.lawebera.es">Esta es nuestra URL:</a>

En el ejemplo que vemos anteriormente, como se han colocado paréntesis para que sean

introducidos como parte de la cadena de texto, en caso de que algún párrafo no tenga el

atributo “title” determinado, aparecerán los paréntesis solos, ya que el atributo “title”

genera una cadena de texto vacía.

Otra forma de utilizar el valor “attr()”, es para el atributo “href”, con lo que podremos

colocar laURL especificada en un elemento como un texto, como también podemos ver en

el código de ejemplo anterior.

Utilización con otras propiedadesUna de las utilizaciones más interesantes de esta propiedad, es la que se realiza en

conjunto con las propiedades “counter-reset” y “counter-increment”, que se utilizan para

generar contadores para diversas utilidades.

Dado que es necesario conocer en profundidad ambas propiedades, la utilización de la

propiedad “content” en la elaboración de contadores dinámicos se describirá en el artículo

correspondiente a estas dos propiedades.

CSS avanzado: las propiedades counter-reset y counter-incrementResumen: Estas propiedades son de las de mayor complejidad en CSS, pero que pueden resultar muy útiles para algunos tipos de trabajos, sobre todo en maquetación de textos.

La propiedad “counter-reset” que fue introducida en el estándar CSS 2.1, si bien puede

decirse que tiene un principio de funcionamiento sencillo, dado que se trata de una

herramienta de gran flexibilidad y que puede utilizarse en combinación con

varias propiedades CSS, su funcionamiento puede resultar un poco complejo y es esta la

razón por la cual hemos considerado que se debía incluir bajo el título de “CSS avanzado”.

En forma sencilla, podría decirse que indica el nombre de uno o varios contadores y el

valor en el que se inicia cada uno de ellos. Se le utiliza siempre en combinación con la

propiedad “counter-increment”, que es la propiedad que controla el incremento que se

producirá en el contador.

Ambas propiedades son aplicables a todo tipo de elementos que pueden introducirse en

undocumento HTML.

SintaxisEn primer lugar, trataremos la sintaxis de cada una de las propiedades por separado, para

luego ver algunos ejemplos de cómo utilizar ambas propiedades en conjunto. El tipo

de sintaxis es similar en ambas propiedades; luego de la apertura de la llave, se introduce

el o los nombres de los contadores cuyas propiedades se vayan a determinar, seguido de

un número indicador del valor de inicio del contador o del incremento (siempre en números

enteros), según sea la propiedad utilizada.

?

1

2

3

4

5

6

body {

  counter-reset: ejemplo 0;

}

p:before {

  content: counter(ejemplo);

  counter-increment: ejemplo 1;

7

8}

El nombre es obligatorio, mientras que en caso de que el número no exista,

los navegadorestoman el valor base. Este valor, en la propiedad “counter-reset” es cero,

mientras que en la propiedad “counter-increment” es uno.

Pero sin lugar a dudas, la mejor forma de conocer las características de estas

propiedades, es conocer el funcionamiento, así que a continuación veremos algunos

ejemplos de su utilización, donde describiremos las diferentes formas de aplicarlas.

Ejemplos?

1

2

3

4

5

6

7

8

body {

  counter-reset: ejemplo 0;

}

p:before {

  content: "Párrafo " counter(ejemplo) ": ";

  counter-increment: ejemplo 1;

}

?

1

2

<p>Párrafo de ejemplo.</p>

<p>Segundo párrafo de ejemplo.</p>

En el ejemplo que hemos visto, en primer lugar hemos creado el contador en el propio

elemento “body”, lo que quiere decir que cuando el navegador se encuentra con dicha

etiqueta inicia el contador de nombre “ejemplo” y se inicia en 0 (lo que equivale a decir

que cuando aparezca un elemento marcado con una propiedad de contador que utilice

“ejemplo”, tendrá el valor 1); luego, el contador “ejemplo” podrá utilizarse en cualquier

elemento contenido dentro de las etiquetas “body”.

A continuación nos encontramos con que a los elementos <p> se les agrega el pseudo-

elemento “:before” y que se le agrega contenido dinámico con la propiedad “content”. Este

contenido dinámico está formado por la palabra “Párrafo “ (como se ve, la palabra es

seguida de un espacio en blanco para que el mismo aparezca en el texto concatenado), el

número generado por el contador y otro texto concatenado, que en este caso es el signo

de puntuación seguido de un espacio en blanco. El resultado es:

Párrafo 1: Párrafo de ejemplo.

Párrafo 2: Segundo párrafo de ejemplo.

Ahora veremos la utilización de más de un contador para un mismo elemento:

?

1

2

3

4

5

6

7

8

body {

  counter-reset: ejemplo 0 elemento 0;

}

p:before {

  content: "Elemento " counter(elemento) ", " "Párrafo " counter(ejemplo) ": ";

  counter-increment: ejemplo 1 elemento 1;

}

Como podemos ver, se pueden crear varios contadores para un mismo elemento y

utilizarlos a la vez. El resultado del ejemplo anterior es el siguiente:

Elemento 1, Párrafo 1: Párrafo de ejemplo.

Elemento 2, Párrafo 2: Segundo párrafo de ejemplo.

Esta propiedad tiene en cuenta el anidamiento de los diferentes elementos, como

podremos ver en el siguiente ejemplo, en el cual anidamos listas ordenadas. Para una

visualización de los ejemplos que draremos en adelante, es necesario que recreen los

ejemplos brindados en páginas HTML de ejemplo y las visualicen en su navegador:

?

1

2

3

4

5

6

ol  {

counter-reset: lista;

list-style: none;

}

ol li:before {

7

8

9

content: "Número " counter(lista) " ";

counter-increment: lista 1;

}

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<ol>

    <li>Elemento</li>

    <li>Elemento</li>

    <li>Elemento

      <ol>

        <li>Elemento</li>

        <li>Elemento

          <ol>

            <li>Elemento</li>

            <li>Elemento</li>

            <li>Elemento</li>

          </ol>

        </li>

        <li>Elemento</li>

      </ol>

    </li>

    <li>Elemento</li>

  </ol>

En las listas (que pueden ser ordenadas o no ordenadas si se va a eliminar el estilo de las

mismas) se ha colocado un texto generado en forma dinámica con un contador, que se

reinicia en cada elemento anidado, ya que se considera un elemento diferente del padre.

Aprovechando esta característica, se pueden realizar algunas modificaciones para mostrar

las listas en forma diferente, como en el ejemplo siguiente:

?

1 ol.lista  {

2

3

4

5

6

7

8

9

counter-reset: otra;

list-style: none;

}

ol.lista li:before {

content: "Número " counters(otra, '.') " ";

counter-increment: otra 1;

}

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<ol class="lista">

  <li>Elemento</li>

  <li>Elemento</li>

  <li>Elemento

    <ol class="lista">

      <li>Elemento</li>

      <li>Elemento

        <ol class="lista">

          <li>Elemento</li>

          <li>Elemento</li>

          <li>Elemento</li>

        </ol>

      </li>

      <li>Elemento</li>

    </ol>

  </li>

  <li>Elemento</li>

</ol>

En este ejemplo, vemos que en lugar de utilizar la función “counter()”, hemos utilizado la

función “counters()”, que tiene la capacidad de iniciar más de un contador concatenado

siguiendo la anidación de los elementos.

Otras característicasLas propias características de los contadores, que generan una secuencia de números,

hace que cuando se encuentran bajo la influencia de ciertas propiedades, sus

características puedan variar. Si se utiliza la propiedad “display” con el valor “none”, el

elemento afectado no iniciará el contador (en caso de que se trate del elemento inicial) o

no formará parte de los elementos contados. Es decir que, el elemento posterior tendrá el

número que en caso de no estar afectado por “display: none;” le correspondería a éste.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<ol class="lista">

  <li>Elemento</li>

  <li style="visibility: hidden;">Elemento</li>

  <li>Elemento

    <ol class="lista">

      <li>Elemento</li>

      <li>Elemento

        <ol class="lista">

          <li style="display: none;">Elemento</li>

          <li>Elemento</li>

          <li>Elemento</li>

        </ol>

      </li>

      <li>Elemento</li>

    </ol>

  </li>

  <li>Elemento</li>

</ol>

Sin embargo, si un elemento que está siendo contado está afectado por la propiedad

“visibility” con el valor “hidden”, el elemento seguirá siendo contado, por lo que el

elemento siguiente tendrá el valor que le corresponde, ya que el elementos “invisible” no

se ve, pero se encuentra formando parte del documento.

En el próximo artículo, veremos algunos ejemplos más de la utilización de estas

propiedades, poco utilizadas debido a que Internet Explorer   recién las ha incorporado en

su última versión. De todas formas, son propiedades que otorgan elementos muy

interesantes para los diseñadores de páginas web.

Ejemplo de utilización de propiedades CSS avanzadas

Resumen: Allgunos ejemplos de utilización de las propiedades CSS avanzadas "content", "counter-reset" y "counter-increment".

Ya hemos visto una descripción de las propiedades “content”, “counter-reset” y “counter-

increment”, con algunos ejemplos elementales de la utilización de estas propiedades. Sin

embargo, estos ejemplos básicos solo nos muestra una parte de las posibilidades de estas

poderosas herramientas CSS. Es por ello que en el presente artículo mostraremos algunos

ejemplos más avanzados de estas propiedades CSS.

Utilización de imágenes como contenidoPara incluir una imagen como contenido de la propiedad “content”, solo es necesario

incluir una URL dirigida a una imagen para que ella se incluya antes o después del

contenido de la etiqueta HTML. En el ejemplo que hemos seleccionado, incluiremos una

imagen en el inicio de los párrafos. Los códigos empleados para este ejemplo son los

siguientes:

?

1

2

<p class="img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus nibh, elementum quis mollis ac, dapibus sit amet turpis. Phasellus mauris ligula, suscipit quis lacinia iaculis, consequat at ipsum. Maecenas aliquet dapibus felis eget faucibus. Pellentesque eget eros tristique nunc tristique aliquet.</p>

<p class="img">Donec fringilla elit dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. volutpat. Maecenas sed libero sed nulla mattis placerat quis ut tortor. Nam fringilla nulla volutpat felis molestie accumsan. Nulla lacinia iaculis varius.</p>

?

1

2

p.img:before {

  content: url(imagenes/boton1.jpg) " ";

3   }

Como puede verse, la propiedad “content” tiene como valor una URL que está dirigida a

una imagen. Luego de la URL, se ha establecido un espacio en blanco (entre comillas),

para que la imagen aparezca separada del contenido de la etiqueta <p>. Tengan en

cuenta que, para diferenciar aquellos párrafos que se mostrarán con la propiedad

“content” de los demás párrafos, es conveniente utilizar una clase.

El resultado es el siguiente:

División de textos en capítulosUna de las utilizaciones más corrientes de las propiedades “counter-reset” y “counter-

increment”, es la división de textos en capítulos, secciones, etc., como mostraremos en el

ejemplo que continúa:

?

1

2

3

4

5

6

7

8

9

10

body  {

  counter-reset: capitulo 0;

  }

h2 {

  font: normal 16px tahoma, verdana, sans-serif;

  color: #f60;

  }

h2:before  {

  content: "Capítulo " counter(capitulo) " - ";

11

12

13

14

  counter-increment: capitulo 1;

  color: #06f;

  }

?

1

2

3

4

<h2>Título de sección</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus nibh, elementum quis mollis ac, dapibus sit amet turpis. Phasellus mauris ligula, suscipit quis lacinia iaculis, consequat at ipsum. Maecenas aliquet dapibus felis eget faucibus. Pellentesque eget eros tristique nunc tristique aliquet. Donec ac dui lorem, vel posuere turpis.</p>

  <h2>Segundo título de sección</h2>

  <p>Donec fringilla elit dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed libero sed nulla mattis placerat quis ut tortor. Nam fringilla nulla volutpat felis molestie accumsan. Nulla lacinia iaculis varius. Etiam mollis metus vel velit molestie quis convallis nisl vehicula.</p>

En el ejemplo, vemos como ante cada título <h2> se antepone un contenido que comienza

con la palabra Capítulo, seguida de un espacio en blanco, para finalizar con un número,

que se presentará en forma incremental en cada uno de los títulos. Para una mejor

visualización del ejemplo, hemos dado un color diferente a los elementos incluidos en la

propiedad “content”, de forma tal que se diferencie del resto del texto de la etiqueta

HTML, aunque esto no es absolutamente necesario.

Creación de un índice de tres nivelesUna de las formas más avanzadas de la utilización de estas propiedades, es la creación de

numeraciones con varios niveles. Para llevar adelante este tipo de numeraciones, es

necesario que se utilice la función “counters” en lugar de la función “counter” en la

propiedad “content”.

La función “counters” puede incluir más de un elemento, como puede verse en el código

del ejemplo, en el que luego del nombre del contador que se utilizará, aparece encerrado

en comillas simples un punto, el que se utilizará como separador de los diferentes números

de los contadores. El código de ejemplo es el siguiente:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<ol class="lista">

    <li>Elemento de índice</li>

    <li>Elemento de índice</li>

    <li>Elemento de índice</li>

      <ol class="lista">

        <li>Elemento de índice</li>

        <li>Elemento de índice</li>

          <ol class="lista">

            <li>Elemento de índice</li>

            <li>Elemento de índice</li>

            <li>Elemento de índice</li>

          </ol>

        </li>

        <li>Elemento de índice</li>

      </ol>

    </li>

    <li>Elemento de índice</li>

  </ol>

?

1

2

3

ol.lista  {

  counter-reset: lista 0;

  list-style: none;

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

  clear: both;

  padding: 10px 30px;

  }

ol.lista li {

  padding: 2px 10px;

  width: 200px;

  font: normal 12px tahoma, verdana, sans-serif;

  color: black;

  }

ol.lista ol.lista li {

  color: blue;

  }

ol.lista ol.lista ol.lista li {

  color: red;

  }

ol.lista li:before {

  content: "Capítulo " counters(lista, '.') " - ";

  counter-increment: lista 1;

  }

Para el ejemplo se han utilizado listas, pero pueden utilizarse otras etiquetas que puedan

anidarse, como es el caso de los <div>, dentro de los cuales se deben

utilizar párrafos para que lleven la numeración generada por los contadores.

El ejemplo que vemos en el código, se verá de la siguiente forma:

Creación de listas con numeración corridaEl ejemplo que sigue a continuación muestra como se pueden utilizar listas

ordenadas para generar tres listas flotantes que tengan numeración corrida, es decir, que

el primer elemento de la segunda lista tendrá el número siguiente al último elemento de la

primera lista.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<ol class="flotante1">

  <li>Elemento</li>

  <li>Elemento</li>

  <li>Elemento</li>

  <li>Elemento</li>

  <li>Elemento</li>

</ol>

<ol class="flotante2">

  <li>Elemento</li>

  <li>Elemento</li>

  <li>Elemento</li>

  <li>Elemento</li>

</ol>

<ol class="flotante3">

  <li>Elemento</li>

15

16

17

18

19

20

  <li>Elemento</li>

  <li>Elemento</li>

  <li>Elemento</li>

  <li>Elemento</li>

</ol>

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

.flotante1, .flotante2, .flotante3 {

  float: left;

  width: 29%;

  padding: 1%;

  border: solid 1px #aaa;

  margin-left: 1%;

  list-style: none;

  }

.flotante1 li, .flotante2 li, .flotante3 li  {

  background: #eee;

  border: solid 1px #fff;

  padding: 1px 10px;

  }

ol.flotante1 {

  counter-reset: uno 0;

  }

ol.flotante1 li:after  {

  content: " " counter(uno);

21

22

23

24

25

26

27

28

29

30

31

32

33

  counter-increment: uno 1;

  }

ol.flotante2 li:after  {

  content: " " counter(uno);

  counter-increment: uno 1;

  }

ol.flotante3 li:after  {

  content: " " counter(uno);

  counter-increment: uno 1;

  }

En el código vemos que se ha creado una clase diferente para cada una de las listas

ordenadas, de forma tal de poder establecer la numeración de inicio de cada uno de los

contadores. El ejemplo que vemos en este caso, se verá de esta forma:

ConclusiónPor supuesto que estos son solo algunos ejemplos de las muchas posibilidades que ofrece

la utilización de estas propiedades. En definitiva, además de la aplicación de los ejemplos

concretos que se puedan encontrar, siempre la imaginación propia es la mejor forma de

encontrar todas las utilidades posibles para cualquier tipo de propiedad CSS, a lo que

debemos agregar mucha práctica.

CSS avanzado: la propiedad display (primera parte)

Resumen: A pesar de ser una propiedad conocida, generalmente se encuentra subutilizada por parte de los diseñadores, muchas veces debido al desconocimiento de todo su potencial.

Mientras muchos diseñadores de páginas web siguen solicitando la implementación de

una mayor cantidad de propiedades de CSS 3, la mayoría de ellos desconocen muchas de

las utilidades que tienen algunas de las propiedades del actual CSS 2.1, y como

consecuencia de ello las subutilizan.

Algunas de ellas, como en el caso de la propiedad display que comenzamos a analizar

con este artículo, son utilizadas con frecuencia, pero en modo muy simple y sin que se

comprenda muy bien no solo el alcance de la propiedad en si misma, sino que además se

desconocen las posibilidades que ofrecen muchos de sus valores. La mayoría de los

diseñadores apenas conocen el uso de tres o cuatro de estos valores.

Conceptos generalesPodría decirse que esta propiedad define el tipo de caja que genera un elemento. Todos

los elementos generados en el HTML   ocupan un espacio (aunque mediante el uso de

la propiedad “float” puede hacerse que los elementos dejen de ocupar este espacio

aunque permanezcan visibles) y pueden comportarse de muchas formas. Este

comportamiento de los elementos y la forma en que se comportan respecto de los

elementos adyacentes, está regido por la propiedad “display”.

Esta propiedad solo admite el uso de uno de los valores posibles. Estos valores son:

inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-

group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-

caption, none e inherit, siendo su valor inicial “inline” y es aplicable a todos los elementos,

sin que estos hereden la propiedad.

Display: noneEs la forma más simple que presenta esta propiedad, en la que se indica al elemento

que no genere ninguna caja, con lo que el elemento simplemente desaparece. Como

consecuencia de ello, el elemento deja de ocupar un espacio en la presentación del

documento, por lo que los elementos adyacentes simplemente ignoran su presencia y

ocupan su espacio.

Esto último es lo que la diferencia del valor “hidden” de la propiedad “visibility”, con la que

el elemento deja de ser visible, pero continúa ocupando el espacio asignado, con el

efecto consiguiente en los elementos adyacentes.

Este valor se le utiliza generalmente en el desarrollo de elementos dinámicos

con javascript, además de poder utilizarse junto a pseudo-clases en el desarrollo de

algunos efectos visuales que simulan efectos dinámicos exclusivamente desarrollados con

HTML y CSS, como en el  siguiente ejemplo:

Menú desplegable

Display: block

?

1

2

<p class="bloque">Elemento con comportamiento en bloque</p>

<p class="bloque">Otro elemento que se comporta como bloque</p>

?

1

2

3

4

5

.bloque {

  padding: 10px;

  background: #ccc;

  display: block;

  }

Cuando un elemento es marcado con este valor de la propiedad “display”, el mismo se

comporta como bloque. Este comportamiento como bloque quiere decir que:

El elemento no permitirá la ubicación de elementos adyacentes.

En caso de que sus dimensiones no sean determinadas, ocupará todo el ancho

disponible dentro del elemento contenedor, y tendrá una altura que será determinada

por el contenido.

Cuando se determina el ancho, el elemento ocupará solo la extensión determinada,

pero sin permitir la ubicación de elementos adyacentes, aún cuando haya espacio

suficiente para que se ubique en él otro elemento.

Display: inline

?

1

2

<p class="linea">Elemento con comportamiento en línea</p>

<p class="linea">Otro elemento que se comporta en línea</p>

?

1

2

3

4

5

.linea  {

  padding: 10px;

  background: #ddd;

  display: inline;

  }

Los elementos cuya propiedad “display” tienen el valor “inline” se comportan como

elementos en línea, lo que quiere decir que:

Estos elementos permiten la ubicación de elementos adyacentes.

No puede determinarse el ancho ni la altura de estos elementos, ya que como

elementos en línea, las dimensiones de los mismos son determinadas por el

contenido.

Display: inline-block

?

1

2

<p class="linblock">Elemento con comportamiento en línea y en bloque</p>

<p class="linblock">Otro elemento que se comporta en línea y en bloque</p>

?

1

2

.linblock {

  padding: 10px;

3

4

5

6

  background: #f60;

  display: inline-block;

  width: 150px;

  }

Los elementos que tienen en su propiedad “display” este valor, tienen parte del

comportamiento de los valores “inline” y “block”. Se comportan como si se tratara

de elementos de bloque, pero que permiten la presencia de elementos adyacentes, lo

que es propio de los elementos en línea. Las características de estos elementos son:

Permiten elementos adyacentes, como si se tratara de elementos en línea.

Pueden determinarse sus dimensiones, como los elementos de bloque.

Cuando no se determina su extensión, ocupan todo el espacio disponible, como

sucede con los elementos de bloque.

La posición que ocupan estos elementos, es similar a los elementos en línea, lo que

quiere decir que la parte inferior del elemento se apoyará en la base de la línea.

Display: list-item

?

1

2

<p class="lista">Elemento con comportamiento ítem de lista</p>

<p class="lista">Otro elemento que se comporta como ítem de lista</p>

?

1

2

3

4

.lista  {

  display: list-item;

  list-style-type: square;

  }

Este valor hace que el elemento se comporte como si se tratara de un ítem de lista, es

decir, como si se tratara de un elemento <li>. Su comportamiento es exactamente igual

que si se tratara de un ítem de lista, por lo que soporta las propiedades de este tipo de

elementos, como “list-style”. Al igual que los ítems de lista, su comportamiento respecto

de los demás elementos es similar a los elementos de bloque, por lo que no permite la

presencia de elementos adyacentes y pueden determinarse todas sus dimensiones.

Display: run-in

?

1

2

<p class="runin">Elemento con comportamiento ítem de lista</p>

<p class="bloque">Otro elemento que se comporta como ítem de lista</p>

?

1

2

3

4

.runin  {

  display: run-in;

  background: #6af;

  }

Este es uno de los valores que otorgan un comportamiento más difícil de comprender, ya

que el mismo es variable dependiendo de los elementos adyacentes. También la

implementación de este valor de la propiedad “display” puede resultar complicada por el

hecho de que no todos los navegadores la muestran en forma correcta (en la actualidad,

solo muestran los elementos en forma correcta los navegadores Google

Chrome, Opera e Internet Explorer 8. Mozilla Firefox, ni siquiera en su versión 4 que

está en fase beta, lo muestra correctamente).

De todas formas, a pesar de que es muy probable que debido al inconveniente generado

por las diferencias entre los navegadores   este valor sea muy pocas veces utilizado,

daremos a conocer como funciona, ya que se encuentra dentro del estándar de W3C y su

implementación debería ser posible en cualquier navegador.

Cuando un elemento cuya propiedad “display” tiene el valor “run-in” tiene a continuación

un elemento cuya propiedad “display” tiene como valor “block”, el elemento se comporta

como si el valor fuera “inline” y se ubica dentro del elemento con “display: block”. En los

navegadores que no soportan este valor, ambos elementos se muestran como elementos

de bloque y separados.

Para todos los demás casos, el elemento marcado con este valor se comporta como un

elemento de bloque.

Otros valoresEl resto de los valores de esta propiedad son aquellos que hacen que los elementos se

comporten como si se tratara de tablas o como partes de ellas, como tablas, filas,

columnas y celdas, o como grupos de ellas.

Dado que se trata de una cantidad importante de valores, explicaremos el comportamiento

de los elementos marcados con ellos en el próximo artículo.

CSS avanzado: la propiedad display (segunda parte)

Resumen: La propiedad "display" puede utilizarse para mostrar los elementos como si se trataran de tablas o como partes de tablas.

Dentro de los valores que tiene la propiedad display, los que están relacionados con

las tablasson aquellos en los que mayores diferencias hay entre los navegadores, y en

muchos casos ni siquiera están soportados. Si bien es cierto que la maquetación con

tablas es incorrecta, tanto desde el punto de vista semántico como desde el punto de vista

práctico, hay que reconocer que las tablas presentan algunas ventajas en lo que refiere a

la sencillez con que se pueden posicionar los elementos en algunos casos.

Para aquellos casos en los que el uso de las tablas puede resultar una

ventaja, CSS presenta estos valores de la propiedad “display”, que hace que los

elementos se comporten como tablas o partes de tablas. Es importante decir que cuando

decimos “se comporten como tablas o partes de tablas”, es solo referido

al posicionamiento. En el ejemplo siguiente, vemos que mientras las celdas de las tablas

(en la parte superior de la imagen), el espacio natural que existe entre lasceldas de una

tabla, no aparece en el caso de los elementos marcados con el valor “table-cell” de la

propiedad “display” (en la parte inferior de la imagen). Para lograr que se vean del mismo

modo, hay que utilizar la propiedad “border-spacing”.

Nota importante: Todas estas propiedades tienen una reciente aplicación en los

navegadores.Mozilla Firefox comenzó a soportarlo recién con la aparición de la versión 3,

mientras que enInternet Explorer no se había implementado hasta la aparición de Internet

Explorer 8. Esto quiere decir que en el caso de utilizar navegadores como Internet Explorer

6 y 7 o una versión antigua de los demás navegadores, estos elementos se comportarán

tal como si no tuvieran la propiedad “display” determinada.

¿Usar tablas o los valores de tablas de “display”?Los valores de tablas de la propiedad “display” son útiles para que los elementos se

comporten como si se tratara de tablas. Sin embargo, en caso de tener que ingresar datos

tabulados, lo correcto es utilizar tablas ya que HTML   dispone de las mismas para ello.

Table, table-row y table-cellEn la imagen anterior, vemos la utilización de tres de los valores de la propiedad, “table”,

“table-row” y “table-cell”. En este caso se encuentran aplicados a capas   (div), que

cumplen con los mismos propósitos que los elementos correspondientes de las tablas

(tabla, fila y celda respectivamente).

Es posible (salvo para Google Chrome) utilizar solo la propiedad “table-cell” cuando

disponemos de los elementos en una sola fila. Para el caso de Google Chrome, es

necesario que los elementos se encuentren dentro de una capa que tenga la propiedad

“display” con el valor “table-row”, ya que de otra forma, los elementos se comportarán

como si la propiedad no estuviera determinada.

Inline-tableSe trata de un valor bastante peculiar, ya que produce que el elemento se comporte como

tabla, pero a diferencia de éstas, se mantiene en línea, es decir, sin salto de línea anterior

ni posterior. Es importante marcar que, mientras en casi todos los navegadores el

elemento marcado con “inline-table” se desarrolla desde la línea hacia abajo, en Google

Chrome los elementos se desarrollan hacia arriba de la línea. Ejemplo:

Table-columnLos elementos contenidos dentro de éste elemento, se comportan como si se tratara de

una columna, lo que en el correspondiente HTML sería <column>.

Otros valoresDentro de la propiedad, hay valores que hacen que los elementos se comporten como si

se trataran de grupos de partes de tablas, como grupos de filas y grupos de columnas. En

cada uno de los casos, pueden ser grupos de una o más filas o columnas

respectivamente.

De similares características son los elementos “table-header-group” (thead en HTML) y

“table-footer-group” (tfoot en HTML), que determinan al grupo de filas del encabezado y

pie de los elementos dispuestos en forma de tabla. Otro caso especial es el de “table-

caption”, que hace que el elemento se comporte como si se tratara de títulos de la tabla.

Código utilizadoPara que puedan llevar adelante las prácticas con los valores de la propiedad “display”,

les dejamos el código que hemos empleado que aparecen en las imágenes, de forma que

puedan hacer todas las modificaciones que consideren necesarias para comprender el

funcionamiento de los elementos que utilizan estos valores.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<head>

<title>Ejemplo</title>

<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>

<div id="contenedor">

<table>

<tr>

<td>Elemento en línea</td>

<td>Elemento</td>

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<td>Elemento</td>

<td>Elemento</td>

</tr>

<tr>

<td>Elemento</td>

<td>Elemento</td>

<td>Elemento</td>

<td>Elemento</td>

</tr>

</table>

<div class="tabla">

<div class="fila">

<div class="celda">Elemento largo</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

</div>

<div class="fila">

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

</div>

</div>

<br />

<br />

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<div>Este es un ejemplo de

<div class="tabla-linea">

<div class="fila">

<div class="celda">Elemento largo</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

</div>

<div class="fila">

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

</div>

</div>

 "inline-table"</div>

<br />

<br />

 <div class="tabla">

<div class="col">

<div class="fila">

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

</div>

</div>

<div class="col">

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

<div class="fila">

<div class="celda">Elemento largo</div>

<div class="celda">Elemento</div>

<div class="celda">Elemento</div>

</div>

</div>

</div>

</div>

</body>

</html>

?

1

2

3

4

5

6

7

8

9

#contenedor {

  width: 700px;

  margin: auto;

  }

td, table  {

  border: solid 1px #000;

  }

table {

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

  text-align: center;

  margin-bottom: 20px;

  }

.celda  {

  border: solid 1px #000;

  display: table-cell;

  }

.fila {

  display: table-row;

  }

.col  {

  display: column;

  }

.tabla  {

  display: table;

  border-spacing: 2px;

  text-align: center;

  border: solid 1px #000;

  }

.tabla-linea  {

  display: inline-table;

  border-spacing: 2px;

  text-align: center;

  border: solid 1px #000;

37

38

39

40

  }

CSS avanzado: la propiedad “white-space”

Resumen: Una propiedad poco utilizada, que permite al diseñador manejar los espacios en blanco y los saltos de línea de los textos incluidos en el código HTML.

Esta también es una de las propiedades CSS que son poco utilizadas por los diseñadores,

sobre todo aquellos que recién comienzan, debido fundamentalmente al desconocimiento

acerca de sus posibles aplicaciones. Esta propiedad se encuentra soportada por todos los

navegadores, por lo que su aplicación es factible en todos los casos.

Se emplea para determinar la forma en que el navegador tomará los espacios en blanco y

lossaltos de línea. Para comprender mejor esto, debemos entender como los

navegadores interpretan la presencia de los espacios en blanco y los saltos de línea,

cuando la propiedad “white-space” no se encuentra especificada o cuando se encuentra

en normal, que es suvalor inicial.

A diferencia de lo que sucede con los diferentes editores de texto, cuando dentro de

un código HTML se encuentra un texto en el cual alguna o varias de las palabras se

encuentran separadas por más de un espacio en blanco consecutivos, el navegador

simplifica y deja solo uno de los espacios en blanco, haciendo caso omiso de la presencia

de los demás.

En lo que respecta a los saltos de línea, los navegadores emplean (al igual que en los

editores de texto) todos los saltos de línea necesarios para que el texto no salga de los

límites impuestos, pero no respeta los saltos de línea propios del texto.

En el ejemplo siguiente, veremos un párrafo en el que se han colocado deliberadamente

una gran cantidad de espacios en blanco entre las palabras y saltos de línea, y veremos

como el navegador coloca tantos saltos de línea como sea necesario para que el texto no

se salga de los 600 pixeles que tiene cada párrafo de ancho. Junto al párrafo nombrado,

hemos colocado otro con los espacios en blanco simples, para que se pueda comprobar

que, a pesar de ser diferentes, el navegador los muestra de la misma forma:

?

1

2

3

4

5

6

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem tellus, tempor velvarius dui velit. Donec nec nunc ipsum, vitae pretium magna. Praesent non urna leo, non accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

  <p>Lorem       ipsum            dolor    sit   amet,     consectetur    adipiscing 

Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.

Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna.

Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per

?

1

2

3

4

5

6

7

p  {

 width: 600px;

 margin: 10px auto;

 padding: 5px;

 border: solid 2px #f60;

 font: normal 13px arial, helvetica, sans-serif;

 }

Los valores de la propiedadA esta propiedad se le pueden asignar cinco valores propios, además del valor “inherit”

(heredado), que son:

normal: Por ser el valor inicial de la propiedad, se aplica a todos los elementos en los

que no se determina la propiedad. Los espacios en blanco son simplificados,

dejándose uno solo entre cada palabra, y se aplican todos los saltos de línea

necesarios (además de los que sean determinados por la etiqueta <br> o <br />) para

que el texto se mantenga dentro de los límites impuestos por el tamaño del selector.

Sin embargo, los saltos de línea naturales del texto no son respetados. Podemos ver el

ejemplo anterior para ver como se comporta, mientras que en el ejemplo que sigue,

veremos su comportamiento en el primer párrafo.

pre: Cuando se aplica este valor, el navegador respeta todos los espacios en

blancoque encuentre. Los saltos de línea que los navegadores colocan en forma

automática en otros casos, cuando se aplica este valor no se colocan, por lo que el

contenido puede desbordar los límites del elemento. Los saltos del línea del texto

original son respetados. En el ejemplo siguiente, veremos su aplicación en el segundo

párrafo.

nowrap: El tratamiento de los espacios en blanco es igual que cuando se aplica el

modo normal, es decir, que se eliminan todos los espacios en blanco sobrantes. La

diferencia con el modo normal es que no se aplican los saltos de línea a menos que se

encuentren incluidos en el texto origianal, por lo que el contenido puede desbordar los

límites del elemento. En el ejemplo que se da a continuación, vemos su aplicación en

el tercer párrafo.

pre-wrap: La aplicación de este valor de la propiedad hace que el navegador deje

todos los espacios en blanco del contenido. A diferencia del valor “pre”, en este caso

el navegador colocará los saltos de línea necesarios para que el contenido no

desborde el tamaño del elemento en el que se aplica. También son respetados los

saltos de línea originales. En el ejemplo que sigue, se aplica en el cuarto párrafo.

Pre-line: Cuando se aplica este valor, se deja un solo espacio en blanco, eliminándose

el resto, mientras que se respetan los saltos de línea originales y se ajusta el texto,

agregando los saltos de línea necesarios. En el quinto párrafo del ejemplo siguiente,

vemos como es su aplicación.

?1

2

3

4

5

6

7

8

9

10

11

  <p id="normal">Lorem       ipsum            dolor    sit   amet,     consectetur

Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.

Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna.

Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per

  <p id="pre">Lorem       ipsum            dolor    sit   amet,     consectetur  

Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.

Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna.

Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per

  <p id="nowrap">Lorem       ipsum            dolor    sit   amet,     consectetur

Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.

12

13

14

15

16

17

18

19

20

21

22

23

24

Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna.

Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per

  <p id="prewrap">Lorem       ipsum            dolor    sit   amet,     consectetur

Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.

Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna.

Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per

  <p id="preline">Lorem       ipsum            dolor    sit   amet,     consectetur

Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.

Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna.

Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per

?

1

2

3

4

5

6

7

8

9

10

11

12

13

p  {

 width: 600px;

 margin: 10px auto;

 padding: 5px;

 border: solid 2px #f60;

 font: normal 13px arial, helvetica, sans-serif;

 }

p#normal {

  white-space: normal;

  }

p#pre {

  white-space: pre;

14

15

16

17

18

19

20

21

22

23

24

25

26

27

  }

p#nowrap {

  white-space: nowrap;

  }

p#prewrap  {

  white-space: pre-wrap;

  }

p#preline  {

  white-space: pre-line;

  }

Algunos trucos CSS simples para la maquetación de páginas web

Resumen: Ejemplos CSS sencillos para maquetación de páginas web.

El lenguaje CSS permite maquetar las páginas web utilizando las capas   para ello. Pero

quienes se inician en este tema, suelen encontrar algunos problemas que les resulta

imposible de resolver, mayormente por falta de conocimiento de las posibilidades en la

aplicación de algunas propiedades o valores de las mismas.

Hemos visto en otros artículos, que los diseñadores de páginas web, aún algunos con

cierta experiencia, que desconocen estos temas en profundidad, y terminan recurriendo a

complicadas soluciones cuando podrían optar por emplear algunas propiedades CSS cuyo

uso no es extendido.

En realidad se trata de pequeños problemas que tienen soluciones sencillas y que solo

requiere el conocimiento completo de todas las posibilidades, además de imaginación para

su aplicación. Es por ello que hoy traemos algunos trucos   para ejemplificar la forma en que

se deben solucionar los problemas de maquetación. Si bien estos ejemplos pueden

aplicarse libremente, la intención de presentarlos es que sirvan de ejemplo para que

estudien exhaustivamente todas las propiedades CSS y el alcance de sus valores, lo que

hará que el trabajo se simplifique enormemente.

Imagen flotante sin que el texto se ajusteCuando intentamos incorporar una imagen flotante junto a un párrafo, el texto del párrafo

tiende a “envolver” a la imagen. Esto generalmente es el efecto deseado, para que no

aparezcanespacios en blanco debajo de la imagen. Sin embargo, es posible que algún

diseño requiera que la imagen mantenga una posición   (como si ocupara una columna) y

que el texto no ocupe espacio debajo de ella. Esto es muy simple de hacer, y basta con la

aplicación de capas ymárgenes.

En primer lugar, veremos como queda la maquetación cuando colocamos una imagen

flotante junto a un párrafo:

<div id="capa">

<img src="imagenes/agua.jpg" alt="agua" />

<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos

de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las

formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en

su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y

en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza

terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del

agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos

subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72%

y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo,

atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema

solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada,

principalmente, en forma de hielo; de hecho, es el material base de los cometas y el

vapor que compone sus colas.</p>

</div>

#capa {

width: 610px;

padding: 10px;

margin: 10px;

border: 1px solid #f60;

background: #fed;

}

#capa img {

float: left;

margin: 0 10px 10px 0;

}

A continuación veremos el ejemplo. Se trata simplemente de crear dos capas. La primera,

es una capa contenedora, a la que hemos dado algunos elementos de diseño

(borde, fondo, etc.), a la que hemos dado el identificador “principal”. Dentro de esta capa,

crearemos una segunda capa, a la que daremos el identificador “flotante”, cuya

característica principal es que tendrá lapropiedad float y dentro de la cual incluiremos

la imagen. Luego, dentro de la capa “principal”, incluiremos el párrafo. Los códigos y el

resultado son los siguientes:

<div id="principal">

<div id="flotante">

<img src="imagenes/agua.jpg" alt="agua" />

</div>

<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos

de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las

formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en

su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y

en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza

terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del

agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos

subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72%

y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo,

atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema

solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada,

principalmente, en forma de hielo; de hecho, es el material base de los cometas y el

vapor que compone sus colas.</p>

</div>

#principal{

width: 610px;

padding: 10px;

margin: 10px;

border: 1px solid #f60;

background: #fed;

}

#principal #flotante{

float: left;

width: 300px;

}

#principal p{

margin-top: 0;

margin-left: 310px;

}

Lo que produce el efecto deseado es:

La capa “flotante” tiene la propiedad “float” a la izquierda.

El párrafo (identificado como “#principal p” en el código CSS) tiene un margen

derecho tal que es igual al ancho de la capa “principal” menos el ancho de la capa

“flotante”, lo que permite que ésta se coloque a la derecha del párrafo.

El margen otorgado al párrafo es lo que hace que el texto no continúe hacia la derecha

luego de que el espacio ocupado por la imagen finalice.

Esto puede hacerse también con la imagen flotante hacia la derecha. Para ello deberemos

solo cambiar el “float:” de izquierda a derecha, al igual que el margen que se da al párrafo,

con lo que el texto aparecerá a la derecha y la imagen a la izquierda.

Esquina “doblada” en capaEl siguiente ejemplo, se trata simplemente de crear una capa que aparente una hoja cuya

esquina inferior derecha está doblada. Para ello deberemos contar con la siguiente

imagen, la que para utilizarla solo deberán utilizar el botón derecho del ratón sobre ella y

emplear la opción “Guardar como…”:

A continuación mostraremos los códigos que hemos utilizado en este ejemplo y la imagen

resultante, para posteriormente explicar como lo hemos hecho:

<div id="oscuro">

<div id="esquina">

<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos

de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las

formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en

su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y

en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza

terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del

agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos

subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72%

y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo,

atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema

solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada,

principalmente, en forma de hielo; de hecho, es el material base de los cometas y el

vapor que compone sus colas.</p>

</div>

</div>

#oscuro {

width: 420px;

background: #444;

padding: 60px;

}

#esquina {

background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;

}

#esquina p {

padding: 50px;

margin: 0;

}

La imagen de la esquina doblada tiene dos colores fundamentales: el gris oscuro del

fondo, y el color blanco de la mayor parte del resto de la imagen, que coincide con los

bordes de la misma (esto es importante para que no existan diferencias con el resto de la

capa). El truco solo consiste en utilizar una propiedad de la que ha hemos hablado, que es

el posicionamiento de las imágenes de fondo.

En primer lugar crearemos la capa contenedora, que será de color gris oscuro para que

coincida con el fondo de la imagen. Luego crearemos la capa donde se insertará el texto (o

cualquier otro contenido), cuyo fondo tiene el siguiente código CSS:

#esquina {

background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;

}

Se trata en realidad de varias propiedades que se encuentran simplificadas:

Background-color, que tiene el valor #fff y que es visible en todos los puntos de la

capa que no se encuentran cubiertos por la imagen.

Background-image, cuyo valor es la URL de la imagen de la esquina doblada.

Background-position, que tiene los valores bottom y right, para que la imagen de

fondo se ubique en la esquina inferior derecha de la capa.

Background-repeat, que tiene el valor no-repeat, para que no ocupe el resto de la

capa y sea visible una sola vez.

Además, se debe hacer que el párrafo o cualquier otro contenido que se encuentre en la

capa tenga un relleno   tal que dicho contenido no se monte sobre la imagen utilizada en la

esquina. Este efecto puede utilizarse (modificando la posición de la imagen de fondo y

utilizando una imagen apropiada) en cualquiera de las cuatro esquinas de la capa.

Propiedades básicas para el manejo de CSS3: Textos (parte 1)

Resumen: Primera parte de una serie que expondrá las propiedades más utilizadas de CSS3, en esta parte nos enfocamos a la estilización de textos.

Como hemos planteado en temas anteriores, la incursión y manejo de CSS3 en nuestros

proyectos se debe de empezar a convertir en un hábito de constante uso y su aprendizaje

debe ser uno de nuestros objetivos más inmediatos. Si bien estamos conscientes que aún

falta para su total estandarización, la tercera versión de este lenguaje de estilo nos ofrece

una gran variedad de propiedades sencillas y poco robustas para la creación y adaptación

de efectos a nuestros elementos, por lo que la balanza se inclina a favor de su uso.

Cuantiosas son las ventajas al manejarlo, con unas cuantas líneas podemos realizar

sombreados o transparencias, incluso llegar a crear complejas animaciones apoyándonos

con meta lenguajes como HTML5, y gracias a ello nuestros sitios se harán menos pesados

y más eficientes. El ahorro de tiempo en el desarrollo, el apresurar la edición, así como la

economización de espacio y tiempo de respuesta de nuestro servidor sin duda hacen de

CSS3 una gran opción.

Es por ello que en este artículo traemos una serie de propiedades básicas para empezar a

estudiar este lenguaje, son sencillas pero muy potentes, nos permitirán darle a nuestro

sitio un estilo único y bien estructurado en cuestión de minutos, sin necesidad de

programas de edición ni hacks, solo código plano y sencillo que será correctamente visible

en la mayoría de los navegadores.

Navegadores y CSS3Desafortunadamente CSS3 aún no es compatible con todos los navegadores que existen

en el mercado, aún rondan versiones muy antiguas que se siguen utilizando por lo que

algunos de estos navegadores ni siquiera son compatibles con frameworks de JavaScript o

formatos como PNG, esta clase de navegadores por obvias razones se pueden considerar

obsoletos, pero por cuestiones de uso siguen siendo tomados en cuenta, ya que muchos

de los usuarios siguen utilizándolos y se niegan a cambiar.

Fuera de los navegadores obsoletos, CSS3 funciona a la perfección en Firefox, Google

Chrome, Opera y Safari, mientras que en Internet Explorer funciona a partir de

su versión 9la cual se encuentra en período BETA en este momento.

La clave para empezar a utilizar CSS3 está en determinar si estamos o no de acuerdo en

que obtendremos una presentación ligeramente diferente de un navegador a otro, es

decir, puede que Internet Explorer 8 muestre esquinas de 90 grados en vez de mostrarlas

radialmente o puede darse que un botón se mire con una forma diferente, si esto es de tu

desagrado entonces puedes decidir no utilizar estas técnicas, pero siempre hay que tener

en mente el hecho de que no es necesario que un sitio Web siempre luzca idéntico en

todos los navegadores.

Propiedades de texto con CSS3Unas de las propiedades más populares en el uso de CSS3 son aquellas que se aplican a

la edición y estilización de textos, muchas de estas fueron incluidas desde la versión

anterior de CSS pero por cuestiones de implementación se decidieron postergar para

adaptarlas mejor en esta entrega.

CSS3 ha permitido ahorrarnos el hecho de editar una imagen exclusivamente para mostrar

un texto, el hecho de tener que subir dicha ilustración a nuestro servidor únicamente para

que nuestro texto luciera de manera presentable nos podía poner los pelos de punta, ya

que no sólo era cuestión de subir 1 o 2, muchas veces se tenía que subir bastantes

imágenes, las cuáles a su vez llevaban un tiempo invertido en su edición y representaban

mayor tiempo descarga para los usuarios.

Entre las propiedades más comunes podemos encontrar a text-shadow, text-stroke y

text-overflow, las cuales son fáciles de aplicar y aunque algunas son más exclusivas que

otras, pueden ser adaptadas a partir de diseños hechos previamente con algún editor de

imágenes como Photoshop, en cuestión de minutos.

Text-shadow

El efecto text-shadow consiste en agregar una sombra a nuestro texto, la cual se

encontrara difuminada en distintos grados que varian según los valores proporcionados a

través de cuatro parámetros, los cuales son x-offset y y-offest que indican el

desplazamiento horizontal y vertical de la sombra es decir a que distancia estará la sombra

del texto, blur que indica el desenfoque y finalmente el cuarto parámetro es el color de la

sombra, en caso de no proporcionar un color se tomará el color de texto como el valor

default.

h2 {

text-shadow: 0 5px 3px #CCC;

color: #000;

font-size: 40px;

}

También podemos agregar múltiples sombras mediante el uso de comas como

separadores

h2 {

text-shadow: 0 2px 0 #FFF, 0 1px 5px #CCC;

color: #000;

font-size: 40px;

}

Text-stroke

Antes de empezar con la descripción, hay que mencionar que este método sólo funciona

para Web-kit por lo que hay que tener cuidado al momento de utilizarlo y estar consientes

que sólo lucirá bien en Chrome y Safari. El objetivo de este efecto es mostrar nuestro

texto como si se subrayara el contorno de las letras, creando un trazo que puede

adaptarse al tamaño y color deseado, es especialmente útil si se desea utilizar letras y

fondo del mismo color.

h2 {

-webkit-text-stroke: 3px black;

color: crimson;

font-size: 70px;

}

Text-overflow

Esta propiedad puede ser utilizada para “cortar” la extensión de un texto que exceda la

medida del contenedor en el cual se encuentra, proveyendo de una muestra para que el

usuario pueda interesarse en leer el texto completo. Se le pueden asignar dos valores los

cuales son clip y ellipsis, la diferencia entre estos dos valores es que el clip no cortará

palabras mientras que ellipsis muestra tres puntos que se despliegan al final del texto de

muestra indicando que existe más texto.

#texto {

text-overflow: ellipsis;

overflow:hidden;

white-space:nowrap;

width: 200px;

}

Conclusión>>> Puedes ver aquí algunos ejemplos simples del funcionamiento del CSS3 explicado.

Las tres propiedades analizadas en esta parte del artículo son consideradas como parte

del grupo de las más sencillas, por su fácil aplicación y edición, pero CSS3 no se ha

limitado únicamente a esta clase de estilos, podemos indagar un poco más y realizar

efectos un poco más elaborados y avanzados mediante herramientas como el set de

animación proporcionado por webkit a través de su propiedad “keyframes”, que nos ofrece

los efectos “pulse” y “bounce” para enriquecer el contenido.

Como podemos observar con muy poco hemos logrado darle un gran estilo a nuestro sitio,

con esta pequeña serie de atributos y el ingenio se puede llegar a realizar bastantes

proyectos de gran calidad, es cuestión de no limitarnos y saber aprovechar las bondades

que nos ofrecen los lenguajes de la actualidad. CSS3 no es un obstáculo, es un aliado, así

que no veas como un inconveniente el hecho de que luzca distinto en los navegadores,

pronto llegara su total estandarización y debemos estar más que familiarizados con el

lenguaje en el siguiente artículo de la serie explicaremos más atributos relacionados a

otros elementos de una página Web.

Propiedades básicas para el manejo de CSS3: Capas (parte 2)

Resumen: Segunda parte de una serie que expondrá las propiedades más utilizadas de CSS3, en esta parte nos enfocamos a la estilización de capas (div).

Existe una serie de propiedades de estilo enfocados a la estilización de las capas en las

que se divide nuestro sitio, dichas capas son comúnmente denominadas Divs, por el

nombre dado a su etiqueta, y básicamente consisten en secciones que nos permiten

mantener un cierto orden en nuestro documento HTML, estableciendo zonas y límites que

nos han hecho desechar a las tablas como elemento de maquetación.

Su uso puede variar según la función que desee darle el autor de la página, por lo que su

estilo puede encontrarse en constante cambio. El hecho de que deban adaptarse al

entorno del sitio los convierte en una clase de elementos que deben permanecer flexibles

ante la edición, por lo que no es recomendable la aplicación o uso de imágenes y patrones

fijos para manejar su estilo.

Con estos elementos se ha experimentado para llevar al extremo el diseño de una página

web y gracias a esto han surgido varios de los mejores diseños web conocidos,

actualmente CSS3 nos ofrece la posibilidad de que con unas cuantas líneas de código

podamos replicar lo que los antiguos diseñadores gráficos hacían en base a layouts y

editores de imágenes.

Si aún tienes dudas sobre lo que es un Div y la función que cumple dentro del documento

HTML, te recomendamos leer el siguiente artículo.

Border-radius

Uno de los efectos más populares desde antes del desarrollo de CSS3, son las esquinas

redondeadas. Anteriormente este proceso se llevaba acabo mediante las llamadas

“imágenes máscara”, las cuales se encargaban de cubrir únicamente las esquinas

mediante una transparencia para simular que se había agregado una curvatura.

Actualmente CSS3 nos permite agregar dicho efecto a nuestros Divs con simplemente un

grupo de tres líneas, border-radius, las cuales incluiremos en la declaración CSS de

nuestro div:

?

1

2

3

-moz-border-radius: 5px; //Firefox

-webkit-border-radius: 5px; //Chrome, Safari

border-radius: 5px; //Safari 5, IE9

Con esto abarcamos tanto Firefox, Chrome, Safari e Internet Explorer 9, aclarando que

en un futuro “border-radius” bastará para que pueda visualizarse en todos los

navegadores, actualmente solamente es reconocido en Internet Explorer 9 y Safari 5.

Box-shadow

Un efecto sencillo y de buena presentación es box-shadow, el cual agrega una sensación

inmediata de profundidad a los elementos y capas a las que se lo aplicamos, respetando

un patrón y no exagerando los valores en la sombra podemos crear vistas bastante

agradables para el espectador con tan solo agregar estas líneas:

?

1 -webkit-box-shadow: 2px 2px 25px #CCCCCC;

2

3-moz-box-shadow: 2px 2px 25px #CCCCCC;

box-shadow: 2px 2px 25px #CCCCCC;

Al igual que en radius, usaremos tres líneas dentro de la sentencia Div, y daremos cuatro

parámetros. El primer y segundo parámetro sirven para indicar la posición de la sombra

(x,y), el tercer parámetro indica la difuminación, mientras que el cuarto es el color que

queremos darle a la sombra.

Si queremos agregar sombras múltiples basta con separarlas con una coma de la

siguiente manera: box-shadow: 2px 2px 25px #CCCCCC, -2px -2px #999;

RGBA

El modelo RGBA ha sido utilizado durante años en programas de  edición de

imágenes como Photoshop, sin embargo en el campo de la programación web la

aplicación del campo alpha para la transparencia había estado en un constante proceso

de transición, lo que provoco un dolor de cabeza al querer aplicarlas sin la ayuda de algún

editor.

En mucha ocasiones se deseaba tener un Div transparente con texto contenido, pero al

momento de aplicar dicha transparencia el texto también se veía afectado, por lo que se

optaba por poner un div encima de otro y miles de trucos que a la larga significaban más

trabajo. Para evitar este tipo de cosas RGBA entro en función.

Para aplicar el efecto basta con utilizar la declaración rgba(255, 0, 0, 0.2), donde usaremos

cuatro parámetros, de los cuáles los primeros tres sirven para indicar el color que

queremos utilizar en base al patrón RGB, el cual es utilizado por muchos editores de

imágenes desde Paint hasta Photoshop, mientras que el último parámetro indica el nivel

alpha de transparencia.

Código final

>>> Aquí puedes ver el ejemplo de CSS3 en funcionamiento <<<

En el siguiente código podemos apreciar los tres efectos en un sólo Div:

?

1

2

3

4

<html>

<head>

<title>Propiedades de divs</title>

<style>

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

body{

background: url('http://fc04.deviantart.com/fs30/f/2008/148/c/3/Wood_floor_by_gnrbishop.jpg

}

div#prueba{

background: rgba(255, 122, 0, 0.5);

color: #FFF;

font-size: 10px;

padding: 12px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

-webkit-box-shadow: 2px 2px 25px #D2691E;

-moz-box-shadow: 2px 2px 25px #D2691E;

box-shadow: 2px 2px 25px #D2691E;

}

</style>

</head>

<body>

<div id="prueba"> La webera, lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus venenatis pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec odio mi, tempor in fermentum a, dignissim eu turpis. molestie dignissim. Nam luctus suscipit magna eget posuere. In pretium elementum fermentum. Fusce aliquam vulputate tempus. Vestibulum vel ultrices lectus. tortor mattis placerat. Praesent iaculis, urna non laoreet consectetur, erat purus vehicula enim, a rutrum ipsum justo at mi.</div>

</body>

</html>

Propiedades básicas para el manejo de CSS3: Fondos (parte 3)

Resumen: Tercera parte de una serie que expondrá las propiedades más utilizadas de CSS3, en esta parte nos enfocamos a la estilización de fondos. l fondo o “background” es uno de los elementos más subestimados a la hora

de diseñar nuestro sitio web, muchas veces cometemos el error de no darle la importancia

necesaria y continuamos sin identificar la relevancia que este tiene sobre el entorno, ya

que él solo puede causar un completo desentono ambiental o nos puede ayudar a crear

la armonía entre el resto de los elementos.

Después de manejar el texto y las capas a nuestro favor, el fondo puede parecer

intrascendente, pero si lo manejamos mal el resto de los elementos no lucirán. Imagina

que tienes un sitio que maneje capas de color azul eléctrico y uses un fondo de color rojo

chillante, al menos que estés haciendo una página de Mario Bross, esto nunca lucirá bien

y es por ello que debes aprender a combinar tu fondo con el resto del sitio.

Con esta serie de elementos que pondremos en práctica, podemos darle un toque más

adecuado a nuestros fondos, olvidándonos de los trucos o hacks que usábamos en el

pasado para que el fondo se adaptará y funcionará como queríamos, además

aprenderemos técnicas que anteriormente nada más eran posible realizarlas mediante

un editor de imágenes.

Fondos múltiples con CSS3Uno de los principales obstáculos que nos encontrábamos en el pasado, era el no

poderdesplegar más de una imagen a la vez en nuestros fondos, esto cambia con CSS3.

No es precisamente una práctica recomendada, ya que puede causar contrastes no

adecuados, pero debemos admitir que el hecho de poder usar varias imágenes de

fondo nos abre una gama de posibilidades para poner en práctica nuestra creatividad.

Creemos un ejemplo sencillo, supongamos que tenemos dos imágenes de LaWebera.es y

queremos agregarlas como fondo de nuestra capa principal, simplemente estructuramos

un código como el siguiente:

?

1

2

3

.lawebera {

    border: 1px solid #000;

    height: 150px;

4

5

6

7

    width: 400px;

    background: url("http://www.lawebera.es/images/logo.gif") 0 0 no-repeat,

    url("http://www.lawebera.es/images/servicios-webera-boton.png") 100% 0 no-repeat

}

Donde indicamos que la imagen “logo.gif” estará ubicada en la parte izquierda de nuestro

fondo mientras que “servicios-webera-boton.png” ocupará la parte derecha. Esto solo se

aplicará para aquellos div que tengas asignada la clase “lawebera”.

Tamaño del fondoAnteriormente era difícil poder adaptar una imagen para que se mostrará de manera

extendida en nuestro fondo, debíamos aplicar ciertos trucos para poder lograr este efecto y

al final muchas veces no se conseguía lo esperado.

Muchas veces buscamos poder tener una sola imagen extendida como fondo, y para

ahorrar recursos, ancho de banda y demás factores, utilizamos imágenes de tamaño

relativamente pequeño, por lo que necesitamos adaptarla para que se muestre en toda la

ventana. Basta con utilizar un par de líneas de código para aplicar esta técnica:

?

1

2

background: url("http://www.lawebera.es/images/header.png") no-repeat;

background-size: 100% 100%;

La sentencia “background-size” aceptará dos parámetros que serán las dimensiones de la

imagen de fondo (x, y). Hay que aclarar que este bloque de código únicamente funcionará

en Chrome y Safari, si queremos agregar esta funcionalidad para el resto de los

navegadores debemos crear un código como el siguiente:

?

1

2

3

4

5

6

7

body, html { height: 100%; }

body{

    background: url('http://www.lawebera.es/images/header.png') no-repeat;

    background-size: 100% 100%;

    -webkit-background-size: 100% 100%;

    -moz-background-size: 100% 100%;

    -o-background-size: 100% 100%;

    padding:45px;

8

9}

>>> Aquí puedes ver el ejemplo de CSS3 en funcionamiento <<<

Esta es una técnica que aún tiene mucho potencial de refinamiento y mejora, pero por el

momento se ha convertido en una gran utilidad.

Fondos difuminados y gradientesComo consejo, trata de utilizar técnicas relacionadas al manejo de colores en el fondo,

no necesariamente debemos de poner una imagen para lograr obtener un buen efecto en

nuestro sitio, muchas veces estas pueden obstaculizar o estropear nuestro proceso, e

incluso pueden hacer pesada la descarga, es por ello que es recomendable aprender a

manejar los colores.

Si deseas aprender más sobre gradientes y fondos con varios colores te recomendamos

que visites el enlace anterior.

Menú multicolor con XHTML y CSS

Resumen: Ejemplo de menú en el que cad ítem tiene un color diferente, empleando solo XHMTL y CSS.

Ya hemos visto en otros ejemplos de menús realizados con HTML o XHTML y CSS, que

las posibilidades para realizar diferentes efectos son muy bastas, y que estos lenguajes

tienen como único límite la propia imaginación que pongamos en el desarrollo. En el

ejemplo que traemos hoy, todos los ítems de menú tienen colores   diferentes, consiguiendo

un efecto muy atractivo.

Generalmente los menús desarrollados en páginas web, tienen todos los ítems de menú

del mismo color y forma. Sin embargo, es posible hacer que cada ítem se muestre

diferente de los demás, simplemente aplicando un identificador a cada uno de ellos, y

dando características diferentes en el archivo CSS.

El ejemplo que mostraremos a continuación, es muy sencillo, pero el resultado es

atractivo. Durante el desarrollo, explicaremos en forma detallada como funciona. En primer

lugar, generaremos los documentos necesarios. Creamos un archivo XHTML 1.0 estricto,

con el DTDque corresponde. En el encabezado pondremos el título y el enlace al archivo

CSS, que en el caso del ejemplo se encuentra en la raíz del sitio.

El siguiente es el código que deberemos introducir:

?

1

2

3

4

5

6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Menu de ejemplo</title>

    <link href="estilo.css" rel="Stylesheet" type="text/css" media="screen" />

  </head>

Luego, dentro de la etiqueta “body”, crearemos una capa (div), cuya única finalidad es

darle unaposición al menú. Dentro de la capa, crearemos la lista sin ordenar (ul) con los

seis ítems que tiene el menú de ejemplo. Cada ítem (li) del menú tendrá un identificador.

Marcando en forma genérica a cada ítem, es decir, dando formato a los ítems de menú (li),

daremos las características que les son comunes a todos los ítems, mientras que con el

identificador lograremos darle las características particulares de cada uno de ellos. Como

vemos en el código de ejemplo que damos a continuación, cada ítem tiene un identificador

propio. Dentro de cada ítem, veremos los enlaces con sus respectivos textos.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

<body>

    <div id="menu">

      <ul>

        <li id="item-uno">

          <a href="#">Enlace uno</a>

        </li>

        <li id="item-dos">

          <a href="#">Enlace dos</a>

        </li>

        <li id="item-tres">

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

          <a href="#">Enlace tres</a>

        </li>

        <li id="item-cuatro">

          <a href="#">Enlace cuatro</a>

        </li>

        <li id="item-cinco">

          <a href="#">Enlace cinco</a>

        </li>

        <li id="item-seis">

          <a href="#">Enlace seis</a>

        </li>

      </ul>

  </div>

</body>

Ahora veremos el archivo CSS   con los elementos necesarios para que el menú se vea

como deseamos.

?

1

2

3

4

body  {

  margin: 0;

  padding: 0;

  font: normal 13px arial, helvetica, sans-serif;

  background: #000;

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

  }

#menu {

  width: 900px;

  margin: 0 auto;

  margin-top: 50px;

  }

#menu ul  {

  list-style: none;

  margin: 0;

  }

#menu ul li {

  margin: 0;

  float: left;

  }

#menu ul li a {

  margin:0 2px;

  width: 138px;

  font-weight:bold;

  font-size:1.5em;

  text-align: center;

  line-height: 44px;

  display:block;

  text-decoration: none

  }

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

#menu ul li a:hover {

  color:#000;

  }

#item-uno a {

  border-bottom:5px solid #f00;

  color: #f00

  }

#item-dos a {

  border-bottom:5px solid #f80;

  color: #f80;

  }

#item-tres a {

  border-bottom:5px solid #ff0;

  color: #ff0;

  }

#item-cuatro a {

  border-bottom:5px solid #8f0;

  color: #8f0;

  }

#item-cinco a {

  border-bottom:5px solid #0ff;

  color: #0ff;

  }

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

#item-seis a {

  border-bottom:5px solid #08f;

  color: #08f;

  }

#item-uno a:hover {

  background:#f00;

  }

#item-dos a:hover {

  background:#f80;

  }

#item-tres a:hover {

  background:#ff0;

  }

#item-cuatro a:hover {

  background:#8f0;

  }

#item-cinco a:hover {

  background:#0ff;

  }

#item-seis a:hover {

  background:#08f;

  }

86

87

88

89

90

91

Como vemos, el fondo de la página es negro, y tiene como finalidad hacer que

los colores   de los ítems de menú se destaquen más por contraste. También se

han eliminado los márgenes que algunos navegadores tienen por defecto y se han

determinado las características de la fuentepara todos los elementos de la página.

Luego eliminamos los márgenes que las listas tienen por defecto y también el estilo de

lista, de forma que no se muestren los botones que encabezan cada ítem (#menu ul).

Debajo, hacemos que cada ítem de la lista sea flotante y también quitamos los márgenes

que tienen por defecto (#menu ul li).

Mediante #menu ul li a daremos los elementos comunes a cada ítem del menú. En primer

lugar, determinamos márgenes, dimensiones, fuentes y alineación, además de agregar la

propiedad “display: block”, para hacer que los ítems de lista con enlace   dejen de

comportarse comoelementos de línea. De otra forma, sería imposible hacer que tomen las

dimensiones deseadas. Mediante el empleo de ls pseudo-clase:hover, determinamos el

comportamiento del ítem (solo el color del texto del enlace) cuando el puntero pasa sobre

él. El hecho de que hayamos incluido lapropiedad display, hace que todo el ítem, no solo el

texto, se modifique cuando el puntero pasa sobre él.

Debajo, utilizando el identificador individual de cada ítem, damos formato a cada uno de

los ítems de menú, dando un borde inferior (ver imagen) y color al texto. Más abajo,

también empleamos la pseudo clase :hover en cada ítem particular, para darle un color de

fondo cuando el puntero pasa sobre el ítem. El texto en este caso es negro, debido a que

lo hemos determinado de esta forma en #menu ul li a:hover, como podemos ver en el

código que entregamos.

Otra forma de hacerloTambién es posible hacerlo utilizando una imagen   con los colores del menú. Si bien tiene

muchas puntos en común con el menú que dejamos hoy, hay elementos que son

totalmente diferentes, y que veremos en un artículo posterior.

Columnas múltiples con CSS3: column-count, column-gap, column-width y column-rule

Resumen: Vemos como hacer con CSS3 columnas múltiples, un método muy sencillo de crear una estructura en columnas para tu web.

El oscuro pasado de las tablas en la maquetación webEl uso de tablas para estructurar un sitio resulta únicamente cómodo para quienes se

reusan a aprender los nuevos estándares que ofrecen varias y mejores alternativas, el

simple hecho de seguir utilizándolas para presentar información que no es propiamente

tabular resulta abrumador.

La culpable de todo esto es la maldita costumbre, muchos crecimos como diseñadores

webutilizando las tablas como un elemento omnipresente que tenía cabida en cada parte

de nuestros sitios, para casi todo lo que necesitaba presentar información existía una celda

o una tabla completa que entraba al rescate.

Con ellas matábamos la accesibilidad y la flexibilidad del sitio pero en aquel entonces no

nos importaba, era preferible complicarnos la vida utilizando gifs como separadores dentro

de las celdas para que el sitio funcionará y se viera bonito, a adaptarlo para utilizar

tecnologías emergentes como el CSS, limitadamente utilizado en aquellos años.

Gracias a nosotros que crecimos con ese estilo y propagamos el código por la red, hoy

existen muchos desarrolladores principiantes confundidos que se preguntan ¿Cuándo y

cómo debo utilizar tablas?, es fácil detectar que en Internet aún existen sitios que utilizan

estos elementos para maquetación web, existen ejemplos por la red y métodos de solución

que aún recomiendan el uso de tablas incorrectamente, y por otro lado se encuentran con

la nueva era de la estandarización donde van surgiendo cada vez más nuevos estándares

y mejores maneras de estructurar el código.

La nueva era, divs para crear estructurasSi tú haz llegado hasta aquí con esa encrucijada de utilizarlas o no, te tengo una respuesta

muy sencilla, utiliza las tablas únicamente para presentar datos que lo ameriten, ya sea un

conjunto de listas compuestas por varios datos, información estructurada de manera

tabular, y aquella que es obtenida mediante una consulta a una base de datos. Por nada

del mundo las utilices para maquetación, para crear headers, o footers, si lo que deseas

es estructurar las partes de tu sitio web debes utilizar las capas, representadas por la

etiqueta “div”, y verás que con ello reduces el tiempo de carga de tu sitio, así como

muchas otras ventajas relacionadas tanto con el hosting, semántica y con el ahorro de

tiempo tanto para ti como para el usuario.

Una vez definido esto, reconoceremos a las capas “div” como las auténticas salvadoras

que han venido a aclarar el panorama de la estructuración de nuestros sitios, pero

¿Podemos manejarlas de una mejor manera para optimizar aún más dicha estructura?, por

supuesto para ello existen lenguajes como CSS3 que nos vienen a ambientar aún más la

fiesta.

CSS3 o cómo flexibilizar nuestras maquetasDesde 2005, año en que vio la luz por primera vez el proyecto de CSS3, se empezaron a

desarrollar especificaciones con distintas funciones y tareas adaptables para

la estructuración de nuestro sitio web, estilos aplicables a nuestras capas para hacer de

estás más flexibles y adaptables al medio donde se desplegará la información.

Una de estás funcionalidades son las columnas múltiples, las cuales son generadas

única y exclusivamente por estilos, sin necesidad de agregar separadores ni mucho menos

celdas para desplegar la información en forma de tabloide.

En la actualidad son poco conocidas y raramente utilizadas, todo esto producido por la

falta de soporte en Internet Explorer, ya que sólo son admitidas y desplegadas en los

navegadores basados en WebKit y en Mozilla, por lo que si tienen pensado desarrollar un

proyecto para todos los navegadores deben considerar crear una versión alterna para

aquellos que usen IE8 o inferior.

Básicamente lo que produciremos al agregar esta propiedad a los elementos de nuestro

sitio, es convertir una línea continua o un párrafo grande en varias columnas, tomando

como base los atributos “column-count”, “column-gap”, “column-rule” y “column width”

para darle la forma deseada.

Lo primero que debemos hacer es crear nuestra estructura del sitio de la siguiente manera:

?

1

2

3

4

5

6

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Columnas Múltiples con CSS3</title>

</head>

7

8

9

10

11

12

13

14

15

16

17

18

19

<body>

<div id="contenedor">

    <h1>Diario "El Amarillista"</h1>

    <img src="http://www.dirjournal.com/info/images/roswell-crash.jpg" alt="Cae Nave en Kuala Lumpur"

    <h2>Cae nave espacial en Kuala Lumpur</h2>

    <p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a lectus nec felis bibendum bibendum quis nec dolor. Etiam dignissim elit quis leo posuere et viverra mauris tristique. Vestibulum lacinia sapien a purus bibendum iaculis nec vitae sapien. Quisque hendrerit, leo quis pellentesque scelerisque, ipsum ligula luctus purus, ut viverra dolor mi et orci. Donec feugiat cursus consectetur. Nunc scelerisque, nisl sed feugiat faucibus, sem augue dapibus erat, congue lobortis diam dolor ac ligula. Suspendisse fringilla lacus ut mi accumsan quis commodo sapien aliquam. Donec sapien nulla, placerat quis ullamcorper sed, rhoncus non lectus. Ut a dui in magna lacinia mattis ut et leo. Nullam malesuada pellentesque est et dictum. Vivamus ac erat vel augue facilisis rhoncus. Cras quis augue ut purus ullamcorper mollis.

    </p>

</div>

</body>

</html>

Agregamos un gran párrafo con el famoso “Lorem ipsum” para ver como funciona la

propiedad, dicho párrafo está dentro de una capa llamada “contenedor” y en base a esto

aplicaremos el siguiente estilo a la relación:

?

1

2

3

4

5

6

7

8

#contenedor p {

  -webkit-column-count: 3;

  -webkit-column-gap: 10px;

  -moz-column-count: 3;

  -moz-column-gap: 10px;

  column-count: 3;

  column-gap: 10px;

  }

Como se puede apreciar escribimos las mismas dos líneas de atributos en tres ocasiones

pero con diferentes prefijos, esto lo hacemos para que la función sea compatible con la

mayoría de los navegadores, el prefijo “webkit” es para Safari y Chrome, “moz” para

Mozilla y los atributos sin prefijo son para aquellos navegadores que así lo requieran.

El atributo “column-count” sirve para especificar en cuantas columnas queremos que se

despliegue la información, en nuestro caso son tres. Por su parte el atributo “column-

gap”sirve para establecer el espacio que existirá como separador entre cada columna, a lo

que nosotros le damos el valor de 10 píxeles.

Si deseamos agregar más control sobre el funcionamiento de las columnas podemos

utilizar otros dos atributos, “column-width” que nos permite determinar cuanto medirá

cada columna y“column-rule” que permite agregar especificaciones a las divisiones entre

cada columna, comúnmente usado para establecer un borde (column-rule: solid #000000

1px;).

Podemos detallar más el estilo de los diferentes elementos del sitio agregando más gama

de colores y creando efectos como el difuminado sobre el encabezado; todo lo que

creamos necesario para que nuestro sitio luzca de la mejor manera. A nuestra página de

ejemplo he decidido agregar lo siguiente:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

body{

  background: #282828;

  }

  #contenedor {

  width: 500px;

  margin: auto;

  background: #F0F0F0;

  padding: 10px;

  font: 12px helvetica, arial, sans-serif;

  }

  img {

  width: 100%;

  }

  h1{

  color: #303030;

  font-size: 48px;

16

17

18

19

20

21

22

23

24

25

26

27

28

29

  text-shadow: 2px 2px 5px #505050;

  }

  #contenedor p {

  -webkit-column-count: 3;

  -webkit-column-gap: 10px;

  -moz-column-count: 3;

  -moz-column-gap: 10px;

  column-count: 3;

  column-gap: 10px;

  }

Dicho estilo deberá añadirse a nuestro código con alguno de los dos métodos conocidos,

ya sea escribiéndolo directamente dentro de las etiquetas “head” o agregándolo como un

archivo externo con extensión “.css”. Cualquiera que sea la manera de hacerlo

obtendremos como resultado una página en forma de tabloide en colores grises lista para

ser publicada.

Como pudimos observar es un método bastante sencillo, fácil de aplicar y sobre todo de

aprender, no hay necesidad de complicarnos la vida con tablas, ni de utilizar métodos aún

más arcaicos como el salto de línea ni los gifs transparentes para separar, con esto

nuestro código quedará limpio y claro.

Expansión de una imagen de fondo con CSS

Resumen: En este artículo explicamos dos métodos CSS distintos para expandir la imagen de fondo y tome el tamaño de la ventana del navegador.

Muchas son las ocasiones en las que se nos presenta la necesidad de utilizar una imagen

de fondo para nuestro sitio que se encuentre en estado expandido, y de tal manera

abarque toda la ventana del navegador, sea cual sea su medidas. El común uso del

escritorio como entorno de trabajo y su facilidad de adaptar una imagen al tamaño de la

pantalla, hace que nos sea muy familiar el uso de imágenes expandidas de fondo y

aunque para adaptarlas en un sitio web no resulte tan sencillo como pueda parecer, el uso

de técnicas como las siguientes nos pueden facilitar el trabajo.

Antes de la incorporación de las hojas de estilo a nuestros desarrollos, era bastante

complicado lograr esta adaptación de imágenes, se tenía que recurrir a varios trucos para

lograr el efecto deseado, e incluso se tenía que personalizar de navegador en navegador,

teniendo que recurrir muchas veces al uso de JavaScript.

En la actualidad CSS, y sobre todo CSS3, nos han extendido la mano para llevarnos por

un camino de simplicidad y estandarización al realizar esta clase de funciones,

permitiéndonos utilizar un mismo código para cada navegador obteniendo resultados

exactos o muy similares, con las claras excepciones de los navegadores antiguos que no

soportan la tecnología.

Desgraciadamente, debido a estas excepciones mencionadas, CSS3 sigue siendo un tema

tabú para muchos desarrolladores, temiendo que usuarios que tengan una versión

instalada de Internet Explorer que sea anterior a la 9, no puedan ver correctamente el sitio.

Es por esto, que en consideración a los gustos de cada programador, hemos agregado

dos métodos distintos para lograr el mismo resultado, explicando en que navegadores

funcionará cada uno de ellos.

El objetivo es sencillo, queremos lograr que la imagen de fondo del sitio cubra toda la

ventana del navegador, en todo momento, sin que existan espacios en blanco y logrando

que la imagen este correctamente escalada, respete su proporción de altura y anchura, no

genere barras de desplazamiento y que se encuentre centrada, todo esto utilizando código

sencillo sin recurrir a herramientas elegantes, y tratando de que sea visible en la mayoría

de los navegadores.

Método con CSS3La maravilla del uso de CSS3 es que no solo nos convierte en desarrolladores progresivos

y vanguardistas, cosa de la que muchos presumen, si no que nos hace ser más

pragmáticos y resolver problemas de manera mucho más sencilla.

Gracias al uso de la propiedad “background-size”, el efecto de fondo extendido puede

hacerse posible utilizando exclusivamente CSS. Para definirlo, utilizaremos el elemento

“html” y dentro de su sentencia de estilo definiremos las propiedades para el ajuste del

tamaño de la imagen:

?

1 html {

2

3

4

5

6

7

        background: url(imagenes/fondo.png) no-repeat center center fixed;

        background-size: cover;

        -moz-background-size: cover;

        -webkit-background-size: cover;

        -o-background-size: cover;

}

En dicha sentencia, con la propiedad “background” establecemos un fondo fijo que

llevara la imagen cuyo nombre es “fondo.png”, dicha imagen es centrada y arreglada para

que no sea repetida. Finalmente mediante la propiedad “background-size”, ya mencionada,

ajustamos el tamaño para que cubra la ventana del navegador.

Como se puede observar se utilizaron 3 variaciones de la propiedad, esto es para que la

sentencia pueda funcionar en tres distintos navegadores, “moz” para firefox y los derivados

del proyecto Mozilla, “webkit” para safari y chrome, y finalmente “o” para Opera.

Esta medida es únicamente de prevención, y con ello nuestro efecto se podrá observar

perfectamente en cualquier navegador Firefox que sea igual o superior a la version 3.6, en

Safari 3 o superior, Opera 9.5 en adelante, Google Chrome y en la más reciente versión de

Internet Explorer, la número 9.

Método con CSS básicoEn caso de que CSS3 te resulte complicado, o simplemente quieras tener un mayor rango

de navegadores a abarcar podemos utilizar este método que utiliza únicamente CSS

básico. Si bien es un poco más de código por programar, resulta más digerible para las

versiones antiguas de navegadores, incluidos los famosos Internet Explorer 6 y 7.

En este método utilizamos el elemento “img”, al cual le establecemos una altura mínima

con“min-height”, lo que permite llenar la ventana del navegador de manera vertical,

después establecemos una anchura (width) de 100% para realizar el llenado horizontal.

De igual manera establecemos una anchura mínima (min-width) para que la imagen no se

haga más pequeña que su tamaño original.

El truco aquí consiste en verificar si la ventana del navegador es menor que el tamaño

verdadero de la imagen, al saberlo podemos utilizar porcentajes y margenes negativos

para mantener centrada la imagen sin importar el tamaño de la ventana. Para ello

utilizamos una búsqueda de tamaño mediante la sentencia “@media”, esto podemos

observarlo en el siguiente código:

?

1 img#imagen_de_fondo {

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

        /* Rellenamos el fondo */

        min-height: 100%;

        min-width: 800px;

        /* Escalamiento proporcional */

        width: 100%;

        height: auto;

        /* Posicionamiento */

        position: fixed;

        top: 0;

        left: 0;

}

@media screen and (max-width: 800px) { /* Hacemos la búsqueda y si coincide modificamos las propiedades de la imagen */

        img#imagen_de_fondo {

                left: 50%;

                margin-left: -400px;   /* Agregamos un margen negativo que represente el 50% */

        }

}

Este método funcionará de manera correcta en cualquier versión de los

navegadores Firefox, Chrome, Opera y Safari, por su parte también funcionará a la

perfección en Internet Explorer 9, mientras que en las versiones 7 y 8 puede fallar con

imágenes muy pequeñas.

¿Cómo cambiar el estilo de nuestro sitio dinámicamente? Parte IV – Final

Resumen: Vemos la última parte de este mini-manual sobre cómo modificar dinamicamente los estilos CSS en nuestra página web. En esta última entrega terminamos el ejemplo de las horas del día.

Continuando con el tema de cambiar estilos dinámicamente en base a las horas del día. El

primer estilo a desarrollar será el de la mañana, que contendrá colores más claros que el

resto, empezando por un fondo basado en un gradiente circular que ira desde el blanco

hasta un amarillo claro.

Código CSS para cambiar los estilos dinámicamente?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

* {

  margin: 0;

  padding: 0;

  }

  body {

  height: 100%;

  background: #DEB887;

  font-size: 14px;

  background: -moz-radial-gradient(center 45deg, circle closest-corner, #FFFFFF 0%, #FFCC66

  background: -webkit-gradient(radial, center center, 0, center center, 770, from(#FFFFFF), to(#FFCC66));

}

#contenedor {

  width: 922px;

  margin: 0px auto;

  padding: 0px;

  border: 1px solid #dfdfdf;

  background: #FFF8DC;

  color: #DEB887;

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

  font: 1.0em/150% 'arial', sans-serif;

  }

  #cabecera {

  float: left;

  width: 100%;

  height: 95px;

  margin: 0px;

  padding: 0px;

  background: #FFEBCD;

  }

#cabecera #titulo {

  margin: 20px 0px 0px 30px;

  padding: 0px;

  color: #DEB887;

  font: bold 2.5em 'arial black', sans-serif;

  text-align: left;

  }

#cabecera div#descripcion {

  margin: 5px 0px 0px 30px;

  padding: 0px;

  color: #DEB887;

  font-size: 1.2em;

  text-align: left;

  }

#navegacion {

  float: left;

  width: 93%;

  margin: 0px;

  padding: 10px 2% 0px 5%;

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

  background: #FFDEAD;

  }

#contenido {

  float: left;

  width: 450px;

  margin: 20px 0px 0px;

  padding: 0px;

  background: #FFEBCD;

  font-size: 1.0em;

  text-align: left;

  }

#contenido p {

  margin: 15px 25px;

  padding: 0px;

  }

#contenido h3 {

  margin: 20px 25px 10px;

  font: bold 1.0em 'arial', sans-serif;

  text-align: left;

  }

.lateral {

  width: 200px;

  float: left;

  margin: 20px 5px 10px 0px;

  padding: 0px 0px 0px 20px;

  background: #F5DEB3;

  font-size: 1.0em;

  text-align: left;

  }

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

#pie {

  clear:both;

  width: 100%;

  height: 35px;

  margin: 0px;

  padding: 20px 0px 0px;

  background: #FFDEAD;

  font-size: 0.8em;

  text-align: right;

  }

En la definición de este estilo CSS podemos identificar los puntos claves para trabajar con

el resto. Los elementos background, color y border, son los responsables de adaptar los

colores al fondo, letra y borde de cada div, estos serán los elementos que cambiaremos

para agregar la particularidad de cada etapa del día.

Estilo CSS para la tarde:

?

1

2

3

4

* {

  margin: 0;

  padding: 0;

  }

body {

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

  height: 100%;

  background: #FF8C00;

  font-size: 14px;

  background: -moz-radial-gradient(center 45deg, circle closest-corner, #D2B48C 0%, #FF8C00

  background: -webkit-gradient(radial, center center, 0, center center, 770, from(#D2B48C), to(#FF8C00));

}

#contenedor {

  width: 922px;

  margin: 0px auto;

  padding: 0px;

  border: 1px solid #FFAD04;

  background: #FFCC66;

  color: #FF8C00;

  font: 1.0em/150% 'arial', sans-serif;

  }

#cabecera {

  float: left;

  width: 100%;

  height: 95px;

  margin: 0px;

  padding: 0px;

  background: #F0A300;

  }

#cabecera #titulo {

  margin: 20px 0px 0px 30px;

  padding: 0px;

  color: #FFDB91;

  font: bold 2.5em 'arial black', sans-serif;

  text-align: left;

  }

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

#cabecera div#descripcion {

  margin: 5px 0px 0px 30px;

  padding: 0px;

  color: #FFDB91;

  font-size: 1.2em;

  text-align: left;

  }

#navegacion {

  float: left;

  width: 93%;

  margin: 0px;

  padding: 10px 2% 0px 5%;

  background: #FFAD04;

  }

#contenido {

  float: left;

  width: 450px;

  margin: 20px 0px 0px;

  padding: 0px;

  background: #FFDB91;

  font-size: 1.0em;

  text-align: left;

  }

#contenido p {

  margin: 15px 25px;

  padding: 0px;

  }

#contenido h3 {

  margin: 20px 25px 10px;

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

  font: bold 1.0em 'arial', sans-serif;

  text-align: left;

  }

.lateral {

  width: 200px;

  float: left;

  margin: 20px 5px 10px 0px;

  padding: 0px 0px 0px 20px;

  background: #FFC753;

  font-size: 1.0em;

  text-align: left;

  }

#pie {

  clear:both;

  width: 100%;

  height: 35px;

  margin: 0px;

  padding: 20px 0px 0px;

  background: #FFAD04;

  font-size: 0.8em;

  text-align: right;

  }

86

87

88

Estilo CSS para la noche:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

* {

  margin: 0;

  padding: 0;

  }

body {

  height: 100%;

  background: #dfdfdf;

  font-size: 14px;

  background: -moz-radial-gradient(center 45deg, circle closest-corner, #333333 0%, #000000

  background: -webkit-gradient(radial, center center, 0, center center, 770, from(#333333), to(#000000));

}

#contenedor {

  width: 922px;

  margin: 0px auto;

  padding: 0px;

  border: 1px solid #000000;

  background: #555555;

  color: #333333;

  font: 1.0em/150% 'arial', sans-serif;

  }

#cabecera {

  float: left;

  width: 100%;

  height: 95px;

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

  margin: 0px;

  padding: 0px;

  background: #333333;

  }

#cabecera #titulo {

  margin: 20px 0px 0px 30px;

  padding: 0px;

  color: #666666;

  font: bold 2.5em 'arial black', sans-serif;

  text-align: left;

  }

#cabecera div#descripcion {

  margin: 5px 0px 0px 30px;

  padding: 0px;

  color: #666666;

  font-size: 1.2em;

  text-align: left;

  }

#navegacion {

  float: left;

  width: 93%;

  margin: 0px;

  padding: 10px 2% 0px 5%;

  background: #000000;

  }

#contenido {

  float: left;

  width: 450px;

  margin: 20px 0px 0px;

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

  padding: 0px;

  background: #999999;

  font-size: 1.0em;

  text-align: left;

  }

#contenido p {

  margin: 15px 25px;

  padding: 0px;

  }

#contenido h3 {

  margin: 20px 25px 10px;

  font: bold 1.0em 'arial', sans-serif;

  text-align: left;

  }

.lateral {

  width: 200px;

  float: left;

  margin: 20px 5px 10px 0px;

  padding: 0px 0px 0px 20px;

  background: #666666;

  font-size: 1.0em;

  text-align: left;

  }

#pie {

  clear:both;

  width: 100%;

  height: 35px;

  margin: 0px;

  padding: 20px 0px 0px;

77

78

79

80

81

82

83

84

85

86

87

88

  background: #000000;

  font-size: 0.8em;

  text-align: right;

  }

Una vez concluidos los estilos CSS, empezaremos a idear un sistema de condicionamiento

basado en horas, si definimos que mostraremos un "layout" distinto cada ocho horas

entonces debemos estructurarlo en base a este período.

JavaScript como la mayoría de los lenguajes de programación, cuenta con un número de

funciones y atributos predefinidos que nos ayudan a obtener valores específicos para

realizar operaciones con ellos.

En cuestión de Tiempo, existen funciones como getTime y getHours que podemos utilizar

para obtener los valores necesarios para estructurar el condicionamiento mencionado, con

datos directamente extraídos de nuestro cliente.

Tomando los valores obtenidos como base, podemos iniciar la codificación de condiciones

necesarias para desplegar el estilo que diseñamos para ese valor específico, algo como lo

siguiente:

Código JavaScript para cambiar el CSS dinámicamente?

1

2

function obtenerCSS()

{

fechadehoy = new Date();

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

tiempoactual=fechadehoy.getTime();

fechadehoy.setTime(tiempoactual);

horaactual = fechadehoy.getHours();

if (horaactual > 20)

colores = "noche.css";

else if (horaactual > 12)

colores  = "tarde.css";

else if (horaactual > 4)

colores  = "manana.css";

else if (horaactual > 1)

colores  = "noche.css";

else

colores  = "tarde.css";

var css = '<';  css+='link rel="stylesheet" href="' + colores  + '" \/';  css+='>';

document.write(css);

}

Básicamente lo que realizamos es obtener el tiempo en base a la fecha actual y extraerle

la hora para poder utilizar el valor en las condiciones que determinan que combinación de

colores utilizar. Una vez definida la combinación formamos la etiqueta "link" para agregar

el css y lo escribimos en el documento.

Dicho código lo guardamos en un archivo con extensión .js, el cual agregaremos en

nuestro código HTML principal, para mandar llamar a dicha función, esto lo haremos

dentro del campo de la siguiente manera:

?

1 <script type="text/javascript">obtenerCSS();</script>

Hay que recordar que este código funcionará en base al reloj de la computadora del

usuario por lo que funcionará correctamente si este se encuentra bien ajustado; es decir, si

el usuario por alguna razón tiene su reloj adelantado o atrasado recibirá un estilo que no

corresponde a la verdadera etapa del día.

A pesar de este problema, por razones de personalización es preferente usar el tiempo

obtenido del lado cliente en vez del servidor, para que el usuario reciba el CSS

correspondiente a la hora actual de su ciudad.

El utilizar estilos de CSS dinámicos se puede llevar a un nivel más avanzado, utilizar

aplicaciones externas y web services para obtener información relevante y utilizarla para

llevar a cabo cambios de estilo, en el siguiente artículo de esta serie veremos como poder

utilizar esta clase de información.

Sombras y dimensiones con CSS3 – box-shadow

Resumen: En este artículo practicamos con propiedades CSS3 para agregar sombras a las imágenes y efectos de profundidad al sitio.

El agregar efectos de sombra ha sido uno de los trucos más recurridos para realzar las

imágenes que desplegamos en nuestros sitios Web. Desde que el uso de Photoshop y

otros programas de edición ha venido a la alza, este efecto se ha practicado

cotidianamente como parte de un ritual de estilización proporcionada por los diseñadores

gráficos.

En la actualidad ya no es requerido el llevar un tutorial completo sobre edición de

imágenes para poder aplicar esta clase de efectos, ya que CSS nos permite utilizarlos aún

sin tener conocimientos previos de diseño, facilitando las cosas a los programadores que

nos hemos enfocado más en el funcionamiento de los sitios y que ahora podemos tener un

mejor trato del entorno visual.

Box-shadow de CSS3Box-shadow es una propiedad CSS3 que permite a los diseñadores y desarrolladores

implementar fácilmente sombras sobre cualquier elemento de tipo capa. Con esta

propiedad podemos especificar las propiedades de la sombra que queremos desplegar

proporcionando valores de tamaño, color, offset, y el desenfoque deseado.

Al agregar una sombra creamos un efecto de dimensión y cambia la perspectiva de la

imagen, al realizar esto con CSS nos ahorramos el hecho de tener una imagen con cada

efecto ya aplicado, simplemente basta con tener la imagen base a la cual podemos

añadirle y quitarle efectos mediante propiedades como la ya mencionada.

En este artículo nos enfocaremos a dar un efecto de sombra base para después crear una

sombra que de dimensión para darle vida a nuestra imagen plana.

Aplicando la propiedad CSS3 box-shadow

La imagen

Lo primero que necesitamos para llevar a cabo esta práctica es una imagen plana que no

tenga ningún tipo de borde ni efecto añadido, de tal manera que podamos aplicar nuestros

propios bordes con CSS sin que haya conflicto con la imagen base.

Dicha imagen será colocada dentro de un elemento div, al cual posteriormente le vamos a

aplicar los estilos CSS necesarios para lograr el efecto.

?

1

2

3

<div id="contenedorImg">

    <img src="imagenPlana.png" />

</div>

Añadiendo el borde

Después de definir la imagen pasamos a añadir la clase base “box-shadow”, la cual nos

proporcionará un tipo de borde difuminado alrededor de la imagen que produce el efecto

tridimensional que buscamos. Como buena propiedad CSS, el efecto producido por “box-

shadow” puede ser modificado y alterado, podemos ajustar su tamaño añadiendo píxeles

en las propiedades de los elementos.

Nuestro CSS quedaría definido de la siguiente manera:

?

1

2

3

.sombra-borde {

    width: 600px;

    -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);

4

5

6

    -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);

    box-shadow: 1px 2px 4px rgba(0,0,0,.5);

}

Y al aplicarlo a nuestro HTML obtendríamos una imagen así:

Sombra profunda

Después de tener listo la aplicación de la sombra a la caja contenedora, continuamos con

la creación de una clase de estilo que agregue un efecto sombra profunda para nuestra

imagen. Esta sombra nos dará una sensación de mayor profundidad y para ello definimos

un código CSS como el siguiente, entorno al elemento “div” que contiene la imagen:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

.sombra-profunda:after {

    -moz-transform: skew(-40deg);

    -webkit-transform: skew(-40deg);

    -moz-box-shadow:  70px 0 10px 40px rgba(0,0,0,.2);

    -webkit-box-shadow:  70px 0 10px 40px rgba(0,0,0,.2);

    box-shadow: 70px 0 10px 40px rgba(0, 0, 0, 0.2);

    content: "";

    height: 40px;

    left: 0;

    position: absolute;

    top: 360px;

    width: 550px;

}

Con este código la sombra queda sobre la imagen, pero esto lo vamos a corregir en el

siguiente paso.

Ajustar el orden del índice Z (z-index)

Por último, cambiamos el orden del índice Z de nuestra sombra, dicho índice indica el

orden en que se mostrarán los elementos en el sitio, con ello se evita el empalmar

elementos sobre otros más importantes, en este caso lo utilizamos para lograr el efecto de

profundidad necesario y evitar que la sombra quede en el primer marco del sitio.

Al darle un valor de “-1″ a la propiedad “z-index” logramos pasar la sombra al fondo y con

esto completar el marco visual que estamos buscando.

?

1 z-index: -1;

Como se puede apreciar en la imagen final, hemos logrado transformar lo plano en algo

tridimensional y sólo con unos cuantos pasos sencillos. Basta con aplicar al “div”

contenedor de la imagen las clases que creamos en este artículo, para así poder observar

los resultados.

?

1

2

3

<div id="contenedorImg" class="sombra-borde sombra-profunda">

    <img src="imagenPlana.png" />

</div>

CSS: Correcto uso de capas flotantes (float) con overflow

Resumen: En este artículo explicamos como corregir el uso de flotantes dentro de un contenedor con la propiedad overflow

El desprestigio que adquiere un sitio al utilizar tablas como contenedores de información

es conocido por todo desarrollador web que tenga un mínimo de experiencia en

estandarización de código. El llamar a dichos elementos para mostrar información o

imágenes únicamente para ahorrarnos unos pasos y tener alineado nuestro contenido es

considerado una de las faltas más graves en la maquetación de páginas web.

Con el paso de los años la aplicación de las tablas en sitios se fue limitando de tal manera

que en la actualidad la mayoría de los sitios únicamente las utilizan para mostrar datos

tabulares, lo que fue y siempre será su único motivo de existencia. Gracias a esta

adecuación, dichas estructuras han caído en desuso para dar formato a contenido, por lo

que varios métodos para alinear y mostrar información han tenido que surgir para cumplir

con esta función.

La respuesta inmediata a esta clase de problemas la podemos encontrar en el lenguaje de

estilo CSS. Si bien CSS3 nos ha sorprendido con el uso de columnas múltiples en

nuestros documentos, en esta ocasión nos centraremos en el uso de capas con

propiedades flotantes para poder explicar nuestro ejemplo de “Overflow”.

Como es de saberse el uso de capas mediante elementos “div” se ha convertido en la

forma más común y adecuada de mostrar información en nuestro sitio. A cada una de

estas capas se le puede dar valores que permitan editar su tamaño, posición y estilo, por

ejemplo si quisiéramos colocar dos capas con bloques de contenido en un mismo nivel de

manera paralela verticalmente utilizaríamos la propiedades “float” para mandar una al lado

izquierdo y otra al lado derecho.

Las capas flotantes con CSSEl problema que vamos a abarcar en el estudio de este artículo se produce precisamente

al manejar dichas propiedades de flotación. Hay que aclarar que no por ello debemos

discriminar a la propiedad “float”, pues es una de las maneras más adecuadas para

colocar “divs” a lo largo y ancho de la página y su implementación vino a revolucionar lo

que anteriormente era la maquetación y estructuración de un sitio.

Básicamente lo que ocurre al crear capas en un sitio es que un elemento “div” siempre se

colocaba debajo del anterior elemento del mismo tipo, lo que hace que la información se

muestre en una sola columna aunque modifiquemos el tamaño y estilo de la capa. Esto se

puede evitar gracias a la propiedad “float” la cual crea el efecto necesario para que las

capas estén “flotando” en la página y podamos moverlas y colocarlas a disposición.

La estructuraPor ejemplo, si suponemos que se desea tener una estructura de sitio con tres capas de

presentación, una de ellas que sirva para contener toda la información y las otras dos para

representar las columnas, se debe optar por manejar tres elementos de tipo div los cuales

después serán adecuados mediante CSS.

?

1

2

<div id="contenedor">

    <div id="columnaIzq">

3

4

5

6

7

8

        <p>Soy la columna izquierda de esta página y muestro contenido</p>

    </div>

    <div id="columnaDer">

        <p>Soy la columna derecha de esta página y también muestro contenido</p>

    </div>

</div>

Como es de suponerse queremos que una de las columnas se muestre al lado izquierdo

del contenedor y la otra al lado derecho, para ello debemos usar la propiedad flotadora ya

mencionada y el código quedaría de la siguiente manera:

?

1

2

3

4

5

6

7

8

9

10

11

12

#contenedor{

    background-color: SteelBlue;

    padding:5px;

}

#columnaIzq{

    width:300px;

    float:left;

}

#columnaDer{

    width:300px;

    float:right;

}

El único problema de esta estructura es que el “div” contenedor no tiene idea de que las

otras dos capas existen, puesto que las dos están flotando por encima de él, por lo que

actua como un contenedor vacío y simplemente no se muestra. Si pegamos el código que

acabamos de realizar en nuestra página web podremos ver que apenas se alcanza a

distinguir una línea con el color“SteelBlue” de fondo, ese es nuestro “div” contenedor, por

su parte las columnas se muestran pero no de la manera en que queremos.

La solución momentáneaMuchos de nosotros improvisamos y a la carrera sacamos proyectos por cuestiones de

tiempo o desesperación, existen soluciones poco prácticas o incluso momentáneas que

nos pueden ayudar. El uso de algún elemento al final del “div” contenedor puede ayudar a

que la capa se extienda y abarque los dos elementos de columnas.

Por ejemplo podemos añadir una cierta cantidad de espacios en blanco mediante el código

“ ” al final del div o de saltos de línea mediante la etiqueta ”

” hasta que el contenedor abarque lo suficiente como para obtener el resultado que

queremos. O incluso vernos un poco más sofisticados y utilizar esta misma etiqueta de

salto de línea pero con un atributo “clear” cuyo valor sea “all”, lo que forzará al contenedor

a extenderse para mostrar el contenido, por lo que si cambiamos el código HTML a este:

?

1

2

3

4

5

6

7

8

9

<div id="contenedor">

    <div id="columnaIzq">

        <p>Soy la columna izquierda de esta página y muestro contenido</p>

    </div>

    <div id="columnaDer">

        <p>Soy la columna derecha de esta página y también muestro contenido</p>

    </div>

<br clear="all" />

</div>

El resultado puede parecer el indicado, pero quizás no sea la forma más adecuada de

obtenerlo.

Overflow de CSS y capas flotantesSi bien con el salto de línea se pudo desplegar correctamente nuestro “div” contenedor,

estamos utilizando una etiqueta de contenido que no tiene más propósito que mostrar bien

la estructura, por ello es mejor pensar en una solución que venga desde el diseño y no

desde el contenido.

Para esta situación es cuando podemos utilizar la propiedad “overflow” que nos ofrece

CSS. La principal función de dicha propiedad es permitirnos modelar las capas de tal

manera que el navegador sepa cómo mostrar el contenido cuando este no puede ser

colocado de manera completa, pero en esta ocasión toma una función complementaría y

permite que los elementos flotantes sean reconocidos por el elemento contenedor.

Para esta función se puede utilizar cualquier valor de los permitidos para la propiedad

“Overflow”, ya sea “hidden”, “scroll” o “auto”, todas funcionan, pero por cuestiones de

estética optaremos en esta ocasión por el valor “hidden” que simplemente no muestra

nada. Habiendo dicho esto, modificamos el código de nuestro CSS y las propiedades del

div contenedor quedan de la siguiente manera:

?

1

2

3

4

5

#contenedor{

    background-color: SteelBlue;

    padding:5px;

    overflow: hidden;

}

En cuanto al código HTML, ya no será necesario usar el salto de línea por lo que podemos

volver al código original mostrado en el primer ejemplo.

Finalmente debemos aclarar que este truco funciona en todos los navegadores que

soportan CSS aunque en algunos casos debemos utilizar un “width” o un “height”

específico.

CSS Media queries

Resumen: En este artículo explicamos como adaptar nuestros sitios al tamaño de la ventana del navegador y de los dispositivos mediante los "media queries" de CSS.

Brindar comodidad en la visualización y soporte para diversos tamaños de pantalla, se ha

convertido en una prioridad para todos los sitios web que desean crear gratas experiencias

en el manejo de sus sistemas por parte del usuario final. Además con la popularización de

internet desde el  móvil , es más importante si cabe usar este tipo de recursos.

Con la variedad de dispositivos que actualmente existen en el mercado,  la web móvil, etc.

el manejo adecuado del tamaño de pantalla y la manera en que se despliega el sitio es un

factor determinante para que el usuario frecuente y utilice un sitio, ya que si este no puede

ser observado correctamente su potencial se ve reducido.

Para lograr este soporte, en el pasado, era común recurrir a efectos y trucos que nos

ofrecíaJavaScript, para que de esa manera el sitio se ajustará a la medida de la ventana

donde el usuario había abierto el sitio, o pero aún se modificaba arbitrariamente el ancho

del navegador donde se desplegaba el sitio, actuando en contra de lo que el usuario

realmente deseaba.

Afortunadamente en la actualidad este proceso se ha simplificado en gran manera, a tal

grado que con un par de líneas podemos dar soporte a los tamaños de pantalla más

utilizados por los usuarios, ya sea el tamaño de un monitor de escritorio, una tablet o un

smartphone. Todo esto se ha conseguido gracias al uso de CSS y sus nuevas

estandarizaciones, entre las cuales nos encontramos a los “media queries” quienes

serán los que nos ayuden a llevar a cabo esta tarea.

Soporte de CSS media queries en navegadores

Antes de empezar con el desarrollo, debemos establecer que los métodos que vamos a

explicar en este artículo sólo tendrán efecto en ciertos navegadores, si tu deseas dar

soporte a todos los navegadores que aún están en uso por parte de los usuarios, entonces

puedes tomar algún otro tutorial o conseguir un truco por Internet que te permita conseguir

el mismo efecto mediante“hacks”, sólo recuerda que no hay que maritizarse mucho con

esto pues es muy poco probable que un smartphone o una tablet venga con Internet

Explorer 7 como navegador, puesto que son instrumentos relativamente recientes.

Los navegadores que soportan los Media Queries de CSS son Firefox en su versión 3.5 y

posteriores, Google Chrome en todas sus versiones, Safari en su versión 3 y posteriores,

Opera en la versión 9.5 y posteriores y finalmente Internet Explorer que los incorporó a

partir de su versión 9.

Ahora que ya sabemos los navegadores donde se pueden utilizar hay que identificar en

que partes del código podemos colocar los media queries.

Donde colocar los media queries

El método más común a utilizar es incluir nuestros media queries dentro de la hoja de

estiloprincipal. Para llamarlos basta con incluir la etiqueta “@media” en nuestra sentencia.

Veamos la estructura:

?

1

2

3

@media screen and (min-width : 1024px){

      /* Aquí iría el estilo para este tamaño de pantalla */

}

Como se puede observar en la sentencia utilizamos la palabra “screen” después de la

etiqueta“@media”, esto sirve para indicar el formato al cual aplicaremos el estilo, este

puede tener distintos valores como all, screen o print, en nuestro caso nos enfocaremos

únicamente a “screen” ya que nos estamos refiriendo al tamaño de pantalla.

Después de establecer el formato damos la siguiente parte “min-width: 1024px”, con esto

especificamos cual será el tamaño mínimo que deba tener la pantalla para que el estilo

pueda ser aplicado, en este caso yo le di el valor de 1024 píxeles ya que es un estándar

de tamaño de monitor para las computadoras de escritorio.

Si definimos una hoja de estilo como la siguiente:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

<style>

#contenedor{

background: crimson;

width:200px;

height: 200px;

}

@media screen and (min-width : 1024px){

    #contenedor{

      background: blue;

    }

}

</style>

Al momento de abrir nuestra página veremos un bloque contenedor de fondo carmesí,

pero al momento en que disminuyamos el tamaño el browser a una cantidad menor de

1024 píxeles de ancho el contenedor cambiará de color y ahora será azul.

Podemos lograr el mismo efecto llevando a cabo otras manera de llamado, como por

ejemplo la importación de hojas de estilo específicas para cada tamaño.

Importando desde la hoja de estilo

Mediante la etiqueta “@import” podemos mandar llamar a un archivo CSS externo que

contenga todas las características deseadas para un tamaño de pantalla específico.

Supongamos que tenemos un css definido para los monitores de de computadoras de

escritorio pequeñas, cuya anchura es de 600 px en adelante, si quisiéramos llamar a esa

hoja de estilo bastaría con realizar la siguiente sentencia:

?

1 <style>

2

3

@import url( escritorioPequeno.css ) screen and ( min-width: 600px );

</style>

Hay que tener en cuenta que también podemos agregar reglas mediante la aplicación de

una coma, al igual que se hace al utilizar varios selectores.

Enlace a una hoja de estilo

Si no queremos importar en la hoja de estilo podemos incluir la hoja directamente en el

código HTML para eso hacemos el llamado mediante la etiqueta “link” estableciendo el

atributo “media” para especificar el formato y la anchura.

?

1 <link rel="stylesheet" media="screen and (min-width: 600px)" href="escritorioPequeno.css"

Rastreando un dispositivo específico

Finalmente si lo que deseas es rastrear por dispositivo puedes usar la propiedad “max-

device-width“. Esto te permite llamar hojas de estilo que hayan sido hechas con la única

finalidad de que la página se despliegue bien en otra clase de dispositivo.

Por ejemplo, si quisieramos mandar llamar una hoja de estilo para desplegar

correctamente la página en un iPhone haríamos una llamada como la siguiente:

?

1 <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="dispositivoMovil.css"

Crear botones con propiedades CSS3

Resumen: En este artículo prácticamos la estilización de botones con CSS3, utilizando gradientes, sombras y bordes

Cubrir los conceptos básicos de un tema es fundamental en cualquier ámbito donde nos

desarrollemos, gracias a esto podremos establecer las bases necesarias para el correcto

aprendizaje, lo que nos permitirá lograr un buen enfoque y una mejor comprensión de

temas más complejos.

Uno de estos temas considerados por varios como elementales al momento de empezar a

diseñar mediante CSS, es la elaboración y estilización de elementos de un formulario,

como lo es el caso de los botones los cuales siempre hacen resaltar o en otros casos

deslucir el ambiente de una página.

¿Cómo se hacían botones antes de CSS3?En el pasado era de lo más común tener que recurrir a programas de edición de imágenes

para poder lograr un buen efecto en nuestros botones. El sombreado, las fuentes

estilizadas y el aspecto tridimensional tenía que ser aplicado mediante las herramientas

que nos proporcionaba Photoshop, Corel Draw o algún otro programa de diseño que

teníamos a la mano, y una vez concluida la imagen debíamos complementar con trabajo

en HTML y CSS.

Para el caso de CSS se tenía que hacer uso de pseudo selectores, particularmente para

captar los eventos de colocación del mouse y activación del botón lo que permitía cambiar

la imagen de fondo o modificar su posición, para así dar un efecto de “aplastado” al

botón.

Al principio puede parecer fácil crear tres o cuatro imágenes distintas para un sólo botón

pero cuando cuentas con varios elementos del mismo tipo que tienen distintos estilos, la

cosa se complica, por lo que se empezó a optar por tener una sola imagen para cada

botón y en esa misma imagen tener representado cada uno de los eventos.

El tener una sola imagen de fondo representaba un menor tiempo de descarga de la

página y agilizaba el desempeño del sitio, es por ello que era muy común encontrar en

nuestras hojas de estilos sentencias como:

?

1

2

3

4

5

6

7

8

9

10

a.btnAzul{

background: url("botonazul.png");

}

a.btnAzul:hover, a.btnAzul:focus{

background-position: 0 -124px;

}

a.btnAzul:active{

background-position: 0 -248px;

}

Las cuales mediante la propiedad “background-position” y con valores negativos se

encargaban de mover la imagen que se mostraba como fondo de nuestro botón.

Si bien esto vino a simplificar y reducir el tiempo de carga de la página, aún así teníamos

que crear de una a tres imágenes por cada botón o por cada estilo con el que contaba la

página, esto representaba tiempo y la necesidad de tener conocimiento en algún programa

de diseño para poder utilizarlo.

Pero todo esto quedo en el olvido al momento de que CSS3 implementó todos los

efectos necesarios para llevar a cabo esta clase de ediciones, y ahora el diseño de

botones CSS3 se puede hacer directamente en nuestro código.

Diseño de botones con CSS3El uso de gradientes, sombras, bordes redondeados y transiciones de manera combinada

mediante CSS nos permite crear botones con estilos a granel. La poca dependencia de

esta manera de desarrollo hace que el diseñador se sienta más libre y pueda experimentar

con distintos colores en el mismo código fuente de la página.

En este artículo realizaremos un ejemplo de botón basado en los típicos estilos que vamos

a encontrar en casi cualquier sitio web. Utilizaremos un div contenedor con un elemento de

tipo link que funcionará como “tablet”, a dicho elemento le aplicaremos bordes, gradientes

y sombreado para dar un aspecto tridimensional.

El texto del botón también será editado mediante CSS y lucirá con sombras para dar un

efecto de profundidad.

Estructura HTML del boton

Nuestra estructura HTML tal y como fue descrita anteriormente, quedaría de la siguiente

manera:

?

1

2

3

<div id="contenedor">

    <a href="#" class="btnAzul">Da Click</a>

</div>

Como se puede apreciar es una estructura bastante simple y lo fundamental de ella es

elemento de anclaje, el cual recibe una clase a la que hemos llamado “btnAzul” y será la

encargada de recibir todos los efectos mediante CSS.

Estilos CSS3 para el botón

Nuestro código CSS comenzará con algunos estilos básicos de configuración lo que nos

permitirá apreciar mejor el elemento.

?

1 a.btnAzul {

2

3

4

5

6

7

    display: block;

    width: 250px;

    height: 60px;

    padding: 25px 0 0 0;

    margin: 0 auto;

}

Un elemento de anclaje es por defecto de tipo “inline” ya que son utilizados para mostrar

y representar links, en nuestro caso queremos un “tablet” por lo que se vuelve necesario

cambiar el tipo de display a tipo bloque y para ello declaramos la sentencia “display:

block”. Esto permitirá que especifiquemos un ancho y una altura para el elemento, para

finalmente agregar un “padding” en la parte superior para separar el texto del borde y el

margen “auto” se encargará de centrar dicho texto.

Después de establecer el elemento base, pasamos a darle formato y edición.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

a.btnAzul {

    display: block;

    width: 250px;

    height: 60px;

    padding: 25px 0 0 0;

    margin: 0 auto;

    background: #4682B4;

    background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB), color-stop(100%,#4682B4));

    box-shadow: inset 0px 0px 6px #fff;

    -webkit-box-shadow: inset 0px 0px 6px #fff;

    border: 1px solid #62C2F9;

    border-radius: 10px;

}

16

La propiedad “box-shadow” nos servirá para darle un efecto de resplandor interno, muy

parecido al que se puede dar con Photoshop. Al agregar la propiedad “inset” hace que la

sombra se coloque al interior del elemento, contrario al comportamiento natural de la

propiedad que agrega el efecto en el exterior.

En esta ocasión no vamos a utilizar los parámetros de “offset” en ninguno de los ejes de

la sombra, pero si utilizaremos la propiedad “blur” para agregar un tipo de borrando y

suavizar el efecto de flujo. A esto adicionamos un borde simple de 1 píxel de ancho y las

esquinas se redondean mediante la propiedad border-radius.

Después de tener establecido el estilo para el fondo de nuestro botón, pasamos a

establecer el estilo del texto.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

a.btnAzul {

    display: block;

    width: 250px;

    height: 60px;

    padding: 25px 0 0 0;

    margin: 0 auto;

    background: #4682B4;

    background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB), color-stop(100%,#4682B4));

    box-shadow: inset 0px 0px 6px #fff;

    -webkit-box-shadow: inset 0px 0px 6px #fff;

    border: 1px solid #62C2F9;

    border-radius: 10px;

    font: bold 25px Helvetica, Sans-Serif;

    text-align: center;

    text-transform: uppercase;

19

20

21

22

23

    text-decoration: none;

    color: #3090C7;

    text-shadow: 0px 1px 2px #62C2F9;

}

Establecemos el tipo de fuente, su tamaño, lo alineamos al centro del elemento,

transformamos todas las letras a mayúsculas para darle uniformidad, quitamos todo tipo de

decoración, definimos su color y finalmente establecemos un sombreado para darle un

efecto de inserción. Lo que hacemos con la propiedad “text-shadow” es básicamente darle

1 píxel de offset en el eje Y y crear un blur de 2 píxeles.

El resultado final:

Y aquí el ejemplo funcionando: Botones con CSS3

Con esto se logra obtener un botón de diseño sencillo pero que atrae, a partir de aquí

podemos utilizar pseudo selectores si queremos y hacer uso de estos mismos efectos para

diseñar el botón cuando el mouse se posicione sobre él o le de click.

Pseudo elementos CSS “:before” y “:after”

Resumen: En este artículo damos a conocer los aspectos generales sobre el uso de los pseudo elementos ":before" y ":after", así como su implementación en CSS.

Si tu eres de las personas que comúnmente visita sitios de enseñanza y artículos

sobre diseño web, quizás hayas notado que últimamente se han elaborado muchos

tutoriales que manejan la creación de imágenes y diseños CSS mediante el uso de los

pseudo elementos “:before” y “:after”.

El reciente enfoque que se ha dado a esta temática quizás se ha producido por la

flexibilidad de estos elementos y la capacidad de creación que nos ofrecen.

Si bien el uso de pseudo elementos, no es algo recien inventado, su potencial no había

sido totalmente exprimido hasta hace poco, y esta experimentación con ellos ha hecho que

su exposición sea mayor en estos días.

A lo largo de este artículo trataremos de dar a conocer y enseñar los aspectos generales

sobre como utilizar dichos pseudo elementos, para que con esta información y

conocimiento tengan una mejor idea de como se lograron todas esas cosas geniales que

se muestran en los tutoriales.

Función de un pseudo elemento CSSPrimero que nada tenemos que aclarar que “:before” y “:after” no son los únicos pseudo

elementos que existen, la lista completa abarca a “:first-letter”, “:first-line”, “:before”,

“:after” y “::selection”, pero como en esta ocasión nos estamos enfocado únicamente a

los dos ya mencionados, cada vez que nos refiramos con el termino “pseudo

elemento” nos enfocaremos a “:after” y “:before”.

La función de un pseudo elemento es sencilla, básicamente es hacer lo que su nombre

indica, crear un elemento falso para insertarlo antes o después del contenido del elemento

al que se ha orientado.

La creación de estos elementos no cambia nada en el documento, sólo se incluyen para

obtener cambios que sean visibles para el usuario. Dichos elementos nuevos son capaces

de recibir unestilo CSS por lo que fueron aprovechados para hacer trazos sobre los

elementos del sitio.

Codificación de los pseudo elementos CSSLa codificación de los pseudo elementos es bastante sencilla de realizar, basta con

recordar dos sencillos aspectos para crearlos de manera correcta.

Primero debemos crear un selector que indique a que elemento le vamos a crear pseudo

elementos, es decir tenemos que definir en que parte del documento se añadirán los

elementos falsos que utilizaremos. Por ejemplo si quisieramos crear un pseudo elemento

que se encuentre antes de un div identificado como “icono” entonces la sintaxis de mi

selector quedaría así“#icono:before”.

Si omitimos darle un elemento antes de llamar a “:after” o “:before”, la sentencia

funcionará pero no nos servirá de mucho, al menos de que desees que se inserte algún

tipo de contenido antes o después de cada elemento que compone el DOM de tu sitio.

El segundo aspecto a considerar es la propiedad “content”, toda declaración de pseudo

elemento debe tener dicha propiedad CSS si quiere que su creación surja efecto, ya que

sin ella no podremos insertar nada en los pseudo elementos que se crearon. En pocas

palabras“content”, como su nombre lo indica, es la encargada de portar el nuevo

contenido.

Se puede presentar el caso en que no se necesite contenido, en estas ocasiones puedes

utilizar la propiedad “content” vacía, pero por ningún motivo la debes de quitar. Este

caso se puede presentar cuando utilizamos cajas vacías a las que únicamente agregamos

estilos.

Una vez analizados estos dos aspectos, podemos definir que nuestra sintaxis básica

quedará de esta manera:

?

1

2

3

4

5

6

7

#icono:before {

   content: "Hola";

}

#icono:after {

   content: "Mundo";

}

Con este código insertaremos un “Hola” antes del div “icono” y un “Mundo” después.

Contenido insertidoEl contenido que se inserta mediante pseudo elementos únicamente será visible en

el código CSS y por defecto este se inserta con un estilo “inline”, es por ello que si

queremos mostrar el contenido de manera correcta muchas veces tenemos que recurrir a

propiedades CSS.

El uso de la propiedad “display” con un valor de “block” es muy común al momento de

manejar pseudo elementos, esta propiedad nos permite mostrar al elemento con un bloque

y darle una altura y anchura personalizada.

Colocación del contenidoQuizás si tomamos un concepto muy literal de lo que significa cada pseudo elemento,

nuestra mente imagine que el contenido agregado se colocará arriba y abajo del elemento

definido por el selector, esto es común de pensar pues nosotros examinamos a una página

web como algo plano bidimensional donde el antes significa arriba y el después significa

abajo.

Pero en esta ocasión, con el manejo de pseudo elementos, tenemos que imaginar a estas

nuevas partes como hijos del elemento que se indico en el selector. Hijos cuyo contenido

será insertado antes o después del contenido propio del elemento padre.

Tipos de ContenidoComo ya se pudo apreciar en el ejemplo que se dio anteriormente el contenido puede ser

de tipo texto, pero qué hay de otros tipos, qué tenemos que hacer para insertar por

ejemplo una imagen, es básicamente lo mismo sólo con pequeñas diferencias.

Si queremos plasmar una imagen en un pseudo elemento creado antes de un párrafo

haríamos algo como esto:

?

1

2

3

p:before {

 content: url(imagen.jpg);

}

Como se puede apreciar únicamente cambiamos el valor de la propiedad content por una

URL de imagen y removimos las comillas para que no se piense que es una cadena de

texto.

Soporte en navegadoresComo punto final para este artículo quiero mencionar que los pseudo elementos son

soportados en la actualidad por casi todos los navegadores, Chrome a partir de sus

versión 2, Firefox a partir de su versión 3, Safari desde la 1.3, Opera 9.2 en adelante

e Internet Explorer desde su versión 8 aunque con algunos bugs.

El mal uso de etiquetas HTML

Resumen: Veremos algunas de las etiquetas que comúnmente son utilizadas de manera incorrecta, tratando de especificar en que fallamos y de que manera podemos usarlas correctamente.

Es común que por factores como la costumbre que nos fue heredada por nuestros

predecesores o el uso común que se les da en la programación informal, hayamos

utilizadoetiquetas HTML de manera errónea en más de un caso y durante mucho tiempo.

Al ver el código fuente de varias páginas podemos apreciar a menudo los mismos errores

que aparecen una y otra vez, estos errores suelen ser producidos por los hábitos que

recogimos durante nuestros primeros días en el mundo de la codificación o por la falta de

esclarecimiento sobre la verdadera función de cada etiqueta.

En este artículo veremos algunas de las etiquetas que comúnmente son utilizadas de

manera incorrecta, tratando de especificar en que fallamos y de que manera podemos

usarlas correctamente.

Etiqueta “br”Es muy probable que esta etiqueta haya estado a tu lado casi desde el día en que te

iniciaste como programador web, es una de las etiquetas de uso más común al momento

de codificar y por lo tanto una de las que más reciben un mal uso; y es que basta con

recordar que fue hasta la aparición de CSS cuando dejamos de usarla para hacer

prácticamente todo lo referente a espacios entre dos bloques de elementos.

Esta etiqueta no se debe de utilizar para crear espacios vacíos en tus documentos o

contenido, su función es únicamente dar un salto de línea en una oración. Si lo que deseas

es tener espacio entre un elemento y otro entonces la etiqueta para eso es “p”, que nos

ayuda a crear párrafos, y podemos complementarlo con la adición de márgenes mediante

CSS, lo que nos permitirá determinar la distancia entre los elementos.

Un claro ejemplo del mal uso de esta etiqueta se puede observar al utilizar editores del

tipoWYSIWYG (What You See Is What You Get – Lo que ves es lo que obtienes), estos

programas se encargan de maquetar el sitio utilizando estas etiquetas y párrafos vacíos

para recrear el diseño que tu hiciste, es por ello que es bastante recomendable mantenerte

alejado de esta clase de editores.

Etiqueta “div”Esta etiqueta quizás no ha estado dentro de tu repertorio durante tanto tiempo como la

etiqueta “br”, pero sin duda se ha convertido en una de las más utilizadas en los últimos

años. La etiqueta “div” vino a cambiar la manera en que diseñábamos la estructura de

nuestras páginas, permitiendo establecer capas y niveles con los cuales, mediante el

apoyo de CSS, podíamos adaptar nuestro sitio.

Pero la fascinación por su uso terminó llevando a más de uno a la rutina, su

implementación se fue haciendo más común y para situaciones donde realmente no

debería de usarse, hay sitios que basan prácticamente toda su estructura de elementos en

“divs”, incluso para mostrar elementos de texto o imagen, esto está totalmente mal.

No tenemos que rodear todos los elementos de un sitio con un “div”, quien te diga lo

contrario esta mintiendo, no existe ninguna estandarización que nos obligue a ello, ni

mucho menos utilizarlos en lugar de etiquetas cuya función especifica es la que estamos

haciendo, como mostrar una imagen.

Es perfectamente aceptable utilizar la etiqueta “div” para definir la estructura de la página,

pero siempre tratando de hacer uso de etiquetas más adecuadas y especializadas para los

elementos de tu página, etiquetas como el párrafo y las listas pueden ser una opción

mucho más semánticamente correcta.

Etiqueta “title”Una etiqueta fundamental en cualquier estructura de código HTML es “title”, su función es

básica para el sitio ya que sin ella nuestra página no tendría un título que indique de que

trata el contenido que estamos por ver, el problema es que su uso se ha venido

degradando últimamente para convertirla en una etiqueta más de “meta-data” y

con funciones de SEO.

No estamos en contra del SEO para nada, pero si queremos hacer un uso adecuado de

etiquetas debemos respetar su función. En el caso de “title” su función es muy sencilla, se

encargará de mostrar una descripción concisa del contenido de la página, donde será

importante incluir palabras clave relacionadas, lo que permitirá a la página ser reconocida

por los motores de búsqueda, pero no debemos abusar de esto.

Es común caer en extremos al momento de utilizar esta etiqueta, o simplemente no

ponemos nada importante en ella o la llenamos de información que realmente no tiene

cabida en ella. Debemos evitar estos dos extremos y utilizar las etiquetas “meta” para esta

clase de información.

Etiqueta “img”El problema con la etiqueta “img” es utilizarla demasiado, no uses imágenes para casos

donde realmente no se requiera, no tienes que convertir todo en imágenes recuerda que

esto es malo para que la página pueda ser analizada por motores de búsqueda, en esta

nueva era donde el contenido lo es todo es muy importante no encapsular tu información

en imágenes.

A veces incluso se cometen errores al utilizar algunos de sus atributos, como el caso de

“alt”, cuya función es contener una descripción precisa de la imagen, sin embargo la

mayor parte del tiempo tiene texto irrelevante.

Etiqueta “small”Esta etiqueta quizás no es tan popular como el resto, pero se ha mantenido durante varias

versiones del lenguaje y es importante definir su función. Con ella nos encargamos de

definir eltexto catalogado como “Smallprint”, es decir todo aquel que hable de

condiciones de uso o marcos legales.

Generalmente los desarrolladores cometen el error de utilizarla para definir el tamaño de

un texto, cuando quieren que este se vea pequeño, pero para eso se debe definir un

tamaño mediante CSS no utilizando esta etiqueta.

ConclusiónExisten muchos casos de etiquetas que son utilizadas de manera errónea, muchos pueden

abogar por el caso diciendo que lo que importa al final es el producto, pero ¿No te sentirías

mejor si tu producto ofrecería también calidad en el código?, para qué utilizar etiquetas en

algo que no es su función si ya existe otra que si fue hecha para eso.

No nos olvidemos de investigar antes de actuar, si tenemos una duda sobre la función de

una etiqueta o queremos saber si la que estamos usando para una tarea es la correcta,

debemos sentarnos y leer un poco antes de codificar. Se que suena a más trabajo pero al

final es la única forma de eliminar esos malos hábitos que hemos adquirido con el tiempo.

Hacer tablas con HTML y CSS

Resumen: Estudiamos cómo hacer tablas en HTML y darles estilo mediante el uso de propiedades CSS.

Debemos admitir que la mayor parte del tiempo que utilizamos las palabras CSS y

Tablas en una misma oración es para demeritar a esta estructura y mostrar los beneficios

de utilizar estilos en su lugar al momento de llevar acabo la maquetación de nuestro sitio,

pero en esta ocasión nos encargaremos de plantear una alternativa que nos permitirá

combinar estos dos elementos, es decir tener una estructura de tabla formada utilizando

CSS.

El desuso de las tablas como herramienta de diseño se ha venido promoviendo desde

hace años, diseñadores y desarrolladores han decidió no seguir utilizando esta clase de

estructura por el simple hecho de no respetar los estándares, pero ¿Esto cambia si

utilizamos CSS?, y si es así ¿Cuándo es que debemos utilizar dichas tablas CSS?.

Creación de tablas CSSTenemos que aclarar que el modelo que utilizaremos para crear tablas con CSS está

basado en la manera que HTML4 crea dichas estructuras. Este modelo cuenta con soporte

en una gran cantidad de navegadores, pudiéndose utilizar en cualquiera de los

navegadores actuales.

Si trabajaste con tablas anteriormente no te costará ningún problema empezar a

desarrollarlas con CSS, ambos modelos son muy parecidos, las filas siguen siendo el

elemento primario, se especifican de forma explícita y las columnas se dereivan de la

forma en que las filas y celdas se establezcan.

Cada elemento de la tabla HTML tiene un valor equivalente en la propiedad display de

CSS. La única diferencia real es que no hay distinción entre td y th. A continuación

mostramos los elementos de una tabla HTML y su correspondiente valor de display en

CSS.

?

1

&lt;br /&gt;table     { display: table }&lt;br /&gt;tr        { display: table-row }&lt;br /&gt;theadgroup }&lt;br /&gt;tfoot     { display: table-footer-group }&lt;br /&gt;col       { display: table-column{ display: table-cell }&lt;br /&gt;caption { display: table-caption }&lt;br /&gt;

También podemos hacer cambios de posición, como los títulos “caption” que se pueden

colocar encima o debajo de la tabla utilizando la propiedad “caption-side”, los valores

pueden ser“top” o “bottom” según la posición que deseas.

Conociendo esto y con la experiencia que tuvimos anteriormente con estas estructuras, ya

no nos debe resultar difícil establecer nuestra primera tabla con CSS, para ello plantemos

un código HTML como el siguiente:

?

1

&lt;br /&gt;&amp;lt;div id="tabla"&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;  &amp;lt;div class="fila" id="fila1"&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;class="celda" id="celdaA1"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;/&gt;&lt;%%KEEPWHITESPACE%%&gt;  &amp;lt;/div&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;&amp;lt;span class="celda" id="celdaB1"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;id="celdaB2"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;  &amp;lt;/div&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;id="fila3"&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;    &amp;lt;span class="celda" id="celdaC1"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;&amp;lt;span class="celda" id="celdaC2"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;

Y finalmente con un estilo CSS como este:

?

1 &lt;br /&gt;#tabla {display: table;}&lt;br /&gt;.fila  {display: table-row;}&lt;br /&gt;.celda {display: table-cell;}&lt;br /&gt;

Se establece la estructura simplemente utilizando elementos tipo “div” y “span”, sin

necesidad de recurrir a etiquetas obsoletas. Simplemente con leer el código anterior

podemos deducir rápidamente la estructura que tendrá la tabla.

Uso de las tablas CSSSi ya tenemos la estructura y sabemos como representarla con CSS, llega el momento de

definir en qué casos utilizar tablas para presentar contenido.

Tal como sucede con las tablas hechas con código HTML4, su uso se debe limitar a

desplegar únicamente datos que realmente merezcan ser representados de manera

tabular. Si decides utilizar para dar orden y posicionamiento a un sitio sabemos que

existen mejores maneras así que resulta mejor ahorrarnos su uso para esto.

Si su función es la misma, y no podemos sacarle ventaja para el posicionamiento,

entonces¿Qué marca la diferencia con las tablas normales? Siendo honestos son

pocos los casos de tablas hechas con CSS que se pueden observar a lo largo de la web,

generalmente si quieres representar datos estadísticos o tabulares utilizas tablas normales

y si quieres diseñar un sitio utilizas otras técnicas.

La ventaja por la que muchos pudieran abogar es que el CSS es un lenguaje más sencillo

para realizar cambios, que es menos rígido, pero al final en la práctica ambas estructuras

lucirán igual de rígidas. Lo que si se puede considerar una ventaja, es el hecho de que

escribir algo más semánticamente aceptado en estos días, ya que estamos utilizando

elementos que describen mejor el contenido que estamos exponiendo.

Otra ventaja que se le puede dar es el uso de identificadores para cada celda, o cada fila y

columna, de esta manera se puede hacer una mayor especificación de los estilos que

queremos para la tabla.

Quizás sea difícil encontrar una verdadera razón de peso para elegir utilizar tablas CSS

sobre las tablas normales, al final el desarrollador optará por aquella que le resulte más

sencillo utilizar o comprender, y que claro cumpla con los requerimientos de su proyecto.

Al final tenemos que entender que las tablas CSS cumplen más con una función visual,

una representación de la estructura que comúnmente teníamos que utilizar a través de

la etiqueta “table”.

ConclusiónLas tablas CSS son muy fáciles de comprender y de utilizarse, simplemente basta con

recordar lapropiedad display de CSS que corresponde a cada etiqueta de la tabla que

comúnmente utilizamos.

Existen muchas buenas funcionalidades que nos ofrecen las tablas CSS, como es el caso

de la habilidad para colapsar mediante la propiedad “visibility: collapse”, las cuales

pueden ser utilizadas como solución para algunos problemas específicos, sin embargo no

proveen de una ventaja relevante sobre sus antecesoras y actualmente existen mejores

formas de lograr un orden y posicionamiento en un sitio.

A pesar de esto existe la opción de utilizarlas, y como tal se tiene que conocer la manera

de declararlas, ese fue el propósito de este artículo.

¿Cómo darle un uso apropiado a CSS3?

Resumen: CSS3 nos ha brindado muchas nuevas herramientas que nos permiten crear grandes efectos, pero es muy probable que les estemos dando un enfoque inadecuado, en este artículo tratamos de definir un uso correcto.

Cuando algo es de reciente creación y es presentado o liberado ante la sociedad, la

reacción de las personas ante ello generalmente oscila entre dos extremos, enaltecer la

novedad o demeritarla al compararla con lo que ya existía. En el caso de las

tecnologías de la información, por la misma naturaleza que representan, la balanza se

inclina más por la aceptación y rápida idolatración de lo nuevo.

Tal es el caso de los nuevos estándares que han venido a formar parte de los desarrollos

web en este último año, estamos hablando de CSS3 y HTML5. En esta ocasión nos

enfocaremos en CSS3, un estándar bastante emocionante que nos permite crear cosas

que antes solo eran posibles de crearse a través de un editor de imágenes, su potencial ha

hecho pensar a más de uno que los misterios de los diseñadores han sido revelados y

todo desarrollador tendrá a su alcance el código necesario para llevar a cabo una serie de

efectos de manera sencilla.

¿Qué representa el uso de CSS3?CSS3 propone una navegación más rápida, menores tiempos de respuesta producidos por

una reducción de imágenes, las cuales ya no serán requeridas para diseñar botones o

efectos de texto. También deja atrás una excesiva dependencia de JavaScript para fines

de representación visual, como lo son las animaciones, dando como resultado menos

código y mejor rendimiento.

Representa una futura menor dependencia de software para gráficos que resultan bastante

caros, como es el caso de Photoshop, Illustrator o Corel, que si bien seguirán siendo útiles

su función se enfocará a efectos o ediciones más avanzadas.

A pesar de todo esto, al parecer CSS3 no representa un cambio en el esquema del diseño

visual, aún se tratará con los mismos usuarios, el mismo contenido y la misma filosofía de

diseño, es por ello que se debe tener cuidado con la manera en que lo utilizamos.

Las nuevas capacidades que nos ofrece CSS3 deben ser tratadas igual que cualquier otra

tecnología web con la que hemos trabajados, es decir siempre debemos preocuparnos por

dar apoyo y crear un diseñado centrado en el usuario, siempre respetando el objetivo y los

propósitos de nuestro sitio. Si CSS3 salta esta regla, entonces se convertirá en un

elemento que limite nuestro proceso de producción.

CSS3 no cambia al diseñoSi bien CSS3 representa una simplificación de procesos, en lo que se refiere a los

principios básicos del diseño y las prácticas para lograr una mejor presentación visual

nada ha sido alterado, aún cuando se nos han dado efectos de transición muy elegante y

de fantasía. Todas estás son herramientas superficiales del diseño web, e incluso ya las

teníamos desde antes de CSS3.

Desde la perspectiva más importante, la del usuario, las nuevas propiedades estéticas de

CSS3 influyen menos, ya que la mayoría de las persona que navegan por nuestros sitios

no notarán la diferencia entre un efecto de colores sutil o uno rudimentario, al menos de

que influya en su experiencia durante su estadía en el sitio o claro que el usuario sea otro

diseñador o desarrollador web.

El verdadero cambio de paradigma viene en la nueva forma de abordar y llevar a cabo

nuestro proceso de diseño de páginas web. En la actualidad, con CSS3 tenemos la

facilidad de producir diseños más flexibles que permiten optimizar la experiencia del

usuario, el uso de herramientas como las consultas de medios media queries) permiten

mejorar el rendimiento y la visualización en base al dispositivo de navegación que utilice el

usuario y con esto se introducen un gran número de nuevos conceptos a nuestra

tradicional metodología de construcción de sitios.

Con los nuevos selectores CSS3, tenemos una capacidad de envolver de manera más

fácil y sencilla los elementos HTML para poder realizar efectos de animación sin el uso de

JavaScript o algún framework como jQuery.

Tenemos que tener claro que CSS3 no es sólo sombras y gradientes difuminados que

hacen ver genial nuestro texto, eso es sólo la superficie, el nivel del tope. Su uso se debe

de plantear para tratar de mejorar la experiencia del usuario y ser capaz de producir

mejores sitios de una manera más eficiente.

Uso adecuado de CSS3Si bien CSS3 nos ha brindado nuevas herramientas y propiedades, esta en nosotros el

poder darles el uso adecuado y lograr una mejor usabilidad a nuestros sitios, creando

mejor interacciones. No debemos caer en concentrar nuestra atención únicamente en las

nuevas características superficiales, cuando decidamos utilizar CSS3 en nuestro trabajo,

debemos siempre tener en cuenta que la función es más importante que la forma.

Siempre debemos tener como regla general el usar CSS3 únicamente cuando exista una

buena razón para hacerlo, no queremos sacrificar la visualización del sitio en navegadores

antiguos nada más por un capricho, y si ya te decidiste a usarlo no lo hagas en exceso,

piensa bien donde aplicarás cada efecto y no lo uses como si no hubiera un mañana,

recuerda que no todo se lleva bien con una sombra o un gradiente, ya que puede afectar la

legibilidad o la visualización de un elemento.

Tenemos que poner la usabilidad, la accesibilidad y la experiencia del usuario como la

prioridad máxima del diseño, todo lo demás resultará secundario y en base a esto se

deben de plantear los objetivos.

Es por esto que debemos tener planes para asegurar una buena visualización, si bien

CSS3 no es soportado por navegadores antiguos, existen alternativas que nos permitirán

lograr una buena experiencia para ese tipo de usuarios, como por ejemplo el uso de

transparencias con imágenes PNG, o crear los gradientes y sombras mediante algún

editor, así cuando nuestro código detecte que el navegador no soporta CSS3 entrará el

plan emergente a cubrir esos huecos con imágenes.

Con el uso de CSS3 se debe lograr tener un apoyo, que nos permita llegar a una buena

usabilidad y accesibilidad, nos debe permitir mejorar el rendimiento y acelerar el desarrollo

de los sitios web. Si no conseguimos ninguno de estos tres factores, entonces CSS3

realmente no es la herramienta adecuada para nuestro proyecto.

Tips de maquetación web con CSS y CSS3

Resumen: Vemos algunos consejos para maquetar webs hoy en día, intentando agilizar la forma de maquetar las páginas web por medio de las nuevas características de CSS3.

CSS, junto con HTML, es la herramienta básica para la maquetación de páginas web.

Sus capacidades para manejar los elementos artísticos y de formato permiten hacer

mejores diseño web de una manera simple y eficiente. Y con la llegada de CSS3 el

campo de posibilidades se amplía aún más, haciendo la maquetación más flexible y

optimizada, puesto que muchas veces nos ahorramos el uso de imágenes para efectos

como degradados, sombras o bordes redondeados.

Tu habilidad para manejar con propiedad estas hojas de estilo en cascada puede crear la

gran diferencia entre un sitio normal y uno con el toque experto de creatividad que atrae al

visitante.

Desde que se creó CSS como la herramienta que iba a facilitar la tarea al diseñador, se

sospechaba que su crecimiento no iba a tener límites. Es así que ya está vigente CSS3,

con novedades que hacen todavía más accesible la presentación elegante y profesional de

tus páginas. Prácticamente, no hay excusas. Todo depende de tu imaginación.

Usa modelos de calidadSi navegas con frecuencia por los sitios que presentan las mejores páginas de la red, te

encontrarás con diseños web sorprendentes.

Por supuesto que los contenidos suelen ser similares en medios equivalentes. Por

ejemplo, las noticias del día son las mismas en una gran cantidad de páginas informativas.

La diferencia radica en la forma de presentar esas noticias.

El balance de colores, la distribución de los bloques de información, la presencia de

imágenes ilustrativas en cantidad y ubicación justas, equilibran el conjunto y lo transforman

en un espacio que da placer a los sentidos.

Claro, detrás de todo esto están las hojas de estilo en cascada o CSS. Como diseñador

web, es siempre bueno revisar en profundidad ese excelente material. Nada te impide

analizar los detalles, los elementos que cada diseñador utilizó, reproducirlos en tus propios

proyectos y ver los resultados.

De estos modelos de calidad puedes aprender mucho, combinar los efectos más

interesantes y lograr así resultados propios, originales y de excelencia.

Diseño web con CSS: el clásico posicionamiento de capasEl conocimiento profundo de las hojas de estilo es elemental si deseas obtener los mejores

resultados de tu diseño. Varios aspectos de CSS son fundamentales para lograrlo. Uno de

ellos es el posicionamiento de las divisiones en la página.

La propiedad position te asiste en esta tarea:

?

1 #div-01 {position: static;}

Static es sólo necesaria para anular un posicionamiento anterior, ya que “static” equivale al

flujo normal de los objetos sobre la página.

?

1 #div-01 {position: relative; top: 20; right: 20;}

Relative establece una posición relativa al elemento anterior y debe ir acompañada de

palabras de ubicación, como top, bottom, right, left.

?

1 #div-01 {position: absolute; top: 0; left: 0;}

Absolute implica que el elemento se ubicará en la posición exacta indicada (en este

ejemplo, en la esquina superior izquierda de la página).

?

1 #div-01 {float: left; width: 200px;}

La propiedad float desplaza al objeto hacia la derecha o la izquierda, según el parámetro

elegido, con lo cual es el medio idóneo para crear columnas de información.

Se pueden realizar combinaciones de estas propiedades. Por ejemplo, una división con

posición absoluta en la esquina superior izquierda, puede incluir dos divisiones internas

“flotando” a izquierda y derecha.

Para ahondar todavía más en el tema del posicionamiento de objetos en la página, será

necesario también diferenciar los objetos que conforman bloques de aquéllos que sólo

pueden seguir la secuencia natural de la página.

Los únicos elementos que pueden adquirir la propiedad float, por ejemplo, son los que

forman bloques (divisiones, imágenes, párrafos estructurados, listas). Es decir, los objetos

que por defecto o porque se lo hayamos establecido, tengan la propiedad display:block.

Mejores diseños con  CSS3El concepto original de CSS fue el de separar el contenido web de su apariencia. Esto fue

conseguido con cierto éxito hasta el momento, aunque ciertos efectos requieren trucos o

maniobras algo complicadas o confusas.

La llegada del último nivel de CSS, CSS3, trajo consigo una cantidad de mejoras que

obvian tales trucos y los transforman en medios normales del CSS. Es necesario estudiar y

aplicar estas flamantes utilidades a los nuevos diseños para obtener todo el provecho de la

herramienta. Entre otras mejoras, CSS3 incorpora lo siguiente:

Manejo de Áreas Rectangulares:

Mediante simples instrucciones se pueden manejar características de los objetos

rectangulares (boxes), tales como tipo y color del borde, sombras, bordes redondeados.

Multiplicidad de Imágenes en Fondos:

Ahora pueden ubicarse varias imágenes como fondo en un bloque (o en la página

completa), en forma de capas, de tal forma que resulte en una combinación de imágenes.

Esto se realiza muy fácilmente con la sentencia background-image, en la cual las

diferentes ilustraciones se enumeran separadas por comas.

Otras mejoras de CSS3:

Existen algunas otras novedades para facilitar la maquetación, como efectos sobre el texto

(en particular sombreado y manejo del texto excedente), colores y administración de

opacidad y transparencia.

A través de la combinación de estas novedades más las herramientas tradicionales de

CSS, los diseñadores web han conseguido formidables resultados y hasta ilustraciones de

gran calidad y detalle sin utilizar imágenes. Hay que probarlo.

Maquetación web utilizando header y footer de HTML5

Resumen: En este artículo elaboramos un layout básico centrádonos en la utilización de dos elementos de HTML5: header y footer.

En este artículo mostraremos una forma muy sencilla de estructurar un sitio web con un

layout bastante básico que hará uso de dos elementos que son parte de la más reciente

versión de HTML. Nos estamos refiriendo al elemento “header”, utilizado para definir los

encabezados de distintas secciones, conteniendo elementos de navegación, logos, entre

otro contenido, y el elemento “footer” que nos ayuda a crear un apartado donde se

mostrará información complementaria de la sección a la que fue agregado, generalmente

utilizado para mostrar links hacia contenido relacionado y licencias de copyright.

Si consideras un inconveniente el hecho de manejar las etiquetas “header” o

“footer” dentro de tu layout por ser parte de HTML5, una versión no reconocida por

navegadores antiguos, puedes reemplazar todas las secciones definidas por estos

elementos con capas de elementos “div”. El layout lucirá de la misma manera, la única

diferencia se verá reflejada en la semántica del sitio, tenemos que recordar que estos

elementos fueron integrados en HTML5 para definir de manera exacta las partes de la

interfaz donde se mostrará la información que contienen.

El propósito de crear este layout es dividir nuestra área principal de contenido en tres

zonas distintas que son las de más común uso en las páginas de internet de la actualidad,

utilizaremos un encabezado principal, un pie de página y por supuesto un cuerpo de

contenido.

HeaderEl encabezado del sitio es la primera parte que se muestra en la interfaz de una página

web, aunque esto no significa que necesariamente sea la primera parte del código. En

esta sección encontraremos regularmente los menús de navegación, barras de

búsqueda, el logo del sitio o empresa y quizás algún login para usuarios.

Debemos aclarar que aunque el elemento “header” será utilizado para definir el

encabezado del sitio, esta etiqueta no fue hecha exclusivamente para esta función, ya que

puede ser utilizada para definir el encabezado de cualquier contenedor y del contenido que

en este se muestra. Con esto me refiero a que si tenemos un “div” dentro de nuestro

contenido y esta capa tiene alguna clase de información, podemos darle un encabezado

con esta misma etiqueta.

FooterEsta sección es utilizada generalmente para mostrar logos adicionales, enlaces

hacia otros sitios, secciones de la página, mapas del sitio, información de derechos,

licencias y copyright. De las tres secciones puede resultar la menos importante por así

decirlo, aunque en realidad son muchas las páginas que manejan esta sección dentro de

sus layouts, ya que permite una navegación más sencilla y deja en claro, en un lugar

visible, como manejas, proteges y utilizas tu contenido.

Al igual que el elemento “header”, esta etiqueta no fue hecha exclusivamente para ser pie

del sitio en general, ya que puede utilizarse para cualquier otro contenedor de información,

aunque resulta más común únicamente utilizarlo en el layout general.

Definición de las áreasLo primero que debemos hacer, es crear el código que le diga al navegador que parte de

la información será el englobada en el encabezado, cual será nuestro contenido y que

mostraremos en el pie de nuestra página, este es el patrón que observaremos con

regularidad. Para ello debemos empezar con algo simple, como defnir en que parte del

código incluiremos la información disponible.

Anteriormente la etiqueta utilizada para definir todas las partes de un layout era “div”, a

estascapas se les daba algún ID o clase para distinguirlas, darles estilo y posicionarlas, de

esta manera cada capa actuaba de manera independiente y podían ser colocadas en

distintos lugares. Ahora HTML5 nos da la opción de utilizar etiqueta específicas para cada

sección, la cual nos ayudará a tener mejor orden en el código, facilitando el “crawling”,

el uso de robot y mejorando el SEO de nuestras páginas, ya que el contenido se

encontrará mejor organizado.

Para definir las tres áreas empezaremos con un código bastante básico como el siguiente,

el cual irá dentro de nuestro elemento “body”:

?

1

2

3

4

5

6

7

8

9

10

11

<header>

<!-- Aquí irá la información del encabezado -->

</header>

<div id="cuerpo">

<!-- Aquí estará el contenido principal -->

</div>

<footer>

<!-- Este será nuestro pie de página -->

</footer>

Como ya dijimos, esto es un patrón de diseño, no significa que necesariamente tengamos

que tener las tres secciones en nuestro sitio, si quieres modificar esta estructura y

únicamente utilizar ciertas secciones, o agregar más puedes hacerlo.

Agregar contenidoEn nuestro encabezado iremos agregando elementos que sean de uso común, como por

ejemplo un título para la página y un menú de navegación. Para ello utilizamos la etiqueta

“h2″ la cual nos permite definir que estamos utilizando un tipo de encabezado para escribir

el título, y para el menú utilizaremos una lista desordenada a la cual le daremos su

respectivo formato.

Dicha lista deberá de estar incluida en un elemento “nav”, el cual también es parte de la

nueva versión de HTML, y fue creado para definir específicamente elementos de

navegación como los menús.

?

1 <header>

2

3

4

5

6

7

8

9

10

11

12

    <h2>Mi sitio web</h2>

    <nav>

        <h3>Navega</h3>

        <ul>

            <li><a href="#">Sección 1</a></li>

            <li><a href="#">Sección 2</a></li>

            <li><a href="#">Sección 3</a></li>

            <li><a href="#">Sección 4</a></li>

        </ul>

    </nav>

</header>

Después de tener nuestro encabezado pasamos a definir el contenido del sitio, en esta

ocasión utilizaremos texto de prueba para simular una entrada de blog. En este caso

utilizaremos un elemento “div” para definir la sección, no debemos tener miedo en usarlo

ya que para esto fueron hechos, simplemente ahora contamos con etiquetas más

especializadas, pero los “div” siguen siendo los elementos más utilizados dentro de

nuestro layout.

?

1

2

3

4

<div id="cuerpo">

    <h2>Entrada</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum tempus lacus, sit amet molestie sapien iaculis vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lorem sapien. Pellentesque tempor augue ut ipsum fringilla sodales. In fermentum facilisis lobortis. Aenean egestas porttitor eros, in accumsan diam rutrum vel. Phasellus et tellus in arcu faucibus placerat vitae id felis. Integer sit amet mauris ipsum. Integer interdum lorem quis metus venenatis sit amet mattis mauris adipiscing. Donec non lorem tortor. Sed arcu nulla, tincidunt sed faucibus vitae, bibendum sed lorem. Curabitur nec risus lorem, quis placerat mauris. Donec bibendum ipsum vel mi imperdiet quis ornare orci imperdiet. Nam vulputate scelerisque ipsum, ut vehicula sapien pretium sit amet.

</div>

Y finalmente nuestro footer:

?

1

2

3

<footer>

Todos los derechos reservados 2012, Mi sitio web. Diseñado por: xxxxx.

</footer>

EstiloUna vez que tenemos la estructura y su contenido pasamos a dar estilo con CSS, lo que

permitirá mostrar las secciones de manera adecuada, empezaremos con el encabezado.

La lista será el principal elemento a editar, debemos agregar un estilo “inline” que

permita mostrar los elementos en una sola línea como menú, de igual forma podemos

agregar cualquier estilo que deseemos a nuestro encabezado utilizando “header” como

selector, aunque recuerda que esto también se aplicará si utilizas esta etiqueta en alguna

otra parte del código, por lo que puedes utilizar un ID o un selector más avanzado.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

ul{

padding-left:0;

}

li{

list-style: none;

display: inline;

padding-right: 10px;

}

body > header{

background: #333;

}

Lo que hicimos con el selector del header fue únicamente aplicar el estilo al header que es

hijo directo de body, esto quiere decir que solamente se aplicará al header que definimos

como encabezado de página. Si no estás muy relacionado con CSS no te preocupes esto

será lo más avanzado en relación en este tema por el momento, en un selector podemos

utilizar el símbolo mayor que (>) para agregar especificidad y seleccionar hijos directos de

un elemento padre, en este caso body es el padre de header y en caso de que CSS no

encuentre ningún hijo directo con esa etiqueta el estilo simplemente no se aplica.

Ahora apliquemos al resto del sitio dos colores distintos para distinguir cada parte:

?

1 #contenido{

2

3

4

5

6

7

8

9

10

11

background: #CCC;

}

body > footer{

background: #666;

}

body{

color: #FFF;

}

Obviamente no estoy sugiriendo que utilices esta combinación de colores en tu sitio,

simplemente estamos probando un punto y dando forma a un layout básico, lo que nos

permitirá identificar claramente cada parte del sitio.

Factores relevantes sobre el uso de floats en el layout

Resumen: En este artículo explicamos los puntos más importantes a tener en consideración para lograr un uso correcto de la propiedad float al momento de aplicarse a los elementos que forman parte en nuestro layout.

Durante muchos años, el uso de la propiedad float para el posicionamiento de elementos

dentro de un layout, ha representado uno de los mayores retos y dolores de cabeza para

los diseñadores web que se han aventurado a utilizarla sin tener conocimiento exacto de

su funcionamiento o correcta implementación.

Y no es para menos, puesto que float es uno de los conceptos menos aprehensibles por la

intuición y cuando esta propiedad es utilizada generalmente obtenemos como resultado

algo que no esperábamos.

Al utilizar elementos posicionados mediante float de manera incorrecta, estos pueden

causar grandes problemas de visibilidad y usabilidad a nuestros sitios, rompiendo muchas

veces con el layout disponible y haciendo que trabajemos el doble con tal de lograr un

comportamiento más o menos deseable.

Es por ello muchos diseñadores prefieren llegar al extremo de evitar completamente su

uso, omitiendo el hecho de que los layouts realizados mediante elementos flotantes son

uno de los más adecuados a los estándares.

El problema no radica en la propiedad en si, lo hace en la forma en que ésta es

interpretada por los desarrolladores, diseñadores y alguno que otro navegador. Por

esta malinterpretación, su concepto es considerado algo tan escasamente intuitivo; sin

embargo, si echamos un vistazo a su teoría y documentación veremos que no es algo

realmente tan complejo como parece, ya que la mayoría de los problemas y bugs son

producidos por versiones antiguas de navegadores, en su mayoría de Internet Explorer.

Puntos importantes sobre los elementos flotantes Para encontrar la razón por la que se dio el nacimiento de la propiedad float en CSS,

nos tendríamos que remontar mucho tiempo atrás en la historia del Internet, al punto

donde los desarrolladores web buscaron obtener la habilidad para mostrar un texto

alrededor de las imágenes que se desplegaban en los navegadores.

Dicha práctica llego a ser implementada a partir de Netscape 1.1 y tiempo después fue

añadida al nuevo lenguaje de estilo al cual se le dio el nombre de CSS.

El término “float” fue utilizado para describir la manera en que el elemento flota de un

lado a otro, de arriba hacia abajo, al momento de poseer esta propiedad y sin

necesidad de aplicar algo más que intervenga en su posición.

Si bien su función se describe desde las primeras mejoras que se hicieron a la

versión 2 del lenguaje HTML, fue hasta su implementación en CSS cuando empezó

a tener un reconocimiento público y a la par de esto empezaron a surgir la mayoría de

las malinterpretaciones de la propiedad.

Una capa o caja que reciba la propiedad float tendrá un comportamiento especial,

distinto al del resto de los elementos que son posicionados con otros métodos, puesto

que al principio el elemento que cuente con esta propiedad si se posiciona como parte

del flujo normal, pero en cierto punto se saca del flujo y se desplaza hacia la izquierda

o derecha de nuestra página retirándose lo más posible.

Cuando un elemento es retirado del flujo normal, todo el contenido que se encuentra

dentro de ese flujo tiende a ignorar a dicho elemento por completo y por lo tanto no

hace espacio para que sea ocupado por éste.

Al momento de asignarle la propiedad float, el elemento se convierte en un bloque, en

una caja la cual puede variar su posición oscilando de izquierda a derecha

dependiendo del valor que reciba la propiedad. Las opciones en el marcado serían

básicamente tres,“float: left”, “float right” o “float: none”, para dar un alineado a la

izquierda, derecha o simplemente no dar la propiedad.

Tenemos que recordar siempre dar un ancho a los elementos que reciban la

propiedad, este debe ser especificado mediante la propiedad width, ya que en caso de

no contar con esta medida los resultados al momento de aplicar float pueden resultar

poco predecibles. Esta regla se puede romper en caso de que apliquemos la

propiedad a una imagen que ya tiene un ancho implícito, pero si un elemento float no

tiene un ancho explícito o implícito en sus propiedades, ocupará todo su bloque

contenedor de manera horizontal, imitando el comportamiento de los elementos no

flotantes y no dejando la posibilidad de que el resto del contenido lo rodee.

A diferencia de las cajas en el flujo normal, los márgenes verticales de una caja

flotante no se contraen con los márgenes de las cajas que se encuentran encima

o debajo de ella. Además, una caja flotante puede superponer otras cajas a nivel de

bloque adyacentes a ella en el flujo normal.

Un elemento flotante siempre ocupará un lugar al extremo izquierdo o derecho del

elemento que lo contiene, no existe tal costa como un float centrado, algo que

puede ser difícil de entender si vas empezando con el diseño web, pero fácil de

recordar conforme avanzas en la práctica.

Cuando hacemos flotar un elemento este se coloca hasta el extremo borde de la

dirección que indicamos, ya sea derecha o izquierda, si después de esto hacemos

flotar otro elemento y lo mandamos a la misma dirección, este se va a desplazar

hasta que alcance el borde del primer elemento flotante. Si seguimos flotando

elemento en la misma dirección estos se irán acumulando hasta que no haya

suficiente espacio, cuando esto ocurre se empezaran a desplazar hacia abajo del

layout hasta que todos quepan.

Al momento de utilizar la propiedad tenemos que estar concientes de que la posición

vertical del elemento será la que comúnmente ocuparía si estuviera dentro del flujo

normal, mientras que la posición horizontal dependerá de la caja contenedora del

elemento, si no esta dentro de ninguna otra capa o caja, entonces la ventana el cuerpo

de nuestro documento será su límite.

Todas las cajas que sean creadas antes o después del elemento flotante, fluirán

verticalmente de manera normal como si el elemento no existiera. Sin

embargo, aquellas cajas que sean creadas al lado de la flotante serán acortadas

con fin de dar espacio para que ésta se muestre.

Si queremos elaborar un layout utilizando únicamente elementos de tipo div con la

propiedad “float: left”, estos se alinearán uno tras otro formando columnas. Si al final

de este layout quisiéramos agregar un footer o una caja que abarque de manera

completa la pantalla, basta con aplicar la propiedad “clear: both” a dicho elemento, de

esa manera no importa el tamaño de las columnas que se crearon.