Get Adobe Flash player

Valoración:

 

6 votos

1 comentario

Diseño interfaces web

El diseño se encarga de trabajar con elementos gráficos y textuales para buscar el interés y el equilibrio de las formas y la efectividad de la comunicación. El desafío es aplicar este conocimiento práctico utilizando las herramientas, técnicas y lenguajes propios de la web.

Img_art_estructurared_blog

Estructura de una red de enlaces entre sitios web.

Presentación

En este taller impartido por Vasava se estudiarán las técnicas de composición de páginas web optimizando el diseño al entorno Internet. La actividad se organizará en torno a dos dos sesiones. En la primera se hablará del diseño de páginas web, herramientas, uso de tipografías y ejemplos de diseños. La segunda sesión girará en torno al desarrollo de páginas web y se repasarán las características del lenguaje de programación HTML.

Guión del taller

Primera sesión

1.- Generalidades sobre el diseño web

2.- ¿Cómo piensan los usuarios?

3.- Los 10 principios del diseño web

                3.1.- No hacer que los usuarios piensen

                3.2.- No desperdiciar el tiempo de los usuarios

                3.3.- Focalizar la atención del usuario

                3.4.- Mostrar las propiedades del sitio

                3.5.- Usar textos clarificadores

                3.6.- Esforzarse por  la simplicidad

                3.7.- No temer el espacio en blanco

                3.8.- Comunicar efectivamente con un “lenguaje visible”

                3.9.- Usar convencionalismos

                3.10.- Prueba temprano, prueba a menudo (TETO)

Segunda sesión

1.- HTML

                 1.1.- Fundamentos (lenguaje interpretado con etiquetas)

                 1.2.- Separación entre diseño y contenido

                          1.2.1.- Un ejemplo, diferencia entre tablas y CSS

2.- Mejoras sobre las webs estáticas con HTML

                 2.1- Limitaciones del HTML

                          2.1.1.- Lenguaje sin estado

                          2.1.2.- Animaciones y contenidos ricos en multimedia

                  2.2.-Soluciones accesibles

                          2.2.1.- Progressive Enhancement

                          2.2.2.- sifr 

                          2.2.3.- Faust

3.- Problemas de acceso a paginas HTML

                  3.1.- Problemas visuales

                  3.2.- Problemas con el color 

                  3.3.- Lectores de pantalla

4.- Efectos colaterales positivos

                  4.1.- Motores de búsqueda

                         4.1.1.- ¿Qué son?

                         4.1.2.- ¿Cómo mejorar su impacto en nuestra web?

Img_art_estructura_directorio_blog

Mapa de un sitio web.

Img_art_diagrama_proceso_blog

Diagrama de proceso.

Vasava

Vasava es un estudio de comunicación nacido en Barcelona en el año 1997. Actualmente, está integrado por 18 personas provenientes de diferentes campos y disciplinas que desarrollan proyectos para multiples soportes (Identidad Corporativa, Editorial, Print, Motion Graphics, Web etc)

En Vasava se aplica una particular forma de abordar el proceso creativo, desde la experimentación y el compromiso; siendo la búsqueda de nuevos valores comunicacionales, tendencias e ideas lo que más nos interesa y motiva.

Trabajamos en diferentes direcciones desde un mismo objetivo, haciendo que las ideas funcionen en todas sus posibilidades y formatos.

Nuestra prioridad es aportar actitudes nuevas ante la forma de entender los procesos de trabajo. La participación en proyectos non-profit y la plena implicación en los proyectos comerciales de nuestros clientes son rasgos diferenciales con respecto a otros estudios y colectivos. Los objetivos económicos se han fijado para conseguir una mejora progresiva de la estructura pero nunca como el fin último, ya que trabajamos en lo que más nos gusta.

Enlaces

Guias HTML
La guía de Dave Raggett, miembro del W3C (inglés): http://www.w3.org/MarkUp/Guide/
Curso de introducción en formato Wikilibro: http://es.wikibooks.org/wiki/Lenguaje_HTM
Extenso manual de HTML: http://www.desarrolloweb.com/manuales/21/#capitulos


Página con ejemplos de CSS y ejemplo de como aplicar estilos distintos con un solo click
http://www.csszengarden.com/

Un ejemplo, diferencia entre diseño con tablas y diseño con CSS
http://www.sitepoint.com/article/tables-vs-css/

Lenguajes de scripting:
ASP: http://es.wikipedia.org/wiki/Active_Server_Pages
CGI: http://es.wikipedia.org/wiki/Cgi
Perl: http://es.wikipedia.org/wiki/Perl
PHP: http://es.wikipedia.org/wiki/Php
Python: http://es.wikipedia.org/wiki/Python
Ruby: http://es.wikipedia.org/wiki/Ruby¡

Bases de datos:
Microsoft SQL Server: http://es.wikipedia.org/wiki/Microsoft_SQL_Server
MySQL: http://es.wikipedia.org/wiki/MySQL
Oracle: http://es.wikipedia.org/wiki/Oracle

Applets:
http://es.wikipedia.org/wiki/Applet
Flash: http://es.wikipedia.org/wiki/Adobe_Flash
Silverlight: http://es.wikipedia.org/wiki/Silverlight
Java Virtual Machine: http://es.wikipedia.org/wiki/Java_Virtual_Machine

Lenguajes ejecutados en el navegador:
JavaScript: http://es.wikipedia.org/wiki/Javascript

Otras tecnologias:
Cookies: http://es.wikipedia.org/wiki/Cookies
AJAX: http://es.wikipedia.org/wiki/AJAX

Un ejemplo de animación en javascript:
http://www.visionaryonline.com/Demos/SideScroller/

Un ejemplo de animación en flash:
http://www.helloenjoy.com/

Accesibilidad Web
http://www.w3c.es/Traducciones/es/WAI/intro/accessibility

FAUST:
http://www.space150.com/news/faust-flash-augmenting-standards

sIFR
http://wiki.novemberborn.net/sifr3/

Fuentes de sistema:
http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml
http://www.apaddedcell.com/web-fonts

Información sobre buscadores:
http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=es
http://www.google.com/support/webmasters/bin/answer.py?answer=40318&hl=es

Otros recursos y enlaces

Firefox, navegador:
http://www.mozilla-europe.org/es/firefox/

Firebug, edición de CSS, javascript y herramientas para Firefox:
https://addons.mozilla.org/es-ES/firefox/addon/1843>https://addons.mozilla.org/es-ES/firefox/addon/1843

Complemento lector de pantalla para firefox:
http://firevox.clcworld.net/">http://firevox.clcworld.net/

Lynx, navegador en modo texto:
http://pachome1.pacific.net.sg/~kennethkwok/lynx/

W3C:
http://www.w3c.es/

Blog sobre accesibilidad y CSS:
http://www.alistapart.com/

Progresive enhancement:
http://www.alistapart.com/articles/understandingprogressiveenhancement
http://www.adobe.com/devnet/flashplayer/articles/alternative_content.html
 

Avatar_small

Publicado por Vasava el 7 de Enero de 2009

1 Comentario:

antonio padilla dijo...

Gracias! siempre con material asombroso!



Publicado el 25 de Septiembre de 2010

Publicado por

  • Avatar_big Comisariado de Arte Multimedia

    7 de Enero de 2009

Agenda

Inicio Fin
17/02/09 - 18:00 17/02/09 - 20:00
18/02/09 - 18:00 18/02/09 - 20:00
Lugar: Camon, Alicante. Avd. Ramón y Cajal, 5. Apúntate