Fpe diseñador web y multimedia

  • 412 views
Uploaded on

FPE Diseñador Web y Multimedia, pasos útiles para el diseño web.

FPE Diseñador Web y Multimedia, pasos útiles para el diseño web.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
412
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. FPE Diseñador Web y MultimediaCarmina Barreiro. Curso de Adams.
  • 2. FPE Diseñador Web y MultimediaMó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
  • 4. FPE Diseñador Web y Multimedia  1. Teoría. Planificar y entender.• Introducción a internet• Esquema del funcionamiento de la Web (DNS)
  • 5. 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/)
  • 6. 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.
  • 7. FPE Diseñador Web y Multimedia1. 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
  • 8. FPE Diseñador Web y Multimedia1. 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
  • 9. FPE Diseñador Web y Multimedia1. Teoría. Planificar y entender.  Tipos de Web por la forma de “armar” el contenido:  Estática  Dinámica  Blogs
  • 10. FPE Diseñador Web y Multimedia1. 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
  • 11. FPE Diseñador Web y Multimedia1. 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
  • 12. FPE Diseñador Web y Multimedia1. 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
  • 13. FPE Diseñador Web y Multimedia1. Teoría. Planificar y entender.  Planificar un sitio web. Ejemplo de Mapa de Navegación
  • 14. FPE Diseñador Web y Multimedia1. Teoría. Planificar y entender.  Planificar un sitio web. Descripción por Sección:
  • 15. FPE Diseñador Web y Multimedia1. 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: “The Role of Design in Website Prototyping” — Imprint-The Online Community for Graphic Designers
  • 16. FPE Diseñador Web y Multimedia1. Teoría. Planificar y entender.  El proceso de elaboración de la web 1. Planificación (Mapa Web y Secciones) 2. Prototipo 3. Diseño Boceto 4. Presentación del boceto del navegador con una imagen que simule la web 5. Montaje y maquetación en HTML 6. Comprobación 7. Publicación e inclusión en buscadores. Uso de herramientas de webmaster.
  • 17. FPE Diseñador Web y Multimedia1. Teoría. Planificar y entender. Tamaño y 23,87% resolución. 19,14% ¿Para qué 11,13% resolución 10,87% diseñar? 6,81% Para 3,72% 1280 x 800 píxel 3,26% Lo verán bien el 2,56% 54,23% (en España) 54,78% (en el mundo) 2,15% 1,77% Ancho máximo recomendado: 14,72 1216 píxel http://gs.statcounter.com
  • 18. FPE Diseñador Web y Multimedia1. Teoría. Planificar y entender. Tamaño y 23,87% resolución. 19,14% ¿Para qué 11,13% resolución 10,87% diseñar? 6,81% Para 3,72% 1024 x 768 píxel 3,26% Lo verán bien el 2,56% 79,87% (en España) 83,85 (en el mundo) 2,15% 1,77% Ancho máximo recomendado: 14,72 960píxel http://gs.statcounter.com
  • 19. FPE Diseñador Web y Multimedia1. 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-Computer Interaction)
  • 20. FPE Diseñador Web y Multimedia1. 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
  • 21. FPE Diseñador Web y Multimedia1. 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”
  • 22. FPE Diseñador Web y Multimedia1. 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
  • 23. FPE Diseñador Web y Multimedia1. 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
  • 24. FPE Diseñador Web y Multimedia1. 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 Empresa Teléfono: 0000 00 00 00 y dirección de correo electrónico de contacto: info@sitioweb.com 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.
  • 25. FPE Diseñador Web y Multimedia1. 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.
  • 26. FPE Diseñador Web y Multimedia1. Teoría. Planificar y entender.  Aspectos Legales  Ley de Protección de Datos Personales  ¿Qué son datos Personales?  Niveles de protección Aplicación de Niveles de Seguridad Nivel de Seguridad Naturaleza de la Información Básico Medio Alto Datos de carácter personal X (nombre, apellido, email, teléfono) Datos sobre infracciones administrativas o penales, X X hacienda, financieros, etc. Ideología, religión, origen racial, salud o vida sexual, X X X policiales, etc.
  • 27. FPE Diseñador Web y Multimedia1. 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 EMPRESA Dirección de la Empresa. Email de contacto.
  • 28. RECURSOS1. 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/