Maritza

para reflejar estos envases. Por ejemplo: 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 Explorer, 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 CSSsoporte. Casi todos los sistemas de la regla serán puestos aquí. 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

no se coloca un
, 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.