Diseño orientado a la web. El lenguaje gráfico en la web [10.1] Cómo estudiar este tema? [10.2] El color y la tipografía en la web [10.3] El código HTML y las CSS [10.4] Java y JavaScript TEMA
Esquema TEMA 10 Esquema
Ideas clave 10.1. Cómo estudiar este tema? Para estudiar este tema lee el capítulo 3 (páginas 148-155) del manual de la asignatura: Manual de diseño gráfico digital, de Bob Gordon y Maggie Gordon (Editorial Gustavo Gili, SL), además de las Ideas clave. 10.2. El color y la tipografía en la web El color Las principales diferencias de trabajar en soporte web con respecto al soporte impreso son: En la web no se aplican las normas que se asignan a los colores CMYK o pantone. Los monitores muestran los colores a través de la mezcla aditiva de RGB (rojo, verde y azul), que con su combinación son capaces de mostrar millones de colores. Anteriormente, los ordenadores solo podían manejar una paleta de 256 colores. Tanto los PC como los Mac contaban con una paleta estándar de 256 colores, que en algunas ocasiones no se veía correctamente. De ahí nació la paleta WebSafe. TEMA 10 Ideas clave
La paleta WebSafe ha quedado obsoleta, puesto que los monitores de 8 bits (256 colores) han desaparecido, pero se ha recuperado para ser utilizada en dispositivos como móviles o PDAs. La tipografía En HTML tenemos muy poco control tipográfico. Las hojas de estilo en cascada (CSS) permiten tener menos limitaciones en HTML, puesto que permiten la asignación de color, familia tamaños, pesos, alineación, espaciados de línea, palabras y caja. Sin embargo, estamos limitados en la medida en que solamente disponemos de unas pocas fuentes que podemos utilizar para mostrar el contenido en texto de la página web. TEMA 10 Ideas clave
Se pueden definir fuentes alternativas, pero esto impondría al usuario la necesidad de descargarse e instalar esa fuente en su ordenador para poder visualizar la web tal y como la hemos creado. Lógicamente esto no resulta práctico y hemos de ceñirnos a las fuentes antes citadas que se denominan fuentes WebSafe. Cuando tenemos que utilizar un tipo específico por necesidades corporativas o creativas, la solución consiste en componer en una imagen el texto y utilizarla como contenido grafico de nuestra web (sin olvidar asignar una etiqueta "alt" para que sea accesible a las personas con problemas de visión que usen un navegador adaptado). TEMA 10 Ideas clave
10.3. HTML, el código secreto El código HTML es el esqueleto que sostiene la interfaz visual de internet. Esta detrás de toda página web, informando al navegador dónde colocar imágenes, textos y medios. El HTML está compuesto de elementos que estructuran semánticamente la página web. El HTML está formado por un conjunto de etiquetas y atributos de formateo de texto. Un elemento de HTML está formado por una etiqueta de inicio, un contenido y una etiqueta de cierre. Un párrafo se abre con la etiqueta <p> luego va su contenido y termina con la etiqueta </p>. El contenido ha de estar encerrado dentro de la etiqueta<html></ html>, y los elementos a visualizar en el navegador se sitúa dentro de la etiqueta <body></body>. La etiqueta <head></head> alberga información descriptiva. Una web se puede construir con la única herramienta de un editor de textos, pero existen programas WYSIWYG (lo que ves es lo que obtienes), que permiten una edición más visual, por ejemplo, Dreamweaver. 10.4. Java y JavaScript Java y JavaScript son lenguajes de codificación que añaden interactividad a las páginas web. El JavaScript da instrucciones específicas al navegador. Los Scripts van junto con el HTML o se adjuntan como documentos que el navegador interpreta y ejecuta. El Java se utiliza para la creación de aplicaciones. TEMA 10 Ideas clave
Lo + recomendado Clases magistrales HTML, el lenguaje secreto Duración: 15:49 min. En esta nueva sesión magistral nos centraremos en el código HTML, lenguaje predominante en la creación de páginas web. El video está disponible en el aula virtual No dejes de leer Introducción a XHTML En el siguiente enlace podrás descargar un libro de Javier Eguiluz Pérez, con el que podrás aprender más sobre el lenguaje XHTML. El artículo está disponible en el aula virtual o en la siguiente dirección web: http://www.librosweb.es/xhtml/pdf/introduccion_xhtml_2caras.pdf TEMA 10 Lo + recomendado
Introducción a CSS En el siguiente enlace encontrarás otro libro gratuito de Javier Eguiluz Pérez, en el que se realiza una introducción a las hojas de estilo CSS. El artículo está disponible en el aula virtual o en la siguiente dirección web: http://www.librosweb.es/css/index.html TEMA 10 Lo + recomendado
+ Información A fondo Publicar en internet Artículo sobre la publicación de una página en la web. Podrás ver qué es internet y los servicios que ofrece. Además podrás aprender qué es un servidor y para qué sirve. El artículo está disponible en el aula virtual o en la siguiente dirección web: http://www.desarrolloweb.com/articulos/introduccion-internet.html Webgrafía W3schools Página de aprendizaje la World Wide Web Consortium. En W3Schools encontrarás todo el material que necesitas para construir tu sitio web, desde HTML básico y XHTML hasta XML avanzado. http://www.w3schools.com/ Aula clic En el siguiente enlace podrás encontrar un tutorial sobre HTML. http://www.aulaclic.es/html/ TEMA 10 + Información
Bibliografía NIERDERST, J. Diseño web. Guía de referencia. Ed. Anaya Multimedia. 2006. ZELDMAN, J. Diseño con estándares web. Ed. Anaya Multimedia. Madrid. 2004. TEMA 10 + Información
Test 1. La paleta WebSafe está compuesta por A. 256 colores. B. 216 colores. C. 32 bits. 2. Cuál de las siguientes familias tipográficas no es WebSafe? A. Arial. B. Courier New. C. Helvetica. 3. Las fuentes en web se miden en A. Picas. B. Píxeles. C. Píxeles y porcentajes. 4. En caso de querer usar topografías no WebSafe para un titular una buena solución sería A. Obligar al usuario a descargase la tipografía al ordenador. B. Generar una imagen con el texto a destacar y colocarla como titular. C. Comprarnos un Mac. 5. Cuál de las siguientes es la manera correcta de cerrar una etiqueta párrafo de HTML A. <p> B. </p> C. <p/> 6. Todo el texto que queramos que se vea en nuestra página web ha de ir dentro de la etiqueta A. <body><body> B. <head></head> C. <body></body> TEMA 10 Test
7. La información descriptiva de la página debe ir dentro de la etiqueta A. <html><html> B. <head></head> C. <body></body> 8. Las CSS son A. Las diferentes ediciones de los programas de Adobe. B. Las hojas de estilo para HTML. C. Las etiquetas que modifican los comportamientos de JavaScript. 9. Un Applet es A. Una aplicación web de Java. B. Una etiqueta que se aplica al XML. C. Una etiqueta que se aplica al XHTML. 10. Java es A. Un lenguaje de programación para crear aplicaciones web. B. Un Hutt. C. Una instrucción específica para los navegadores. TEMA 10 Test