Curso de Diseño Web IX - El modelo de Caja

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas , la historia y estándares HTML, como añadir estilo con CSS y tipografía, tamaño de letra y colores en CSS. En esta entrada hablamos del modelo de caja en CSS.

En la siguiente imagen se muestra el llamado modelo de caja en HTML. Por cada elemento de HTML hay tres características optativas margen, interlineado y borde. Controlamos la visualización de estas características por medio de las propiedades de CSS margin, padding y border. El texto es lo que llamaríamos área de contenido.

Color del border

Use la propiedad border-color para especificar el color del borde. Puedes usar cualquiera de los métodos comunes para definir color. Las siguientes tres lineas de código son equivalentes:

border-color: red;
border-color: rgb(100%,0%,0%);
border-color: #ff0000;

Tipo del borde

Puedes cambiar el tipo del borde con la propiedad border-style. Puedes usar los siguientes valores:

• solid
• double
• groove
• outset
• dotted
• dashed
• inset
• ridge

Ancho del borde

Puedes cambiar el ancho del borde con la propiedad border-width. Puedes fijar el ancho en píxeles o usar las siguientes palabras clave.

• thin
• medium
• thick

Especificamos margenes, interlineados o bordes sólo para un lado:

Podemos fijar determinadas características sólo para un lado. Si queremos fijar únicamente el color, estilo y anchura del borde superior podemos usar:

border-top-color
border-top-style
border-top-width

Si queremos fijar un margen derecho de 50px usaríamos:

margin-right: 50px;

Si queremos fijar un interlineado izquierdo y derecho de 20px, mientras que el superior e inferior permanecen a 0px escribiríamos:

padding-right: 20px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;

Las siguientes lineas son equivalente pero usan notación compacta. La notación compacta da cuatro valores que siguen el movimiento de las agujas del reloj (arriba, derecha, abajo, izquierda). Si tanto los valores de arriba y abajo como los de izquierda y derecha son iguales, podemos usar una notación aún más compacta como se muestra abajo.

padding: 0px 20px 0px 20px;
padding: 0px 20px;

Imágenes de fondo

Para lograr unos diseños más impactantes se usan a menudo imágenes de fondo. La propiedad background-image nos permite referenciar la imagen que vamos a usar como fondo. La propiedad background-repeat nos permite indicar si la imagen se va a repetir. Podemos, por ejemplo, repetir un patrón y lograr un efecto muy vistoso. La propiedad background-position nos indica donde posicionar nuestra imagen de fondo (por ejemplo, coloca la imagen arriba a la izquierda). Las siguientes lineas de código muestran como usar estas propiedades.

background-image: url(imagenes/background.gif);
background-repeat: no-repeat;
background-position: top left;

Atributo Class

A menudo necesitamos aplicar a un estilo a varios elementos. Imaginemos que tenemos un listado de nombres de alumnos y direcciones de email. Si queremos que el nombre de los alumnos aparezca en negrita podemos marcar todos los nombres de alumnos como pertenecientes a la clase "nombreDeAlumno" y aplicar un estilo a esta clase. En la vida real podemos asemejar clases con la pertenencia a clubs. Podemos pertenencer a varios (club de montaña, club de cocina) o a ninguno. En HTML usamos el atributo class para designar la pertinencia de un elemento a una clase. Los siguiente puntos describen el uso de este atributo.

• Use el atributo class para añadir elementos a una clase.
• Use en CSS un . entre el nombre del elemento y la clase para especificar el elemento de la clase.
• Use en CSS .nombreDeLaClase para seleccionar todos los elementos que pertenecen a la clase.
• Cualquier elemento puede pertenecer a más de una clase. Para ello colocamos el nombre de las clases separado por espacios en el atributo class.

Atributo ID

Similar al atributo class, se puede usar el atributo ID en todos los elementos HTML. La diferencia es que cada elemento puede tener sólo un id y este deber ser único para la página; sólo puedes tener un elemento en tu página con id "pieDePagina". El atributo id debe empezar con una letra y ser seguido sólo por letras y dígitos. No se permiten espacios o caracteres especiales.

<p id="pieDePagina">Gracias por su visita</p>

Class y ID en CSS

Los siguiente ejemplos muestran el uso de clases y identificadores en CSS.

Selecciona sólo párrafos que pertenecen a la clase oferta

p.ofertas { color: red;}

Selecciona todos los elementos que pertenecen a la clase oferta

.ofertas { color: red;}

Esto selecciona todo los elementos que tengan un id pieDePagina

#pieDePagina { color: red; }

Selecciona un elemento <p> si tiene el id pieDePagina

p#pieDePagina { color: red; }

Elemento DIV

<div> es un elemento que sirve para agrupar elementos de bloque. Normalmente un elemento div viene acompañado de atributos id o class. Usamos estos atributos para referenciar el elemento div en nuestro CSS. El siguiente ejemplo ilustra el uso de un elemento div. Imagina que estamos construyendo una página Web para un bar de nuestra ciudad. En esta se ofrece un listado de los cocteles que el bar ofrece. Cada coctel tiene una cabecera, una imagen y una descripción. Si quisiéramos dar un estilo común a todos nuestro cócteles. Por ejemplo una imagen de fondo o un borde necesitaríamos agruparlos con un div. El siguiente código ilustra esto:

 
<div id="coctelAmarillo" class="coctel"> 
   <p> 
      <img src="images/yellow.gif" alt="Bebida brisa de limón" /> 
    </p> 
    <h3>Brisa de Limón</h3> 
    <p> 
      Nuestro coctel más sano, combina hierbas, minerales, vitaminas y un toque de limón. Crea 
   un concentrado de limón que nos ayudará a mantener altas las defensas. 
    </p> 
</div> 

Elemento SPAN

<span> es un elemento que sirve para agrupar elementos en linea y texto. Normalmente un elemento span viene acompañado de atributos id o class. Usamos estos atributos para referenciar el elemento span en nuestro CSS. El siguiente ejemplo, ilustra el uso del elemento span. Imaginemos una lista de artistas y álbumes. Si queremos que el nombre del artista aparezca en negrita y el nombre del álbum en cursiva. Podemos rodear los nombres de artista y álbumes con span y usar clases para referenciar el estilo como se muestra en el siguiente código.

 
<ul> 
 <li><span class="cd">La Carretera</span>, <span class="artist">Julio Iglesias</span></li> 
    <li><span class="cd">Elvis' Christmas album</span>, <span class="artist">Elvis Presley</span></li> 
</ul> 

.artista { font-weight: bold;}
.cd { font-style: italic;}

CSS para diferentes medios

 

Podemos especificar diferentes hojas de estilos dependiendo del medio (teléfono móvil, impresora, pantalla) desde el cual se acceda a nuestra página . El atributo media te permite especificar para que tipo de dispositivo se usará la hoja de estilos referenciada. Si no proporcionamos un atributo media, el estilo se usará para todos los dispositivos.

<link type="text/css" rel="stylesheet" href="pantalla.css" media="screen"/>
<link type="text/css" rel="stylesheet" href="impresora.css" media="print"/>
<link type="text/css" rel="stylesheet" href="movil.css" media="handheld"/>
<link type="text/css" rel="stylesheet" href="estilo.css"/>

Resumen

• CSS usa un modelo de caja para controlar como se muestran sus elementos.
• Las cajas consisten en una área de contenido y un interlineado, borde y margen opcionales.
• El área de contenido contiene el contenido del elemento
• El interlineado se usa para crear espacio visual alrededor del área del contenido.
• Los márgenes que rodean el borde, interlineado y contenido añaden espacio entre este elemento y otros elementos.
• Interlineado, borde y margen son opcionales.
• El fondo de un elemento se mostrará en el área de contenido y el interlineado, pero no en el margen.
• El interlineado y el margen pueden ser declarados en píxeles o porcentajes.
• El ancho de borde puede ser declarado en píxeles o usando las palabras clave thin, medium o thick.
• Hay ocho estilos diferentes para bordes incluyendo solid, dashed, dotted y ridge.
• Cuando fijamos márgenes, interlineados o un borde CSS nos proporciona las herramientas para que fijemos todos los lados (arriba, derecha, abajo o izquierda) a la vez o cada uno de ellos individualmente.
• Usar la propiedad line-height para añadir espacio entre lineas de texto.
• Puede posicionar una imagen como fondo de un elemento con la propiedad background-image
• Use el atributo class para elementos a los que quiera dar estilo juntos, como un grupo.
• Use el atributo id para dar a un elemento un nombre único. Puede usar también el atributo id para dar un estilo único a un elemento.
• Puede seleccionar elementos por su id usando el selector de identificadores #. Ejemplo: #cocteles
• Un elemento puede tener sólo un identificador; sin embargo, puede pertenecer a varias clases.
• Los elementos <div> se usan para agrupar elementos relacionados en secciones lógicas
• Crear secciones lógicas, puede ayudar a identificar las áreas principales de contenido, la cabecera y el pie de tus páginas.
• Puedes usar elementos div para agrupar elementos juntos que necesitan un estilo en común.
• Usar elementos <div> anidados puede añadir más estructura que sirva para aplicar estilo con mayor claridad. Aunque no se debe añadir estructura a no ser que se necesite realmente.
• Una vez que has agrupado juntas secciones de contenido con elementos <div>, puedes aplicar estilo a los <div> del mismo modo que hacías con cualquier otro bloque. Por ejemplo puedes añadir un borde alrededor de un grupo de elementos usando la propiedad borde al <div> que los anida.
• La propiedad width fija el ancho del área de contenido de un elemento.
• El ancho total de un elemento es el ancho del área de contenido, más el ancho del interlineado, borde y márgenes que añadas.
• Una vez que fijas el ancho de un elemento, ya no se expande para ocupar el ancho entero de la ventana del navegador.
• La propiedad text-align es un propiedad para elementos de bloque que centra todo el contenido en línea que hay dentro elemento de bloque. Es heredado por todos los elementos de bloque que estén anidados.
• Puede usar selector descendentes para seleccionar elementos anidados dentro de otros elementos. Por ejemplo, el selector descendente: div h2 { ...} selecciona todo los elementos <h2> dentro de los elementos <div> (incluyendo hijos, nietos, etc).
• Puede usar abreviaciones con propiedades relacionadas. Por ejemplo: padding-top, padding-right, padding-bottom y padding-left están todos relacionados con el indentado, y puede ser especificado con una abreviación: padding
• Las propiedades padding, margin, border, background y font se pueden fijar con abreviaciones.
• El elemento en linea <span> es similar al elemento <div>. Se usa para agrupar elementos en lineas relacionados y texto.
• Como con <div>, puede añadir elementos <span> a clases ( o dar a los elementos <span> un id) para estilizarlos.
• El elemento <a> es un ejemplo de un elemento con diferentes estados. El estados principales de <a> son unvisited, visited y hover.
• Puede estilizar cada uno de estos estados por separado con pseudo-classes. Las pseudo-classes más usadas a menudo con el elemento <a> son :link para enlaces sin visitar, :visited para enlaces visitados y :hover cuando se pone el ratón encima.
• Otros elementos soportan la pseudo-class :hover y algunos navegadores también soportan :first-child, y :focus para otros elementos.
• Puede usar más de una hoja de estilos en su HTML
• Si tiene varias hojas de estilo que crean conflicto, la última en el archivo HTML gana.
• Puede crear estilos para otros dispositivos como dispositivos como impresoras (print) o teléfonos móviles (handset) usando el atributo media del elemento link

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Box Model, Curso Diseño Web, Web Design

Curso de Diseño Web VIII - Fuentes en CSS

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas , la historia y estándares HTML y como añadir estilo con CSS. En esta entrada hablamos del tipo, peso, color y tamaño de fuente.

Tipo de fuente

El uso de un tipo u otro de fuente puede dotar a nuestros diseños de un carácter propio. La siguiente imagen muestra algunos de los tipos más usados en el diseño Web.

La siguiente linea de código muestra como declaramos el tipo de letra en CSS:

body { font-family: Verdana, Geneva, Arial, sans-serif;}

Puedes especificar más de una fuente usando la propiedad font-family. Escribe el nombre de la fuente separada por comas. Escribe el nombre de la fuente como se pronuncia, incluyendo mayúsculas y minúsculas. Generalmente la especificación del tipo de fuente contiene muchas alternativas, todas de la misma familia.

¿Porqué necesitamos dar una lista de alternativas?

Porque el diseñador Web no tiene control de las fuentes que el usuario tiene instalado en su ordenador y puede suceder que la fuente especificada no este disponible. Si la fuente mencionada en CSS no se encuentra disponible, el navegador prueba con la segunda alternativa y así sucesivamente. Por esto, es común usar como última fuente el nombre de una familia tipográfica. En CSS hay cinco familias que se muestran en el siguiente gráfico.

La familia sans-serif incluye fuentes sin serif. Los serif son puntas y ganchos decorativos al final de las letras. Las fuentes sans-serif son generalmente consideradas más legibles en pantallas de ordenador que las fuentes serif. La familia serif incluye fuentes con serifs. Mucha gente asocia estas fuentes con prensa escrita.

Tamaño de fuente

Podemos fijar el tamaño de fuente de una letra por medio de la propiedad font-size. Ésta se puede fijar usando px, %, %em o palabras clave. Las siguientes lineas de código ilustran los diferentes modos.

body {font-size: 14px;}
h1 {font-size: 150%;}
h2 {font-size: 1.2em;}

En la cabecera de primer nivel h1 decimos que el tamaño de letra es 150% el heredado. Como hemos heredado 14 pixeles de body. Sabemos que el tamaño de letra de h1 es (14*150)/100 = 21px.
En la cabecera de segundo nivel h2 decimos que el tamaño de letra es 1.2em el heredado. Como hemos heredado 14 pixeles de body. Sabemos que el tamaño de letra de h2 es (14*1.2) = 16.8 px. O lo que es lo mismo aproximadamente 17 pixeles.

Podemos usar las siguientes palabras clave para definir el tamaño de letra

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

¿Por que no usar siempre pixeles?

El usar unidades relativas como % o em nos ofrece una mayor libertad a la hora de cambiar nuestros diseños. Es habitual definir el tamaño de letra en body, de modo que sea heredado por todos los elementos, y sobreescribir este valor con un unidades relativas en los elementos que deseamos. Si en algún momento queremos cambiar el tamaño de nuestra página podemos hacerlo fácilmente editando sólo un valor, el del elemento body.

Color

Podemos fijar el color de una letra por medio de la propiedad color. Esta se puede fijar usando palabras clave o una escala de rojo, verde y azul. La siguiente imagen muestra los 17 colores definidos por medio de palabras clave en CSS.

Las siguientes lineas de código ilustran los diferentes modos de definir la cantidad de rojo, verde o azul necesaria para formar nuestros colores. Podemos hacerlo en tanto por ciento, en una escala de 0-255 y en hexadecimal. Las siguiente lineas son equivalentes. Un 80% es 204 en escala 0-255. 204=(255*80)/100.

background-color: rgb(80%, 40%, 0%);
background-color: rgb(204, 102, 0);
background-color: #cc6600;

Peso de la fuente

Podemos fijar el peso de una letra por medio de la propiedad font-weight. Se pueden usar los siguientes valores:

• lighter
• normal
• bold
• bolder

Decoración del texto

Añade incluso más estilo a tu texto con la propiedad text-decoration. Por ejemplo los elementos a, los enlaces, tienen por defecto la propiedad text-decoration fijada en underline para aparecer subrayados.

• none
• underline
• overline
• line-through
• blink

Resumen

• CSS te da mucho control sobre el aspecto de tu tipografía, incluyendo tipo de fuente, peso de la fuente y estilo de la fuente.
• Una familia de fuentes es un conjunto de fuentes que comparte ciertas características.
• Las familias de fuente para la Web son serif, sans-serif, monospace, cursive y fantasy. Serif y sans-serif son las más comunes.
• Las fuentes que tus visitantes vean en tu página Web depende de las fuentes que tengan instaladas en sus ordenadores.
• Es una buena idea, especificar fuentes alternativas a la familia que desees para que se usen estas alternativas cuando el usuario no tenga instaladas las fuentes mencionadas como primera opción.
• Escribe siempre la última fuente como una familia genérica como serif o san-serif, de modo que el navegador pueda encontrar una substitución adecuada si no se encuentran otras fuentes.
• El tamaño de las fuentes se especifica normalmente usando px, em, % o palabras clave.
• Si usas pixeles (px) para especificar el tamaño de letra, le estas diciendo al navegador como cuantos pixeles de alto quieres que tengan tus letras.
• em y % son tamaños de letra relativos. Especificar el tamaño de letra usando em y % significa que el tamaño de las letras será relativo al tamaño de letra del elemento padre.
• Usar tamaños de letra relativos puede hacer que tus páginas sean más fáciles de mantener.
• Puede hacer que su texto este en negrita usando la propiedad CSS font-weight.
• Use palabras clave para definir el tamaño de letra básico en una regla para el elemento body. De modo que todos los navegadores pueden escalar el tamaño de la fuente en el caso de que los usuarios quisieran fuentes más grandes o más pequeñas.
• La propiedad font-style se usa para crear texto en cursiva o oblicuo.
• Los colores Web se usan mezclando diferentes cantidades de rojo, verde y azul.
• Si mezcla 0% de rojo, 0% de verde y 0% de azul obtiene negro.
• CSS tiene 17 colores predefinidos, incluyendo negro, blanco, rojo, azul y verde.
• Puede especificar el color que quiere usando porcentajes de rojo, verde y azul. Para ello usara valores numéricos de 0-255 para el rojo, verde o azul o usara un código hexadecimal que represente al color deseado.
• Un modo fácil de encontrar el código hexadecimal del color que quiera usar es mediante la herramienta de selección de color de una programa de edición de imágenes o alguna de las numerosas aplicaciones online.
• Los códigos hexadecimales tienen seis dígitos de 0-F. Los primeros dos dígitos representan la cantidad de rojo, los segundos la cantidad de verde y los dos últimos la cantidad de azul.
• Puede usar la propiedad text-underline para subrayar texto. El texto subrayado se confunde a menudo con el texto usado en enlaces. Debido a esto se debe usar esta propiedad con cautela.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, tipography, Web Design

Curso de Diseño Web VII - Añadiendo Estilo con CSS

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas y la historia y estándares HTML. En esta entrada introducimos CSS.

Para aplicar estilo a nuestras páginas podemos usar el lenguaje de programación conocido como CSS. CSS es la abreviación de hoja de estilos en cascada. El siguiente código (explicado en los pasos a continuación) fija como rojo el color de fondo de los párrafos de nuestra página y nos permite ver el aspecto de CSS.

p { background-color: red;}

1. Seleccionamos el elemento al que queremos aplicar estilo. En este ejemplo, el elemento <p>. Observe, que en CSS no se pone <> alrededor del nombre de la etiqueta.
2. Especificamos la propiedad a la que queremos aplicar estilo, en este caso el color de fondo del elemento. En ingles background-color.
3. Entre el nombre de la propiedad y el valor de la misma ponemos dos puntos.
4. Para definir el color de fondo como rojo, fijamos el valor de la propiedad a red.
5. Al final ponemos punto y coma
6. Recuerde colocar todos los elementos de estilo para el elemento <p> entre {}.

Para añadir estilos CSS directamente en HTML, añada las etiquetas de apertura y cierre del elemento <style> con el atributo type de valor text/css en el elemento <head>. Esto se muestra a continuación:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <title>Rock and Beer Guadalajara</title> 
    <style type="text/css"> 
        
        p { background-color: red;} 
        
     </style> 
  </head> 
  <body> 
  ... 
  .. 
  . 
  </body> 
</html> 

A menudo, nos va interesar que todas nuestras páginas usen las mismas reglas de estilo. Los periodicos, por ejemplo, usan a lo largo de todas sus páginas el mismo tamaño de letra para los encabezados, el mismo espacio entre lineas etc. ¿Cómo podemos hacer que todas nuestras páginas tengan las mismas reglas de estilo?. Imaginemos un portal con dos archivos; index.html (la página de inicio) y bebidas.html. Para lograr aplicar a ambas páginas las mismas reglas de estilo, realizaríamos los siguientes pasos:

1. Sacar las reglas CSS del archivo index.html y colocarlas en un archivo llamado estilo.css.
2. Crear un enlace externo a este archivo desde el archivo index.html
3. Añadir el mismo enlace externo en el archivo bebidas.html

Usamos el elemento link para enlazar con información externa. En este caso enlazamos con un archivo externo de estilos. El código sería algo así:

<link type="text/css" rel="stylesheet" href="estilo.css"/>

Con el atributo type indicamos que el tipo de esta información es text/css. En otras palabras una hoja de estilos en cascada, un CSS. El atributo href indica donde se encuentra el archivo de estilos. En este caso un camino relativo, aunque podría ser una URL completa. El atributo rel especifica la relación entre el archivo HTML y lo que estamos enlazando. Estamos enlazando una hoja de estilos, por lo que le damos el valor stylesheet.

CSS permite agrupar declaraciones de estilo comunes para varios elementos en una sola regla. Por ejemplo:

 
h1 { 
    font-family: sans-serif; 
    color: gray; 
} 
h1 { 
    font-family: sans-serif; 
    color: gray; 
} 

Es equivalente a:

 
h1, h2 { 
    font-family: sans-serif; 
    color: gray; 
} 

Herencia

Sin duda la propiedad más interesante de CSS es la herencia de reglas de estilos entre elementos. Podemos imaginarnos nuestros archivos HTML como un árbol invertido de elementos que se anidan los unos en los otros. Si quisieramos fijar la tipografía de nuestras s de primer nivel a sans-serif escribiríamos una regla como la siguiente:

h1 { font-family: sans-serif;}

Con CSS, sólo podemos aplicar estilo a los elementos dentro del elemento body. Debido a esto los siguientes gráficos no muestran los elementos dentro de head. La regla anterior seleccionaría todo los elementos <h1> de la página. En este ejemplo sólo hay uno como se muestra en el siguiente gráfico.

Si quisieramos cambiar la tipografía de las s de primer y segundo nivel escribiríamos la siguiente regla.

h1, h2 { font-family: sans-serif;}

Ahora el selector selecciona todos elementos los <h1> y <h2>

Si quisieramos cambiar la tipografía de los parrafos escribiríamos la siguiente regla.

p { font-family: sans-serif;}

El selector se aplica a todos los elementos <p> del árbol. Más aún, los elementos anidados dentro de los parrafos como son <a>, <em> y <a> heredan también la propiedad font-family de sus elementos padres.
El elemento <img> es un hijo del párrafo, pero no tiene ningún texto por lo que no se ve afectado.

Usando la herencia de CSS, podemos simplificar las reglas de estilo que hemos usado en los ejemplos anteriores.

h1 { font-family: sans-serif;}
h2 { font-family: sans-serif;}
p { font-family: sans-serif;}

Podemos lograr el mismo efecto si movemos la propiedad font-family de los párrafos y cabeceras al elemento body. Ahora, todos los elementos anidados bajo body heredan la propiedad font-family. A continuación se muestra el código y el gráfico que ilustra el cambio.

body { font-family: sans-serif;}

¿Cómo sobreescribir una propiedad heredada?

La propiedad font-family se define en la regla body, de modo que cada elemento dentro de body la hererda. Puedes sobreescribir el valor de font-family que has heredado. Si decides usar, por ejemplo, la tipografía serif para los elementos <em>, el siguiente código lo lograría.

body { font-family: sans-serif;}
em { font-family: serif;}

El siguiente gráfico muestra ahora los elementos con la tipografía fijada en sans-serif. Puedes ver que el elemento em ya no esta afectado.

Resumen

• CSS contiene declaraciones simples, llamadas reglas.
• Una regla proporciona el estilo para una selección de elementos HTML.
• Una regla típica consiste en un selector junto con un o más propiedades y valores.
• El selector especifica a que elementos podemos aplicar la regla.
• Cada propiedad finaliza con un punto y coma.
• Todas las propiedades y valores van entre {}.
• Puede seleccionar cualquier elemento usando su nombre como selector.
• Separando mediante comas los nombres de elementos podemos seleccionar varios elementos a la vez.
• Una de las maneras más fácil de incluir estilo en HTML es mediante la etiqueta <style>
• Para portales Web de alguna complejidad, debería enlazar a una hoja de estilos externa.
• El elemento <link> se usa para incluir una hoja de estilos externa.
• Muchas propiedades se heredas. Por ejemplo, si una propiedad que se hereda se define para el elemento <body>, todo los elementos hijos de <body> la heredarían.
• Siempre puede sobreescribir propiedades heredadas creando una regla más especifica para el elemento que queremos cambiar.
• Puede validar usando el validador de CSS del W3C.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design

Curso de Diseño Web VI - Estándar HTML

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas, en la tercera hablamos de la metodología de trabajo cuando nos enfrentamos a un proyecto Web, en la cuarta sobre publicar nuestro proyecto Web en Internet y en la quinta entrada hablamos de la inclusión de imágenes en nuestras páginas. En esta entrada hablamos de la historia de HTML y del uso de estándares.

La Web es una industria con una historia corta pero intensa. En los últimos veinte años la explosión de contenido ha llevado consigo una evolución tecnológica y de estándares. A continuación repasamos la historia de HTML:

• 1989 / 1991 HTML 1.0 - 2.0
  Los primeros días de HTML. Se podía guardar todo lo que se necesitaba saber sobre HTML en un cajón. Las páginas no eran bonitas, pero al menos se enlazaban las unas a las otras. Nadie se preocupaba mucho de la presentación y sólo de que todo el mundo tuviera su propia Web.
• 1995 HTML 3
  El periodo conocido como la guerra de los navegadores. Durante el cual Microsoft y Netscape se peleaban por el control del navegador. Durante la guerra, ambos navegadores mantuvieron una carrera para soportar diferentes elementos y extensiones propias. A veces se tenían que escribir dos páginas Web, una para Netscape y otra para IE. Un mal periodo para los diseñadores.
• 1998 HTML 4
  El final de las guerras de navegadores y la aparición del W3C (World Wide Web Consortium). Su plan separar el contenido de la presentación en dos lenguajes. Un lenguaje para la estructura (HTML) y un lenguaje para la presentación (CSS). No obstante la parte más complicada era convencer a los fabricantes de navegadores que estaba en su mejor interés adoptar estos estándares.
• 1999 HTML 4.01
  HTML 4.01 entra en escena en 1999 y es la versión más actual de HTML. Todo el mundo esperaba que HTML 4.0 fuera la versión definitiva, sin embargo se necesitaban algunos arreglos. Estos arreglos llegaron con la versión 4.01. La llegada de HTML 4.01 supuso que escribiendo código estándar, este funcionará prácticamente sin problemas en todos los navegadores.
• 2000 XHTML 1.0
  Por supuesto, aparecieron nuevas tecnologías. Apareció otro lenguaje de etiquetado conocido como XML (Extensible Hypertext Markup Language). Juntando los conceptos de XML y HTML nació XHTML 1.0. Éste unía la popularidad y funcionamiento en navegadores de HTML a la extensibilidad y reglas estrictas de XML.

¿Cómo decimos al navegador la versión de HTML usada?

Para decir al navegador la versión que estamos usando hay que añadir un definición del tipo de HTML que usamos al comienzo de nuestros archivos HTML. A continuación se muestra la definición de tipo para HTML 4.01 en su variante estricta.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Para comprobar que nuestro código cumple los estándares que queremos, la W3C pone a nuestro disposición diversas herramientas. Por ejemplo, el validador de HTML permite saber si nuestro código es correcto.

Guía para HTML 4.01

• No olvides el elemento <html>
• Recuerda usar los elementos <head> y <body> dentro de <html>.
• Usa siempre <title> dentro de <head>
• Pon dentro de tu elemento <body> elementos de bloque <h1>,
<h2>, ... <h6>, <p>, <blockqoute>
• No pongas elementos de bloque dentro de elementos en linea. Dentro de los elementos en linea sólo puede ir texto u otros elementos en linea.
• No poner elementos de bloque dentro de <p>
• Sólo los elementos <li> están permitidos dentro de los elementos <ul> y <ol>
• Pon todo lo que quieras dentro de <li>
• El elemento <blockqoute> requiere uno o más elementos de bloque.
• Sea cuidadoso anidando elementos en linea dentro de otro elemento en linea. Por ejemplo, no se puede anidar un enlace dentro de otro.

¿Qué son las etiquetas meta en HTML?

Usamos las etiquetas meta dentro de head. Estas etiquetas indican al navegador que le vamos a decir algo sobre la página. Por ejemplo par indicar la codificación de nuestros archivos podemos usar:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

El atributo content es donde especificamos la información sobre el tipo del contenido. Con la parte text/html indicamos que es un archivo HTML. La parte ISO-8859-1 indica al navegador la codificación que estamos usando.

Resumen

• HTML 4.01 es el estándar HTML más soportado por los navegadores.
• El W3C (World Wide Web Consortium) es la organización internacional que define que es estándar HTML.
• Muchos navegadores tienen dos modos de representar HTML: modo "rareza" (quirks en ingles) para HTML antiguo y modo estandarizado para HTML 4.01
• Si no dices al navegador que versión de HTML estas usando, algunos navegadores usaran el "modo rarezas", que causara inconsistencias en la representación de la misma.
• El DOCTYPE (Document Type Definition) se usa para decir al navegador en que versión de HTML esta escrita la página.
• El DOCTYPE estricto se usa si estas escribiendo HTML 4.01 totalmente estándar.
• La etiqueta <meta> dentro del elemento <head> se usa para proporcionar al navegador información adicional sobre una página Web, como el tipo del contenido y la codificación del texto de la misma.
• La codificación de texto se usa para decir al navegador que estándar de codificación (UTF-8, ISO 8859-1 ...) se usa.
• La mayoría de los lenguajes usados en el este de Europa pueden ser pueden ser representados con la codificación ISO-8859-1
• El validador W3C es un servicio online gratuito que comprueba que la página cumpla los estándares.
• Use el validador para asegurarse que tu HTML este bien construido y que los atributos cumplan los estándares.
• Cumplir los estándares, hace nuestras páginas carguen más rápidas y que haya menos diferencias entre navegadores.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design

Curso de Diseño Web V - Imágenes

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas, en la tercera hablamos de la metodología de trabajo cuando nos enfrentamos a un proyecto Web y en la cuarta sobre publicar nuestro proyecto Web en Internet. En esta entrada trataremos uno de los elementos más importantes, las imágenes

En primer lugar hay que entender como funciona la carga de de un archivo HTML con imágenes en un navegador. El navegador comienza con un lienzo en blanco que ha de pintar con las respuestas que le proporciona el servidor tal y como se muestra en la siguiente imagen:

El servidor manda el archivo HTML pedido, que el navegador comienza a pintar. El navegador examina el archivo recibido y se da cuenta que éste contiene imágenes. Al no disponer de estas imágenes todavía no puede pintarlas. Pide estas imágenes al servidor, como se muestra en la siguiente imagen. En HTML usamos para incluir imágenes el elemento img.

Conforme va recibiendo las imágenes, el navegador las muestra y continua pidiendo las restantes.

Es posible que no nos demos cuenta de este proceso porqué los navegadores más modernos realizan la petición de imágenes en paralelo y porqué en la actualidad disponemos de conexiónes a Internet bastante rápidas.

Como hemos visto en los gráficos anteriores las imágenes se cargan después de leer el HTML. Podemos usar los atributos width y height para ayudar al navegador a dibujar nuestra página al decirle que ancho y alto van a tener nuestras imágenes. Si no usamos estos atributos el navegador tiene que identificar ambos valores al recibir las imágenes. Siempre que podamos es bueno ayudar al navegador, para obtener una carga más rápida de nuestras páginas Web.

¿Qué tipo de imágenes podemos usar en Internet?

Podemos usar imágenes en formato JPEG, GIF y PNG. En la entrada ¿Cuál es la diferencia entre JPEG y GIF? discutíamos cuando usar un formato u otro.

¿Cómo mejorar la accesibilidad de las imágenes

A continuación se muestra un extracto de HTML que usa el atributo alt. Este atributo se usa para ofrecer un texto alternativo.

<img src="http://softamo.com/images/logo.gif" alt="Logotipo de la empresa Softamo"/>

• El atributo alt debe ser un texto corto que describa la imagen
• Si la imagen no se encuentra (fallo en el código, se ha movido a otro directorio), algunos navegadores, muestra este texto alternativo en su lugar.
• Los lectores de pantalla usan este texto alternativo para describir a los usuarios con minusvalías visuales lo que verían en pantalla.

¿Podemos crear enlaces a otras páginas por medio de imágenes?

Sí, de hecho es muy fácil crear enlaces por medio de imágenes. Para ello debes rodear el elemento imagen (img) con el elemento enlace (a), que presentábamos en la segunda entrada de este curso, tal y como se muestra a continuación.

<a href="http://brihuega.es"> <img src="miniaturas/escudo_de_brihuega.gif" /></a>

Resumen

• Use el elemento <img> para posicionar imágenes en su portal Web.
• Los navegadores tratan los elementos <img> de un modo algo diferente que el resto de los elementos. Después de mostrar el HTML de la página, el navegador obtiene cada imagen del servidor Web y la muestra.
• Si tiene más de una imagen grande en su página Web, puede hacer la página más usable y más rápida creando miniaturas - imágenes que el usuario puede pulsar para ver una versión más grande de la imagen.
• El atributo src es como especificas la localización de la imagen. Puede incluir las imágenes de su portal usando caminos relativos en el atributo src, o imágenes desde otros portales usando una URL.
• El atributo alt del elemento <img> es una descripción significativa. Es mostrada por algunos navegadores si la imagen no puede ser encontrada, y es usada por lectores de pantalla para describir la misma a las personas con minusvalías visuales.
• Un ancho de menos de 800 pixeles es una buena general para la imágenes de un portal Web. La mayoría de los imágenes creadas por cámaras digitales son demasiado grande para usarlas en páginas Web, así que hay que reducir su tamaño.
• Imágenes demasiado grandes para un navegador hace que los portales Web sean menos usables y más lentos para descargar y mostrar.
• Un pixel es el punto más pequeño que se puede representar en la pantalla. Cada imágenes está compuesta por miles de pixeles. Dependiendo del monitor, puede haber desde 72 pixeles por pulgada a 100 pixeles por pulgada.
• JPEG y GIF son dos formatos para imágenes que están soportados extensamente por todos los navegadores.
• El formato JPEG es más adecuado para fotografías y otras imágenes complejas.
• El formato GIF es más adecuado para logotipos y otras imágenes simples con colores sólidos, lineas y texto. Las imágenes JPEG se pueden comprimir en diferentes calidades. Debe escoger un balance entre calidad y tamaño de archivo según sus necesidades.
• El formato GIF permite tener imágenes con fondo transparente.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design

Curso de Diseño Web IV - Publicar una página en la Web

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas y en la tercera hablamos de la metodología de trabajo cuando nos enfrentamos a un proyecto Web. En esta cuarta entrada hablamos sobre el proceso de mover nuestras páginas desde nuestro ordenador local a Internet.

Para publicar una página en Internet. Necesitaremos llevar a cabo los siguientes pasos:

1. Encontrar una empresa que proporcione espacio de almacenamiento. En ingles se refiere al alojamiento como Hosting. Cuando lea servicio de Hosting debe entender por ello que la empresa alquila un espacio de almacenamiento en un servidor donde residirá nuestra página. A menudo estas empresas de hosting alquilan también dominios. Algunas de las más famosas son 1&1, GoDaddy y Joker. Hay muchísimas empresas dedicadas al alquiler de servidores y dominios. Para evaluar la empresa de alquiler debemos pensar en las tecnologías que queramos usar para construir nuestras páginas, el presupuesto que tengamos, la localización de nuestro tráfico etc. A modo de metáfora podemos asemejar el dominio de una página (ej. softamo.com) con una dirección postal y el espacio de almacenamiento con la casa donde alojamos nuestras pertenencias y a la que se llega yendo a la dirección postal.
2. Escoger un nombre para tu portal. Por ejemplo: unpaisenlamochila.com. La ICANN coordina la administración de los elementos técnicos del DNS para garantizar la resolución unívoca de los nombres, para que los usuarios puedan encontrar todas las direcciones. En otras palabras, la ICANN delega en otras empresas el alquiler de nombres de dominio. Cuando una empresa nos alquila un nombre de dominio, dicha empresa notifica al ICANN que ese domino nos pertenece de modo que sólo haya en Internet un servidor asociado a dicho dominio.
3. Copiar los archivos desde tu ordenador hasta la empresa encargada del alojamiento. Para transferir archivos entre ordenadores en Internet hay varios protocolos que permiten la transferencia con cierta velocidad. Protocolos como FTP o SFTP. El uso de un protocolo u otro depende del soporte ofrecido por la empresa de alojamiento con la que contratemos.

El siguiente gráfico ilustra, el proceso mediante el cual copiamos nuestro directorio local (donde tenemos los archivos que forman nuestro portal Web) al servidor remoto.

Hay muchos programas que nos permiten usar el protocolo FTP. A continuación un listado de los más populares:

Windows

• SmartFTP, cliente FTP de pago.
• File Zilla, producto FTP gratuito
• IPSWITCH File Transfer gratis en la versión Home y de pago en la versión profesional.

MAC OS X

• Transmit es una elegante aplicación FTP para MAC OSX, de pago.
• Fetch es una de las más aplicaciones más populares FTP para Mac OSX, de pago.
• Cyberduck, una aplicación FTP gratuita para Mac OSX.

Anteriormente hemos mencionado la necesidad de alquilar un dominio o dirección Web. ¿Qué es un dominio?. Podemos dividir un dominio en tres partes. Por ejemplo para:

http://www.cabaretcafe.com/indicaciones.html

• La primera parte de la URL (http) habla sobre el protocolo que se usa para obtener un recurso
• La segunda parte (www.cabaretcafe.com) es el nombre del portal Web.
• La tercera parte (/indicaciones.html) es el camino absoluto hacia el archivo desde el directorio raíz.

¿Cómo funciona el protocolo HTTP?

El protocolo http es la base del funcionamiento de internet. Se basa en un intercambio de peticiones y respuestas entre clientes (portátiles, teléfonos móviles, ordenadores de escritorio ) y servidores. Este intercambio se ilustra en el siguiente gráfico:

¿Qué pasa si el servidor no encuentra el archivo?

Si el servidor no encuentra el archivo requerido por el cliente, envía un código 404. El protocolo HTTP define códigos de repuesta. Los navegadores entienden los códigos recibidos en los paquetes de respuesta HTTP.

¿Cómo funcionan las páginas por defecto?

A menudo navegamos a páginas que no especifican el nombre de ningún archivo. Por ejemplo, escribimos en nuestro navegador http://google.es. ¿Qué sucede en estos casos?, ¿Qué archivo envía el servidor al cliente para estas peticiones?. La respuesta es muy sencilla, los servidores nombran determinados archivos como archivos por defecto, habitualmente se usa el nombre index.html. Si en una petición se no se especifica ningún archivo, se busca el archivo por defecto. Si existe, se envía éste. Este proceso se ilustra en el siguiente gráfico.

En la segunda entrada de este curso hablamos sobre caminos relativos. Sin embargo, lo que el navegador entiende son caminos absolutos. De hecho cuando el navegador recibe un camino relativo hacia un archivo lo traduce a un camino absoluto. Un camino absoluto empieza en el directorio raíz y recorre el portal web saltando a través de directorios hasta llegar al archivo solicitado. El proceso se explica en el siguiente gráfico.

El siguiente ejercicio, muestra como construir direcciones para llegar a los diferentes archivos de nuestro portal Web.

1. http://www.autospaco.com
2. http://www.autospaco.com/direcciones.html
3. http://www.autospaco.com/nuevos/
4. http://www.autospaco.com/nuevos/imagenes/minicooper.gif
5. http://www.autospaco.com/usados/inventario.html

¿Cómo enlazo a un portal Web externo?

Podemos enlazar a portales externos. Por ejemplo el siguiente código enlazaría a la página de Softamo:
<a href="http://softamo.com">Softamo</a>

¿Cómo abrir la página enlazada en una ventana nueva?

Podemos abrir un enlace en una nueva ventana añadiendo el atributo target="_blank". El código quedaría del siguiente modo:
<a target="_blank" href="http://softamo.com">Softamo</a>

¿Cómo mejorar la accesiblidad de mis enlaces?

El atributo title sirve para mejorar la accesibilidad de nuestros enlaces. Este atributo se muestra en la mayoría los navegadores como una burbuja de ayuda cuando ponemos nuestro ratón sobre el enlace y lo dejamos encima durante un segundo. Más aún, el valor que pongamos en este atributo será leído por los lectores de pantalla usados por los usuarios con minusvalías visuales.
<a title="Ir a la empresa encargada del diseño de esta Web" href="http://softamo.com">Softamo</a>

Resumen

• Normalmente el mejor modo de publicar un portal en la Web es encontrar un proveedor de alojamiento.
• Un nombre de dominio es un nombre único, como google.com o dguadalajara.es, y es usado para identificar el portal.
• Un proveedor de alojamiento puede crear uno más servidores Web en su dominio. Los servidor se llaman a menudo www.
• El protocolo FTP (File Transfer Protocol) es un método común para transferir páginas web y contenido a un servidor.
• Un URL, Uniform Resource Locator o dirección Web, puede ser usado para identificar cualquier recurso en la Web.
• Una URL típica consiste de protocolo, un nombre de dominio Web y un camino absoluto a un recurso.
• HTTP es un protocolo de peticiones y respuestas que se usa para transferir páginas Web entre un servidor Web y un navegador.
• El protocolo file es usado por el navegador para leer páginas del propio ordenador del usuario.
• Un camino absoluto es el camino desde el directorio raíz al archivo.
• index.html y default.htm som ejemplos de páginas por omisión. Si especifica un directorio sin un nombre de archivo, el servidor Web buscara un archivo por omisión y se lo mandará al navegador.
• Puede usar caminos relativos o URLs en el atributo href de sus elementos <a> para enlazar con otras páginas. Para otras páginas en su sitio es mejor usar caminos relativos, usar URLs para enlaces externos.
• Usé el atributo id para crear un punto de destino en su página. Use # seguido del nombre usado en el atributo id para enlazar con dicha posición en la página.
• Para mejorar la accesibilidad, use el atributo title ofreciendo una descripción del enlace en los elementos <a>
• Use el atributo target para abrir un enlace en otra ventana del navegador. Né olvide que el atributo target puede ser problemático para usuarios en un rango de dispositivos y navegadores alternativos.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML . Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design

Curso Diseño Web III - Primeros esbozos

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas. Esta entrada pretende transmitir al lector una metodología de trabajo cuando se enfrenta a un proyecto Web.

A menudo las propuestas de trabajo que reciben las agencias de diseño Web son descritas vagamente por el cliente y es tarea del diseñador descubrir los objetivos del portal Web a construir. No obstante, la mayoría de las veces recibimos un ramillete de información preexistente en forma de la antigua Web, un folleto, algunos documentos internos etc. Imaginemos que José Antonio Labordeta contacta con nosotros y nos pide que hagamos la Web de su programa de televisión un país en la mochila y nos facilita para ello su diario (mostrado en la imagen a continuación).

La primera tarea consiste en esbozar en papel o con la ayuda de algún programa de diseño de interfaz de usuario como será nuestro sitio. Yo recomiendo esbozar en papel ya que crearemos prototipos rápidamente y no hay predisposición a impedir cambios o nuevas ideas durante las primeras etapas del proceso de diseño. Nadie se enfada si tiramos su esbozo en papel a un papelera y comenzamos de cero. Sin embargo, no estará tan dispuesto a realizar cambios sobre su diseño en Microsoft Visio o OmmniGraffle en el que ha estado trabajando toda la mañana. Una vez tengamos el esbozo, hay que imaginarse como pasar de esa idea a código HTML. Este proceso se ilustra en la siguiente imagen.

El esquema HTML mostrado en la imagen anterior muestra elementos cabecera (<h1>, <h2>, <h3>), párrafos (<p>) e imágenes (<img>). El elemento imagen es un elemento vacío. Denominamos elementos vacíos a aquellos que sólo tienen etiqueta de apertura. Aparte de imagen, hay otros elementos vacíos como <br>. Éste sirve para crear retornos de carro. Los navegadores ignoran los espacios en blanco, sangrías etc. que aparezcan en nuestros archivos HTML por lo cual <br> sería el equivalente al efecto que obtenemos en los procesadores de texto cuando pulsamos la tecla ENTER. Es decir, un salto de linea.

Listas

En HTML es común encontrar información ordenada en listas. Hay dos tipos de listas aquellas cuyos elementos deben aparecer en un orden preestablecido y aquellas cuyos elementos no deben guardar un orden estricto. Ejemplo de lo primero serían el listado de los diez mandamientos que todos repetíamos en nuestros años de catequesis. En cuanto a lo segundo podemos tomar la lista de la compra. En la cual el orden en que tengamos escrita "leche" o "carne" no influye en la felicidad de nuestra nevera. Los elementos HTML para escribir listas son los siguientes:

• <ul> Lista desordenada
• <ol> Lista ordenada
• <li> elemento de una lista

A continuación se muestra un ejemplo de una lista de la compra en HTML

 
<ul> 
 <li>Pan</li> 
 <li>Leche</li> 
 <li>Mantequilla</li> 
</ul> 

Anidamiento

Podemos pensar que el modo de estructurar nuestros elementos HTML se asemeja al funcionamiento de las muñecas rusas. La originalidad de estas muñecas consiste en que se encuentran huecas por dentro, de tal manera que en su interior albergan una nueva muñeca, y ésta a su vez a otra, y ésta a su vez otra. Del mismo modo nuestros elementos HTML pueden albergar en su interior varios HTML y éstos a su vez otros. La imagen a continuación le ayudará a visualizar esta metáfora.

Resumen

• Planea la estructura del portal Web antes de escribir el contenido. Empieza con unos simples esbozos que te sirvan para crear una visión de como quedará el portal. Luego traslada esta visión a HTML.
• Planea tu página comenzando con los elementos de bloque, para luego refinarla con elementos en linea.
• Recuerda, que siempre que sea posible, hay que usar elementos que le digan al navegador el significado del contenido.
• Usa siempre el elemento que más cerca este del significado de su contenido. Por ejemplo, nunca use un elemento de párrafo cuando necesite una lista.
• <p>, <blockquote>, <ol>, <ul> y <li> son elementos de bloque. Constituyen un bloque en si mismo y son mostrados con espacio en blanco antes y después de su contenido.
• <q>, <em> y <a> son elementos en linea. El contenido de estos elementos fluye en linea con el resto del contenido del elemento que los contiene.
• Usa el elemento <br> cuando necesites insertar retornos de carro.
• <br> es un elemento vacío.
• Los elementos vacíos no tienen contenido.
• Un elemento vacío consiste sólo en una etiqueta y quizás algunos atributos.
• Un elemento anidado es un elemento contenido completamente dentro de otro elemento. Si sus elementos están anidados correctamente, sus etiquetas deberían encajar correctamente.
• Para crear una lista en HTML se debe usar una combinación de dos elementos: <ol> y <li> para una lista ordenada; o <ul> y <li> para una lista desordenada.
• Cuando el navegador muestra una lista ordenada, crea la numeración de la lista automáticamente.
• Puede especificar su propio orden en una lista ordenada por medio del atributo start. Para cambiar los valores de los elementos individuales, use el atributo value.
• Puede construir listas anidadas poniendo elementos <ol> o <ul> dentro de los elementos <li>.
• Use entidades para los caracteres especiales en su código HTML.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design

Curso Diseño Web I - ¿Cómo funciona la Web?

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero.

¿Cómo funciona Internet?

Internet se encuentra poblado por servidores y clientes. Por un lado los servidores almacenan los archivos (HTML, imágenes ...) que componen las páginas Web. Por otro lado los clientes, dispositivos como portátiles, teléfonos móviles, ordenadores de sobremesa, ejecutan unos programas llamados navegadores para acceder al contenido ofrecido por los servidores.

¿Qué hace un Servidor?

Un servidor es un ordenador, conectado las 24 horas del día a Internet, que acepta peticiones sobre ciertos archivos que almacena.

¿Qué hace un Navegador?

Un navegador es un programa que es capaz de interpretar lenguajes de programación relacionados con la Web como HTML, CSS o Javascript. Esta facultad le permite representar de un modo gráfico al usuario las páginas Web enviadas por el servidor.

Lo que uno escribe (el HTML) y lo que el navegador muestra

La siguiente imagen muestra la correspondencia entre un archivo HTML y la representación que un navegador muestra basandose en su contenido.

1. El elemento <title>Rock & ... </title> se muestra como título de la página en la parte superior del navegador. Este texto es también usado por los diferentes motores de búsqueda para nombrar nuestras páginas en sus listado de resultados.
2. El elemento <h1>Bienvenido a Rock& ... </h1> es una cabecera de primer nivel. Estamos habituados a utilizar cabeceras para destacar la predominancia de una porción de texto en otros programas como los procesadores de texto.
3. El elemento <img src="bebidas.jpg"/> sirve para posicionar imágenes en nuestras páginas Web.
4. El elemento <p>Este ... </p> designa una porción de texto como un párrafo.
5. Usamos el elemento <em>american bar</em> para indicar que una porción de texto contiene un cierto énfasis.
6. El elemento <h2>Dirección</h2> es una cabecera de segundo nivel. Podemos designar hasta 6 niveles distintos para nuestras cabeceras.
7. Al igual que el elemento D el uso de la etiqueta <p> indica que el texto rodeado actúa como un párrafo.

¿Qué es un elemento HTML?

Se conoce como elemento HTML al contenido (el texto) y las etiquetas de apertura y cierre. En el ejemplo de la cabecera de segundo nivel <h2>Dirección</h2>. <h2> sería la etiqueta de apertura, </h2> la etiqueta de cierre y Dirección el contenido. Se reconoce a las etiquetas de cierre por que aparecen después del contenido y llevan una barra invertida /.

HTML describe el contenido de nuestra página de un modo semántico. Es decir, definimos cabeceras, parrafos, listas etc. Para dotar de un color de fondo, cambiar el tamaño de letra o aplicar otro estilo usamos CSS. CSS es un lenguaje de programación que nos permite definir la representación de nuestros elementos HTML. A continuación se muestran varias lineas de código y una pequeña explicación de las mismas. No se preocupe si no las entiende ahora mismo.

body {
background-color: #d2b48c; ? Define el color de fondo en un tono canela.
margin-left: 20%; ? Define el margen izquierdo a un 20% del tamaño de la página.
border: 1px dotted gray; ? Define un borde alrededor de la etiqueta body que es punteado y de color gris.
padding: 10px 10px 10px 10px; ? Crea un indentado alrededor de la etiqueta body de la página.
font-family: san-serif; ? Define el tipo de letra del texto.
}

Resumen

• HTML y CSS son los lenguajes que usamos para crear páginas Web.
• Los servidores Web almacenan y sirven páginas Web que son creadas con HTML y CSS. Los navegadores recuperan las páginas y muestran su contenido basandose en HTML y CSS.
• HTML es una sigla de HyperText Markup Language y se usa para estructurar una página Web.
• CSS es una sigla de Cascading Sytel Sheets, y se usa para controlar la presentación de su HTML.
• Usando HTML marcamos el contenido con etiquetas para dar estructura. Las etiquetas de apertura, el contenido y las etiquetas de clausura se conocen como elementos. Un elemento esta compuesto de tres partes: etiqueta de apertura, contenido y etiqueta de cierre. Hay algunos elementos que son excepciones a esta regla, como <img>.
• Las etiquetas de apertura pueden tener atributos.
• Las etiquetas de cierre tienen un / después del símbolo menor que, delante del nombre de la etiqueta para distinguirlos de las etiquetas de cierre.
• Las páginas deben tener siempre un elemento <html> junto con un elemento <head> y un elemento <body>.
• Lo que se pone dentro del elemento <body> es lo que se ve en el navegador.
• La mayor parte del espacio en blanco (sangrías, retornos de carro, espacios) son ignorados por el navegador, sin embargo el uso de estos elementos puede hacer que tu código HTML sea más legible.
• Se puede añadir CSS a una página Web en HTML, poniendo las reglas CSS dentro del elemento <style>. El elemento style debe estar siempre dentro del elemento <head>
• Puede especificar la estética de los elementos de su código HTML usando CSS.

Este curso Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rapidamente.

Etiquetas: Curso Diseño Web, Internet, Web Design

Los seis pilares del diseño Web

Lograr el equilibrio entre los pilares del diseño Web es clave para el éxito de nuestro proyecto.

Hay seis pilares:

Usabilidad

La usabilidad se refiere a la claridad y la elegancia con que se diseña la interacción con un portal Web. Los portales difíciles de usar pueden resultar antipáticos, haciendo que los visitantes los abandonen rápidamente.

Estética

Se refiere a la armonía y apariencia agradable a la vista, que tiene un portal Web desde el punto de vista de la belleza. Es decir que un portal Web tenga un aspecto bello y elegante. A menudo, se cree equivocadamente que el diseño Web consiste sólo en dar a un portal Web una estética agradable. Sin embargo, la estética es sólo uno de los pilares. Y el favorecer dicho pilar en exceso puede perjudicar el resultado final. Esto es quizás debido a que en los inicios muchos de los diseñadores Web, venían de áreas de diseño gráfico y carecían de una visón más global. Esto causo la aparición de sitios en flash con animaciones superfluas y navegación compleja que limitaban la usabilidad, accesibilidad y visibilidad del contenido de las páginas. Afortunadamente esta tendencia se está corrigiendo y la industria, más madura, tiene en cuenta el resto de los pilares.

Accesibilidad

Un portal Web es accesible cuando el contenido ofrecido se puede acceder desde diferentes dispositivos (PC's, teléfonos móviles, ..) y por diferentes grupos de personas. Por ejemplo, gente con minusvalías. Cuando hablamos de minusvalías normalmente pensamos en gente con minusvalías visuales, sin embargo hay muchos otros tipos de minusvalías (auditivas, comprensión de lectura ...). Las personas de avanzada edad tienen a menudo dificultades navegando en portales Web con letra demasiado pequeña, navegación confusa o lenguaje complejo. Hay muchas razones para enfatizar la accesibilidad de los portales Web: incentivos comerciales (cuanto más accesible sea nuestro contenido, mayor número de personas alcanzaremos), responsabilidades legales y obligaciones morales.

Contenido

Este punto es, con asiduidad, el más descuidado de todos. Sin embargo, el éxito de un portal Web reside a menudo en la calidad de su contenido. No son pocas las veces, que el contenido de un portal Web es una copia de aquel folleto o tríptico que la organización ya tenía. La Web es una plataforma distinta a la prensa escrita y por tanto necesita un modo de escribir diferente ya que los usuarios consumen la información de un modo diferente. Estudios han mostrado que los usuarios de la Web realmente no leen tal y como estamos acostumbrados, sino que le echan un vistazo al texto seleccionando palabras individuales y frases.

Desarrollo

El desarrollo de un portal Web se refiere a los aspectos técnicos del proyecto. La industria del diseño Web evoluciona rápidamente y es importante que no sólo el personal técnico sino el dueño o gestor del portal tengan una visión de las oportunidades que existen para mejorar su portal y por lo tanto alcanzar los objetivos del mismo.

Objetivos

Para el dueño o gestor de un portal los objetivos de una portal deben ocupar la mayor parte de su atención. Es importante definir dichos objetivos para que el equilibrio entre el resto de pilares se encargue de satisfacerlos. Objetivos pueden ir desde incrementar la visibilidad de la compañía para nuestros potenciales clientes a aumentar nuestra ventas a través de comercio electrónico.

Esta entrada esta inspirada en el libro The Website Owner's Manual escrito por Paul Boag. Recomiendo la compra del mismo, si quiere profundizar en el tema.

Etiquetas: Web Design