Metodología para aplicar CSS

Transcripción

1 1 UNIVERSIDAD DE PANAMÁ CENTRO REGIONAL UNIVERSITARIO DE VERAGUAS FACULTAD DE INFORMÁTICA, ELECTRONICA Y COMUNICACIÓN INGENIERIA EN INFORMÁTICA PROFESOR DIEGO SANTIMATEO ESTUDIANTE FÁTIMA DEL R. ÁLVAREZ IV AÑO FECHA DE ENTREGA /5/2008

2 1 TABLA DE CONTENIDO Pág. OBJETIVOS GENERALES... 1 INTRODUCCIÓN... 2 CAPÍTULO 1: METODOLOGÍA PARA APLICAR CSS Decidir un nivel de soporte de navegador Buscar los contenedores Nombre de los contenedores Marcar los contenedores Elegir un método de posición para los contenedores Caja coloreadas Colocando el contenido Aplicando caja en los contenedores Sacando el CSS Ocultando estilos de navegadores antiguos Imprimir el CSS VALIDACIÓN DE LA PÁGINA WEB...22

3 2 CONCLUSIONES... 23

4 1

5 1 OBJETIVOS GENERALES Describir cada pasó de la metodología presentada para aplicar CSS. Aplicar la metodología para dar estilo a un documento XHTML.

6 2 INTRODUCCIÓN El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobre todo), distinto a los actuales, mucho más amplios. Este proyecto tiene como objetivo presentar una metodología de aplicación CSS, ofreciendo una guía para iniciar la construcción de una página Web; ya que brinda los pasos que debes seguir para realizar un documento XHTML o HTML con estilo CSS. Es importante que cada paso sea analizado y desarrollado ya que así garantizaremos el buen desempeño y diseño de nuestra página Web, evitando la incompatibilidad con los navegadores y la desconfiguración de la misma. En este documento describo cada paso de la metodología para la aplicación de CSS, además explico cómo la utilice con el lenguaje XHTML para desarrollar mi pagina Web sobre La Plataforma.NET.

7 3 CAPÍTULO 1: METODOLOGÍA PARA APLICAR CSS

8 4 METODOLOGÍA PARA APLICAR CSS La metodología sugerida para la elaboración de una página Web aplicando estilo CSS, la detallare a continuación para una mayor comprensión: 1.1 Decidir el nivel de soporte de navegador Antes de construir un diseño CSS para una página Web se debe determinar primero, los navegadores que me permitirán la visualización de la página Web. Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, sólo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versión 3 son capaces de comprender los estilos en sintaxis CSS. Además cabe destacar que no todos los navegadores implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas. Esto quiere decir que debemos de usar esta tecnología con cuidado, ya que muchos usuarios no podrán ver los formatos que apliquemos a las páginas con CSS.

9 5 En la actualidad existen 3 niveles básicos de navegadores compatibles con los estilos CSS: Navegadores más antiguos Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x, etc Los navegadores recientes Win / InternetExplore 5, Win / InternetExplore 5,5, Win / Netscape 6, Win/Mozilla1.x, Win/Opera6, Mac/Netscape6, Mac/Mozilla1.x, etc Mac/Opera5 Los navegadores modernos Win / InternetExplore 6, Win / Netscape7, Win/Mozilla1.5, Win/Firebird0.7, Win/Opera7, Mac/InternetExplore5.2, Mac/Safari1, Mac / Netscape7, Mac/Mozilla1.5, etc Mac/Opera6. Es importante resaltar que con CSS el navegador debería mostrar el diseño razonable o por lo menos general de nuestra página. Mi página la cree con el lenguaje XHTML y CSS, las prueba de las página las realice con dos navegadores muy comunes Win/Mozilla 2.5, Win / InternetExplore 7 al principio si confronte problemas con el diseño CSS por que se desconfiguraba con el Mozilla, pero luego se solucionaron con algunos ajustes en la capas de la caja CSS.

10 6 Vista de la página con el navegador Mozilla 2.5 Vista de la página con el navegador InternetExplore 7

11 7 1.2 Buscar los contenedores Antes de colocar la información y elementos a la página web se debe realizar un boceto o bosquejo de los contenedores, estos bocetos me permitirán establecer como quiero que sea la presentación de mi página, el lugar donde se quiere ubicar cada texto, imagen, menú, y otros detalles. El boceto puede ser un diseño en papel, digital o una página ya existente. Yo cree un boceto en papel y luego digital, de mis páginas La Plataforma.NET, en donde explico que es.net y brindo enlaces y documentos que están relacionados con estas tecnologías y que profundizan sobre ella. La Maquetación de mi página principal:

12 8 La Maquetación de mis otras 2 páginas componentes.net y Documentación: Estas páginas son similares a la página principal lo único que varia es la ubicación de las imágenes y el texto. 1.3 Nombre de los contenedores Cada sección contiene información de la página web, esta información está dividida por capas y cada una de ellas se representa por un nombre de acuerdo al contenido que aloje. Estas son las capas más importantes de mi página Web: Contenedor (container): es la capa base o principal de la página, ella se encarga de alojar todos los componentes que formaran mi página. Su diseño se configurara de acuerdo a nuestro interés y necesidad, ejemplo fondo,

13 9 alineación, ancho, alto, bordes, tipo de contenedor (absoluto, relativo, fijo, etc). Cabecera (header): en esta capa colocamos el encabezado principal de nuestra página Web, en mi caso La Plataforma.NET, esta capa la decoraremos con un banner o una imagen, todo depende de la creatividad y gusto del diseñador. Contenido (contents): es la capa que contiene la información de la página, explicaciones de la plataforma.net, imágenes y vínculos y demás detalles referentes a.net. Menú horizontal y lineal: la página web consta de un menú vertical de referencias sobre.net en ella podemos encontrar vínculos, artículos y documentos interesantes acordes a las tecnologías.net. También hay un menú horizontal para desplazarnos a las páginas (componentes, documentación) que conforman toda mi página web. Mi Menú Horizontal Menú Vertical

14 10 Pie de página (footer): en esta capa colocaremos el nombre y dirección del autor de la página, en mi caso coloque mi nombre y mi correo electrónico para que puedan comunicarse conmigo si tiene algún interés de compartir experiencias en los temas abordados en la página. 1.4 Marcar los contenedores Para representan cada capa de la página Web los elementos se identifican con un <div>, si los contenedores son únicos para una página, se utiliza ids en vez de clases. <div id="contenedor"> <div id="cabecera"> <div id="contenido"> <div id="menuhorizontal"> <div id="menuvertical"> <div id="piedepagina"> Además que la etiqueta <div> tiene un uso adicional que es el de crear divisiones en la página a las que podremos aplicar una cantidad adicional de atributos para modificar sus comportamientos. Ejemplo: con el atributo align de HTML podemos alinear la división al centro, izquierda, derecha o justificada. Pero su uso más destacado es el de convertir esa división en una capa. En mi página se especifican algunos atributos a las capas como este: <div align="center"><a href="tecnologias modelo 1.html" class="fuente8"><img src="012.gif" border="0" alt="tecnologia" height="40" width="40" /> Ir arriba</a> </div>

15 Elegir un método de posición para los contenedores En este paso deberemos decir la posición y ubicación que debe llevar cada capa de nuestra página para esto existen varias propiedades y atributos. En las páginas diseñadas aplico las siguientes propiedades y atributos: Contenedor: la información general posición absoluta. Código CSS de mi contenedor: twocolhyblthdr #container { width: 96%; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left;} Menú horizontal: alineado a la derecha, posición relativa, margen 0, altura 30px. Encabezado: alineado en la parte superior izquierda acompañado de una imagen. de la página y Ejemplo align="left"><img src="win2.gif" alt="windows plataforma" width="80" height="50. Contenido: la información general justificada y título de cada tema centrado, posición absoluta. Menú vertical: ubicado en la columna izquierda de la página (concurrente) Pie de página: alineado en la parte inferior izquierda de nuestra página.

16 Caja coloreada La presentación de las capas puede variar cuando se le agrega la información y detalles (imágenes, otros) a la página, pero este método de la caja coloreada le permite modelar y ajustar el diseño a su gusto y necesidad. Maquetación de la página principal (inicio), la de componentes y la de documentación: Encabezado Menú horizontal Contenedor Contenido Menú Vertical Cuerpo Pie de página

17 13 Claro luego se deberá realizar los ajustes necesarios para corregir los errores de la página, que presentan mucho al momento de visualizarla en un navegador. Por esto se recomienda validar el código CSS, para que este estandarizado. 1.7 Colocando el contenido Después que ya se ha colocado correctamente los contenedores se debe proceder a agregar el texto a la página. El contenido debe ser semánticamente correcto para no tener problemas más adelante. Código XHTML que me permite escribir el encabezado de mi página y a la vez me permite agregar una imagen junto al Título: <h1 align="left"><img src="win2.gif" alt="windows plataforma" width="80" height="50" />La Plataforma.NET</h1> Resultado: De esta manera se deberá ir colocando la información que sea necesaria para su página Web. También se debe tomar en cuenta el tamaño de la fuente y el estilo de la misma, se recomienda utilizar las unidades de % y em para definir su tamaño ya que es compatible con más navegadores. En mi página XHTML se utilizan las siguientes unidades píxeles, em y % en algunos casos.

18 14 Código CSS del cuerpo mis páginas: body { margin: 0; padding: 0; text-align: center; color: #000000; background-color: #CCCCFF; background-image: url(maple.jpg); background-repeat: repeat; position: absolute; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 85%; } Código CSS de la cabecera de mis páginas:.twocolhyblthdr #header { background: #FF6633; cursor: auto; padding-top: 0; padding-right: 5px; padding-bottom: 0; padding-left: 5px; background-color: #FF9900; background-image: url(menu5.gif); }.twocolhyblthdr #header h1 { margin: 0; padding: 10px 0; } Se pueden utilizar varios métodos para establecer el tamaño de la fuente pero los dos más recomendados son los siguientes: METODO de tamaño de fuente RELATIVO 1 - TAMAÑOS aplicando una fuente de los Contenedores: lo que se hace en este caso se especifica directamente el tamaño de la fuente dentro del contenedor, permitiendo mayor control dentro de la plantilla.

19 15 Código CSS para establecer los tamaños de letras dentro de mi documento XHTML..Estilo2 {font-size: 24 px}.estilo14 {font-size: 14px}.Estilo15 {font-size: 12px}.Estilo16 {font-size: 10px}.Estilo21 {font-size: large}.estilo22 {font-size: 24px} Segmento del código XHTML que utiliza los estilos dentro de los contenedores: <h2 align="left" class="estilo2 Estilo21">Inicio</h2> METODO de tamaño de fuente RELATIVO 2 - el cuerpo: este método utiliza la misma mediada como base para todo la información que contenga. h0{ font-family:verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 80%; font-weight: bold; background: #FFF; } Normalmente, lo más seguro es utilizar una combinación de estos métodos al momento de colocar el contenido a la página Web. 1.8 Aplicando caja en los contenedores Si los contenedores están ubicados en la posición que deseabas y el contenido de igual manera se está comportando correctamente entonces se procede a aplicar los estilos (atributos y valores) en los contenedores.

20 16 Los estilos se ubican en cada sección de acuerdo a su necesidad y gusto además se puede trabajar individualmente. Código CSS para establecer los estilos dentro de mi documento XHTML:.Estilo2 {font-family: Georgia,"Times New Roman",Times,serif}//estilo de letra.estilo17 {font-size: 10px; color: #000000; }//tamaño y color(negro) del texto.estilo18 {font-size: 12px; color: #000000; }//tamaño y color(negro) del texto Estilos CSS del pie de página:.twocolhyblthdr #footer { padding: 0 10px; background:#00ffff; }.twocolhyblthdr #footer p { margin: 0; padding: 10px 0; } 1.9 Sacando el CSS Cuando ya se está satisfecho con el estilo CSS de nuestra página se procede a sacar el CSS del documento XHTML y colocarlo en una hoja de estilo externa. La guardas en bloc de notas la hoja de estilo CSS con la extención.css

21 17 Esta hoja de estilos la podrás utilizar cuantas veces sea necesario porque ahora se ha convertido en una hoja de estilo general y solo necesitas llamarla como un link para utilizarla en tu documento XHTML o HTML. En mi página XHTML el vínculo a mi documento CSS es de la siguiente manera: <link href="hoja_fatima.css" rel="stylesheet" type="text/css" /> La hoja de estilo ya esta validada esto significa que está certifica y se puede usar en la página con toda seguridad. Este segmento de código es enviado en el momento en que la hoja de estilos CSS esta validada correctamente. <a href=" style="border:0;width:88px;height:31px" src=" alt=" CSS Válido!" /></a> 1.10 Ocultando estilos de navegadores antiguos El método para enlazar los archivos CSS te permitirá determinar el grado de soporte de los navegadores. En primera instancia enlace la hoja de estilos a mi documento XHTML con la siguiente enlace: <link href="hoja_fatima.css" rel="stylesheet" type="text/css" />. Puedes usar este estilo de hojas enlazadas, si quieres ignorar los navegadores antiguos pero la página no se mostrara de la manera adecuada. Si deseas que tu página tenga un soporte parcial de los navegadores más antiguos la instrucción debe ser cambiada de esta manera: <style 'hoja_fatima.css'; </style>

22 18 'hoja_fatima.css', me permite mover los estilos que necesite para obtener una vista aceptable de mi página en un navegador antiguo, este es un trabajo difícil porque de todas los navegadores antiguos interpretan el código CSS a su manera. Realice algunas pruebas con navegadores antiguos y la página tuve una excelente presentación lo único es que no permite leer los spry. Vista de mi página La plataforma.net con Internet Explorer 5.5 Página completa:

23 19 Vista de mi página La plataforma.net con Internet Explorer 6 Página completa:

24 Imprimir el CSS Para imprimir el esquema de nuestra página Web debemos primero preparar nuestra página para esa tarea, se debe cambiar el modo de enlace de la hoja de estilos externas, de forma que puedan ser accesibles a cualquiera impresora. 1. Primero se duplica el archivo CSS (hoja_fatima.css) y se coloca en un sitio aparte, y seguido se procederá a trabajar el duplicado de la hoja_fatima.css para convertirla en una página imprimible. Al terminar solo se le debe cambiar el nombre en mi caso imprime_fatima.css 2. Se dejan solo los componentes necesarios para ser impresos. 3. Quite la cabecera gráfica, el menú izquierdo vertical y el horizontal, y también quite todos los colores de la página, solo dejo las imágenes. 4. En resumen elimine todos los estilos que no deseaba en la impresión del documento, incluyendo el tamaño de las letras Código CSS en donde bloqueo la decoración del texto del contenedor de mi página: A:link, A:visited { text-decoration: none }.twocolhyblthdr #container { width: 100%; margin: 0 auto; border: 1px solid #000000; text-align: left; } Se cambia el nombre del archivo y se recupera la original. Luego se añade un nuevo enlace en la del documento. En mi documento XHTML agregue lo siguiente: <link href="imprime_fatima.css" rel="stylesheet" media="print">

25 21 Vista de la plantilla de impresión de mi página Web

26 22 VALIDACIÓN DE LA PÁGINA WEB Una vez que ha terminado el trabajo con el diseño de la página Web se debe validar el código XHTML y CSS para ello debemos ingresar a la dirección Web de en donde se muestra un formulario que indica como realizar la validación. Si no se encuentran errores se envía el código que una vez integrado al código XHTML certificara la página.

27 23 CONCLUSIONES La elaboración de este proyecto fue todo un reto, nunca había programado en XHTML y mucho menos en CSS. Además fue una experiencia bonita e interesante porque me permitió valorar cuanto puedo aprender siendo autodidacta, y a medida que más conoces sobre el tema, más puedes compartir con las personas sobre él e intercambiar experiencias. Aprendí que aspectos debo tomar en cuenta al momento de diseñar una página Web con estilos CSS, aplicando la metodología paso a paso, ya que no es fácil decidir por dónde empezar al momento de diseñar una página Web. Es importante resaltar que el modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a: Un web entero, de modo que se puede definir la forma de todo el web de una sola vez. Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página. Una porción del documento, aplicando estilos visibles en un trozo de la página. Todavía nos falta mucho que aprender sobre el diseño Web pero lo importante es que ya he dado el primer paso intentarlo y gracias a Dios lo he conseguido.