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íaparaaplicar 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.............................................9
1.6- Bloques resaltados.......................................................................................................9
1.7-Iniciar con el contenido...............................................................................................10
1.8- Estilo dentro de los bloques o capas..........................................................................11

1.9- Tomar en cuenta el CSS externo...............................................................................13

1.10- Ocultar reglamentos de browser antiguos................................................................14
1.11-Imprimir CSS............................................................................................................15
II- COMENTARIOS.............................................................................................................16

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
Muestre actuales que tiene la Web.
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

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

Metodología para aplicar Css.
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.

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
imagen
Menú
Menú2 Titulo
Contenedor
Contenedor cuerpo 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.

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

Metodología para aplicar Css.
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.

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).

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

Metodología para aplicar Css.
<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. 8

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. 9

Metodología para aplicar Css.
cabecera cabecera
menulineal
derecha
Izquier-
da
menu
Contenedor1, 2
contenedor cuerpo principal
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;

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

Metodología para aplicar Css.
 font-family : tahoma;
font-size : 11px;
font-weight : bold;
line-height : 1.5em;
}
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;

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

Metodología para aplicar Css.
 width:110px;
height:110px;
}

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

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.

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

Metodología para aplicar Css.
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.

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

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

Metodología para aplicar Css.
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.

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. 15

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
¿Cómo ayudó css.
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. 16

Metodología para aplicar Css.
Estudiante: Isis del C. Reyes V. III año. Programación Web. 17
Metodología para aplicar Css.