Desarrollo Web, de novato a experto

Una práctica muy importante en cualquier lenguaje de programación es el de comentar nuestro código, ya que al transcurrir el tiempo, ni nosotros mismos sabemos lo que hicimos (creame, pasa muy seguido).

La etiqueta

se utiliza para representar un párrafo. La etiqueta p es soportada
por todos los navegadores (gracias a Dios).

La etiqueta de encabezado H1 y sus hermanas menores son una de las herramientas más potentes con las que contamos a nivel de SEO para decirle a los buscadores de qué va el contenido de nuestra página web. Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado no es algo conocido por todos.

Las etiquetas de encabezados han tenido una importancia vital en el posicionamiento en buscadores desde sus orígenes, y con pequeñas variaciones en el peso de su influencia se han ido manteniendo en el tiempo como algo que definitivamente hay que cuidar, desde la fase de maquetación del diseño web hasta la creación de contenidos para un portal en funcionamiento. Estas nociones básicas deben ser pues conocidas por diseñadores, programadores y personas encargadas de la redacción de texto para web.

Esta etiqueta se usa para reforzar el texto en html. El caso es que prácticamente todos los navegadores la interpretan de la misma forma poniendo el texto que las engloba en negrita, ¿entonces cual uso?.

Hay muchos webmaster que se inclinan por la etiqueta porque afirman que es mejor para el posicionamiento ya que google las interpreta como palabras clave, otros nos comentan que además aportan semántica al contenido a través de CSS y por tanto mejor accesibilidad.

Una lista permite organizar la totalidad o parte de un documento HTML estructurándolo de la forma más clara posible para hacerlo más perceptible al lector. Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de objetos, pero la diferencia con los procesadores de texto es que no permite la numeración automática para niveles jerárquicos diferentes:

 Ficheros HTML

 Ficheros de texto

 Ficheros de imágenes

El uso de las listas de difinición están cayendo en desuso. El funcionamiento de las listas de definición es similar al de un diccionario, por un lado el término y por el otro la definición de ese término o palabra. La etiqueta crea la lista de definición y las etiquetas y definen respectivamente el término y la descripción de cada elemento de la lista.

 Byte
 Conjunto de 8 bits con significado

Dentro de una página web, los hipervínculos son las palabras, párrafos o imágenes que al darles click, te llevarán a otro lugar, ya sea a otra página, o a una sección en específico dentro de la misma página; desempeñan una función muy útil, por ello saber cómo aprender a programar hipervínculos a la hora de crear un sitio web es muy importante.

Otra de las características que tienen los hipervínculos es que al pasar el cursor sobre ellos, el ícono del cursor cambia y se convierte en una mano.

Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces. Para crear un ancla (anchor) se procede de la siguiente manera:

Texto del elemento ancla

Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario. Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:

Texto del hiperenlace

De esta manera accederemos a la posición donde hayamos puesto el ancla Por ejemplo al final de este documento hemos puesto la siguiente ancla:

La etiqueta te servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues no tiene etiqueta de cierre:

La etiqueta requiere un origen de datos obligatorio dado por el atributo SRC. 

Indica la imagen en cuestión:

Tan sólo el código anterior es necesario para añadir una imagen a tu página, mostrando la imagen situada en el mismo directorio del documento HTML.

Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial.

Dentro de HTML tendremos otras etiquetas, por ejemplo:

Para un salto de linea

Dibuja una línea

una dirección física

La etiqueta

Las hojas de estilo en cascada (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL.

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Los css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarla las más importantes. Antes de la versión 5 de HTML, no se podía manejar más que las fuentes que el usuario tuviera instaladas en su computadora. Era por esto que utilizábamos al menos tres tipos de fuente por si una fallaba, el navegador buscaba la segunda, y asi, hasta encontrar una de las fuentes más básicas. Algunos de los conjuntos de fuente más comunes son:

Arial, Helvetica, sans-serif

“Times New Roman”, Times, serif

“Courier New”, Courier, monospace

Georgia, “Times New Roman”, Times, serif

Verdana, Arial, Helvetica, sans-serif

Geneva, Arial, Helvetica, sans-serif

Si el nombre de la fuente contenia espacios, es necesario utilizar las comillas, por ejemplo "Times New Roman"

Cambiar el formato de los hipervínculos o "links" por medio de los estilos en cascada es fundamental en el desarrollo y diseño de páginas we. Podemos modificar los colores, el background o cambiar el clásico color azul, sin embargo, siempre es necesario que el usuario sepa cuál frase, palabra o imagen contiene un hipervínculo.

La ubicación de nuestras reglas de estilo es muy importante, porque depende del órden las reglas se irán ejecutando. Podemos localizar nuestro código en ohas externas, propiamente conocidas como stylesheets, podemos escribir el código dentro de la etiqueta , dentro de la página html o incluso dentro de la etiqueta, como un atributo de la misma, aunque esta última ubicación no se recomienda, porque se pierde toda la versatilidad que nos ofrecen los estilos en cascada.

La prioridad dependerá de la cercania de la regla al elemento HTML. De ahí su nombre de estilos en cascada.

El manejo de selectores es una de las habilidades más importantes cuando se intenta utilizar los estilos en cascada en forma profesional. hasta este punto hemos utilizado las reglas de cascada que inician con un selector. Este puede ser el nombre de una etiqueta, por ejemplo, h1, de una clase, por ejemplo .rojo o de una división #encabezado.

Cuando utilizamos por selector un nombre de etiqueta, todas las etiquetas de esa clase srán modificadas. En cambio, los identificadores sólo podemos tener uno en todo el documennto. Las clases pueden aplicarse varias veces, pero hay que aplicarlas en forma manual.

Podemos aplicar a varios selectores las mismas reglas de estilo por medio de las comas, por ejemplo:

h1, h2, h3, h4{ color:white; }

Muchas veces los selectores simples, como la etiqueta, la clase y los identificadores no son suficientes para realizar el diseño de nuestra página web, por lo que nos será importante hacer "excepciones". En un buen diseño web, las excepciones no deberán de ser la regla. Para ello necesitamos escribir los selectores principales a la izquierda y los particulares a la derecha, por ejemplo:

#menu a { color:red; }

Por lo general leeremos estos selectores de derecha a izquierda, es decir: "todas las etiquetas 'a' que se encuentren dentro de la división 'menu' su texto será de color rojo.

• El selector element.class se usa para seleccionar el elemento especificado con la clase especificada.

p.urgente{color:red;}

span.urgente{color:orange;}

El manejo de unidades es fundamental dentro del diseño y desarrollo de nuestra página web. En HTML en general y en CSS en particular, tendremos dos tipos de unidades: las flexibles y las fijas. Siempre será mejor utilizar las primeras, por ejemplo el pixel (px) la em (que es la medida de la letra 'm' de la fuente base).La medida em no tiene nada que ver con la etiqueta de HTML que modifica los textos a itálicas. Por lo general esta medida es la adecuada para manejar los tamaños de los textos y sus atributos como el padding y el margen.

El padding se podría considera un margen interior. También se le traduce como "colchonilla". Se le ubica entre el área de contenido y el borde. Adquiere el color de la caja de contenido. También lo podemos controlar bajo el mnemónico de TRBL, y separarlo en padding.top, padding-left, etcétera.

Cuando se tiene una imagen de fondo,ésta abarca el área de contenido y el padding.

La propiedad auto nos permitirá centrar divisiones dentro de sus contenedores. Desafortunadamente no contamos con una instrucción que centre enforma automática o que flote una división al centro. Con auto en el margen a izquierda y derecha, podemos hacer que una división flote dentro de su contenedor, pero necesitamos definir un ancho (width) para ello, ya sea en pixeles o porcentaje.

Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:

• Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con border.

• La propiedad display especifica el comportamiento de visualización de un elemento.

• En HTML, el valor de propiedad de visualización predeterminado se toma de las especificaciones HTML o de la hoja de estilo predeterminada del navegador / usuario.

• Por defecto en el modelo de caja de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento.

• Si el elemento tiene algún borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla.

• La propiedad CSS background-attachment determina si la posición de la imagen de fondo será fija dentro de la pantalla o se desplazará con su bloque contenedor.

La propiedad CSS background-clip especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde.

En este ejercicio te mostraremos cómo hacer un menú sencillo con el cual podrás navegar en tu sitio web.

En este video le mostraremos como convertir nuestra página web a una hoja perfectamente imprimible, sin necesidad de hacer dos páginas, únicamente utilizando los estilos en cascada.

Añadir el favicon a la página web.

Una pieza importantísima para el desarrollo de una composición o maquetado de una página web es comprender cómo se acomodan las cajas, es decir, su flujo natural, y cómo podemos cambiar éste. En este video iniciaremos por comprender cómo es el flujo "natural" de las cajas para después poder modificarlos.

Para realizar layouts más interesantes, necesitaremos que las divisiones comiencen a flotar. Para ello utilizaremos la propiedad float con la mayoría de sus parámetros.

• La propiedad position de CSS especifica cómo un elemento es posicionado en el documento.

• Las propiedades top, right, bottom y left determinan la ubicación final de los elementos posicionados.

El posicionamiento fijo, con la opción position:fixed, se comporta casi como position:absolute, pero coun una leve diferencia: un elemento fijo No se desplaza.

Los elementos con posicionamiento absoluto están colocados relativos a un punto de referencia del documento, por lo que se desplazan con el resto del contenido.

En este video mostraremos la segunda parte de crear un layout fijo: la introducción de los contenidos y el formateo con los estilos en cascada.

El Flujo Normal, o también Flow Layout, es la forma en que los elementos de línea y de bloque son presentados en una página.

Con display podemos eliminar, ocultar (visibility) o mostrar una etiqueta.

El elemento se convierte en un elemento en línea: se comporta como texto simple.

display:grid or display:inline-grid grid-template-columns grid-template-rows

grid-gap

Podemos cambiar la ubicación de los elementos dentro del “grid” por medio de la propiedad grid-column-start y grid-column-end.

Por medio de la propiedad grid-area podemos abreviar las columnas y renglones.

• grid-row-start

• grid-column-start

• grid-row-end

• grid-column-end

Podemos expandir los elementos de un grid de varias formas.

Expande el borde correspondiente del área de cuadrícula del elemento a “n” líneas del borde opuesto.

Podemos crear áreas con nombre en la cuadrícula para poner contenido. Primero asignamos elementos en nuestro marcado a un área de cuadrícula, usando la propiedad grid-area.

Por medio de los MediaQueries podemos hacer responsiva la estructura creado con display.

• Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida fr (fracción), diseñada para este propósito.

• Podemos aplicar la medida fr tanto a columnas como a renglones.

• La función minmax() en CSS define un rango de tamaño mayor o igual que min y menor o igual que max.

• max-content: Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.

• min-content: Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.

• Por medio de la propiedad order podemos cambiar el orden de los elementos de un grid-layout.

• Por lo general hay que evitar esta propiedad porque cambia el orden de forma visual, pero en forma lógica no, por lo que los lectores de pantalla pueden generar errores.

The Grid Garden 1a. parte

The Grid Garden 2da. parte

The Grid Garden 3a. parte

Display:grid y las propiedades auto-fill y auto-fit