Lección 1 - Introducción al Diseño Web - PDF

“Educación que genera cambio” Lectura 1. “Introducción al Diseño Web” Instrucciones: Realiza el análisis de la siguiente información, posteriormente, completa la Actividad 1. Conceptos básicos de Página Web. ¿Qué es una Página Web? Es una página electrónic...

“Educación que genera cambio” Lectura 1. “Introducción al Diseño Web” Instrucciones: Realiza el análisis de la siguiente información, posteriormente, completa la Actividad 1. Conceptos básicos de Página Web. ¿Qué es una Página Web? Es una página electrónica o documento digital de carácter multimediático (es decir, capaz de incluir audio, video, texto y sus combinaciones), adaptado a los estándares de la World Wide Web (WWW) y a la que se puede acceder a través de un navegador Web y una conexión activa a Internet. Se trata del formato básico de contenidos en la red. Actualmente representan el principal archivo de información por lo que existen millones de ellas de diversas índole y contenido en distintos idiomas y de todas partes del mundo. Estas las podremos encontrar guardadas en muchos servidores a los que podemos acceder a través de protocolos de comunicación (HTTP). Las páginas Web se encuentran programadas en un formato HTML o XHTML y se relacionan por medio de hipervínculos que son enlaces hacia otros contenidos que podemos hacer para poder tener una lectura compleja, simultánea y diversa. Cumplen básicamente con la tarea de brindar información de cualquier índole y en cualquier estilo o grado de formalidad. Todas las páginas Web necesitan de un navegador Web para ser visualizadas y utilizadas. Un navegador Web es un software de aplicación que permite abrir páginas Web ya sea en una ruta local (como el disco rígido) o desde la red de Internet. Se les conoce como “navegadores” o “exploradores” porque nos permiten “entrar” a Internet y visualizar distintos contenidos a partir del ingreso de direcciones URL o del empleo de servicios online de búsqueda de datos (conocidos como Buscadores Web). Debemos tener en cuenta entonces que no es lo mismo hablar de página Web (Web page) y de sitio Web (Web site), ya que estos últimos están conformados por diversas páginas web, un sitio web, como un espacio virtual en Internet que contiene un conjunto de páginas web que son accesibles desde un mismo dominio o subdominio de la World Wide Web (WWW). Este debe estar en condiciones de adaptarse a distintos formatos de pantalla. En los sitios web podremos encontrar documentos HTML, fotografías, sonidos, vídeos, animaciones y otros tipos de contenidos que pueden compartirse en línea. Se identifican por una dirección URL única que la mayor parte de las veces pertenece a la página de inicio también conocida como Home page que es la que comúnmente nos permite el acceso a todas las páginas del sitio mediante links (hipervínculos o enlaces). Cada página web que encontramos en un sitio está diseñada empleando un código en HTML y se encuentra guardada en una cuenta de hosting a través de un dominio el cual permitirá que 10  “Educación que genera cambio” un navegador pueda mostrarla en internet, estas páginas pueden ser estáticas o dinámicas, en la siguiente imagen podemos ver algunas características de ellas. 11  “Educación que genera cambio” Según el negocio o función: ▪ Buscadores ▪ Sitios web de eCommerce ▪ Foros ▪ Sitios web de noticias ▪ Blogs ▪ Sitio Web corporativas ▪ Wikis ▪ Sitios educativos ▪ Videos ▪ Sitios de gobierno Podemos clasificar también a las páginas o sitios web de acuerdo con su función como se muestra en la siguiente tabla. HTML: ( Hyper Text Markup Language) Es un lenguaje de marcado de hipertexto que se utiliza para crear las páginas web a las que accedemos en internet a través de los navegadores ya que este permite estructurar un documentos a través de etiquetas. Se caracteriza por ser adaptable y contener una estructura lógica muy fácil de entender. El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium, mejor conocido como W3C. Los estándares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML 4.0, el HTML 4.01 y el HTML 5. El HTLM 5 es la última especificación oficial. “Desde la creación del primer sitio web, hasta hoy los cambios son abismales. Y lo más interesante de todo es que esta evolución es constante” (Gima, 2019), desde la creación del código HTML hasta ahora han existido diferentes técnicas de creación de páginas web. Cada una proporciona una estructura distinta para optimizar los recursos Figura 1Gima (2019) Cronología diseño WEB 12  “Educación que genera cambio” buscando evolucionar hacia la experiencia del usuario para que la navegación por internet sea más fácil e intuitiva. Diseño web: Es la actividad que se encarga de la planificación, el diseño, la implementación, el mantenimiento y la creación de páginas web utilizando lenguajes de marcado como HTML o XML, o aplicaciones como Adobe Dreamweaver y CMS que son plataformas de administración de contenido y tomando en cuenta para ello el diseño de la interfaz, todos los elementos gráficos a utilizar la experiencia que tendrá el usuario con el sitio. Se encarga de la parte visual (estética) de la página por lo que busca que el resultado obtenido ofrezca una buena experiencia con navegación y arquitectura agradable al usuario que permite un grado de usabilidad aceptable y no haga que este abandone el sitio moviéndose a otras páginas. Servidor web: es una computadora de gran capacidad que tiene como función almacenar los archivos de un sitio y emitirlos por Internet para poder ser visitado por los usuarios. Cuando un usuario entra en una página de Internet el servidor es el que encarga de proporcionar todos los elementos de esta a tu computadora para que sean visualizados por su navegador. Hosting: Es el espacio en línea que proporciona un servidor para almacenar todo el contenido de un sitio web que hará que este funcione adecuadamente. Este servicio permite publicar un sitio o aplicación web en internet a través de un dominio mientras se navega por Internet. Dominio: Es el nombre único en internet que identifica una página web o un sitio web y por medio del cual podrán acceder los usuarios. Este puede ser alfanuméricos, es decir, compuestos de letras y números, en una secuencia específica y puntual. 13  “Educación que genera cambio” Este nombre contiene los siguientes elementos: Nombre de la organización. El nombre específico de la empresa, persona u organización de cualquier tipo que estamos buscando, como puede ser COBATAB. Tipo de organización. Define el tipo de organización al que pertenece la empresa del sitio, puede discernir entre páginas comerciales (.com), de telecomunicaciones (.net de network), organizacionales (.org), gubernamentales (.gob), educación (.edu), etc. Un navegador web necesita un nombre de dominio (dirección física) para dirigirte a un sitio web. Internet funciona y está organizado a través de direcciones IP, cada dirección IP dirige el explorador a una ubicación donde el servicio de hosting tiene almacenados los archivos. Estas direcciones se encuentran en un formato de números separados por puntos (por ejemplo 194.153.205.26) que es muy difícil de recordar y no son atractivos, por lo que se crearon los dominios, en los que se pueden utilizar letras, números y algunos caracteres especiales para crear un nombre atractivo al sitio web. Un mecanismo conocido como DNS (Sistema de Nombres de Domino) se encarga de “traducir” el nombre del dominio en la dirección IP a la que este apunta y así permite que mediante este se pueda acceder a los archivos que contienen el sitio web y visualizarlo en el explorador. URL: (Uniform Resource Locator, en español Identificador de Recursos Uniforme) es la dirección única y específica que se asigna a cada uno de los recursos (páginas, sitios, documentos, archivos, carpetas) disponibles de la World Wide Web para que puedan ser localizados por el navegador y visitados por los usuarios. Partes de una URL 1. Protocolo de red. Http, Https, Mailto y FTP son protocolos web que encabezan una URL, indicando a la máquina qué tipo de conexión debe realizar y el lenguaje específico que se hablará con la computadora o la red de computadoras que brindarán la información al usuario. 2. Servicio. Se trata de los servicios de soporte de información on-line, de los cuales la World Wide Web (WWW) es la más popular. 3. Dominio, tipo de dominio y país. Es el “nombre” de la empresa que brinda la información, o del proyecto, la red o la computadora en donde se encuentran, es decir, el nombre específico de quien tiene lo que buscamos, el tipo de servicio que presta: comercial (.com), educativo (.edu), etc., y el país al que pertenece: Argentina (.ar), Brasil (.br), Italia (.it), etc. 14  “Educación que genera cambio” 4. Ruta y nombre del archivo. Las carpetas y directorios en los que se ubica el recurso específico dentro del computador servidor (que brinda la información). Ejemplo Applet: es un programa que puede incrustarse en un documento HTML (página Web). Cuando un Navegador carga una página Web que contiene un Applet, éste se descarga en el navegador Web y comienza a ejecutarse, lo cual nos permite crear programas que cualquier usuario puede ejecutar. Para que el applet funcione se debe tener instalado el Java y que esté activado a través del explorador web, además puede realizar muchas operaciones como operaciones aritméticas, mostrar gráficos, reproducir sonidos, aceptar entradas de usuario, crear animaciones y juegos interactivos. Figura 2_L. (2018, 30 abril). Applet. Elementos de una página web. Tipografía: Se debe utilizar fuentes Contenido: Debe ser atractiva llamativas pero sencillas de leer visualmente y con contenido con variaciones de tamaño para interesante y actualizado que resaltar secciones interesantes del atraiga al público objetivo contenido y del texto. Botones e iconos: Deben utilizar Imágenes: Las imágenes utilizadas botones prácticos y representativos no deben estar pixeladas o para hacer atractiva la página, así desenfocadas, ya que pueden como iconos grandes y vistosos que causar una mala imagen del sitio en aumenten la facilidad de general. navegación en la página. Fondos claros y sencillos: Si se Enlaces a redes: Se deben incluir usa fondos claros o totalmente enlaces a redes sociales con las blancos facilitan la visualización y cuales el usuario pueda interactuar dan un aspecto despejado a la con facilidad. página resaltando las imágenes. Sobriedad: Debe permitir una fácil visualización de los contenidos (vídeos, imágenes, textos). Saturar al cibernauta con mucho contenido puede ser contraproducente. 15