Lectura No. 3. Contextualización. Nombre: Página web DISEÑO DIGITAL 1. Para qué te sirve saber elaborar una página web?

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Lectura No. 3. Contextualización. Nombre: Página web DISEÑO DIGITAL 1. Para qué te sirve saber elaborar una página web?"

Beatriz Ávila Acuña
hace 8 años
Vistas:

1 Diseño Digital

2 DISEÑO DIGITAL 1 Lectura No. 3 Nombre: Página web Contextualización Para qué te sirve saber elaborar una página web? A través de una página web puedes atraer a una mayor cantidad de clientes para tu empresa o negocio, tienes un mayor alcance de tu público pues son muchas personas que hoy en día navegan constantemente en la red, puedes aumentar tus ingresos, ahorrar tiempo y dinero, te permite mejorar la presencia en el mercado, puedes llegar a tus clientes en donde sea que se encuentren, puedes comunicarte de manera eficiente y efectiva, aumentar la satisfacción de tus clientes y aumentar la confianza y la lealtad de los clientes. Pues navegar en la red hoy en día es sencillo, rápido, lo puedes hacer en cualquier lugar geográfico y es un medio de comunicación muy barato y accesible. La estructura de una página web y la ruta de navegación son conocimientos básicos que te permitirán diseñar un sitio web con contenidos e información útiles que brinden a tus usuarios una experiencia positiva orientada a sus gustos, preferencias e intereses.

3 DISEÑO DIGITAL 2 Introducción al Tema Cómo muestras una imagen para impresionar al espectador? Una página web debe tener 2 elementos importantes para el usuario: 1. Información o contenido interesante. 2. Organización y fácil manejo de la página. Analicemos el primer punto: Si tú entras a una página y ves que el contenido no es atractivo, inmediatamente la cierras, por lo que si vas a crear una página web debes preguntarte las siguientes cuestiones: A quién va dirigida mi página web? Para qué o por qué estoy diseñando este sitio web? Qué buscan o qué necesitan los usuarios en mi página web? En cuanto al segundo punto, supongamos que entras a una página web con un contenido de tu interés, pero resulta que esta página no tiene ni pies ni cabeza, es un desorden, el tema 1 está dentro del tema 2 que se encuentra debajo del último tema que contiene la introducción y los enlaces te llevan a una página que marca error. Es obvio que como usuario esto te va a confundir y tal vez te llegue a desesperar y comprensiblemente cerrarás la página. Entonces deberás plantearte las siguientes situaciones: Qué temas voy abordar? Qué subtemas llevará cada tema? A dónde tiene que conducir la ruta de navegación?

4 DISEÑO DIGITAL 3 Explicación 2. Página web 2.1 Estructura de las páginas WEB El diseño de una página web es determinado por la forma en que se organizan los elementos que la componen. Las páginas web se componen de códigos, los cuales tienen funciones diferentes y específicas para ir elaborando cada sección de la página. Estos códigos son mejor conocidos como etiquetas y hay una gran variedad de ellas, las más básicas son las siguientes: <html> y </html> estas etiquetas son nuestros indicadores para saber en dónde empieza y termina la página, por lo cual se ponen sólo al inicio y al final. <head> y </head> en estas etiquetas se implementará información que no se mostrará directamente en el navegador, es decir, en esta sección estarán las características que quieres que lleve tu documento, como son el título, autor, estilos y algunas funciones a realizar. <body> y </body> entre estas 2 etiquetas se colocará el texto que quieres mostrar en el navegador, a lo que se conoce como contenido real de la página. <IDOCTYPE> y <?xml> ambas etiquetas tienen la función de señalar el tipo de documento que se está realizando y a qué normas se ajusta. De acuerdo a estas etiquetas, si empezamos a crear una página web con un contenido breve quedaría de la siguiente forma:

5 DISEÑO DIGITAL 4 <IDOCTYPE html> <html> <head> <title> Blog de Diseño Digital </title> </head> <body> <p> Estructura páginas web </p> Tomado dehttp:// para fines educativos </body> </html> Y esto vendría siendo prácticamente nuestro diseño de página web. Para probar la página web que se elaboró, sigue los siguientes sencillos pasos: 1. Abrir un programa de edición de texto sencillo como Bloc de notas o Editor de textos. Puedes copiar y pegar el texto en el interior del documento o escribirlo desde el inicio, pero siempre poniendo atención al hacerlo para escribir las etiquetas correctamente. 2. Ya que terminaste de escribir las etiquetas correctamente, guarda tu página web dentro de una carpeta de tu computadora. El nombre de este archivo tiene que terminar en.html o en.htm. Nota: los nombres de los archivos de las páginas web se escriben siempre con minúsculas y sólo con letras y/o números, sin espacios ni caracteres especiales, para que al subir nuestra página a la web no tengamos problema alguno. 3. Abre tu explorador para acceder a la carpeta que contiene nuestro archivo creado. Da clic en Archivo, Abrir Seleccionas tu carpeta y abres tu archivo creado en el editor con un doble clic.

6 DISEÑO DIGITAL 5 4. Y en seguida se abrirá en tu navegador una página web con el texto escrito entre las etiquetas de <body> 2.2 Ruta de navegación Una ruta de navegación en una página web no es más que una jerarquía de páginas que nos permiten trasladarnos de una página a otra y sirve para ubicar al usuario dentro del sitio web. Una ruta de navegación es una herramienta que ayuda al usuario del sitio a desplazarse por éste mismo. En inglés se le conoce como breadcrums trail que significa rastro de migas de pan ; este término hace referencia al cuento de Hansel y Gretel, donde Hansel va dejando migas de pan para marcar el camino de regreso a casa y en sí ésta es la idea de una ruta de navegación, que a través de enlaces puedas ir trasladándote de un sitio web a otro, pero siempre dejando un rastro para que puedas regresar a la página de inicio (home), de tal forma que el usuario no se sienta perdido en la web y sepa siempre dónde está. Comúnmente podemos encontrar la barra de navegación en forma horizontal en la parte superior de los sitios web. Se utilizan 2 estructuras: Mostrar los enlaces que te regresan a cada página del sitio por la que el usuario ha pasado hasta llegar a la actual. Mostrar las páginas padre de la actual. Las rutas de navegación tienen la finalidad de evitar que los usuarios se sientan perdidos en un sitio web.

7 DISEÑO DIGITAL 6 Conclusión Estas son las características básicas que conforman un sitio web, pero se debe tomar en cuenta los requerimientos y las exigencias de cada proyecto para complementar nuestro sitio web, ya sea con el implemento de otras herramientas, el desarrollo de aplicaciones, o bien, hacer uso de redes sociales. Para realizar una página web en HTML es indispensable tener conocimiento de los códigos que la conforman y el significado de cada etiqueta, porque a pesar de que es un proceso sencillo, si no sabes interpretar cada etiqueta puede llegar a ser un trabajo complicado y confuso. Como los seres humanos las páginas web también tienen un cuerpo y una cabeza y, básicamente de esto se trata su estructura, de acomodar y organizar los códigos o etiquetas empezando por el encabezado y luego te vas al cuerpo (que es el contenido) de la página. Una página web no es difícil de elaborar si se tiene un objetivo específico, una planeación previa y se sabe organizar.

8 DISEÑO DIGITAL 7 Para aprender más Cómo crear una página web completa con HTML? Campos, Jesús (2011). Creación de una página web completa HTML, Video de You Tube. Cómo agregar color a tu página web con HTML? s/a (2011) Códigos de colores HTML.

9 DISEÑO DIGITAL 8 Actividad de aprendizaje Instrucciones Para verificar tus conocimientos para la elaboración de una página web con las etiquetas básicas, te pedimos realices el siguiente ejercicio. Utilizando la etiqueta que aplica para los párrafos, realiza el ejercicio con el siguiente texto: Título de Página: Por qué he de especificar más de una fuente? Texto: debe de especificar más de una fuente en caso de que su primera opción no esté disponible en la computadora del lector. Una de las fuentes que especifiquen deberá ser una común, como Arial para aumentar la probabilidad de que su página WEB la muestre. Sube tu actividad a la plataforma en el lugar indicado para que sea revisado.

10 DISEÑO DIGITAL 9 Referencias Baeza-Yates, R.; Peña, R. y Rodríguez, J. (2003). Gestión digital de la información, de bits a bibliotecas digitales y la web. México: Alfaomega. Campos, J. (2011). Creación de una página web completa HTML, obtenido de: Gómez, A. (2013) Estructura básica de una página web. Obtenido de:

Documentos relacionados

PASOS PARA CREAR UNA PÁGINA WEB

http://www.rafatux.com PASOS PARA CREAR UNA PÁGINA WEB Con éste documento trato de orientar de una forma genérica los distintos pasos que deben de realizarse para crear una página web. PRIMER PASO: Estructura