DISEÑO DE PÁGINAS WEB

Luisa Fernanda Pérez Torres

Andrés Felipe Guzmán Serrano

(Docente)

Gimnasio Monseñor Manuel María Camargo

Sistemas

Décimo A

Bogotá D.C 06/08/2012

DISEÑO DE PÁGINAS WEB

OBJETIVOS

Analizar e investigar acerca del énfasis.

Identificar los conceptos básicos para hacer una pagina web.

Reconocer la importancia de la elaboración de un sitio web.

INTRODUCCIÓN

A continuación veremos la investigación sobre el diseño web, que es una

actividad que consiste en la planificación, diseño e implementación de sitios web.

Esta actividad requiere tener en cuenta la navegabilidad, interactividad,

usabilidad, arquitectura de la información y la interacción de medios como el

audio, texto, imagen, enlaces y vídeo. También veremos las etapas, fundamentos,

accesibilidad y consejos para diseñar una muy buena página web.

MARCO TEÓRICO

Las páginas web pueden ser creadas:

creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.

utilizando un programa WYSIWYG o WYSIWYM de creación de páginas. utilizando lenguajes de programación del lado servidor para generar la

página web.

1. Etapas

Para el diseño de páginas web debemos tener en cuenta tres etapas:

La primera, es el diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un bosquejo o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

La segunda, es la estructura y relación jerárquica de las páginas del sitio web, una vez que se tiene este boceto se pasa a 'escribir' la página web.

Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o incial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.

La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el año 2012 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.

Todo esto teniendo en cuenta el nivel de programación en el diseño de las aplicaciones y del impacto visual que se quiere generar en el usuario.

2. Fundamentos

Un correcto diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la web semántica.

La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. En su última instancia, esto ha supuesto una auténtica revolución en el diseño web puesto que apuesta por separar totalmente el contenido del documento de la visualización.

De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las hojas de estilo CSS para indicar como se mostrará dicha información en los diferentes. Por lógica, esta metodología beneficia enormemente la accesibilidad del documento.

También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante, proporcionándole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un Panel de Control de administración de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en la misma.

3. Accesibilidad

El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.

4. Consejos

a) HAGALO TODO MAS SIMPLE. El poder de un buen diseño esta en su simplicidad. Defina la esencia

b) HAGALO TODO MAS SIMPLE: PARTE 2! Cuando su diseño final parece ser demasiado simple para la cantidad de tiempo que le dedicó, VOILA! Su trabajo ya esta listo.

c) SALGA DE SU MUNDO INTERIOR: COMUNIQUESE Aprenda a comunicarse y colaborar con todos los miembros de las profesiones web claves: programación, marketing, comerciales.

d) MENOS GLAMOUR Y MAS ORDEN No se vea seducido por la forma en detrimento del contenido. Un diseño web comprometido con el contenido contribuye en mayor medida que uno que hace prevalecer las formas.

e) DISEÑE PARA CONEXIONES VIA MODEM!!!!!! La consideración estética mas importante a tener en cuenta es LA VELOCIDAD DE TRANSMISION. Si su trabajo tarda demasiado en bajar, deje todo de lado y vuelva al papel y al lápiz.

f) TEXTOS. ABURRIDOS? Cuando le toque diagramar textos, PRIMERO LEALOS. Piense en como alguien, con menos interés que el suyo, podría echarles un vistazo. Otra cosa que es de gran ayuda es el ancho de los textos. A menudo se ven por ahí webs con sus textos corriendo de punta a punta de la pagina. Cómo se puede leer eso??? Mejor trate de que sus textos se mantengan en un ancho de 400 pixeles, o, al menos, un tercio de su pantalla.

g) MAS COLOR Y GRAFICOS, MENOS IMAGENES Y EFECTOS El arte lineal, las formas vectoriales y el color plano se lleva de maravillas con la web. Para ser más claros, si sus diseños usan mas Freehand que Photoshop, es seguro de que su pagina cargara mucho mas rápido.

h) GRAFICOS Y TEXTOS: NO! Nunca, jamás, inserte texto en un grafico. El texto es texto. Los gráficos son gráficos. No los confunda.

i) ATRAIGA Con las fluctuaciones en las conexiones a la web, su carácter de "lenta" y demás afectaciones, usted tiene 3 SEGUNDOS para convencer a un usuario de no usar el botón ATRAS del navegador. TRES SEGUNDOS. Entonces, ponga todos sus esfuerzos para que aquello que desea mostrar

en una página web aparezca inmediatamente, y de forma interesante.

j) ATRAIGA-SIMPLIFIQUE-VAYA A LO QUE IMPORTA Tiene 30 segundos para cargar TODA una página en el navegador del usuario. Quizás menos, 15 segundos. SEA RÁPIDO.

k) ENFOQUESE EN LO QUE INTERESA A los usuarios no les interesa en absoluto como funciona y se navega dentro de su sitio web, solo llegaron allí por el contenido. DESELOS en forma rápida y simple.

l) INFORMESE-APRENDA Manténgase al tanto de las nuevas tecnologías. La web jamás se queda quieta, así que dedique su tiempo libre a aquello que es nuevo. Ya ha pasado el tiempo en que el pez más grande se comía al más pequeño, ahora es el mas RAPIDO el que se come al MAS LENTO.

m) DEFINA SU PROBLEMA El diseño trata sobre la resolución de problemas, sobre enfrentar una cuestión de comunicación con un objetivo. Defina cual es el suyo y ya tendrá la mitad del problema resuelto.

n) APRENDASE LOS PRINCIPIOS DE NAVEGACION a-La gente odia esperar b-La gente odia hacer scroll c-La gente odia leer d-La gente prefiere hacer scroll antes que esperar e-La gente prefiere esperar a leer. c-La gente no es necesariamente racional o coherente, pero a veces si.

o) BUSQUE INSPIRACION Hable con gente que esta fuera de su campo de acción. Los arquitectos, por ejemplo, pueden darle una perspectiva completamente nueva del diseño web, quizá pueden cambiar su forma de imaginar como se conceptualiza un sitio, transformando las paginas web en "espacios web"

p) ESCUCHE MUSICA Si, cuando la música acompaña a su trabajo este se hace más placentero y llevadero. Incluso llega a generar mas inspiración.

5. Links

Hay diferentes páginas en las que puedes encontrar diferentes formatos para la elaboración de páginas web:

http://daleclick.blogspot.com/

http://www.unav.es/dpp/tecnologia/docs/tagshtml.pdf

http://vagabundia.bolsanegra.com/index.php/tutorialhtml/

http://www.pimpwebpage.com/index.html

CONCLUSIONES

El diseño de páginas web trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc).

BIBLIOGRAFÍA

http://es.wikipedia.org/wiki/Dise%C3%B1o_web

http://www.usergioarboleda.edu.co/grupointernet/consejos_web.htm

http://aulablog21.wikispaces.com/Gu%C3%ADas+html