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.

Presentación del tema: "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."— Transcripción de la presentación:

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

2 Logotipo Menú corporativo Menú de productos Contenido de la pagina Boceto Cree su propio boceto y plantee un sitio

3 Estructura de paginas WEB

4

5

6

7 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

8 Organización de la sede Cree una carpeta en el nivel raíz de una unidad de disco duro A 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

9 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

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

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

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

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

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

15 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 ( ) Las etiquetas HTML no hacen distinción entre mayúsculas y minúsculas: es lo mismo que, o <BODY. Pero los estándares recomiendan el uso de minúsculas para las etiquetas HTML

16 Etiquetas HTML Todo documento HTML debe comenzar y terminar con la etiqueta, cuyo objetivo es identificar al documento como un documento HTML Mi primer documento HTML Se deben colocar siempre las etiquetas al principio y al final del documento, la primera recibe el nombre de etiqueta de apertura y la segunda el de etiqueta de cierre.

17 Etiquetas y 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. Encabezado del documento Mi primer documento 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.

18 Etiquetas y Encabezado del documento Mi primer documento HTML El documento comienza y termina con la etiqueta, en sus versiones de apertura y cierre. El documento está dividido en dos secciones (definidas por las etiquetas y, que deben estar dentro del bloque de código definidopor las etiquetas y Cada pareja de etiquetas define un bloque, y cada bloque debe estar, en su totalidad dentro del bloque inmediatamente más exterior.

19 Etiquetas y Mi primer documento HTML Mi primer documento HTML ¿ Los códigos mostrados son correctos ? SINo ¿Por que?

20 ... Tamaño de letra (mas grande)... Tamaño de letra

21 ..... Letra tipo Parrafo... Tipo Bold.. Cursiva... Tipo maquina de escribir... Courier... Comentario

22 Un ejemplo de Pagina WEB con HTML TIPO DE LETRA H1 TIPO DE LETRA H2 TIPO DE LETRA H3 TIPO DE LETRA H4 TIPO DE LETRA H5 TIPO DE LETRA H6 TIPO DE LETRA PARRAFO TIPO DE LETRA CON BOLD TIPO DE LETRA CURSIVA TIPO DE LETRA MAQUINA Ejemplo

23 Etiqueta Título del documento Mi primer documento 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 del documento HTML Ejecute el siguiente código y observe su ejecución, comente a la clase como opera.

24 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

25 ¿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