Diseño de páginas web

428 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
428
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseño de páginas web

  1. 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. 2. DISEÑO DE PÁGINAS WEBOBJETIVOS 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ÓNA continuación veremos la investigación sobre el diseño web, que es unaactividad 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 elaudio, 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ÓRICOLas 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. EtapasPara 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. 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 lasaplicaciones y del impacto visual que se quiere generar en el usuario. 2. FundamentosUn correcto diseño web implica conocer cómo se deben utilizar cada uno de loselementos permitidos en el HTML, es decir, hacer un uso correcto de estelenguaje dentro de los estándares establecidos por la W3C y en lo referente a laweb semántica.La web semántica, por otra parte, aboga por un uso lógico de los elementos segúnel significado para el que fueron concebidas. En su última instancia, esto hasupuesto una auténtica revolución en el diseño web puesto que apuesta porseparar totalmente el contenido del documento de la visualización.De esta forma se utiliza el documento HTML únicamente para contener, organizary estructurar la información y las hojas de estilo CSS para indicar como semostrará dicha información en los diferentes. Por lógica, esta metodologíabeneficia enormemente la accesibilidad del documento.También existen páginas dinámicas, las cuales permiten interacción entre la web yel visitante, proporcionándole herramientas tales como buscadores, chat, foros,sistemas de encuestas, etc. y poseen de un Panel de Control de administración decontenidos. Este permite crear, actualizar y administrar cantidades ilimitadas decontenido en la misma. 3. AccesibilidadEl diseño web debe seguir unos requerimientos mínimos de accesibilidad web quehaga que sus sitios web o aplicaciones puedan ser visitados por el mayor númerode personas. Para conseguir estos objetivos de accesibilidad se han desarrolladopautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.
  4. 4. 4. Consejosa) HAGALO TODO MAS SIMPLE. El poder de un buen diseño esta en su simplicidad. Defina la esenciab) 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. 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. LinksHay diferentes páginas en las que puedes encontrar diferentes formatos para laelaboración de páginas web:
  6. 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.htmlCONCLUSIONES 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

×