Paginas Web Alvarez Zavala Diego 2IV17 - Alvarez Zavala Diego

Vista previa del material en texto

Diseño y creación de 
paginas web
Estructura básica de una pagina web elaborada con el código HTML
Alvarez Zavala Diego 2IV17
Tips:
• HTML: (Lenguaje de marcación de Hipertexto). Es el lenguaje estándar para 
describir el contenido y la apariencia de las paginas WWW.
• El lenguaje de HTML es utilizado para elaboración de documentos para red 
Word Wide Wed. Hyper Text Markup Lenguage o abreviado HTML, es un 
lenguaje usado para definir lo que se ve en una pagina WEB, es decir, como 
se van a posicionar el texto, las imágenes, el sonido, las películas, etc., en la 
pagina.
• HTML Es una colección de estilos indicados por tags que definen los 
variados componentes y contienen información adicional acerca de la 
estructura del documento o su presentación en la Web.
Editores de HTML
• Editores WYSIWYG de HTML son fáciles y 
rapidos de usar tiene rasgos adicionales para 
hacer tu sitio mejor. Ellos ofrecen mas 
flexibilidad de diseño y su ventaja mas 
grande es que el creador no tiene que saber 
mucho del lenguaje HTML para elaborar la 
pagina Web.
Ejemplos de editores WYSIWYG
• Microsoft FrontPage
• Dreamweaver
• Adobe GoLive
• Nvu
• Mozilla Composer
• Netscaper Composer
• Editor de Texto ventajas del Editor de Texto-
Flexibilidad, Transportabilidad, HTML 
limpio.
Algunos son:
• Bloc de notas Notepad o WordPad de 
Microsoft.
• Homesite
• SimpleTextvi
• Pico, Xemacs
Editores de texto HTML para 
Windows
• Los editores de texto proveen mucho control a sus paginas de HTML. Los editores de HTML de 
texto mas sofisticados muestran su código en colores, de modo que puedas ver rápido los errores.
Aquí se muestran algunos de ellos
• Macromedia Homesite 5
• Note tab pro 4.8
• CoffeCup HTML Editor 9.0
• Hippie 98 3.1 
• UltraEdit 8.2
Los navegadores mas usados son:
• Internet Explorer
• Netscape Communicator de Netscape.
• Mozilla 
Estándares en el diseño web 
Un estándar es el modelo a seguir al hacer algo. El uso de estándares en el diseño web 
permite dirigirse a mayor numero de usuarios y navegadores compatibles; funcionar en los 
distintos navegadores, plataformas y dispositivos; facilidad de navegación, rapidez al cargar 
paginas graficas, etc.
• Recomendaciones para la presentación de la pagina web, las hojas de estilo, especialmente 
hojas de estilo en cascadas. Se validad su sintaxis mediante la cual se describe la forma de 
presentar contenidos de un pagina web.
• Estándares para el comportamiento de la pagina web, ECMAScript, mas comúnmente 
JavaScipt, de Ecma International.
• Recomendaciones para Document Object Models.
• Nombres y direcciones de pagina y demás recursos referenciados de las URLS 
correctamente formados.
• El uso apropiado de los protocolos HTTP y MIME para desplegar la pagina, regresar datos 
pedir otros recursos referenciados a esta, etc.
Cuando se diseña, utilizando estándares Web, se empieza con la estructura de un documento. 
Primero de crea la estructura y luego el estilo o apariencia.
Principios de diseño grafico aplicado 
a paginas web.
• Funciones del diseño de una pagina web:
• La necesidad de presentar algún producto, servicio o alguna idea, necesidad 
por la comunicación con la gente.
• Debe tener el impacto deseado sobre la gente. Crear impacto con tipografía, 
imágenes y colores para comunicar efectivamente un mensaje es muy 
importante para cualquier diseño.
• Su enfoque depende de el tipo de producto o servicio presentado y muestra lo 
que se debe transmitir al publico.
Técnicas, Recomendaciones y 
Limitaciones
Técnicas
• 1 Énfasis: Para los elementos que se van a percibir como mas importantes usando la posición, color y 
texto.
• 2 Ordenamiento: La forma de colocar los objetos en la pantalla.
• 3 Foco: El punto focal es el centro de la alineación, se utiliza para dirigir al usuario a la información 
deseada.
• 4 Alineación: Ayuda a conseguir, equilibrio, armonía, unidad y modularidad.
Recomendaciones
• Facilitar la visibilidad-centrarse en el contenido
• Mostrar la información simple y naturalmente, evitar desplazamientos.
• Reducir la complejidad de las acciones, mostrar con mas claridad.
Limitaciones
• Navegabilidad
• Accesibilidad
Distribución de elementos
• La distribución debe hacer el diseño atractivo y agradable, que no fatigue la 
vista, que facilite la consulta al usuario y ahorra tiempo. 
• La distribución en las pantallas, también es prioritaria en el diseño web. La 
pagina debe mantener un orden lógico y siempre que sea posible la misma 
estructura y ubicación de los menús y contenidos.
• La distribución constituye la forma de ordenar los elementos de en la pagina.
Los principios básicos son: claridad y unida de los elementos, organización 
balanceada, clara y concisa información.
Determina a quien esta destinada a 
tu pagina
• Motiva a tu audiencia: trátalos con respeto y ofréceles la posibilidad de 
comunicación contigo.
• Establece objetivos claros de diseño. Esfuérzate por la simplicidad
• Organiza una estructura conceptual consistente y clara.
• Incluye contestaciones, agradecimientos, reacciones y comentarios.
Sugerencias
• Limitacion de los elementos de diseño
• Tener efecto de movimiento
• Caer trayectoria de la mirada
• Crear líneas de equilibrio
• Distribuir las masas de los objetos
Otros consejos
• Define el contenido de su pagina Web y agrega los conceptos importantes.
• Emplea un lenguaje simple y comprensible.
• Usa una diagramación que se ojee fácilmente
• Incorpora espacios en blanco
• Da prioridad a tu información, como titulo, descripción, resumen. 
Color
• El papel de color:
El color ayuda dinamizar la composición a través de interacción de los colores. 
1. Los colores transmiten sentimientos – hay colores claros, fríos, ardientes 
tristes, alegres.
2. También contribuyen a la creación del espacio, dando profundidad o 
distancia.
• Mantener simplicidad.
• No usar colores fluorescentes en texto ni en el fondo.
• Utilizar colores para distinguir secciones en nuestra pagina.
• Seleccionar una paleta de color y mantenerse constante.
• Utilizar el espacio blanco como elemento de diseño.
Elementos multimedia
Imágenes 
• El sujeto de una imagen clara puede ser reconocido en el segundo 1/100. 
Podemos recordar muchísimo una cantidad grande de imágenes. Las 
imágenes tiene influencia a menudo inconsciente. Nuestro logro 
conmemorativo es levantado por imágenes. Las imágenes sirven como 
marcos para los verdaderos contenidos y ofertas en un contexto estético que 
debería parecer motivar en el usuario y tienen su efecto positivo.
• Inclusión de imágenes 
• Usa imágenes simples, simbiótica, reducidas e inmóviles para ilustrar el 
contenido .
• Los formatos de archivos gráficos deben ser comprimidos fotografías y 
dibujos.
Iconos
• Los iconos y los textos no deberían excluirse, pero complementarse. Usa los 
iconos económicamente y con propósito especifico. Los iconos en grupo en 
pantalla, traen una orden especial y lógica en esta agrupación. Los iconos no 
deberían ser agradables, si no funcionales. Los iconos deberían ser reducidos 
a los elementos necesarios y no usados solo para decoración.
Audio
• El tono de audio debería complementar no confundir. El usuario debería 
conducir y puede elegir si lo quiere oír o no. 
Animaciones.
• Las animaciones pueden irritar a los usuarios. Realmente algunos son 
desviados tanto por ellas que no pueden leer mas el texto en el lado.
Video
• El video deja la opción al usuario si quiere ver el informe en el video 
avisando la duración de carga y el tamaño del archivo.
Estructura básica y etiquetas principales 
del código HTML de una pagina web.
Un documento HTML comienza con la etiqueta o marcadores y termina con 
que mostrar el final del documento. Dentro del documento hay dos zonas bien 
diferenciadas:
• El encabezado, el delimitado por las etiquetas, que sirve para definirversos 
valores validos en todo el documento 
• El cuerpo definido body y doby donde reside la información del documento.
Formato de los marcados
• Los marcadores controlan la disposición y el formateo de los elementos en 
HTML. Estas etiquetas son los componentes básicos de HTML. Todas las 
etiquetas HTML debe de tener su etiqueta de principio y fin, la etiqueta de 
cierre debe llevar la diagonal que indica que es el fin de esa etiqueta.
• El marcador especifica el tipo de efecto que deseamos. Por ejemplo de poner 
el texto en negritas usamos del marcador <b>, asi que si deseamos que el 
texto Prueba negritas aparezca en negritas tenemos que poner:
• El nombre del marcador esta rodeado por los signos menos que < y mayor 
que >
• Los nombres de marcadores no pueden tener espacios.
• La mayor parte de los marcadores requieren un marcador final que se 
diferencia del que se abre por /.
• Los atributos controlan las diferentes propiedades del marcador.
Estructura de información en HTML
• HTML es construido con la idea de una jerarquía de información y la 
especificación de elementos refleja esto. Una jerarquía de información en un 
documento simplemente significa que alguna información es generalmente 
mas importante que otra y por lo general contiene sub información mas 
pequeña. Cuando escribes un contorno formal, este refleja la jerarquía.
• La pagina puede reflejar esta estructura lógica en la forma de títulos, 
subtítulos, etc., o la estructura lógica solo puede ser implicada para la 
organización material.