curso fpe diseño web. mod 1. teoría y planificación

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:


Inicio: 08 de Junio

Presentación

Aclarando Conceptos Generales



• Introducción a internet• Esquema del funcionamiento de la Web (DNS)

http://www.red.es/getEmbeddedPlayer/ids%5B0%5D=4649



• 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/)



• 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.

http://es.wikipedia.org/wiki/Hipertexto

http://es.wikipedia.org/wiki/Internet

http://es.wikipedia.org/wiki/Navegador_web

http://es.wikipedia.org/wiki/Sitios_web

http://es.wikipedia.org/wiki/P%C3%A1ginas_web

http://es.wikipedia.org/wiki/Texto

http://es.wikipedia.org/wiki/Imagen_(%C3%B3ptica)

http://es.wikipedia.org/wiki/Videos

http://es.wikipedia.org/wiki/Multimedia

http://es.wikipedia.org/wiki/Hiperenlaces


Protocolos de Comunicación:

TCP/IP: Transmition Control Protocol / Internet Protocol

HTTP : HyperText Transfer Protocol

FTP: File Transfer Protocol

SMTP: Simple Mail Transfer Protocol



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



Tipos de Web por la forma de “armar” el contenido: Estática Dinámica Blogs



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



Planificar un sitio web. Objetivos y públicos Mapa de Navegación Descripción por Sección Prototipos o maquetas Consideraciones estéticas



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



Planificar un sitio web. Ejemplo de Mapa de Navegación



Planificar un sitio web. Descripción por Sección:



Planificar un sitio web. Prototipos o maquetas


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)


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.



Tamaño y resolución. ¿Para qué resolución diseñar?


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


Tamaño y resolución. ¿Para qué resolución diseñar?


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


Usabilidad Define la facilidad de usar una interface por parte

del usuario. Está basado en los estudios del la

HCI (Human-Computer Interaction)



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



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”



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



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



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.


http://www.sitioweb.com/




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.



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 (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


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.


RECURSOS

RECURSOS:

Usabilidad: useit.com Web de Jakob Nielsen

Estadísticas: http://gs.statcounter.com/

La Agencia de Protección: https://www.agpd.es/


http://gs.statcounter.com/

http://gs.statcounter.com/

curso fpe diseño web. mod 1. teoría y planificación

Devices & Hardware