Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 4to Modulo - Arquitectura Web

    Cargado por

    Angie Llobet
    14 vistas6 páginas
    Este documento presenta los conceptos clave de la arquitectura web, incluyendo la estructura de documentos HTML, interlinking, URLs, contenidos y sitios desarrollados en JavaScript. Explica la importancia de una buena estructura de información, código limpio, etiquetas semánticas, y técnicas como canonical, outlines y rich snippets. También cubre temas como estructuras planas, verticales y por silo, y el uso adecuado de librerías y prerender para sitios con contenido dinámico.

    Descripción original:

    Título original

    4to modulo -Arquitectura Web

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento presenta los conceptos clave de la arquitectura web, incluyendo la estructura de documentos HTML, interlinking, URLs, contenidos y sitios desarrollados en JavaScript. Explica la importancia de una buena estructura de información, código limpio, etiquetas semánticas, y técnicas como canonical, outlines y rich snippets. También cubre temas como estructuras planas, verticales y por silo, y el uso adecuado de librerías y prerender para sitios con contenido dinámico.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    14 vistas6 páginas

    4to Modulo - Arquitectura Web

    Cargado por

    Angie Llobet
    Este documento presenta los conceptos clave de la arquitectura web, incluyendo la estructura de documentos HTML, interlinking, URLs, contenidos y sitios desarrollados en JavaScript. Explica la importancia de una buena estructura de información, código limpio, etiquetas semánticas, y técnicas como canonical, outlines y rich snippets. También cubre temas como estructuras planas, verticales y por silo, y el uso adecuado de librerías y prerender para sitios con contenido dinámico.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 6

    Módulo 4°: Arquitectura Web

    En este módulo vamos a ver arquitectura web a nivel general, para ello es necesario que
    repasemos los siguientes aspectos de un sitio web:

    ● Estructura
    ○ Estructura de documento HTML
    ○ Estructura de la información

    ● Interlinking
    ○ Espacios donde aplicarlo

    ● URL
    ○ Categorias y subcategorias
    ○ Navegación facetada
    ○ URL finales para productos y notas

    ● Contenidos
    ○ Duplicado
    ○ Outlines
    ○ Rich Snippets

    ● Sitios Desarrollados en JS
    ○ Prerender

    Ahora bien, antes que nada tenemos que tener en cuenta el panorama con el cual nos vamos a
    encontrar, el cual puede ser:

    ● El ideal
    ○ Estar en un proyecto desde cero donde enviamos las mejores recomendaciones
    para el desarrollo de un sitio. ¿cuándo pasará esto? en un proyecto personal o
    familiar.

    ● El real
    ○ Un sitio ya armado donde cada acción en estructura representa una inversión
    monetaria, recordemos que los equipos de desarrollo son caros y siempre es el
    área de cualquier empresa con más tickets en espera.

    Estructura de documento HTML:

    ● Código limpio
    ○ Eliminar espacios
    ○ usar etiquetas html 5 como:
    ■ main
    ■ nav
    ■ aside
    ■ section
    ■ article

    Ejemplo y página de referencia para tener en cuenta. Aquí se explica de forma muy simple cada
    una de ellas. Ejemplo main: https://www.htmlquick.com/es/reference/tags/main.html

    ● Etiquetas en el orden que corresponde


    ○ vemos casos donde se declara el formato de codificación de caracteres
    después de una etiqueta title, inclusive después de etiquetas de favicon y
    open graph.

    El orden para un código limpio en un sitio:

    ○ <html>
    ■ <head>
    ● <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    ● <meta name="robots" content="index, follow" />
    ● <meta name="viewport" content="initial-scale=1.0, width=device-
    width"/>
    ● Title.
    ● Metadescription.
    ● Todas las etiquetas meta property Open Graph que usemos.
    ● Canonical
    ● Lista de favicons.
    ● El resto de las librerías o script que llamemos para que el sitio cargue
    correctamente.
    ■ <body>
    ■ <footer>

    Uso de librerías:
    ○ Ubicación
    ■ importancia sobre el TTFB
    ○ <script>
    ■ async y defer

    ○ Preload
    ○ Lazyload

    Muy bien ahora que vimos a fondo distintos aspectos de la estructura, desde lo que tenía que
    ver con el código, podemos avanzar en cuanto a la información.

    Muchas veces se resume arquitectura web en lo que vamos a ver a continuación.


    En esta ocasión queremos dejar en claro que la estructura de información es una parte
    fundamental de la arquitectura web, no así el todo.

    ○ Estructura Plana
    ○ Estructura Vertical
    ○ Estructura por SILO

    ● A tener en cuenta:
    ○ No tener páginas huérfanas como por ejemplo:

    ● Un ideal de 4 niveles máximos de clics:


    Interlinking:

    Cuando hablamos de interlinking en cuanto a Arquitectura web vamos hablar de espacios a


    tener en cuenta y según sea nuestro negocio poder tenerlos en cuenta para explotarlos.

    ● Breadcrumb
    ● Carruseles / Aside
    ○ Relacionados por: marca, genero, categoría, etc
    ○ Ultimos
    ○ Los más buscados
    ○ Los más Comprados

    ● Pirámides de links
    ○ Estatica o dinamica

    URL:

    Cuando hablamos de URL en arquitectura web tendremos que hacer foco en los distintos
    niveles, no vamos entrar en cuestiones de pautas para URL optimizadas si en jerarquías.

    ● Categorias y subcategorias
    ● Navegación facetada
    ● URL finales para productos y notas

    Contenidos:

    En esta ocasión vamos a ver como poder evitar el contenido duplicado y el trabajo de outlines
    desde la arquitectura web.

    ● Etiqueta Canonical
    ○ Que es
    ○ Cuándo aplicarlo

    ● Outlines
    ○ Qué es y cómo lo ve Google

    ● Rich Snippets
    ○ En fichas
    ■ Todos los marcados schema

    ○ Fragmentos destacados

    Sitios desarrollados en JS:

    Es una librería que en muchas ocasiones nos vamos a encontrar y no podemos no utilizarlas
    para el funcionamiento de nuestro sitio.

    ● Tendencias de sitios y aplicaciones web en JS:


    ○ Contenido dinámico
    ■ Login
    ■ Geolocalización

    ○ Proveedores

    ● Solución para una correcta visibilidad


    ○ Prerender
    ■ Qué es
    ■ Cómo funciona

    También podría gustarte