La sede Web

Sede de un sitio Web

En todos los proyectos en los que el diseño es parte fundamental, es importante tener las ideas claras desde el principio. Por lo que es importante dibujar un boceto.

Logotipo

Menú corporativo

Menú de

productosContenido de la pagina

Boceto

Cree su propio boceto y plantee un sitio

Estructura de paginas WEB

Estructura de paginas WEB

Estructura de paginas WEB

Estructura de paginas WEB

Elementos básicos del boceto

EL logotipo de la empresa se colocará en la esquina superior izquierda de la página

En la parte derecha se colocarán dos menús, uno de tipo corporativo y otro para los productos de la tienda, clasificados por categorías

Debajo del logotipo y a la izquierda del menú corporativo, se colocará una composición gráfica

Como fondo de la imagen se colocara una tela

Organización de la sede

Cree una carpeta en el nivel raíz de una unidad de disco duroA continuación y dentro de esa carpeta, cree otras dos, una

destinada a almacenar el sitio Web y otra destinada a almacenar todos los documentos originales que utilizara

C:

Proyecto

Originales

Sitio

Organice su sede de acuerdo al planteamiento de su sitio

Organización de la sede

En el interior de la carpeta de originales y del sitio se irán guardando las páginas Web, las imágenes y demás recursos que darán lugar al sitio Web final.

C:

Proyecto

Originales

Sitio

Documentos

Imágenes

Miniaturas

Sonidos

Documentos

Imágenes

Miniaturas

Sonidos

Adecue su sitio de acuerdo a sus necesidades

¿Por que se recomienda que maneje un directorio de originales?

Organización de la sede

Las carpetas más importantes son las creadas dentro de la carpeta

“sitio”paginas. En esta carpeta se guardan todas las páginas Web que constituyen el sitio Web.

imágenes. En esta carpeta se almacenaran todas las imágenes que se utilicen en el sitio Web.

miniaturas. En esta carpeta se guardan las miniaturas y demás elementos gráficos que no sean imágenes propiamente dichas, como, por ejemplo, las animaciones.

sonidos. Aquí se guardan los sonidos que se emplearan en el sitio.

Nota: Se dejara fuera únicamente la página de inicio, que quedará directamente almacenada en la carpeta sitio.

Organización de la sede

Consideraciones

originales. En esta carpeta se guardan todas las páginas originales del sitio y servirá como respaldo en caso de que desee revertir algún cambio.

Sí desea agregar alguna funcionalidad extra, bastara con crear una carpeta que satisfaga sus requerimientos con un nombre acorde a los mismos.

En el servidor donde se publicará el sitio, todos los documentos de éste deberán estar organizados de la misma forma que en el disco duro local.

A fin de evitar problemas, es conveniente que todos los nombres de archivo de todos los documentos del sitio Web estén en minúsculas, incluyendo la extensión y que únicamente hagan uso de letras, números y guiones.

La carpeta del sitio como todo su contenido, irá en minúsculas y sin letras acentuadas.

Resolución y navegador

Las diferencias en el hardware afectan al HTML.

Lo normal es diseñar los sitios Web para una resolución de 800 x 600, y avisar de ello en alguna parte de la página principal.

Al diseñar una página, se debe considerar que la zona de trabajo es de 800 puntos en horizontal, a los que debe restar lo que ocupe el borde de la ventana del navegador (si no esta maximizado) y la barra de desplazamiento derecha; y 600 puntos en vertical, a los que debe restar lo que ocupan la barra de titulo , la barra de menú y las barras de herramientas del navegador, la barra de desplazamiento inferior y la barra de estado del sistema operativo.

Por lo que se dispone de una superficie de, aproximadamente, 700 x 420 píxeles para una página Web que no precisaría ningún desplazamiento por parte del visitante.

Cuando desarrolle una página web, se debe probar en varios navegadores, para observar las diferencias.

HTML

Los documentos HTML son documentos de solo texto (ASCII), por lo que se puede escribir con cualquier editor o procesador de texto.

El código, para que el navegador lo entienda y lo pueda interpretar a fin de visualizarlo en pantalla, debe incluir unos

códigos especiales llamados “etiquetas”.

El documento HTML, o páginas web, deben guardarse como archivos de sólo texto y, con la extensión .html

Las etiquetas se introducen directamente en el documento y son las encargadas de controlar el formato y el diseño del documento final, definen vínculos a otros documentos u otras partes del mismo documento.

HTML

Las etiquetas de HTML deben ir entre marcadoras especiales para que el navegador las pueda reconocer y distinguir del texto propio del documento: estos marcadores son los símbolos de “menor que” (<) y mayor que (>)

Las etiquetas HTML no hacen distinción entre mayúsculas y minúsculas: <body> es lo mismo que <bODy>, <boDY> o <BODY.

Pero los estándares recomiendan el uso de minúsculas para las etiquetas HTML

Etiquetas HTML

Todo documento HTML debe comenzar y terminar con la etiqueta <html>, cuyo objetivo es identificar al documento como un documento HTML

<html> Mi primer documento HTML</html>

Se deben colocar siempre las etiquetas <html> </html> al principio y al final del documento, la primera recibe el nombre de etiqueta de apertura y la segunda el de etiqueta de cierre.

Etiquetas <head> y <body>

Todo documento HTML se divide en dos partes: el encabezado y el cuerpo.

El encabezado incluye información general acerca del documento, mientras que el cuerpo es su contenido real.

<html> <head> Encabezado del documento </head> Mi primer documento HTML</html>

El sangrado no es necesario para el correcto funcionamiento de un documento Web, siempre y cuando su estructura sea la correcta. Pero ayuda para ver la correspondencia entre parejas de etiquetas.

Etiquetas <head> y <body>

<html> <head> Encabezado del documento </head> <body> Mi primer documento HTML </body></html>

El documento comienza y termina con la etiqueta <html>, en sus versiones de apertura y cierre.

El documento está dividido en dos secciones (definidas por las etiquetas <head> y <body>, que deben estar dentro del bloque de código definidopor las etiquetas <html> y </html>

Cada pareja de etiquetas define un bloque, y cada bloque debe estar, en su totalidad dentro del bloque inmediatamente más exterior.

Etiquetas <head> y <body>

<html> <head> </head> <body> Mi primer documento HTML </body></html>

<html> <head> </head> <body> Mi primer documento HTML </head></ body l>

¿Los códigos mostrados son correctos?

SI No

¿Por que?

<H1> ... < /H1> Tamaño de letra (mas grande)

<H2> ... < /H2> Tamaño de letra<H3> ... < /H3> Tamaño de letra <H4> ... < /H4> Tamaño de letra<H5> ... < /H5> Tamaño de letra<H6> ... < /H6> Tamaño de letra

<CENTER> .. </CENTER><P> ... </P> Letra tipo Parrafo<B> ...</B> Tipo Bold<I> .. </I> Cursiva<TT> ... </TT> Tipo maquina de escribir<CODE> ...</Code>Courier<PRE> . . .</PRE><HR>

<! - ... -> Comentario

<HTML><HEAD><TITLE> Un ejemplo de Pagina WEB con HTML</TITLE></HEAD><BODY><H1>TIPO DE LETRA H1</H1><H2>TIPO DE LETRA H2</H2><H3>TIPO DE LETRA H3</H3><H4>TIPO DE LETRA H4</H4><H5>TIPO DE LETRA H5</H5><H6>TIPO DE LETRA H6</H6><HR><P>TIPO DE LETRA PARRAFO</P><HR><CENTER><B> <H3>TIPO DE LETRA CON BOLD</H3></B><I> <H3>TIPO DE LETRA CURSIVA</H3></I><TT> <H3>TIPO DE LETRA MAQUINA </H3></TT></CENTER><HR><! - Esto es un comentario -></BODY></HTML>

Ejemplo

Etiqueta <title>

<html> <head> <TITLE>Título del documento</TITLE> </head> <body> Mi primer documento HTML </body></html>

Como podrá observar, normalmente el navegador muestra en su barra de titulo el documento abierto. Este titulo se toma del contenido de la etiqueta <title> del documento HTML

Ejecute el siguiente código y observe su ejecución, comente a la clase como opera.

Ejercicio

1. Cambie la resolución de la pantalla de 800 x 600 puntos

2. Abra IE y redimensione su ventana al tamaño de la ventana, salvando la barra de tareas de windows: Importante: no redimensione la ventana; lo que tiene que hacer es tirar de sus bordes hasta ajustarla lo más posible a la pantalla del monitor.

3. Minimice la ventana del navegador para poder ver el escritorio.

4. Acceda a las propiedades de la pantalla y cambie la resolución a 1024 x 768

5. Si ahora establece la ventana del navegador, la vera más pequeña, porque la resolución de la pantalla es mayor, pero su tamaño será el equivalente a la resolución 800 x 600.

¿Cómo puede configurar la resolución de la pantalla?

¿Cómo puede cambiar la resolución de la pantalla de 800 x 600 puntos?

¿Cuál es la resolución idónea para trabajar?

¿La resolución de 1024 x 768 es recomendable para el diseño de sitios web, si, no y porque?

Teniendo una resolución de 1024 x 768 puntos como haría para no estar cambiando de resolución de pantalla y asegurarse de que las páginas se vean correctamente a 800 x 600

¿Cómo puede configurar la resolución de la pantalla?

¿Cómo puede cambiar la resolución de la pantalla de 800 x 600 puntos?

¿Cuál es la resolución idónea para trabajar?

¿La resolución de 1024 x 768 es recomendable para el diseño de sitios web, si, no y porque?

Teniendo una resolución de 1024 x 768 puntos como haría para no estar cambiando de resolución de pantalla para asegurarse de que las páginas se vean correctamente a 800 x 600

Ejercicio