UNIVERSIDAD DE PANAMÁ

CENTRO REGIONAL UNIVERSITARIO DE VERAGUAS

FACULTAD DE INFORMÁTICA, ELECTRÓNICA Y COMUNICACIÓN
ESCUELA INGENIERÍA EN INFORMÁTICA
LICENCIATURA EN INFORMÁTICA PARA LA GESTIÓN EDUCATIVA
Y EMPRESARIAL

CURSO
PROGRAMACIÓN WEB

Metodología para aplicar CSS

ESTUDIANTE
ISIS REYES 2- 160-330

PROFESOR
DIEGO SANTIMATEO

III AÑO

I SEMESTRE

2007
 INDICE

INTRODUCCIÓN..................................................................................... 3
I- METODOLOGÍA PARA APLICAR CSS. ............................................ 4
1.1-Escoger el browser adecuado. .......................................................... 4
1.2- Aplicar maquetación a la página..................................................... 4
1.3. Establecer nombre de los bloques o capas. ...................................... 6
1.4- Marcas encima de los bloques. ........................................................ 7
1.5. Elija un método para la posición de los bloques o capas.................. 8
1.6- Bloques resaltados........................................................................... 8
1.7-Iniciar con el contenido. ................................................................... 9
1.8- Estilo dentro de los bloques o capas. ..............................................10
1.9- Tomar en cuenta el CSS externo ...................................................11
1.10- Ocultar reglamentos de browser antiguos. ...................................11
1.11-Imprimir CSS................................................................................13
II- COMENTARIOS ................................................................................14

Estudiante: Isis del C. Reyes V. III año. Programación Web. 2

Metodología para aplicar Css.
 INTRODUCCIÓN

En este laboratorio #1, de programación web trata de la metodología

aplicada a CSS en documentos XHTML y HTML, va depender del lenguaje la

cual usted programe su página web, el mismo señala los pasos necesarios para

elaborar una página con estilo y fácil de manejar para quienes buscan

información.

Es necesario analizar cada uno éstos pasos, ya que garantizan que una

página web cumpla con los requisitos necesarios a la hora de su navegación, y

no presente inconvenientes en su diseño.

Cada paso tiene su explicación detallada como también la explicación

de su aplicación en documentos XHTML elaborados sobre temas de HTML,

XHTL y CSS.

Estudiante: Isis del C. Reyes V. III año. Programación Web. 3

Metodología para aplicar Css.
 I- METODOLOGÍA PARA APLICAR CSS.

La metodología aplicada para el diseño de una página Web aplicando CSS, será detallada a
través de pasos para una mejor comprensión de cada una.

1.1-Escoger el browser adecuado.

Este es el primer paso a seguir para construir una página Web con estilo CSS, la cual es decidir
que browser se va a utilizar para visualizar mi página Web.

Estos borwser se encuentran en 3 categorías: los viejos, los más recientes y nuevos. Es
importante cual de estas categorías se va visualizar mi página según los browser actuales que tiene
la Web.
Muestre lo que hizo!!!!!

En este caso la página que se realizó en lenguaje XHTML, la cual es necesario probar la
misma con varios browsers, ya que algunos no cumplen de manera apropiada con los estándares
que la W3C propone, y para que la página funcione correctamente de acuerdo a este lenguaje, se
escoge los browser de la categoría más recientes como: IE (Internet Explorer) y Mozilla-Firefox,
éstos browser brindan apoyo en la aplicación de hojas con estilos CSS, la cual se utiliza para dar
estilo a la página XHTML.

1.2- Aplicar maquetación a la página.

Comúnmente, al diseñar una página Web bien estructurada se utiliza el método o técnica de
maquetación, la misma se basa en crear un prototipo o boceto de nuestro diseño Web, colocando
cada elemento o bloque de la página en un lugar específico, asignando los espacios adecuados al
texto, y los elementos gráficos y de navegación dentro de la página Web.
Se recomienda utilizar un diseño o boceto en papel de la información que queremos que
vaya en la página.

Estudiante: Isis del C. Reyes V. III año. Programación Web. 4

Metodología para aplicar Css.
El boceto aplicado a las páginas XHMTL la cual se es llamado “Aprendiendo un poco de HTML -
XHTML y CSS” , la cual trata de resúmenes breves de cada uno de estos lenguajes.

Se aplico dos estilos CSS, por la cual se realizo 2 bocetos diferentes, pero con bajo un
mismo concepto, no aburrir al visitante, con estilos monótonos, ya que se diseñaron varias páginas
para cada tema (html, css, xhtml, página principal) dentro de esta última se diseñaron dos páginas
con el mismo estilo (isis1s.css). y las tres primeras con el estilo (isisIE.css – isisW3C.css), hubieron
variaciones en cuanto colores, tamaño de letras, otras). Pero la maquetación mantiene una igual
estructura. En el siguiente paso 1.9 se explica, porque se utiliza estos dos estilos mencionados.
La maquetación establecida a las páginas:

Encabezado Encabezado
Menu de temas Contenedor
Contenedor Menú Titulo imagen
cuerpo
Menú2
cuerpo

imagen

Pie de página Pie de página

Maquetación: pagina principal Maquetación: páginas de resúmenes

Estudiante: Isis del C. Reyes V. III año. Programación Web. 5

Metodología para aplicar Css.
1.3. Establecer nombre de los bloques o capas.

Cada bloque contiene información de la página, la cual se establece a través de capas, es

importante que cada uno lleve un nombre representativo al contenido. En la página Web diseñada
los capas se identifican a través de nombres como:

Contenedor: es la capa principal, dentro de esta capa se colocan todos los elementos que va tener
la página. La cual se establece los alineamientos del texto, el ancho y alto, el color del fondo, entre
otras propiedades.

Cabecera: es el encabezado de la página Web, es la capa decorativa de la página, en la páginas

XHTML contiene el titulo de la página “Aprendiendo un poco de HTML- XHTML y CSS” , la cual
es una imagen gif diseñada en Xara WebStyle herramienta muy útil para diseñar banner gif para
Web.

Cuerpo: es la capa que contiene la información principal, la cual contiene títulos, texto y otros
elementos que queremos situar.

Principal: al igual que el cuerpo es un nombre de la capa de las páginas de los temas, se colocan
los títulos, subtítulos, e imágenes ilustrativas.

Menú y menú lineal : la página Web consta de 2 menús de navegación, la primera es el menú de
enlace a los temas, y el segundo es el menú de enlaces a otras páginas relacionadas, esto en el
caso de las página principal. En el caso de las otras páginas están contienen un solo menú enlaces
al contenido de cada tema y retorno a la página principal.

Izquierda: es la capa que se coloca en el lado izquierdo de las páginas de los temas, esta contiene
una imagen relacionada a la misma.

Pie: es la capa que contiene el pie de página la cual es la dirección, nombre del autor de página.

Estudiante: Isis del C. Reyes V. III año. Programación Web. 6

Metodología para aplicar Css.
 Estos son algunos nombres que se encuentran en la página XHTML, que representan las
capas más importantes de una diseño Web. Existen muchas más capas con nombre
representativos en esta página solo hemos expuesto aquí las más importantes.

1.4- Marcas encima de los bloques.

Cada elemento es representado por un <div> para identificar cada capa de la página, la cual tiene un
identificador “id” es el nombre único de una capa.
Ejemplo de las utilizadas en estas páginas están:
<div id=”contenedor”>capa general que contiene todos los elementos de las páginas.
<div id=”cabecera”>capa que contiene la cabecera principal de la páginas Web (imagen).
<div id="menulineal">capa de menú de navegación horizontal para cada resumen.
<div id="menu">capa que contiene menú de navegación a otras páginas (Pág. principal).
<div id="cuerpo"> capa que contiene la información principal de la página. (pagina principal)
<div id="principal">capa que contiene la información principal de la página. (páginas de temas).
<div id="piedepagina"> capa que contiene la dirección y nombre del autor(a).
<div id="izquierda"> es un menú de navegación de contenido de los temas.
<div id="imagen"> capa que contiene un gif de avance /siguiente y anterior).

Estos son algunos div que encontrará en estas páginas Web con estilo CSS.

Estudiante: Isis del C. Reyes V. III año. Programación Web. 7

Metodología para aplicar Css.
1.5. Elija un método para la posición de los bloques o capas.

En este paso se establece que posición debe llevar cada capa en una página web, para ello
hay varios propiedades que nos brindan estos diseños.

En la página diseñadas las propiedades aplicables para establecer la posición de cada página
están:

- contenedor: alineado en el centro de la página (margin:auto).

- Cabecera: alineado parte superior de la página.
- Menulineal: alineado horizontal, con fondo de color.
- Menú: flotante a la izquierda.
- Imagen derecha: flotante de la derecha.
- Cuerpo: alineado en el centro de la página.
- Pie de página: alineado horizontalmente.

1.6- Bloques resaltados

El comportamiento de las capas puede cambiar a un cierto grado cuando el contenido
verdadero se pone dentro de ellos. Sin embargo, este método de resaltar los bloques de color,
permite que usted se ocupe de las ediciones de colocación básicas primero, después contenta
ediciones una vez que se establezcan las capas.

Estudiante: Isis del C. Reyes V. III año. Programación Web. 8

Metodología para aplicar Css.
cabecera cabecera
menulineal Contenedor1, 2
contenedor Izquier- derecha
cuerpo da principal
menu

imagen

pie pie2, pie3

Maquetación: pagina principal Maquetación: páginas de resúmenes

los colores varían de acuerdo a los
temas. Ejemplo: resumen de html.

1.7-Iniciar con el contenido.

Una vez de probar el posicionamiento y haber pasado la prueba con los browser escogidos,
se debe proseguir a introducir el contenido del mismo, estos deben ser analizados por los browser.

Hay que tomar en cuenta los tamaños de fuente, la cual es recomendable utilizar en algunos
casos las unidades relativas como: % y em, la cual son manejados por casi todos los browser.

En las páginas XHMTL se aplican estas unidades em y en otros casos los píxeles a las
fuentes de cada bloque o elementos dentro de las capas.
Código CSS aplicado a una capa de página principal (isis1.css)
#cuerpo p {
color : #1a3a53;
margin : 10px 15px;
text-align : justify;
font-family : tahoma;
font-size : 11px;
font-weight : bold;
line-height : 1.5em;

Estudiante: Isis del C. Reyes V. III año. Programación Web. 9

Metodología para aplicar Css.
 }
Generalmente, se utiliza una combinación de varias propiedades y como se mencionó
anteriormente va depender del diseño que se quiere lograr.

1.8- Estilo dentro de los bloques o capas.

Una vez establecido la posición correcta y el contenido justo en lo deseado, es importante
establecer las clases e identificaciones donde cada capa se le aplicará a cada estilo, la cual estará
regido por valores y atributos respectivos a clases.

Cada sección de la página puede trabajarse individualmente y cómodamente en cada uno

de ellos.

Ejemplo de clases aplicados a las páginas XHTML:

<span class="ejemplos">Ejemplo visualizar:</span>
Esta clase tiene el estilo CSS siguiente:
.ejemplos{
color:#FF0000; el color del texto es rojo.
}
<img class="imagen_bloque" src="girl06.jpg" alt="aprender" />
Estilo CSS:
//la imagen flota a la derecha, con margen, alto y ancho establecido.
.imagen_bloque{
float:right;
margin:50px;
width:110px;
height:110px;
}

Estudiante: Isis del C. Reyes V. III año. Programación Web. 10

Metodología para aplicar Css.
1.9- Tomar en cuenta el CSS externo
Luego de haber probado la página nuevamente con los browser y tener una buena
disposición CSS y es necesario colocar el documento CSS y ponerlo en una hoja externa del sitio.
Esto se logra a través de 2 métodos o propiedades:

-hojas de estilo externa: la cual esta vinculada al documento XHMTL, la cual se convierte en una
hoja de estilo general que puede ser aplicada a otras páginas del diseño.
Se implementa en el codigo XHTML la siguiente sintaxis.
<link rel="stylesheet" href="isis1s.css" type="text/css" />
estilo css para paginas: principal, referencias y objetivo.
<link rel="stylesheet" href="isisW3C.css" type="text/css" />
estilo css para páginas de temas:XHML, HTML y CSS, la cual tiene estilos para visualizar en
Mozilla-Firefox.
<link rel="stylesheet" href="isisIE.css" type="text/css" />
estilo css para páginas de temas:XHML, HTML y CSS, la cual tiene estilos para visualizar en
Internet Explorer.

- hojas de estilo @import: es una hoja de estilo avanzada, la cual se utiliza para ocultar algunas
reglas del estilo CSS en browser antiguos.
Ejemplo: URL del @import(./stylesheet.css)

En la página XHTML se establece el estilo CSS externa, debido a la ventaja que presenta en
cuanto a la aplicación y aceptación de varias páginas Web.

1.10- Ocultar reglamentos de browser antiguos.

El método que usted utiliza ligarse para los archivos externos del CSS dependerá de su nivel
deseado de la ayuda del browser.

Estudiante: Isis del C. Reyes V. III año. Programación Web. 11

Metodología para aplicar Css.
 Si usted desea no hacer caso de más viejos browsers, usted podría las hojas ligadas uso
simple del estilo. Más viejos browsers rendirían muchas reglas mal y pueden hacerlo difícil para que
los usuarios tengan acceso a algo del contenido.

Para ignorar estos reglamentos se utiliza dos estilos:

- el primero con es estilo CSS externa;

- el segundo con el estilo @import)

Es importante seguir unos pasos tales como:

Método de encubrimiento:

1- Verificar su diseño en browser antiguos y se observa los elementos que no presenten

resultados deseados a un archivo asociado al @import css.
2- Variación aceptable: se puede presentar algunas variaciones pero éstas no deben ser
trascendentales, ya que siempre y cuando el usuario pueda acceder al contenido.

En las páginas XHTML no se utiliza el estilo @import css, sino, un código proporcinado por la
webtaller.com.

Creamos tres hojas de estilo:

isisIE.css: Declaración del layout para una visualización óptima en el Internet Explorer.
isisW3C.css: Declaración del layout para una visualización óptima en los browser que siguen los
estándares definidos por World Wide Web Consortium.
En la sección HEAD de la página web añadir el siguiente código:
<link rel="stylesheet” type="text/css” href="isisW3C.css">
<!–[if IE]>
<link rel="stylesheet” type="text/css” href="isisIE.css">
<![endif]–>

Método que se utilizó, ya que , lo que queda bien para Mozilla, queda descolocado en el IE y
viceversa. Es un problema. Sobre todo cuando proyectamos páginas con muchos bloques o capas.

Estudiante: Isis del C. Reyes V. III año. Programación Web. 12

Metodología para aplicar Css.
1.11-Imprimir CSS
Para imprimir el esquema de la página es necesario preparar el mismo para el proceso, la
cual se deben cambiar algunos valores del archivo CSS, y presentar al usuario una mejor visión de
la información, se debe guardar una copia del archivo con otro nombre en un lugar de la PC, luego
se prosigue a quitar los titulo de los menús, gráficos y menús laterales, además colores y
subrayados de enlace. Luego, se añade un nuevo enlace al documento XHTML.

De esta manera:

<link rel=”stylesheet” ref.=”print.css” media=screen”>

De esta forma podrá imprimir la información de su página Web.

Estudiante: Isis del C. Reyes V. III año. Programación Web. 13

Metodología para aplicar Css.
 II- COMENTARIOS

Luego de haber realizado este proyecto de metodología para CSS, puedo decir que he
aprendido mucho de las páginas web con estilos CSS, no cabe duda que al momento de
confeccionar una página y documentarme del mismo, me ayudado a ver las diferencias del
lenguaje HTML y XHTML y la importancia de aplicar estilos a ambos.

No es lo mismo confeccionar una página Web, a través de una plataforma como FrontPage
de Microsoft , que programándola y diseñándola. La experiencia fue grata, me gusto mucho,
porque descubrí que haciendo se puede lograr muchas cosas.

Son varios los puntos que fueron importantes al elaborar estas páginas en XHTML uno de
ellos es la valoración de códigos XHTML y CSS, la cual nos ayuda enormemente a detectar
algunos errores de acuerdo al estándar de lenguaje que se utilice y las reglas que tienen cada
browser para visualizar los elementos de estilos css.

¿Cómo ayudó la metodología en la

realización del trabajo???

Todavía falta mucho para seguir aprendiendo, pero ahí vamos sobre la marcha.

Es importante revisar la sintaxis y la semántica.

¿Dónde publicó su trabajo??
Licenciatura en......debió quedar en el pie
En CSS dice................ esta clase se puede anudar.error de dedo que debe revisarse.
En general el trabajo está bueno con deficiencias en la cantidad de temas cubiertos. Sigue la
metodología propuesta y demuestra paso a paso cómo la usó que es lo que se esperaba.

Estudiante: Isis del C. Reyes V. III año. Programación Web. 14

Metodología para aplicar Css.