Este documento presenta los objetivos, introducción y marco teórico sobre el diseño de páginas web. Explica que el diseño web implica considerar la navegabilidad, interactividad, usabilidad y otros factores. Describe las etapas de diseño visual, estructura y posicionamiento en buscadores. También cubre fundamentos como el uso correcto de HTML, accesibilidad siguiendo las pautas WCAG, y varios consejos para el diseño efectivo de páginas web.

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

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

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

5. 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:

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