lunes, 12 de septiembre de 2011

1.5 Hojas de Estilo


Las hojas de estilo (Style Sheets) son conjunto de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de representación de contenido: tipo, fuente y tamaño de letras, justificación del texto, colores y fondos, etc. Las hojas de estilo permiten liberar la composición del texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos clave de la edición digital.
Las hojas de estilo son una herramienta de gran utilidad de los programas de tratamiento de textos, como OpenOffice.org o Microsoft Word. Asimismo, constituyen una parte esencial de los lenguajes de marcas para edición digital: LaTeX, XML y XHTML. Dos lenguajes de hojas de estilo son CSS y XSL.
Las hojas de estilo en cascada o CSS permiten especificar una serie de propiedades de una etiqueta, como la fuente y el tamaño del texto o su situación en la página.
El uso de estilos permite establecer una diferenciación clara entre el contenido de una página y la visualización de la misma.
Hoy en día, por ejemplo, es habitual que una página se muestre en distintos dispositivos como un ordenador de sobremesa, una PDA, un teléfono móvil, etc. Usando una hoja de estilo diferente para cada dispositivo se puede conseguir que la misma página se muestre de forma diferente en cada uno de ellos, adaptándose a sus características particulares.

Definición de estilos mediante hojas de estilo en cascada
Una hoja de estilos define estilos para los elementos HTML. Existen 3 formas de definir estilos:
Ø  Mediante estilos individuales
Ø  Mediante estilos genéricos
Ø  Mediante un enlace a una hoja de estilo externa

En los dos primeros casos los estilos se definen en el propio documento HTML, mientras que en el último se definen en un documento independiente.
Los tres tipos de estilos se pueden utilizar simultáneamente. En tal caso, los estilos individuales tienen prioridad sobre los genéricos, y estos a su vez sobre los externos. Esta definición en “cascada” de los estilos es la que da nombre a las hojas de los estilos.

Estilos individuales:
Los estilos individuales afectan a una sola etiqueta y se colocan con el atributo style.
<etiqueta style= “propiedad: valor; propiedad: valor;…”>
En los estilos individuales, el estilo definido únicamente afecta al elemento para el que se define, y no al resto de elementos del mismo tipo.



Estilos Genéricos:
Para aplicar un estilo a todas las apariciones de un elemento en la página y no a una sola se utiliza un estilo genérico. Los estilos genéricos se definen mediante el elemento style en la cabecera de la página.
<head>
<style type= “text/ccs”>
<!--
h1{
font-size: 24pt;
font-family: arial;
text-align: center;
}
-->
</style>
</head>

Enlace a una hoja de estilos externas:
Los estilos pueden almacenarse en un documento independiente llamado hojas de estilo y enlazarse desde el documento html mediante el elemento link.
<llink rel= “stylesheet” type= “text/ccs” href= “dirección url del css”>
La hoja de estilo es un fichero de texto que contiene únicamente las definiciones de los estilos con el método genérico.

1.4 Evolucion desarrollo de aplicaciones Web


Una aplicación web es similar a un programa tradicional, con la diferencia que este se puede ejecutar desde cualquier ordenador con acceso a internet o a una red local este donde este.
El usuario accede a la aplicación a través de un simple navegador de internet, no requiriendo ningún otro software para su ejecución.
Las ventajas son independientes del sistema operativo que utilice, además ya no tendrá que instalar el programa en cada ordenador donde desee utilizarlo únicamente basta con instalarlas en su servidor.
Ámbito: habitualmente, las aplicaciones web se utilizan para controlar el funcionamiento interno de los diferentes departamentos de la empresa, gestionando:
·         Contactos
·         Reuniones
·         Eventos
·         Correos electrónicos
·         Etc…
Aunque no solamente es este su campo de aplicación; la evolución de los lenguajes de desarrollo está haciendo que cada vez más acaparen el mercado propio de los programas tradicionales
El desarrollo de aplicaciones web ha evolucionado por los siguientes aspectos:
·         Evolución del uso/demandas
·         Evolución de Tecnologías/Navegador
·         Evolución de Tecnologías/Servidores
·         Marketing de ventas
·         Hiper-Hype y las Dot.com
Ø  Informativos y contenido estático (HTML estático).
Ø  DHTML (“D” de dinámico), que incluye la posibilidad de incluir comportamiento dinámico en la página. Ejemplo: menús, hojas de estilo.
Ø  Lenguajes de programación del lado del cliente como Javascript, Vbscript, Applets (Java).
Ø  Incorporación de multimedia (Flash, SilverLigth).
Ø  Lenguajes de programación del lado del servidor (tecnología CGI).
Ø  Lenguajes de programación del lado del servidor de siguiente generación (ASP, PHP, JSP, etc.).
Ø  Desarrollo de tecnología para la seguridad (uso de claves, encriptación).
Ø  Aplicaciones  en Web como Comercio Electrónico.
Ø  E-Government, E-procurement, Internet banking, etc.
Ø  Servicios Web.

1.3 HTML

Es un lenguaje de programación que se utiliza para el desarrollo de páginas de internet. Se trata de las siglas HyperText Markup Language, es decir Lenguaje de Marca de Hipertexto.
Permite describir la estructura y el contenido en forma de texto, además de complementar el texto con objetos tales como imágenes. Este lenguaje se escribe mediante etiquetas, que parecen especificadas por corchetes angulares (< y >).
Por otra parte permite incluir scripts (por ejemplo de JavaScript), código que puede modificar el comportamiento de los navegadores Web y de otros procesadores de HTML. Los archivos de formato HTML utilizan la extensión .htm o .html.
Estructura del Lenguaje HTML
<html>
<head>
…. Encabezamiento del documento
</head>
<body>
…. Cuerpo del documento
</body>
<html>
 
HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en inglés a los lenguajes de marcado. Además de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML.
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de las personas y de los sistemas electrónicos. La principal desventaja es que pueden aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.
Elementos HTML
Además de etiquetas y atributos, HTML define el término elemento para referirse a las partes que componen los documentos HTML.
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un elemento HTML es mucho más que una etiqueta, ya que está formado por:
·         Una etiqueta de apertura.
·         Cero o más atributos.
·         Texto encerrado por la etiqueta.
·         Una etiqueta de cierre.
El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden encerrar ningún texto. El siguiente esquema muestra un elemento HTML, formado por una etiqueta <p>, atributos y contenidos de texto:
 
si una página web tiene dos párrafos de texto, la página contiene dos elementos y cuatro etiquetas (dos etiquetas <p> de apertura y dos etiquetas </p> de cierre). De todas formas, aunque estrictamente no son lo mismo, es habitual intercambiar las palabras "elemento" y "etiqueta".
Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en línea (inline elements en inglés) y elementos de bloque (block elements en inglés).
La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio disponible en la página. Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea. Por su parte, los elementos en línea sólo ocupan el espacio necesario para mostrar sus contenidos.

Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.
Los siguientes elementos también se considera que son de bloque: dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr.

Los siguientes elementos pueden ser en línea y de bloque según las circunstancias: button, del, iframe, ins, map, object, script.