Universidad de Panamá

Centro Regional Universitario de Veraguas

Facultad de Informática Electrónica y Comunicación

Lic. En Informática para la Gestión Educativa y Empresarial

Programación Web

Proyecto #1

Profesor

Diego, Santimateo

Estudiante

Mendoza, Maritza

6-708-600

Fecha de Entrega

2-05-2007
Objetivos
• Analizar un documento técnico escrito en inglés.
• Describir cada paso de la metodología presentada.
• Aplicar la metodología para dar estilo a un documento XHTML .

Descripción

Asignación individual que debe entregarse en CD o FD e incluye un documento

Word donde explica de que trata cada paso de la metodología y cómo lo aplica en este
trabajo, así como los documento XHTML y CSS.

Tarea

Elaborar un resumen en XHTML con CSS para darle estilo, de las referencias
HTML, XHTML y CSS ofrecidas en los apuntes del curso.
 Introducción

Este trabajo consiste en la presentación de una breve descripción de cada uno de los
pasos presentados en la página web:
http://maxdesign.com.au/presentation/process/index.htm .

Esta es una metodología que ayuda a organizar tu página web, a darle un buen estilo,
consiste en una secuencia de 11 pasos, descritos en inglés, que te guían en la forma
en que puedes ir creando tus contenedores y demás.

Lo primero que se presenta en el contenido de este documento, es una descripción de

cada paso y luego la forma en que lo aplique.

Usa modo personal e impersonal para redactar!!!!!!!!!!

Descripción de cada paso de la metodología

Introducción a los pasos:

En esta breve introducción se nos dice que se iniciará con una maqueta gráfica básica
y que la convertiremos en una página HTML. El objetivo no es centrarse en este
ejemplo en particular, sino el proceso total usado.

• Construya un paso a la vez y pruebe cada paso a través de una gama de

browsers o navegadores.

Es absolutamente fácil comenzar a construir un bosquejo y ver venir a un problema a

medio camino. Para evitar esto, intente construir su bosquejo en pasos pequeños y
pruebe cada paso a través de una gama de browsers o navegadores. Esto significa que
usted puede ver exactamente cómo está progresando el bosquejo sin necesidad de
volver atrás para ver si está funcionando.

Bueno yo tome en cuenta este consejo, ya que fui probando mi página a través de dos
navegadores Internet Explorer 6.0 y Firefox 2.3. Hago mención que mi página no se
visualiza del todo bien, con FireFox ya que cambia más que todo en la portada, tuve de
probarla también a través de IE 7.0 y también cambió, a pesar de que en el 6.0 se
visualiza bien, se modifica al pasar de una versión a otra.

• La estructura para los browsers modernos entonces a la inversa

Es mejor comenzar construyendo el bosquejo siguiendo los estandares de los

navegadores web, para después hacer work-arounds tales como ocultar (vía @import)
para más navegadotes mas viejos.

• Cuando la construcción y la prueba, utilizan el CSS en la cabecera del

documento

Es mucho más fácil comenzar a construir sus layouts con el CSS en la cabecera del
documento - es más rápido, y evita la edición del caché. Cuando usted ha acabado
totalmente el bosquejo, el CSS se puede quitar y poner en las hojas externas del estilo.

• Valide su código del HTML y CSS

Valide su HTML y CSS con frecuencia. Muchos problemas de los layouts se pueden
fijar con una revisión rápida de la validación.
Tomé en cuenta este paso de validar mi código a través de esta dirección:
http://validator.w3.org/
Pasos:

1. Decida sobre un nivel de la ayuda del browser:

Antes de comenzar a construir un layout basada en CSS, usted debe decidir qué
browsers va a trabajar y a qué nivel usted se prepone trabajar con estos. Para tomar
una decisión final se recomienda hablar con los clientes y posibles usuarios; también
se debe tomar en cuenta la revisión de archivos log en caso de existir.

Hay tres niveles básicos de browsers que apoyan el CSS:

Browsers Antiguos:

Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x,

etc

Browsers recientes:

Win/InternetExplore 5, Win/InternetExplore 5.5, Win/Netscape 6, Win/Mozilla1.x,

Win/Opera6, Mac/Netscape6, Mac/Mozilla1.x, Mac/Opera5 etc

Browsers modernos

Win/InternetExplore 6, Win/ Netscape7, Win/Mozilla1.5, Win/Firebird0.7, Win/Opera7,

Mac/InternetExplore5.2, Mac/Safari1, Mac/ Netscape7, Mac/Mozilla1.5, Mac/Opera6 etc

Niveles de soporte:

Soporte completo del CSS: El browser se sirve todas las reglas del CSS y debe
exhibir el layout con un porcentaje razonablemente exacto. Si se desea proporcionar el
máximo soporte para browsers más antiguos, se deberá utilizar un CSS bien básico y
evitar una instalación compleja del CSS.

Soporte parcial del CSS: Ciertas reglas del CSS se ocultan de un browser particular.
Esto significa generalmente que el browser no puede mostrar el layout exactamente,
exhibiéndolo con cierto grado de inmovilidad con respecto a la presentación total. Por
ejemplo, esto podría significar que las fuentes y los colores están se despliegan
correctamente pero fallando en ciertos aspectos de la colocación. Puede ocultar el
contenido de Unstyled utilizando algún browser en particular.

En mi caso probé mi página en los navegadores Internet Explorer 6.0 y Mozilla

FIREFOX 2.0.3.
2. Observar los contenedores:

Para colocar elementos en la página, los contenedores totales necesitan ser

establecidos. Mire su diseño (que podría estar bajo la forma de maqueta digital,
bosquejo en el papel o sitio /plantilla existentes) y resuelva los contenedores principales
en la página.
Yo decidí que mi página tendría los siguientes contenedores:
• El primero será el principal, es decir el que abarcará todo.
• Otro que tendrá que llevar los menú principal, el que controla las páginas
externas como CSS, HTML, XHTML.
• Habrá también otro contenedor que se encargará de la parte del menú
interno de cada página.
• Hay un contenedor que se encargará de los títulos de cada página, es
decir es el lugar donde van los cabezales o títulos principales.
• Así mismo contaré también con un contenedor para la parte textual.
• También tendré un contenedor para el final de mi página, para colocar el
autor de la página.

3. Nombre de los contenedores:

Estos contenedores se convertirán en los elementos principales del <div> que llevarán
a cabo su contenido, así que usted debe darles los nombres que tienen el significado
semántico más bien que nombres que describan su aspecto.

Tomé en cuenta este consejo y le aplique nombres los suficientemente entendibles, que
tienen relación, al contenido.

Seleccioné los siguientes:

• Para el contenedor que tiene todo, lo llamé: contenedor.

• El contenedor encargado de tener los títulos principales, resolví llamarlos

cabecerasportada, y cabecera, ya que tengo dos tipos de cabeceras, la que
pertenece a la portada y la otra que pertenece a las demás cabeceras, de las
demás páginas.

• A la parte textual lo llamé texto.

• Para el menú, elaboré dos contenedores, un contenedor tiene el menú principal, es

decir el que aparece en todas las páginas, como por ejemplo: XHTML, CSS,
HOME, y Contáctanos. A este menú lo llamé menúprincipal, el otro contenedor
 llamado menú a secas, es el encargado de llevar el índice o contenido de cada
página por individual.

• Cuento también con un contenedor llamado pie, que se encarga de llevar el nombre
del autor de la página.

• La imagen de la portada es otro contenedor que se encarga de la imagen de la

página principal.

• También tengo unas clases que se encargan del tamaño de ciertas imágenes y de
los colores de los títulos y subtítulos.

4. Marque los contenedores: Cree algunos elementos vacíos del <div> para reflejar
estos envases.
Por ejemplo:
<div id="container">
<div id="header"></div>
<div id="mainnav"></div>
<div id="menú"></div>
<div id="contents"></div>
<div id="footer"></div>
</div>

En mi caso yo colocaré los contairner antes mencionados, ya que estos nombres que
yo asigné me parecen lo suficientemente adecuados.

5. Elija un método para la posición de los envases: Mire su diseño y decida cómo
cada uno de los contenedores será colocado.

• ¿El layout será liquid, fixed-width, em-driven o una combinación?

• ¿El layout será centrada en la página?
• ¿Qué contenedores necesitarán ser flotantes?
• ¿Qué contenedores estarán en flujo normal?
• ¿Usted necesita utilizar la colocación absoluta?

Éste es probablemente el paso más duro, pues la experiencia entra en juego. Por este
ejemplo, los métodos de colocación estarán:

• contenedor - en línea, centrado en la página

• cabecera - en línea
• mainnav - en línea
• menú - flotador: la derecha
• contenido - en línea con margen-derecho para dar la ilusión de columnas
 • pie - en línea, con el claro: ambos al claro cual quieras artículos flotados arriba

Mis contenedores estarán de la siguiente forma:

• El contendor principal tendrá margen automático.

• El contenedor del menú interno de cada página estará flotando a la derecha.

• El contenedor del texto estará flotando a la izquierda, tiene pequeños márgenes

a la izquierda y a la derecha.

• El contenedor del pie es decir donde va el autor de la página, está a lo largo de

la página.

• El contenedor del menú principal, el que contiene el menú donde están las
páginas de CSS, XHTML, HTML, está a lo largo de todo el ancho de la página.

6. Cajas coloreadas:

Estos contenedores principales se deben ahora trabajar con un método de colocación.

Para hacerlo más fácil, cada uno de ellos será dado una altura y un color único del
fondo - hechos en una caja coloreada. Es importante, que usted haga un solo paso
entonces pruebe a través de los browsers. Esto ahorra la vuelta hacia atrás si ocurren
los problemas.
El comportamiento de los contenedores puede cambiar a un cierto grado cuando el
contenido verdadero se pone dentro de ellos. Sin embargo, este método del colorante
permite que detectar cualquier defecto.

Seguí los pasos, y cree mi página igual que este ejemplo, que se nos presenta,
fue mucho más sencillo, utilicé 6 cajas:
• Una caja que es la principal llamada contenedor.
• Otra Caja llamada cabecera.
• Caja llamada cabeceraprincipal
• Una caja para el menú de cada página.
• Una caja para el menú principal.
• También utilice una para el contenido.
• Y por último una para el pie de página.

Este paso me ayudo bastante ya que, mostraban la forma en que iban construyendo
cada div o contenedor y se podía observar la forma en que se colocaban cada uno de
ellos.
7. Gota en el contenido:
Cuando los contenedores se han colocado correctamente y funcionan correctamente a
través de todos los browsers, las alturas pueden ser quitadas. Entonces una pequeña
representación del texto se puede agregar a cada contenedor. El contenido semántico
debe ser el correcto - así que utilice h1, h2 etc. para los títulos, los párrafos para el
texto etc. Una vez más los resultados se deben probar a través de una gama de
browsers.
Probé mi página con Internet Explorer y Mozilla FireFox, me funcionó en Internet Explo-
rer, pero en FireFox no lo logré ya que al cambiar lo del tamaño y el ancho para ver si
lograba acomodarlas, se destruía la otra, la verdad quisiera aprender como lograr que
funcionaran en ambos.

Una nota sobre los tamaños de la fuente

El tamaño de la fuente es un tema muy importante. Cada uno tiene una opinión sobre
cuál es el tamaño correcto e incorrecto. Actualmente, parece haber dos opciones
principales:

Dejar los tamaños de fuente solos

No definir los tamaños de fuente en todos. En lugar, permita a las hojas del estilo del
browser (http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm#browser) o
las hojas del estilo del
usuario(http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm#user) para
determinar tamaños de fuente.

Utilice las unidades relativas para definir tamaños de fuente

Si el tamaño de la fuente va a ser modificado, éste es el método preferido. El tamaño

de la fuente se fija con porcentaje o las unidades del em. Pueden ser vueltos a
clasificar según el tamaño en casi todos los browsers y son conducidos por la
preferencia del tamaño de fuente del usuario, así que los usuarios pueden ajustar el
tamaño del contenido para satisfacer sus necesidades.

Yo coloqué 12px de fuente para el contenedor principal , y aumenté el tamaño de la

fuente para ciertos contenedores donde quería resaltar, los textos.
Utilicé como me lo recomendó esta página, los títulos que denotan más importancia,
como es el caso del h1,h2,h2 etc.
8- El estilo dentro de los contenedores:

Este paso lo que nos dice es que si se tiene los contenedores en la posición
correcta y el contenido se está comportando aceptablemente, puede comenzar a
trabajar el contenido dentro de los contenedores.

Se recomienda:

Clases e identificaciones

Utilice cuanto menos identificaciones y clases sea posible. Usted debe poder
trabajar con casi cualquier elemento dentro de un contenedor usando los
selectores descendientes.
Para mi página tomé en cuenta este paso ya que utilicé algunas clases que se
encargaron de llevar el control de los colores de las letras, y de los tamaños de las
imágenes.

9. Tomar hacia fuera el CSS:

Cuando usted es totalmente feliz con la disposición a través de todos los

browsers , usted puede tomar el CSS de la cabecera del documento y ponerlo en
una hoja externa del estilo. Hay dos métodos de archivos que se ligan para
trabajar las hojas:

Hoja ligada del estilo

Ésta es la hoja general del estilo que es vista por todos los browsers de CSS-
soporte. Casi todos los sistemas de la regla serán puestos aquí.

<link rel="stylesheet" href="stylesheet1.css" media="screen">

Mi página con su css, en un archivo externo y lo ligué por medio de la expresión antes
mencionada al XHTML, solo tengo un css que controla las 5 páginas.

10. Reglas que ocultan los browsers antiguos:

Elegir un método

El método que usted utiliza para ligarse a los archivos externos del CSS
dependerá de su nivel deseado de la ayuda del browser.
Si usted desea no hacer caso de los browser antiguos, usted debe utilizar las hojas
ligadas de uso simple del estilo. Los browsers antiguos rendirían muchas reglas mal.

Cada navegador o browsers, tiene sus reglas que permiten visulizar nuestras páginas,
y entre los navegadores esto varía, es decir probamente la página que logres
visualizar con I.E bastante bien, puede que no suceda lo mismo con otro navegador. Es
por ello que nosotros somos los que debemos moldear nuestra página para que se
pueda visualizar.

11. Impresión CSS:

Finalmente, necesitamos preparar el layout para imprimir. Si usted desea reproducir

fielmente el layout en pantalla, usted podría cambiar los acoplamientos a sus hojas
externas del estilo para poderlos alcanzar por las impresoras. Hay muchas maneras de
hacer esto incluyendo el media= " todo " y el media= " pantalla, impresión ".

95/100
 Conclusión

• Este trabajo fue un poco extenso, pero fue interesante, ya que se pudo obtener más
conocimientos referentes a cada unos de estos temas, html, xhtml, css.

• Considero que fue una buena metodología, la utilizada para realizar este proyecto
#1, la guía ofrecida en la página:
http://maxdesign.com.au/presentation/process/index.htm.

• Me parece que CSS es una herramienta muy buena, ya que puedes tener todo el
control sobre varias páginas, en un solo archivo, y con un código lo bastante legible.

• El lenguaje XHTML, como lo citaron muchos autores, de páginas web, es la

sucesión de HTML, pero una versión mucho más estricta y moderna.

• Hay diferencias entre los tipos de documentos XHTML que se elaboren, existe el
estricto, transicional y frameset, en mi caso trabajé con el estricto, ya que según la
definición entendí que cuando se trabaja con css externo, se utiliza el estricto.
Si el estilo se le da dentro de la misma página xhtml, entonces se puede utilizar el
transicional.
• La experiencia de validar el css y los códigos html, es muy importante, de esta
manera comprendí por ejemplo, que dentro de una etiqueta h1 no puede llevar una
clase, que después de una <li> no se coloca un <br />, y muchas cosas más. A
veces sin darnos cuenta no se coloca el “/” de cierre de una etiqueta y allí el
validator te lo indicaba.
• Comprendí que no todos los navegadores te aceptan tu página, existen reglas entre
ellos, que varían de un navegador a otro.
• Inclusive varían en el mismo navegador, de una versión a otra, ya que mi página
funciona bien I.E 6.0 y en I.E 7.0 no se visualiza correctamente.
• Para finalizar la dirección de mi página es:
• http://es.geocities.com/maritzamendozapagina/proyecto1.html

Se ve la consistencia del trabajo, tal como lo sugiere la metodología, cubre bastante

bien los contenidos.
 Se puede observar que el contenido del documento HTML, no es lo desplegado en la
imagen. Además en la página principal revise ortografía.