Want to create interactive content? It’s easy in Genially!
Diseño web
Daniela Aguilar
Created on May 10, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Daniela aguilar
Evolución de la web
Lenguaje web
Elementos del diseño web
Web semántica
Todo lo que necesitas saber
Diseño web
Desventajas
Ventajas
- La semántica. Es el estudio del significado de los términos lingüísticos. En nuestro contexto de la Web Semántica, se pretende dotar de significado interpretable por parte de las máquinas, como información adicional que pueda ser comprendida y procesada por una computadora.
- Los metadatos. Son datos que describen otros datos, en este contexto los datos que describen recursos de la web. La distinción entre datos y metadatos es relativa, pues depende de la aplicación. Los metadatos de una aplicación pueden ser los datos que maneja otra aplicación.
- Las ontologías. Una ontología es una jerarquía de conceptos con atributos y relaciones, que define una terminología consensuada para definir redes semánticas de unidades de información interrelacionadas y con ciertas reglas.
Puntos fundamentales
La web semántica es un conjunto de actividades desarrolladas en el seno de World Wide Web Consortium con tendencia a la creación de tecnologías para publicar datos legibles por aplicaciones informáticas.
Web semántica
- Es costoso y laborioso adaptar los documentos de Internet, para poder ser procesados de forma semántica (a esto hay que sumar los problemas del idioma).
- Es necesario unificar los estándares semánticos y proveer relaciones de equivalencia entre conceptos. Por ejemplo, en el caso del código postal, se debe establecer que CP es igual a ZC “zip code” en el caso del inglés.
Desventajas
Desventajas
- Incorpora contenido semántico a las páginas que se suben a Internet. Esto permite una mejor organización de la información, asegurando búsquedas más precisas por significado y no por contenido textual.
- Permite a las computadoras la gestión de conocimiento, hasta el momento reservada a las personas (hace uso de inteligencia artificial).
Ventajas
Siguiente
- El encabezado: debe brindar a simple vista la forma de navegar y un resumen muy rápido de quién es tu marca y su identidad. No olvides los siguientes elementos: Logotipo, CTA (puede variar intención): para conocer más sobre un producto, para ir a ala versión de prueba del producto, para dirigir al carrito de compras. Menú y enlace para redes sociales.
- Menú de navegación: su intención es que cualquier visitante pueda explorarla completamente. Cuanto más fácil y rápido de leer sea el menú, mejor experiencia tendrá el usuario.
- CTA: Son aquellos atajos con los que ayudas a tus visitantes a realizar las acciones que deseas, por ejemplo: pedir informes, conocer más acerca de tu producto, descargar una guía, entre otros.
- Imágen destacada: Es la zona que está debajo del encabezado. Esto hace que prácticamente estén conectados. Mientras que el encabezado te brinda una información de contacto y navegación directa del sitio web, la imagen destacada complementa la vista con elementos altamente atractivos.
- Buscador: No le restes relevancia al buscador dentro de tu página web; en realidad, ayuda a tus visitantes a encontrar lo que necesitan. Este elemento brinda usabilidad y conveniencia, a la vez que logra retener a la persona que visita tu sitio.
Elementos del diseño web
Atrás
- Formulario: Estrategias como el inbound marketing nos han dejado en claro la importancia de contar con un formulario en una página web. Este recurso es un elemento clave para obtener más datos de los visitantes y comenzar una estrategia de conversión.
- Video: Si bien un video no es un elemento obligatorio en una página web, sí se ha vuelto en una pieza esencial para aumentar tu retención. Los usuarios gastan un 88 % más de tiempo en una web que tiene contenido en video con respecto a una que no tiene.
- Icono de URL: elemento que brinda detalles de cualquier sitio web, refuerza la marca y permite a los usuarios tener una conexión visual más rápida. Este elemento aparece en el navegador y en la pestaña de marcador como un pequeño icono de la marca. Agregarlo contribuye a la usabilidad web.
- Información de contacto: La información de contacto es un elemento que suele colocarse en la parte final, en el pie de página. En esta sección se incluyen datos que proporcionan más información al visitante acerca de tu negocio, por ejemplo: dirección, número de contacto, redes sociales o incluso un mapa con la ubicación exacta.
- Pie de página: El pie de página es el elemento final de una página web (y es ahí donde suele aparecer la información de contacto). En este espacio pueden concentrarse diferentes datos útiles, como los enlaces. Algunos de los elementos que más se incluyen en el pie de página son: nombre y logotipo de la marca, enlaces a redes sociales, enlace de página de soporte al usuario, enlace a página de preguntas frecuentes, términos y condiciones, <acerca de>, dirección de la empresa o mapa.
Elementos del diseño web
Inicio
Apariencia
Funcionalidad
Estructura
HTML - HyperText Markup Language El lenguaje de marcado de hipertexto es el lenguaje que se usa para escribir una página web. Está compuesto por etiquetas que marcan el inicio y fin de una estructura como por ejemplo un párrafo de texto, una imagen o un enlace. HTML no es un lenguaje de programación, pues carece de características como secuencias, condicionales y ciclos. A los archivos escritos en este lenguaje se les llama informalmente como las páginas. JS - JavaScript JavaScript es un lenguaje de programación. Es el lenguaje que permite programar ciertas funcionalidades en el navegador como animaciones o validación de datos. Los archivos escritos en este lenguaje los escucharás nombrar informalmente como los scripts. CSS - Cascading Style Sheet Las hojas de estilo en cascada son un lenguaje que define el aspecto de una página web. CSS no es un lenguaje de programación, es más bien un lenguaje descriptivo. Con CSS se definen las propiedades visuales del contenido de una página: colores, tipo y grosor de letra, tamaño de los elementos del contenido, etc. Se suelen llamar informalmente como los estilos.
Lenguaje web
Inicio
- La web 1.0, fue la primera (apareció hacia 1990) y en ella solo se podía consumir contenido. Se trataba de información a la que se podía acceder, pero sin posibilidad de interactuar; era unidireccional.
- La web 2.0, (apareció en 2004) y contiene los foros, los blogs, los comentarios y después las redes sociales. La web 2.0 permite compartir información. Y aquí estamos, de momento la mayor parte de los consumidores.
- La web 3.0 (fue operativa en el 2010) y se asocia a la web semántica, un concepto que se refiere al uso de un lenguaje en la red. Por ejemplo, la búsqueda de contenidos utilizando palabras clave.
- La web 4.0. empezó en el 2016 y se centra en ofrecer un comportamiento más inteligente y más predictivo, de modo que podamos, con sólo realizar una afirmación o una llamada, poner en marcha un conjunto de acciones que tendrán como resultando aquello que pedimos, deseamos o decimos.
La web es un “organismo vivo” y, como tal, evoluciona. Desde su creación el año 1966, con esa primera red Arpanet, hasta el posterior nacimiento del Internet que conocemos, no ha dejado de cambiar y perfeccionarse. Hemos pasado de una web 1.0 a la 2.0, 3.0 y ahora llega la web 4.0. Pero, ¿cómo hemos llegado hasta aquí?
Evolución dela web