Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: Créditos: 2 créditos

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos"

Emilia Ortíz Tebar
hace 8 años
Vistas:

1 Nivel: 5º semestre Horas semanales: 3 horas Código: Créditos: 2 créditos

2 Herramientas de DISEÑO: Recursos Gráficos Software de Diseño Lenguaje de Programación

3 Contenido curso practico; LENGUAJE PROGRAMACION HTML CSS Programa WYSIWYG (what you see is what you get) Adobe Dreamweaver Adobe Fireworks JAVA SCRIPT Adobe Flash PHP

4 HTML > Hyper Text Markup Languaje Lenguaje que permite estructurar la información de un documento con ayuda de etiquetas. Para simplificar las cosas permite decir: aquí muestro un párrafo de texto, aquí una imagen, aquí una palabra en negrita Dominar el lenguaje HTML es dominar el núcleo del proceso de creación de un site o sitio web. <etiqueta> contenido </etiqueta>

Para simplificar las cosas permite decir: aquí muestro un párrafo de texto, aquí una imagen,

5 CSS > Cascading Style Sheets Etiquetas que se encargan de dar formato o estilo al contenido de una pagina WEB. Párrafo { Color: negro; Tamaño: grande; Efecto: subrayado; }

6 Los contenidos de las páginas web se encuentran organizados en bloques. El bloque principal (bloque padre) es el BODY, que a su vez contiene a los demás bloques; el encabezado, botonera, párrafos, imágenes, tablas etc. Si se aplica un estilo al bloque rojo, por ejemplo, se aplicaran estilos a todos los demás bloques que este contiene. Esto se conoce como principio de herencia. Los estilos siempre se aplicaran de padres a hijos pero no al revés.

botonera, párrafos, imágenes, tablas etc.

7 3 maneras de aplicar CSS CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web. Una hoja de estilo externa, que es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra, (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página web. Un estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es excesivamente adecuada. Al incrustar el formateo dentro del documento de la página Web la descripción de la página, a nivel de código se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona.

Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.

8 CSS da formato a los cuadros rectangulares que se crean con HTML. Las posibilidades de formato de CSS se pueden dividir en tres áreas: Fuente y colores: Formato del contenido de los cuadros Distancias y bordes: formato de los propios cuadros (modelo de cajas) Layout: modifica la posición de los cuadros en la página web

colores: Formato del contenido de los cuadros Distancias y bordes: formato de

9 Hojas de Estilo en Cascada (css) Las hojas de estilo en cascada (Cascading Stylesheets) ofrecen propiedades para ampliar el lenguaje HTML en la representación visual de las páginas web. El lenguaje CSS, definido por primera vez el año 1996, es el más conocido y utilizado para definir las propiedades de formato de los diferentes elementos HTML. Este lenguaje permite vincular hojas de estilo a las paginas HTML, aportando la información sobre el aspecto visual de ellas, pudiendo separar completamente la estructura de contenidos de su representación. Qué aporta separar la estructura del diseño? Menos código Mas legibilidad Facilita las actualizaciones Accesibilidad Usabilidad Buscadores Costos económicos

Este lenguaje permite vincular hojas de estilo a las paginas HTML, aportando la información sobre el aspecto visual de ellas, pudiendo separar completamente la estructura de

10 Representación grafica de estructura de cajas utilizando la etiqueta DIV

11 Ejemplo de estructura de cajas en una lista HTML

12 <!DOCTYPE html PUBLIC > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Define como se llama el elemento raíz del documento (html) Que versión de HTML se utiliza (XHTML V1.0 Transitional) Donde se puede encontrar el libro gramatical correspondiente (URL) <html xmlns=" xml:lang="es" lang="es"> Su misión es garantizar la unicidad de los nombres de atributos y elementos El atributo lang indica el idioma en que está escrito la pagina (es=español) <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title> Nombre de la pagina </title> </head> En el head de la página encontramos información que analizaran los navegadores o motores de búsqueda. La etiqueta <meta > muestra metadatos útiles para servidores web, navegadores web y robots de motores de búsqueda La etiqueta <title> nombra a la pagina, apareciendo esta en la barra de titulo del navegador

0 Transitional) Donde se puede encontrar el libro gramatical correspondiente (URL) <html xmlns="http://www.w3.

13 <!DOCTYPE html PUBLIC > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Define como se llama el elemento raíz del documento (html) Que versión de HTML se utiliza (XHTML V1.0 Transitional) Donde se puede encontrar el libro gramatical correspondiente (URL) <html xmlns=" xml:lang="es" lang="es"> Su misión es garantizar la unicidad de los nombres de atributos y elementos El atributo lang indica el idioma en que está escrito la pagina (es=español) <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title> Nombre de la pagina </title> </head> En el head de la página encontramos información que analizaran los navegadores o motores de búsqueda. La etiqueta <meta > muestra metadatos útiles para servidores web, navegadores web y robots de motores de búsqueda La etiqueta <title> nombra a la pagina, apareciendo esta en la barra de titulo del navegador

Documentos relacionados

DESARROLLO WEB EN ENTORNO CLIENTE

DESARROLLO WEB EN ENTORNO CLIENTE CAPÍTULO 1: Selección de arquitecturas y herramientas de programación Juan Manuel Vara Mesa Marcos López Sanz David Granada Emanuel Irrazábal Jesús Javier Jiménez Hernández