Ejercicio 1 del curso diseño Web

Esta entrada pretende ser un ejercicio para aquellos que tras leer la primera entrada de la serie Curso de Diseño Web, ¿Cómo funciona la Web?, quieran ejercitar lo aprendido.

Imagine que el dueño del cabaret café (un elegante café situado en el teatro Antonio Buero Vallejo de Guadalajara) le pasa esta servilleta con un listado de los cafes que se ofrecen en su local. Quiere que le hagas una página Web sencilla.

Tareas

• Abrir un archivo en su editor preferido (Notepad, Textmate, ...)
• Escribir dentro del mismo el menú que nos paso el dueño del cabaret Café en la servilleta. Sin la nota en la esquina superior derecha.
• Grabarlo como index.html
• Abrir el archivo index.html en un navegador

Debería ver algo como lo mostrado en la siguiente imagen

Como puede ver es necesario etiquetar nuestra primera página en HTML. Añada HTML a su archivo y debería ver algo así:

Sin no sabe como hacerlo puede descargar un archivo ZIP con el archivo HTML.

La siguiente tarea es añadir algo de estilo. Intente que su página quede como en la siguiente imagen. Puede descargar un archivo ZIP con el archivo HTML que incluye el código CSS con la solución.

Etiquetas: Curso Diseño Web, ejercicio

Curso de Diseño Web X - Tablas

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 , la tipografía, tamaño de letra y colores en CSS y el modelo de caja en CSS. En esta entrada hablamos de como representar información tabular en HTML.

Usamos los siguiente elementos HTML para crear tablas

• Use la etiqueta <table> para empezar una tabla.
• Cada elemento <tr> es una fila.
• Cada elemento <th> es una celda cabecera.
• Cada elemento <td> es una celda.

Mejorar la usabilidad de las tablas

El atributo summary no se muestra en la página Web. Este atributo se usa exclusivamente para mejorar accesibilidad y actúa como un texto alternativo que los lectores de pantalla puede leer en voz alta a un usuario para describir la tabla.

<table summary="Descripción de la tabla" ></table>

El elemento caption, por otro lado, se muestra como pie de tabla; sin embargo por defecto, la mayoría de los navegadores la muestran encima de la tabla. La posición de este elemento la podemos controlar con CSS.

Celdas

El modelo de caja en CSS también tiene se usa para representar tablas tal y como se muestra en el siguiente gráfico.

No existe un margen como en el tradicional modelo de cajas; sin embargo podemos usar la propiedad border-spacing para separar nuestras celdas. A menudo nos va interesar que los bordes de las celdas se representen como uno sólo. Para ello usaremos la propiedad CSS border-collapse.

border-collapse: collapse;

Podemos aplicar otras propiedades CSS para dar estilo a nuestras tablas. Por ejemplo, si queremos que nuestras celdas cabecera tengan un color de fondo escribiríamos:

th { background-color: #cc6600;}

En HTML podemos anidar unas tablas dentro de otras y podemos hacer que celdas ocupen varias filas o columnas gracias a los atributos rowspan y colspan. El siguiente ejemplo, donde se usan los atributos mencionados en este artículo, muestra código HTML, CSS y como quedaría en un navegador.

Código HTML:

 
<table summary="Esta tabla contien los datos adquiridos durante mi viaje para la serie un país en la mochila. He incluido ifnormación sobre las ciudades visitadas, 
la fecha de visita, la altitud, población y un ranking de la calidad de las cenas que allí disfrute."> 
 <caption>Ciudades que visite durante mi viaje por españa</caption> 
 <tr> 
  <th>Ciudad</th> 
  <th>Fecha</th> 
  <th>Temperatura</th> 
  <th>Altitud</th> 
  <th>Población</th> 
  <th>Ranking Cena</th>  
 </tr> 
 <tr> 
  <td rowspan="2">El Baixo Miño (Galicia)</td> 
  <td>Agosto 2, 1995</td> 
  <td>23º</td> 
  <td rowspan="2">200 m</td> 
  <td rowspan="2">2.000</td> 
  <td>5/5</td> 
 </tr> 
 <tr> 
  <td>Septiembre 2, 1995</td> 
  <td>15º</td> 
  <td>4/5</td> 
 </tr> 
 <tr> 
  <td>El Maestrazgo de Teruel</td> 
  <td>Junio 2, 1995</td> 
  <td>20º</td> 
  <td>1.300 m</td> 
  <td>500</td> 
  <td>3/5</td> 
 </tr> 
 <tr> 
  <td>El Priorato Tarragona</td> 
  <td>Mayo 1, 1995</td> 
  <td>18º</td> 
  <td>700m</td> 
  <td>800</td> 
  <td> 
   <table> 
    <tr> 
     <th>Labordeta</th> 
     <td>4/5</td> 
    </tr> 
    <tr> 
     <th>M.Prats</th> 
     <td>2/5</td> 
    </tr>  
   </table>  
  </td> 
 </tr> 
</table> 
 

Código CSS:

 
table {border-collapse: collapse;} 
caption { caption-side: bottom; } 
th {background-color: #c5c5c5;color: black;} 
td, th {border: 1px solid black;padding: 5px;} 
table table th {background-color: #orange;} 

Resultado:

Listas

Con el atributo list-style-type podemos cambiar la representación (una rayita, un circulo ...) que simboliza cada elemento de nuestras listas. Podemos utilizar las siguientes palabras clave:

• disc
• circle
• square
• none

Podemos usar incluso una imagen propia para adornar cada elemento de nuestras listas. Imagine por ejemplo una lista de documentos PDF. Podemos colocar un pequeño icono PDF al comienzo de cada elemento usando la propiedad CSS list-style-image.

li.pdf { list-style-image: url(images/icon_pdf_big.gif; }

Resumen

• Las tablas HTML se usan para estructurar información tabular.
• Use los elementos de tabla HTML: <table>, <tr>, <th> y <td>, juntos para crear una tabla.
• El elemento <table> define y rodea la tabla completa.
• Cada fila contiene una o más celdas de datos definidas con <td>.
• Use el elemento <th> para las celdas de dato que esten en filas o columnas cabeceras.
• Las tablas se trazan en una parrilla. Cada fila corresponde a un <tr>...</tr> en tu HTML, y cada columna corresponde al contenido <td>...</td> en las filas.
• Puede facilitar información adicional sobre sus tablas con el atributo summary y el element <caption>
• Las celdas de las tablas tiene interlineado, espacio entre bordes, que es el espacio entre celdas.
• Del mismo modo que puedes controlar el interlineado, bordes y márgenes de otros elementos, puedes controlar el interlineado, borde y espacio entre bordes de las celdas de una tabla en CSS
• La propiedad border-collapse es una propiedad especial para tablas de CSS que permite combinar los bordes de celda en un borde simple para un aspecto más simple
• Puede cambiar la justificación de los datos en las celdas de sus tablas con las propiedades de CSS text-align y vertical-align
• Puedes añadir color a tus tablas con la propiedad background-color. El color de fondo puede ser añadido a la tabla completa, a una sola fila o a una simple celda
• Si no tiene datos para una celda, no ponga contenido en el elemento <td>. Sin embargo, necesita usar el elemento <td>...</td> para mantener la justificación de la tabla
• Si necesita que una celda ocupe varias filas o columnas, puede usar los atributos rowspan o colspan del elemento <td>
• Puedes anidar tablas dentro de tablas posicionando el elemento tabla y todo su contenido dentro de una celda.
• Las tablas se deben usar para información tabular, no para diseñar sus páginas. Use CSS para lograr posicionamientos con múltiples columnas.
• list-style-type permite cambiar el tipo del marcador que usamos en las listas.
• list-style-image permite especificar una imagen como un marcador de lista.

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, Tables

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 II - Enlaces

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 ¿Cómo funciona la Web? presentamos brevemente el idioma oficial de la Web, HTML. Hablamos de como las etiquetas HTML rodean a texto creando lo que llamamos elementos. HTML es una abreviatura de HyperText Markup Language. La parte ML (Markup Language) hace referencia al etiquetado de nuestro contenido para dar información semántica. Mientras que la parte HT (HyperText) hace referencia a la capacidad de los archivos HTML para enlazarse entre sí. Esta característica es sin duda la responsable del crecimiento exponencial de Internet, al permitirnos conectar grandes cantidades de información entre sí.

El siguiente extracto de código ilustra como se crea un enlace en HTML:

vea las <a href="indicaciones.html"> indicaciones</a> para llegar sin problemas.

El texto que aparece por defecto subrayado, en color azul y sobre el cual podemos pulsar es el texto que aparece entre la etiqueta de inicio y la etiqueta de cierre. En este caso indicaciones. La referencia que queremos enlazar la indicamos en el atributo href. Un atributo aparece dentro de la etiqueta de apertura y siempre sigue la misma nomenclatura (nombre, signo igual y valor entrecomillado). En el ejemplo decimos que queremos cargar el archivo indicaciones.html si el usuario pulsa en el enlace. La siguiente imagen muestra la estructura de un sitio Web compuesto por varias páginas HTML y varias imágenes. Añadiendo enlaces podemos saltar de archivo a archivo.

Normalmente nos ayudamos de directorios para estructurar nuestros portales y ser capaces de mantener éstos de un modo más fácil. Es habitual crear directorios de imágenes tal y como se muestra en la siguiente imagen:

Los cambios en la organización de nuestros portales requieren a menudo el uso de caminos relativos. Por caminos relativos denominamos a la cadena de caracteres que usamos antes del nombre del recurso para describir los saltos en la estructura del portal que se necesitan para llegar a otro recurso. Del mismo modo que cuando viajamos en el coche necesitamos calcular nuestras rutas teniendo en cuenta el punto de inicio y el punto de destino, HTML tiene en cuenta desde el archivo donde colocamos nuestro enlace y el archivo que queremos enlazar para calcular el camino relativo.

Por ejemplo, si queremos enlazar la página de inicio de nuestro portal (index.html) desde la página indicaciones.html nuestro enlace sería:

<a href="?../index.html"?>Volver a la página de inicio</a>

Si queremos enlazar la imagen margarita.jpg desde el archivo bebidas.html tal y como se muestra en el siguiente gráfico, el elemento imagen en HTML sería:

<img src="../imagenes/margarita.jpg" />

Resumen

• Cuando quiera enlazar una página con otra, use el elemento <a>.
• El atributo href del elemento <a> especifica el destino del enlace.
• El contenido del elemento <a> es la etiqueta del enlace. La etiqueta es lo que se ve en la página Web. Por defecto, está subrayado para indicar que se puede pulsar en él.
• Puede usar palabras o imágenes como la etiquetas de un enlace.
• Cuando pulsa en un enlace, el navegador carga la página Web que esta especificada en el atributo href.
• Puede enlazar a un archivo en el mismo directorio, o a archivos en otros directorios.
• Una dirección relativa es un enlace que apunta a otro archivo en su portal Web relativo a la página Web desde la que se enlaza. Como en un mapa, el itinerario hacia el destino depende del punto de origen.
• Use .. para enlazar a un archivo que esta en un directorio más arriba que el archivo desde el que se enlaza.
• .. significa directorio padre
• Recuerde separar las partes de su dirección con el carácter /
• Cuando la dirección hacia un imagen es incorrecto, verá el icono de una imagen rota en su página Web.
• No use espacios en los nombres de sus archivos y directorios de su página Web.
• Es una buena idea organizar los archivos de su página Web al principio del proceso de construcción del portal, de modo que no tenga que actualizar las direcciones más tarde cuando el portal crezca.
• Hay muchos modos de organizar un portal Web, como lo haga depende de usted.

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, links