CONCEPTOS DE DISEÑO WEB

APLICACIONES ENRIQUECIDAS PARA INTERNET

CONCEPTOS DE DISEÑO WEB

Por Tania Salinas Epifanio

¿QUÉ ES LA WWW?

World Wide Web, es la red global mundial de intercambio de documentos a través de hipertexto comúnmente conocida como Internet.

INTERNET

Red informática descentralizada de alcance global para la recepción, gestión y transmisión de datos, desde un servidor a otro a petición de los usuarios.

+ info

¿QUÉ ES CSS?

Cascading Style Sheets, que significa «hojas de esilo en cascada». Es un lenguaje que se usa para estilizar elementos escritos en un lenguaje de marcado como HTML.

VENTAJAS

DESVENTAJAS

Estilos CSS interno, externo e inline

Conclusión

HTML

HTTP

conceptos

URL

HTML

HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).

+ info

HTTP

El protocolo de transferencia de hipertexto (HTTP) es un protocolo o conjunto de reglas de comunicación para la comunicación cliente-servidor. Cuando visita un sitio web, su navegador envía una solicitud HTTP al servidor web, que responde con una respuesta HTTP

+ info

URL

URL significa Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es más que una dirección que es dada a un recurso único en la Web. En teoria, cada URL válida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imagenes, etc.

EVOLUCIÓN

EVOLUCIÓN DE LA WEB

WEB 1.0

WEB 3.0

WEB 2.0

WEB 4.0

web 1

Páginas estáticas Las paginas en este tipo de web, no presentaban ningún tipo de interacción, cuando cualquier usuario las visitaba, en esos tiempos las paginas eran meramente informativas. Contenido del sitio web almacenado en archivos Básicamente los sitios web modernos tienen muchas interacciones y almacenan memoria de contenido, durante la Web 1.0 eso no era posible, por que los archivos se almacenaban en los archivos del sitio web, no en una base de datos separada Combinación de contenido y diseño Las practicas de la web hoy en día se dictan por separado, prácticamente todos los sitios web utilizan hojas de estilo externo para determinar el aspecto llamativo que le guste al usuario, pero si hablamos de la Web 1.0, el diseño era bastante básico y monótono sin chiste, por que ahora se tienen otras herramientas mas sofisticadas. Etiquetas HTML patentadas Durante la Web 1.0, todos los navegadores trataron de sobresalir con etiquetas avanzadas para su año también patentadas, que esto creo un gran problema para las webs, por que algunos sitios no podían tener compatitivilidad. Libros de visitas Casi siempre los visitantes de la web generaban comentarios de los libros de visita, en lugar de hacerlo en el apartado de la pagina de comentario, es una función Envío de formularios por correo electrónico Durante la fase de Web 1.0, rara vez ofrecían, soporté para la secuencias de comando del lado del servidor, que es necesario para usar el servicio de la web para enviar un formulario, en el tiempo presente esta muy automatizado y esto ayuda a los clientes de las paginas web ver todo tipo de contenido.

web 2

1. Hosting adecuado El alojamiento de tu sitio web es una de las cosas más importantes que debes tener en cuenta, ya que de este dependerá que tu sitio funcione y esté operativo todo el día. Si utilizas WordPress y tienes dudas, esta es nuestra recomendación de los mejores hostings que deberías barajar (por su calidad y precio): Webempresa, Raiola y Siteground. 2. Navegación sea sencilla A veces lo bonito atenta contra esto, ya que al querer diferenciarnos, buscamos un diseño web profesional demasiado rebuscado, que sea llamativo a la vista, pero puede que resulte difícil de navegar, cuando en realidad lo que queremos es que la personas encuentren lo que está buscando en la menor cantidad de clics posibles.Si tu sitio tiene mucho contenido e información, uno de las características de tu web 2.0 tendrá que ser necesariamente contener la casilla de búsqueda para que el usuario encuentre fácilmente lo que necesita y todo lo que no está a la vista. 3. Un buen encabezado Es lo primero que verán los usuarios al ingresar, por lo que debe incluir el logotipo o nombre del sitio y, si es posible, mencionar qué es lo que se ofrece en el sitio web 2.0. Dar una descripción clara de nuestros servicios o productos, nunca está de más. 4. Imágenes y contenido destacados En el mundo del diseño web 2.0 ya sabemos que las imágenes componen casi un 100% y los consumidores, al adquirir un producto “no tangible” en ese momento (a diferencia de cuando están comprando en una tienda), necesitan tener una idea lo más parecida a la realidad posible. Por ello, utiliza imágenes bonitas, llamativas, pero que sean reales e inspiren confianza. No obstante, no nos olvidemos del contenido, que debe ser atractivo y actual para que el que lea tenga aún más ganas de conocer qué es lo que tu marca puede ofrecerle. Si quieres que tu contenido destaque dentro de tu página web profesional o corporativa, debes utilizar una tipografía llamativa pero a la vez sencilla de leer, y resaltar algunas partes que quieras que se destaquen más que otras.

web 2

5. Botones de llamadas a la acción No dejemos que el usuario adivine lo que tiene que hacer en cada caso, si duda demasiado, terminará abandonando la página.Muchas veces, el usuario llega a nuestro sitio web profesional desde otra web, y no entra directamente a la “home”. No dejemos que se sienta perdido y guiémosle hacia donde queremos. Hay que ser muy claro y concreto en lo que queremos que el usuario haga. 6. Landing Pages Para los que todavía no conocen lo que es esto, se trata de un sitio web de una sola página a la que se accede a través de un banner u otro tipo de anuncio de algún portal de Internet.Aunque no es un elemento web estrictamente necesario, sí que es una herramienta fundamental para realizar campañas y promociones online, ya que en ellas se suele explicar más detalladamente el servicio o producto que se ofrece.Con herramientas como LeadPages puedes crear páginas de aterrizaje sin necesidad de saber sobre programación. Además, tiene un editor muy intuitivo y más de 100 plantillas para elegir la que mejor se adapte a tu objetivo (conseguir suscriptores a Youtube, descargar ebooks, crear una carta de venta para promocionar productos, etc.). 7. Opiniones de usuarios/clientesSiempre es importante destinar un espacio en todo diseño web profesional, tanto para destacar testimonios de usuarios de nuestros productos o servicios, tanto como para incluir logos de empresas (si son conocidas mejor) que confiaron en nuestros servicios.Esto aporta muchísima credibilidad e imagen corporativa, debido a la confianza que genera en el usuario que todavía no conoce la marca y se acerca al sitio web 2.0 por primera vez.8. Información de contacto y botones de redes socialesEsto puede parecer algo obvio para algunos, pero muchas veces, a la hora de tratar las características de nuestra web corporativa, se nos pasa por alto actualizar la información de contacto, lo que puede hacernos perder muchos clientes si a la hora de ponerse en contacto con nosotros no encuentran un número o un email correcto.Y qué decir de las redes sociales, aunque ya hemos hablado muchísimo de esto, es muy importante incluir links a nuestra página de Facebook o Twitter (por mencionar las más populares). Además, deben ser perfiles actualizados, ya que de nada sirve que el cliente linkee a un Facebook cuya última actualización data de 3 meses atrás.9. Diseño responsiveDiríamos que ya es casi imposible para una empresa que quiere tener una buena reputación en el ámbito 2.0 manejarse sin un diseño web responsive. Tu página web profesional tiene que poder visualizarse correctamente en todos los dispositivos (ya sea una tablet, un smartphone, una pc de escritorio, etc.).Básicamente, debemos brindarle al usuario una buena experiencia de navegación, navegue desde donde navegue. Fundamental, ¿no crees?10. Tener en cuenta el factor SEOAl mismo tiempo que nos preocupamos por el tener diseño web a medida que sea atractivo para la generación 2.0, debemos procurar que nuestro sitio web esté creado para favorecer su buen posicionamiento SEO.Para esto, contrataremos a un experto en SEO que sepa guiarnos en este punto, teniendo en cuenta el nombre del dominio, el contenido, cómo está distribuido, etc.Si tu página web está en funcionamiento, puedes guiarte por estos puntos y analizarlos uno a uno. Siempre hay cosas por mejorar, y eso es lo bueno de Internet y el mundo online, que nos sirven de guía para pensar si vamos por el buen camino o qué debemos modificar.

web 3

La Web 3.0, también conocida como Web3, es la tercera generación de la World Wide Web. La Web 3.0 está destinada a ser una web descentralizada, abierta a todos (con un diseño ascendente) y construida sobre tecnologías blockchain y desarrollos en la Web semántica, que describe la web como una red de datos enlazados con sentido. Se basa en un conjunto específico de principios, parámetros técnicos y valores que la distinguen de las iteraciones anteriores de la World Wide Web: Web 2.0 y Web 1.0. La Web 3.0 imagina un mundo sin empresas centralizadas, en el que las personas controlan sus propios datos y las transacciones se registran de forma transparente en blockchains, o bases de datos en las que cualquiera puede buscar. Se explica mejor a través de sus características, a saber: la ubicuidad, la descentralización, la inteligencia artificial y la interactividad de la web semántica. Ya han surgido algunas tecnologías Web 3.0, como el concepto descentralizado que sustenta el blockchain. Otros significados de la Web 3.0 aún están por comprender, y sobre todo por crear. La tecnología Blockchain se creó para facilitar las criptodivisas, las monedas digitales descentralizadas (no controladas por bancos centrales) que están llamadas a desempeñar un gran papel en la Web 3.0. Conocidas como criptomonedas Web 3.0, estas divisas (y otros activos digitales como los NFT) se utilizarán para incentivar a los usuarios y a los proveedores de servicios, y permitirán que las personas realicen transacciones directamente entre sí sin tener que pasar por terceros como los bancos convencionales.

web 4

Páginas estáticas Las paginas en este tipo de web, no presentaban ningún tipo de interacción, cuando cualquier usuario las visitaba, en esos tiempos las paginas eran meramente informativas. Contenido del sitio web almacenado en archivos Básicamente los sitios web modernos tienen muchas interacciones y almacenan memoria de contenido, durante la Web 1.0 eso no era posible, por que los archivos se almacenaban en los archivos del sitio web, no en una base de datos separada Combinación de contenido y diseño Las practicas de la web hoy en día se dictan por separado, prácticamente todos los sitios web utilizan hojas de estilo externo para determinar el aspecto llamativo que le guste al usuario, pero si hablamos de la Web 1.0, el diseño era bastante básico y monótono sin chiste, por que ahora se tienen otras herramientas mas sofisticadas. Etiquetas HTML patentadas Durante la Web 1.0, todos los navegadores trataron de sobresalir con etiquetas avanzadas para su año también patentadas, que esto creo un gran problema para las webs, por que algunos sitios no podían tener compatitivilidad. Libros de visitas Casi siempre los visitantes de la web generaban comentarios de los libros de visita, en lugar de hacerlo en el apartado de la pagina de comentario, es una función Envío de formularios por correo electrónico Durante la fase de Web 1.0, rara vez ofrecían, soporté para la secuencias de comando del lado del servidor, que es necesario para usar el servicio de la web para enviar un formulario, en el tiempo presente esta muy automatizado y esto ayuda a los clientes de las paginas web ver todo tipo de contenido.

¡GRACIAS!

"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en la «World Wide Web» (Red Informática Mundial).

Desventajas de CCS

Curva de Aprendizaje para Técnicas Avanzadas: Mientras que los fundamentos de CSS son sencillos de entender, dominar técnicas avanzadas y responsivas puede ser desafiante y requiere un conocimiento más profundo. Inconsistencias entre Navegadores: Al igual que con HTML, los diferentes navegadores pueden interpretar CSS de manera distinta. Esto significa que los desarrolladores deben realizar pruebas exhaustivas y a veces utilizar hacks o ajustes específicos para cada navegador para asegurar una experiencia consistente. Sobrecarga de Estilos: A medida que los proyectos se vuelven más complejos, el CSS puede volverse voluminoso y difícil de mantener, especialmente si no se sigue una metodología clara o si se sobreutilizan selectores y reglas.

Conclusiones

• CSS fue creado para trabajar en conjunto con lenguajes de marcado como HTML. Se utiliza para estilizar una página.
• Hay tres estilos de implementación de CSS, y puedes usar el estilo Externo para asignar varias páginas a la vez.
• Hoy en día podrás ver algún tipo de implementación de CSS en cualquier parte, ya que es un requisito tan importante como el propio lenguaje de marcado.

Ventajas CSS

• Control del Diseño: CSS ofrece un control detallado sobre el diseño y estilo de las páginas web. Desde el color y la fuente hasta la disposición de los elementos, CSS hace que todo sea personalizable.
• Mejora en la Consistencia: Al utilizar CSS, los desarrolladores pueden mantener una consistencia estilística en todo el sitio web, lo que mejora la experiencia del usuario.
• Eficiencia en el Mantenimiento: Con CSS, el estilo de múltiples páginas puede ser controlado desde un solo archivo, lo que hace que las actualizaciones y el mantenimiento sean más eficientes y menos propensos a errores.

Estilos CSS interno, externo e inline

• Estilo Interno. Los estilos CSS hechos de esta manera se cargan cada vez que se actualiza un sitio web, lo que puede aumentar el tiempo de carga. Además, no podrás usar el mismo estilo CSS en varias páginas, ya que está contenido en una sola página. Sin embargo, esto también tiene sus beneficios. Tener todo en una página facilita compartir la plantilla para una vista previa.
• El método Externo Todo se hace externamente en un archivo .css. Esto significa que puedes hacer todo el estilizado en un archivo separado y aplicar el CSS a cualquier página que quieras. El estilo Externo también puede mejorar los tiempos de carga.
• Estilo Inline de CSS. Inline trabaja con elementos específicos que tienen la etiqueta <style>. Cada componente tiene que ser estilizado, por lo que podría no ser la mejor forma, ni la más rápida para manejar CSS. Pero puede ser útil, por ejemplo, si quieres cambiar un solo elemento, tener una vista previa rápida de los cambios o tal vez no tengas acceso a los archivos CSS.