Introducción Web - Diego Jima: agosto 2013

miércoles, 21 de agosto de 2013

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille.

CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentación del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.

El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.

Ejemplo:

h2 {color: green;}

h2 ---> es el selector

{color: green;} ---> es la declaración

color ---> es la propiedad o atributo

green ---> es el valor

Tipos de estilos

La información CSS se puede proporcionar por varias fuentes, ya sea adjunto como un documento por separado o incorporado en el documento HTML, y dentro de estas posibilidades destacan tres formas de dar estilo a un documento web:

Hoja de Estilo Externa

La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el código HTML al cal estar vinculado a través del elemento link, que debe ir situado en la secciónhead. Es la manera de programar ms eficiente, ya que separa completamente las reglas de formato para la página HTML de la estructura básica de la página.

Hoja de Estilo Interna

La Hoja de Estilo Interna est incorporada a un documento HTML, a través del elementostyle dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML.

Estilo en Línea

El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro de la sección body con el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido de la presentación.

Estilo Cascada.

Una característica esencial de las hojas de estilo en cascada (CSS) es la posibilidad de separar los elementos formales de los de contenido. De esta forma, sólo con una pequeña modificación de la hoja de estilo es posible cambiar el aspecto de todas las páginas en las que se aplica esa hoja.

No todas las versiones de los navegadores las soportan. Si consideramos los dos principales Netscape es capaz de utilizarlas desde la versión 4.0 y Explorer desde la 3.0

¿Por qué se llaman hojas de estilo?

Con las hojas de estilo podemos crear clases y pseudoclases. Éstas nos permiten modificar e indicarle al navegador la forma en la que tiene que presentar cualquier elemento HTML.

¿Por qué se llaman "en cascada"?

Cuando creamos un estilo, las especificaciones que se realicen para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body> todos aquellos elementos que puedan heredar las características se presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra salvo que especifiquemos lo contrario.

También debemos de tener en cuenta que se establece un orden de prioridad para la aplicación de las normas en caso de que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente:

- Estilo especificado dentro de la etiqueta.

- Estilo especificado en la cabecera del documento.

- Estilo definido en un documento independiente al que se enlaza nuestra página.

Si tenemos en cuenta el orden mencionado, lo más razonable es crear una hoja de estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros procedimientos que deberían resultar preferentes por ser más específicos.

Sintaxis

Cómo agregar estilos CSS a una página web.

Podemos usar cuatro métodos diferentes para agregar estilos CSS al código HTML de la página web:

1. Incustrar una hoja de estilo

Las reglas de la hoja de estilo se insertan entre las etiquetas de estilo inicial y final (<style> y </style>) de la sección encabezado de la página web:

<head>

<title>Hoja de estilo incustrada (CSS)</title>

<!--

h1 {color:blue; font size:40px; font-family:verdana;}

p {color:white; background:green; font-family:helvetica; text-indent:2cm;}

-->

</style>

</head>

El atributo type de la etiqueta <style> indica al explorador el tipo de hoja de estilo que debe esperar.

2. Vinculación a una hoja de estilo externa

Para crear un vínculo a una hoja de estilo externa, insertamos una etiqueta <link> como en el ejemplo siguiente:

<head>

<title>Hoja de estilo vinculada</title>

</head>

La etiqueta <link> indica al explorador web que use las reglas de formato CSS en el archivo llamado "estilo.css". El atributo type identifica el archivo como un archivo de texto con información CSS, y el atributo href indica al explorador el nombre y, si es necesario, la ruta de acceso del archivo con las definiciones de hojas destilo que el explorador va a abrir.

Bibliografía:

http://www.amprogramacion.com/img/ejemplo_css.png

http://vagabundia.bolsanegra.net/tutorialhtml/files/Intro_01.png

http://www.chesco.info/curso/css.htm

sábado, 17 de agosto de 2013

HTML

HTML, siglas de HyperText Markup Language («lenguaje de marcado hipertextual»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes.

HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.

Se trata de un formato abierto que surgió a partir de las etiquetas SGML (Standard Generalized Markup Language). Concepto traducido generalmente como “Estándar de Lenguaje de Marcado Generalizado” y que se entiende como un sistema que permite ordenar y etiquetar diversos documentos dentro de una lista. Este lenguaje es el que se utiliza para especificar los nombres de las etiquetas que se utilizarán al ordenar, no existen reglas para dicha organización, por eso se dice que es un sistema de formato abierto.

Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con el formato de los documentos. El texto en él se crea a partir de etiquetas, también llamadas tags, que permiten interconectar diversos conceptos y formatos.

Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través de corchetes o paréntesis angulares: < y >. Entre sus componentes, los elementos dan forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en sí mismo y sus atributos).

Códigos HTML básicos

<html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.

<head>: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador. Dentro de la cabecera <head> es posible encontrar:

<title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.

<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> es posible encontrar numerosas etiquetas.

A continuación se indican algunas a modo de ejemplo:

<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
<table>: define una tabla.
<tr>: fila de una tabla.
<td>: celda de una tabla (debe estar dentro de una fila).
<a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href="http://www.example.com" title="Ejemplo" target="_blank" tabindex="1">Ejemplo</a>
<div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido.
<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imágenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".
<li><ol><ul>: etiquetas para listas.
<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).
<i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>).
<s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>).
<u>: Antes texto subrayado. A partir de HTML 5 define porciones de texto diferenciadas o destacadas del resto, para indicar correcciones por ejemplo. (etiqueta desaprobada en HTML 4.01 y redefinida en HTML

La mayoría de etiquetas deben cerrarse como se abren, pero con una barra («/») tal como se muestra en los siguientes ejemplos:

<table><tr><td>Contenido de una celda</td></tr></table>.
<script>Código de un script integrado en la página</script>.

Bibliografia:

http://definicion.de/html/

http://www.masadelante.com/faqs/css
http://es.wikipedia.org/wiki/HTML

Mapa Sitio web

Representación gráfica o textual de un sitio web. El mapa de un sitio web puede ser un documento que se utiliza para planificar el diseño de la web, o puede ser una página web donde se listan todas las más importantes páginas web de un sitio (generalmente organizadas de alguna manera).

Un mapa de sitio web (o mapa de sitio o mapa web) es una lista de las páginas de un sitio web accesibles por parte de los buscadores y los usuarios. Puede ser tanto un documento en cualquier formato usado como herramienta de planificación para el diseño de una web como una página que lista las páginas de una web (ya realizada), organizadas comúnmente de forma jerárquica. Esto ayuda a los visitantes y a los bots de los motores de búsqueda hallar las páginas de un sitio web.

Los mapas de sitio pueden mejorar el posicionamiento en buscadores de un sitio, asegurándose que todas sus páginas puedan ser encontradas. Esto es especialmente importante si el sitio usa menús Adobe Flash o JavaScript que incluyan enlaces HTML.

Los mapas del sitio te resultarán especialmente útiles en los siguientes casos:

Tu sitio incluye contenido dinámico.
Tu sitio contiene páginas que el robot de Google no puede localizar fácilmente durante el proceso de rastreo como, por ejemplo, las páginas que incluyen imágenes o contenido AJAX enriquecido.
Tu sitio es nuevo y hay pocos enlaces que dirigen a él. (El robot de Google rastrea la Web siguiendo los enlaces de una página a otra; si los enlaces de tu sitio no funcionan correctamente, podemos tener problemas para localizarlo).
Tu sitio dispone de un importante archivo de páginas de contenido que no están bien enlazadas entre ellas o que sencillamente no están enlazadas.

Google no garantiza que vayamos a rastrear o indexar todas las URL. Sin embargo, utilizamos los datos de tu mapa del sitio para obtener más información sobre la estructura de tu sitio, lo que nos permitirá mejorar nuestro programa de rastreo y nuestro trabajo para rastrear tu sitio en el futuro. En la mayoría de los casos, los webmasters se beneficiarán del envío del mapa del sitio y en ningún caso se te penalizará por ello.

Google cumple con el protocolo de mapas del sitio 0.9 tal y como se indica en sitemaps.org Los mapas del sitio que se crean para Google mediante el protocolo de mapas del sitio 0.9 son compatibles con otros motores de búsqueda que adoptan los estándares de sitemaps.org.

Bibliografía:

Introducción Web - Diego Jima

miércoles, 21 de agosto de 2013

Boceto

Mapa de Sitio Web

CSS

Sintaxis

sábado, 17 de agosto de 2013

HTML

Mapa Sitio web