Descargar el PDF

Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 1 -
CONCEPTOS BÁSICOS
1. Historia de Internet
1962 – La primera descripción documentada acerca de las interacciones sociales que podrían ser proporcionadas
a través del “networking” (trabajo en red) esta contenida en un momerandums de J.C.R. Licklider del
Massachussets Institute of Technology que se llamó Galactic Network (red galáctica).
1966-1967 – Se desarrolla el concepto red de ordenadores, “arpanet” y se publica por Lawrence G. Roberts.
1968 – Roberts descubre que su desarrollo de red de redes, se había desarrollado paralelamente en el ámbito
militar.
1961 – 1967. M.I.T.
1962 – 1965. R.A.N.D.
1964 -1967. N.P.L.
Eran redes de comunicación de paquetes para la comunicación segura militar.
1969 – Aparece la primera Internet con el primer ordenador “host” en UCLA, creando una red entre las
universidades de California, Sta. Barbara y UTAH.
1969 – 1972 – Las demás universidades empiezan a sumarse a esa red de intercambio de información.
1972 – Se presenta la primera presentación pública de la nueva Tecnología de red. Se desarrolla el mensaje
electrónico, debido a la necesidad de los usuarios a recibir, enviar y almacenar elementos.
1983 – Se separa de forma definitiva la parte militar de la civil.
ARPANET : - INTERNET
-
MILNET
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 2 -
2. ¿Qué es Internet?
Red mundial de redes de ordenadores , que permite la comunicación directa y transparente para compartir
información y servicios entre usuarios.
3. Servicios que ofrece Internet
Veamos los principales:
1. www (World Wide Web).
2. correo electrónico
3. FTP.
1. www. World Wide Web.
Servicio abreviado normalmente como web, es la oferta más atractiva de un estándar para presentar y visualizar
páginas de información que incluyen entre otras cosas: textos, fotos, sonidos…La difusión de información lo hace a
través de páginas web.
2. correo electrónico.
Intercambio con destinatario definido de elementos como textos, imágenes, música, videos…
Es asíncrono (no hace falta que el destinatario este conectado).
3. FTP.
Lo crea en 1989 Tim Berner para el intercambio de archivos de cierto “peso”.
Sistema de intercambio y descarga de archivos en Internet.
4. ¿Qué es una página web?
Es el soporte más utilizado para publicar la información en la www.
Las páginas web se pueden presentar con textos, gráficos, imágenes, sonidos, etc…de lo más característico de las
páginas web son los enlaces, los cuales aparecen normalmente resaltados (colores, subrayados…) y de todos se
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 3 –
Identifican por el cambio del puntero del ratón (pasa habitualmente de flecha a mano).
Las páginas web se desarrollan en cualquier editor de texto, en algunos casos no es ni necesario conocer HTML.
Ahora mismo la mayoría de procesadores de red (Word, UltraEdit, HomeSite…) incorporan módulos específicos
para convertir un documento en una página web.
Una vez terminada la página web, esta debe ser alojada en un servidor para ser visible, a través de una dirección
específica (URL) en Internet.
5. Los protocolos.
Para que la comunicación entre dos ordenadores sea posible es indispensable que ambos hablen el mismo idioma,
que tengan el mismo protocolo de comunicación.
EL protocolo es el conjunto de reglas que determinan como se realizará el intercambio de información entre dos
ordenadores.
1. I.P. Internet Protocol.
2. H.T.T.P. HyperText Transfer Protocol.
3. F.T.P. File Transfer Protocol.
4. S.M.T.P. Simple Mail Transfer Protocol.
5. P.O.P. Post Office Protocol.
1. I.P. Internet Protocol.
Encargado de definir como se envían los datos y se establece la comunicación entre los componentes de una red.
EL número IP representa una serie de números específicos (cuatro grupos de valores entre 0 y 255) que se asigna
a cada máquina que está conectada a la red por medio de un DNS, convirtiendo los números IP a nombres
comunes.
2. H.T.T.P. HyperText Transfer Protocol.
Protocolo de Transferencia de Hipertexto.
Se utiliza en la red para transmitir las páginas de información entre el programa navegador y servidor.
3. F.T.P. File Transfer Protocol.
Ya hemos visto FTP en los servicios de Internet.
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 4 –
4. S.M.T.P. Simple Mail Transfer Protocol.
Es el conocido correo saliente.
5. P.O.P. Post Office Protocol.
Es el conocido correo entrante.
6. Otros términos.
1. IRC (Internet Relay Channel).
Todos lo llamamos Chat.
El usuario establece comunicación en tiempo real, las cuales pueden ser privadas o entre un grupo de personas.
Los métodos de comunicación pueden ser : teclado, audio y video.
2. H.T.M.L. HyperText Markup Language.
Lenguaje utilizado en el desarrollo de páginas web mediante etiquetas.
3.URL. (Localizador de Recurso Uniforme)
Nombre único que reciben los distintos recursos que se pueden encontrar en la red.
Una URL identifica tanto al ordenador de Internet como al servicio o recurso determinado de ese ordenador al que
se quiere acceder, pues es muy común que un mismo servidor de Internet preste varios servicios:
- Página web - http
- Archivos – ftp
- Correos – e-mail.
4.D.N.S. (Domain Name Server)
Servidor de Nombres de Dominio.
Servidores automáticos de internet que convierten nombres fáciles de entender “www.empresa.com” en
número IP “189.0.33.240”.
5.W3C (WWW Consortium)
Organismo que se encarga de standarizar el HTML.
Es un consejo de empresas lideradas por el MIT (Instituto Tecnológico de Massachusset).
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 5 -
¿INTERFAZ?
Ya hemos descrito los principales puntos a descubrir a la hora de ver, conocer y descubrir Internet. Ahora lo que
veremos será la parte “visible”, lo que nosotros descubrimos, utilizamos y estudiamos día a día, la interfaz.
1. ¿Qué es interfaz?.
Lenguaje que una máquina utiliza para comunicarse con un usuario (y viceversa).
2. Elementos para la composición de un interfaz.
2.1. Usabilidad.
2.2. Interacción.
2.3. Navegación.
2.1. Usabilidad.
Facilidad de uso de una aplicación, producto o diseño gráfico.
Aunque suene sencillo, no todos los productos sirven para todo el mundo, hay que tener presente siempre nuestro
cliente potencial.
No todos los productos son para todo el mundo.
Hay que tener en cuenta si nuestro cliente conoce o domina:
- Lenguaje verbal
- Lenguaje no verbal
- Mensajes sonoros
- Interactuar con la información.
2.2. Interacción.
Es el modo que un individuo se comunica con la máquina.
Si el interfaz es un lenguaje, la “interacción” es el “vocabulario”.
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 6 -
La interacción se puede realizar a través de:
- Botones
- Cuestionarios
- Menús
- “Check Box”
- Etc…
2.3. Navegación.
Los principales tipos de navegación:
2.3.1. Lineal.
Típica presentación de diapositivas.
Botones básicos de avanzar y volver
2.3.2. Ramificada.
En cada pantalla el usuario debe escoger dos o más caminos.
Permite acceso entre los mismos niveles
2.3.3. Jerárquica.
Parecida a la ramificada pero los niveles funcionan como aplicaciones independientes.
Para saltar de tema hay que volver al menú del nivel anterior.
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 7 –
3. Elementos de la interfaz.
3.1. Estilo, diseño de conjunto.
- Orientar al usuario
- Dar apariencia gráfica
- Vender la idea del producto
3.2. Metáforas.
- Se simula en el contorno virtual lo que existe en el entorno real.
3.2.1. Metáforas Directas.
- de objeto (un libro, fichas, album…)
- de espacio (habitación, naturaleza…)
- de situación (visita, exposición…)
3.2.2. Metáforas Indirectas.
- mapa de orientación (mapa web)
- ayudas
- zonas activas (pasadizos, puertas, ventanas…)
3.3. Tipografía.
- Tener muy claro que tipo de tipografía utilizar (no todos los ordenadores tienen las mismas tipografías).
- Si hay mucha información escrita, tipográfica de palo seco y de cómoda lectura, con cuidado de fondos y
tamaños.
- Si hay mucho texto, dar la opción al visitante de imprimirlo con un pdf o Word.
- Evitar texto en flash (no se puede imprimir).
3.4. Colores y Texturas.
- Colores y texturas, representan el color corporativo de la empresa.
- ¿Merece la pena usar el mismo color de fondo? Es más cómodo jugar con el color corporativo y sus distintas
gamas.
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 8 –
3.5. Las imágenes.
3.5.1. Estáticas.
- Imágenes apropiadas
- Sin Royalties o autorizadas
3.5.2. Dinámicas.
- No abusar de animaciones o videos
- Han de ser apoyos no elementos principales.
3.6. Sonido.
- Igual que las imágenes
- Utilizarlo y aplicarlo con cabeza y cuando sea propio.
- Cuidado con sonidos en botones.
3.7. Integración y Retículas.
- Los márgenes y columnas bien definidos ayudan a presentar el contenido de manera mas legible.
- Evitar sobrecargar la pantalla
- Seguir una lógica predecible, e incluir algunos elementos sorpresa (como roll-over o menús animados).
- No más de un scroll.
4. Fases de Creación de Interfaz.
4.1. Briefing (Idea o Campaña).
- Concepción creativa entorno a la cual se presentarán los productos finales.
- Nuestro trabajo debe cumplir los objetivos, necesidades y posibilidades del producto o del cliente, teniendo
siempre en cuenta el público target.
- ¿Qué tecnología utilizar?
-No usar Flash o Shockwave así porque sí.
-Tener en cuenta el público objetivo
-No abusar de Multimedia (fotos de alta resolución, videos, música).
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 9 –
4.2. Guión.
- Elemento principal de un proyecto multimedia.
- Se basa en un concepto clave: Simplicidad.
- Eliminación de todo lo superficial
- Diseño claro y directo
- Único objetivo: no tener que hacer un manual para la navegación.
- Como dice la filosofía Zen: “Un jardín está concluido cuando no hay nada que quitar”.
- Definir en el guión:
- ¿Quién va a utilizar nuestra aplicación?. Público Objetivo.
- ¿Situación existente? Competencia, productos similares…
- Objetivos a medio plazo.
- Objetivos a largo plazo.
- Estrategias para alcanzar estos objetivos.
- El guión debe constar de dos partes:
- Esquema de contenidos (esquema de navegación entre pantallas….)
- Esquema de elementos (menús, imágenes, tipografías, videos…)
4.3. Presupuesto.
- Muy difícil la definición y desarrollo del presupuesto.
- Hay que tener siempre presente:
- Producción (mano de obra, scaneo, maquetación, retoque fotográfico…)
- Edición (En caso web solo Hosting, Dominio y quizás mantenimiento.)
4.4. Prototipo.
- Se da la opción a los clientes de probar o ver un prototipo antes de la entrega final.
- En papael
- Store Board
- Simulación (Demos…)
4.5. Producción.
- Es el diseño y preparación de material gráfico.
- Inventario de contenidos, donde tendremos todos los recursos disponibles para la aplicación.
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 10 –
- Ubicación exacta de títulos, textos, fotos, videos, botones…
4.6. Montaje y Programación.
- El material gráfico y audiovisual se junta y va cogiendo forma.
- Seguir los pasos y utilizar los elementos y herramientas específicos de guión.
4.7. Testeo.
- Ir probando la web en navegadores y en la red.
4.8. Edición Web.
- Colgarlo en un servidor web – Hosting.
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 11 -
PHOTOSHOP
- En este módulo trabajamos con la versión CS – Creative Suite – Conjunto Creativo
- Photoshop
- Illustrator
- In Design
- Go Live
- Acrobat
- En el mundo digital hay dos maneras básicas de representar imágenes:
1. Vectores:
- Utilizado por programas como Freehand, Corel Draw. O Illustrator para diseño de logos,
esquemas, animaciones, etc…
- Debido a sus formulas matemáticas que facilitan el dibujo su zoom no deforma su resultado.
2. Mapa de Bits.
- Detalla al máximo la info de cada punto de imagen.
- Perfecto para trabajar con imágenes de colores continuos que contengan miles o millones de
colores diferentes, como fotos o dibujos complejos.
- Unidad de Medida – píxel (punto de imagen) – contracción de Picture x element.
- Gama de color
1. RGB o RVA, por defecto aplicado en pantallas e imágenes para web (16 millones de colores).
2. CMYK o CMAN, típico de impresión. Se utiliza en negro, para un negro puro, ya que solo CMA,
da un color pardo, sucio.
- Resolución.
1. 72 ppp para la utilización de imágenes en la red.
2. 300 ppp para la utilización de imágenes en impresión
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 12 -
¿Qué vamos a ver en este módulo de photoshop?
- Utilizaremos las imágenes incluidas en www.carloscano.net/ master.html
- Vamos a descubrir en este módulo:
- Abrir y guardar imágenes
- Cuando utilizar jpg, cuando gif y por qué.
- Resolución
- Transformación
- Guardar para impresión
- Guardar para web
- Capas
- Colores
- Ajustes (brillos, contrastes, niveles…)
- Filtros
- Efectos
- Principales Herramientas.
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 13 -
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 14 -
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 15 -
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 16 -
DISEÑO WEB
En este módulo trabajaremos con HTML puro y duro sobre un editor de texto.
Sería mas sencillo trabajar sobre un programa específico e intuitivo de diseño web, pero es lógico el saber de
donde vienen todos los elementos que se van a utilizar, por eso veremos los elementos básicos.
1. Estructura básica.
<html>
<head>
<title>título del documento</title>
</head>
<body>
Contenido de la web
</body>
</html>
Esta es la estructura básica de un documento HTML. A partir de aquí ya lo único que podemos hacer es ir
incluyendo elementos, objetos, colores, tipografías, tamaños, tablas, celdas, animaciones….
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 17 -
1.Incluir texto.
<html>
<head>
<title>prueba 1</title>
</head>
<body>
Hola, esto es mi primera web.
</body>
</html>
- Escribimos esto y a continuación lo guardamos como “prueba.html”, vamos a la carpeta lo abrimos en el
explorador y ya tenemos nuestra web.
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 18 -
2.Incluir imagen.
<html>
<head>
<title>prueba 1</title>
</head>
<body>
<img src=”nombre de la carpeta/nombre de la imagen.jpg”>
</body>
</html>
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 19 -
3.Crear enlaces.
Hay tres tipos de enlaces o links:
2.1. enlaces a otros documentos de la web:
<a href=”documento.html”>enlace</a>.
2.2. enlaces a otras páginas web:
<a href=”http://www.google.es”>enlace</a>.
2.3. enlaces a e-mails:
<a href=”malito:[email protected]”>enlace</a>.
<html>
<head>
<title>prueba 1</title>
</head>
<body>
<a href=”documento.html”>enlace</a>
</body>
</html>
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 20 -
4.Tablas.
Todos los elementos de una web tienen que ir colocados en un orden de equilibrio, lógico y práctico. Esto lo
conseguimos con tablas, compuestas por filas y celdas.
<html>
<head>
<title>prueba 1</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 21 -
NOTAS Y APUNTES------------------------------------
5.Atributos para los elementos de HTML.
Siempre irán dentro de las etiquetas de los elementos y las ordenes de los atributos entre comillas,
p.e. : <table width=”650”>
Aquí lo que vamos a ver es como se van aplicando los atributos para que vayan tomando formas las tablas, etc.
En este caso lo que vamos a desarrollar es un ancho en la celda y un fondo.
En la celda “1” la daremos un bicolor=”ff6600” y un width=”70%”
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 22 -
<html>
<head>
<title>prueba 1</title>
</head>
<body>
<table>
<tr>
<td width=”70%” bgcolor=”ff6600”>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
6.Más atributos.
- width – para table y td - es el ancho se puede poner en % o en pixeles.
- height – para table y td - es el alto se puede poner en % o en pixeles.
- bgcolor – para table y td - es el color de fondo se puede poner en hexadecimal o en inglés.
- background – para table y td – cuando queremos que una imagen sea fondo.
- colspan – td – cuando queremos que una fila tenga dos o mas celdas unidas.
- rowspan – td – cuando queremos que una columna tenga dos o mas celdas unidas.
- align - para table y td – alinear en el centro, derecha o izquierda, se escribe en ingles.
- valign - para table y td – alinear arriba, en el centro o abajo, se escribe en ingles.
- class – para table y td – cuando queremos incluir una tipografía determinada por nosotros.
Según vayamos desarrollando el módulo veremos algunas más, con estas ya podemos desarrollar el block, que
será el proyecto del primer bloque del módulo.
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 23 -
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 24 -
7.CSS.
También llamado “hojas de estilo” es una tecnología para controlar las propiedades visuales de los elementos
que componen una página web. Mientras que HTML se preocupa por la estructuración de contenidos, CSS se hace
cargo de la apariencia y el estilo. Se convierte por tanto en el complemento idóneo para hacer más atractivo el
contenido de una página web.
Hay dos maneras de incluir el CSS:
- Dentro del documento HTML
- CSS externo.
7.1. Dentro del documento HTML.
<style type="text/css">
a:link {
font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 10;color:white;text-decoration:
none;background-color:773d16;
}
a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 10;color: white;text-decoration:
none;background-color:773d16;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10;color: white;background-color:ff6600;
text-decoration: none;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10;color:white;;text-decoration:
none;background-color:773d16;
}
.clase1{font-family: Verdana, Arial, Helvetica,sans-serif;font-size:10;color:ff6600}
.clase2{font-family: Verdana, Arial, Helvetica,sans-serif;font-size:10;color:white}
</style>
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 25 -
7.2. CSS Externo
- Creamos un documento con extensión “.css” y aquí será donde desarrollaremos los estilos. Le llamaremos p.e.
estilos.css.
.clase1{font-family: Verdana, Arial, Helvetica,sans-serif;font-size:10;color:ff6600}
.clase2{font-family: Verdana, Arial, Helvetica,sans-serif;font-size:10;color:white}
.clase3{font-family: Verdana, Arial, Helvetica,sans-serif;font-size:10;color:b65f09}
.clase4{font-family: Verdana, Arial, Helvetica,sans-serif;font-size:10;color:a4a1a1}
a:link {
font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 10;color:white;text-decoration:
none;background-color:773d16;
}
a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 10;color: white;text-decoration:
none;background-color:773d16;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10;color: white;backgroundcolor:ff6600;
text-decoration: none;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10;color:white;;text-decoration:
none;background-color:773d16;
}
- Desde el documento HTML , dentro de “head” llamamos a esta hoja de estilo.
<link rel="stylesheet" href="estilos.css" type="text/css">
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 26 -
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 27-
NOTAS Y APUNTES------------------------------------
Módulo Diseño Web – Master Comunicación Periodística, Institucional y Empresarial. – 28-
NOTAS Y APUNTES------------------------------------