Módulo 1 del Curso FPE de Diseño Web impartido en Adams, Sevilla. Este Primer Módulo contiene la teoría de la web, conceptos de planificación y marco legal del diseño web.

1. FPE Diseñador Web y Multimedia Carmina Barreiro. Curso de Adams.

2. FPE Diseñador Web y Multimedia Módulos de Contenido: 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.

3. FPE Diseñador Web y Multimedia Inicio: 08 de Junio Presentación Aclarando Conceptos Generales

6. DOMINIOS.ES (https://www.nic.es)

8. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Protocolos de Comunicación: TCP/IP: Transmition Control Protocol / Internet Protocol HTTP : HyperText Transfer Protocol FTP: File Transfer Protocol SMTP: Simple Mail Transfer Protocol

9. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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

10. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Tipos de Web por la forma de “armar” el contenido: Estática Dinámica Blogs

11. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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

12. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Planificar un sitio web. Objetivos y públicos Mapa de Navegación Descripción por Sección Prototipos o maquetas Consideraciones estéticas

13. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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

14. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Planificar un sitio web. Ejemplo de Mapa de Navegación

15. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Planificar un sitio web. Descripción por Sección:

16. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Planificar un sitio web. Prototipos o maquetas 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) Fuente: “TheRole of Design in WebsitePrototyping” — Imprint-The Online CommunityforGraphicDesigners

17. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. El proceso de elaboración de la web Planificación (Mapa Web y Secciones) Prototipo Diseño Boceto Presentación del boceto del navegador con una imagen que simule la web Montaje y maquetación en HTML Comprobación Publicación e inclusión en buscadores. Uso de herramientas de webmaster.

18. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Tamaño y resolución. ¿Para qué resolución diseñar? 23,87% 19,14% 11,13% 10,87% 6,81% 3,72% 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 3,26% 2,56% 2,15% 1,77% 14,72 http://gs.statcounter.com

19. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Tamaño y resolución. ¿Para qué resolución diseñar? 23,87% 19,14% 11,13% 10,87% 6,81% 3,72% 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 3,26% 2,56% 2,15% 1,77% 14,72 http://gs.statcounter.com

20. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Usabilidad Define la facilidad de usar una interface por parte del usuario. Está basado en los estudios del la HCI (Human-ComputerInteraction)

21. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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

22. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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”

23. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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

24. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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

25. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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 EmpresaTeléfono: 0000 00 00 00 y dirección de correo electrónico de contacto: info@sitioweb.com http://www.sitioweb.como 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.

26. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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.

27. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. Aspectos Legales Ley de Protección de Datos Personales ¿Qué son datos Personales? Niveles de protección

28. FPE Diseñador Web y Multimedia 1. Teoría. Planificar y entender. 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 EMPRESADirección de la Empresa. Email de contacto.

29. RECURSOS 1. Teoría. Planificar y entender. RECURSOS: Usabilidad: useit.com Web de Jakob Nielsen Estadísticas: http://gs.statcounter.com/ La Agencia de Protección: https://www.agpd.es/