FPE Diseñador Web y MultimediaCarmina Barreiro. Curso de Adams.
FPE Diseñador Web y Multimedia
1. Teoría. Planificar y entender.
2. HTML. El esqueleto de la web.
3. Dreamweaver. Bendito WYSIWYG!
4. CSS. El Diseño con Mayúscula.
5. Utilitario. Echando mano de cosas chulas.
6. Flash. Animaciones e Interacción.
7. ActionScript. Un paso más allá en interactividad.
Módulos de Contenido:
FPE Diseñador Web y Multimedia
Inicio: 08 de Junio
Presentación
Aclarando Conceptos Generales
FPE Diseñador Web y Multimedia
1. Teoría. Planificar y entender.
• Introducción a internet• Esquema del funcionamiento de la Web (DNS)
FPE Diseñador Web y Multimedia
1. Teoría. Planificar y entender.
• ICANN:
Internet Corporation for Assigned Names and Numbers
(http://www.icann.org)• DOMINIOS.ES (https://www.nic.es)• 3WC: World Wide Web Consortium (http://www.w3.org/)
FPE Diseñador Web y Multimedia
1. Teoría. Planificar y entender.
• WWW
la World Wide Web es un sistema de
distribución de información basado en
hipertexto y accesibles a través de Internet. Con
un navegador web, un usuario visualiza
sitios web compuestos de páginas web que
pueden contener texto, imágenes, videos u
otros contenidos multimedia, y navega a través
de ellas usando hiperenlaces.
FPE Diseñador Web y Multimedia
Protocolos de Comunicación:
TCP/IP: Transmition Control Protocol / Internet Protocol
HTTP : HyperText Transfer Protocol
FTP: File Transfer Protocol
SMTP: Simple Mail Transfer Protocol
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Tipos de Web por su objetivo: Informativa Publicidad - Promoción Comercio electrónico Comunitaria Aula Virtual Directorio Landing Page Servicio Público Blog Motores de búsqueda
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Tipos de Web por la forma de “armar” el contenido: Estática Dinámica Blogs
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Aquitectura de la Información: Determina de qué tratará el sitio y cómo funcionara. Clarifica la misión y visión del sitio. Determina cuáles contenidos y funcionalidades
tendrá. Define cómo los usuarios encontrarán la
información. Creando organización, esquemas de navegación, sistemas de búsqueda.
Hace un mapa del sitio y cómo responderá a futuros crecimientos, o cambios
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Planificar un sitio web. Objetivos y públicos Mapa de Navegación Descripción por Sección Prototipos o maquetas Consideraciones estéticas
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Objetivos y públicos: ¿Qué se busca con la web? Objetivo
principal y objetivo secundario. ¿A quién va dirigida? Webs en función del público:
B2B - B2C – C2C
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Planificar un sitio web. Ejemplo de Mapa de Navegación
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Planificar un sitio web. Descripción por Sección:
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Planificar un sitio web. Prototipos o maquetas
1. Teoría. Planificar y entender.
Fuente: “The Role of Design in Website Prototyping” — Imprint-The Online Community for Graphic Designers
Representa al detalle la información que contendrá un sitio web.
Incluye:Información structural (la jerarquía entre páginas y sub-páginas)El contenido (textos e imágenes)La lógica en la relación de los contenidos y otras funcionalidades.
Comunica información técnica a todos los involucrados en la web, sean éstos técnicos, o no.(ver imágenes del artículo en archivos adjuntos)
FPE Diseñador Web y Multimedia
El proceso de elaboración de la web1. Planificación (Mapa Web y Secciones) 2. Prototipo3. Diseño Boceto4. Presentación del boceto del navegador con una
imagen que simule la web5. Montaje y maquetación en HTML6. Comprobación7. Publicación e inclusión en buscadores. Uso de
herramientas de webmaster.
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Tamaño y resolución. ¿Para qué resolución diseñar?
1. Teoría. Planificar y entender.
19,14%
11,13%
10,87%
6,81%
3,72%
3,26%
2,56%
2,15%
1,77%
14,72
23,87%
Para 1280 x 800 píxel
Lo verán bien el 54,23% (en España)54,78% (en el mundo)
Ancho máximo recomendado:1216 píxel http://gs.statcounter.com
FPE Diseñador Web y Multimedia
Tamaño y resolución. ¿Para qué resolución diseñar?
1. Teoría. Planificar y entender.
19,14%
11,13%
10,87%
6,81%
3,72%
3,26%
2,56%
2,15%
1,77%
14,72
23,87%
Para 1024 x 768 píxel
Lo verán bien el 79,87% (en España)83,85 (en el mundo)
Ancho máximo recomendado:960píxel
http://gs.statcounter.com
FPE Diseñador Web y Multimedia
Usabilidad Define la facilidad de usar una interface por parte
del usuario. Está basado en los estudios del la
HCI (Human-Computer Interaction)
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Usabilidad Aspectos a tomar en cuenta:
La lectura se caracteriza por ser sólo de un 25% comparado con el papel. Por tanto:
Usar esquemas Resaltar ideas principales Formato pirámide invertida
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Usabilidad Aspectos a tomar en cuenta:
Consistencia entre las páginas No más de 7 elementos en la barra de navegación
horizontal Títulos de secciones de la barra diferenciados y claros Evitar mucha “profundidad” en los niveles de
navegación. Minimizar el tiempo de “aprendizaje de uso”
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Aspectos Legales
LSSI: Ley 34/2002, de 11 de julio, Servicios de la Sociedad de la Información y de Comercio Electrónico.
Ley de Protección de Datos Personales
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
LSSI: Ley 34/2002, de 11 de julio, Servicios de la Sociedad de la Información y de Comercio Electrónico.
Aviso Legal: Responsable de la web. Autónomo o Empresa Datos Registrales de Empresa
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Ejemplo de Aviso Legal:
http://www.sitioweb.com y todo su material pertenecen a NOMBRE DE LA EMPRESA, inscrita en el Registro Mercantil de la Provincia de Sevilla, Tomo 000 de Sociedades, Folio 00, Hoja SE-000 inscripción 1ª , con domicilio social Dirección Completa de la Empresa Teléfono: 0000 00 00 00 y dirección de correo electrónico de contacto: [email protected]
http://www.sitioweb.com o cualquier parte del mismo, no podrá utilizarse para fines ilícitos o contrarios a la ley, al orden público, a la moral y a las buenas costumbres, incluidas las violaciones de derechos de propiedad intelectual o industrial, o protegidos por el secreto comercial. Todos los contenidos o informaciones de la web pertenecen a NOMBRE DE LA EMPRESA, o a sus titulares legales, no autorizándose a los visitantes a reproducirlos, duplicarlos, copiarlos, venderlos, revenderlos ni explotarlos para cualquier fin comercial o de otro tipo que no esté expresamente permitido por nuestra entidad.
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Si se realiza un contrato o compra online. Condiciones de contratación y devolución en un
lugar visible El usuario deberá aceptar como leídas las
condiciones de contratación. La legislación que regula la transacción corresponde
al país donde está la sede social de la empresa que gestiona la web.
1. Teoría. Planificar y entender.
FPE Diseñador Web y Multimedia
Aspectos Legales
Ley de Protección de Datos Personales ¿Qué son datos Personales? Niveles de protección
1. Teoría. Planificar y entender.
Aplicación de Niveles de Seguridad Nivel de Seguridad
Naturaleza de la Información Básico Medio Alto
Datos de carácter personal (nombre, apellido, email, teléfono)
X
Datos sobre infracciones administrativas o penales, hacienda, financieros, etc.
X X
Ideología, religión, origen racial, salud o vida sexual, policiales, etc.
X X X
FPE Diseñador Web y Multimedia
Además de inscribir el fichero ante la Agencia Española de Protección de Datos, se debe poner un mensaje, preferiblemente después del formulario.
Ejemplo de mensaje:
De conformidad con lo dispuesto en la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal, se informa que los datos facilitados se incluirán en ficheros automatizados que se destinarán al normal desarrollo de las actividades de la empresa, y serán tratados de forma confidencial por NOMBRE DE LA EMPRESA. Los datos no serán cedidos a terceras personas.
La remisión de los datos personales solicitados es totalmente voluntaria y con ella autoriza de manera expresa a que sus datos sean objeto de tratamiento automatizado. En cumplimiento del artículo 5 de la L.O. 15/1999 podrá ejercer sus derechos de acceso, rectificación, cancelación y oposición dirigiéndose por escrito a NOMBRE DE LA EMPRESA Dirección de la Empresa. Email de contacto.
1. Teoría. Planificar y entender.
RECURSOS
RECURSOS:
Usabilidad: useit.com Web de Jakob Nielsen
Estadísticas: http://gs.statcounter.com/
La Agencia de Protección: https://www.agpd.es/
1. Teoría. Planificar y entender.
Recommended