Please enable JavaScript.

Coggle requires JavaScript to display documents.

PAGINAS WEB, ¿PARTES DE UNA PAGINA WEB? - Coggle Diagram

- - - - Necesita un diseño visualmente agradable y coherente con la marca.
      - También una navegación intuitiva a través de menús claros que faciliten el desplazamiento por el sitio.
      - Debe incluir información relevante, bien redactada y actualizada.
      - Necesita un buen rendimiento para que sus páginas carguen rápidamente.
      - Además, a día de hoy es esencial que tenga un diseño responsive, adaptable a diferentes dispositivos y tamaños de pantalla.
    - - Dominio
        Un dominio es la dirección única que identifica un sitio web en internet, como www.ejemplo.com. Comprar un dominio apropiado conseguirá que el número de visitas al sitio aumente.
      - Relacionado: Aprende más sobre qué es un dominio
      - Alojamiento web
        El alojamiento web es el servicio que permite almacenar los archivos y datos de un sitio web en servidores para que estén accesibles en línea. Además, un buen alojamiento web influye muy positivamente en aspectos como la velocidad de carga de la página web
      - Diseño adaptativo
        También denominado diseño responsive, se refiere a la capacidad de un sitio web para adaptarse automáticamente a pantallas de diferentes tamaños, como de ordenadores, tablets o celulares
      - Navegador web
        Un navegador web es una aplicación que permite acceder y visualizar los sitios web. Algunos ejemplos populares son Chrome, Firefox o Safari.
      - CMS
        son las siglas de Content Management System (Sistema de Gestión de Contenido), como WordPress, que facilita la creación y administración de un sitio web sin necesidad de conocimientos técnicos avanzados
      - URL
        Una URL (Uniform Resource Locator) es la dirección única que especifica la ubicación de un recurso en internet, como una página web
      - Enlace
        Un enlace, o link, es un elemento interactivo que permite a los usuarios navegar entre diferentes páginas web. También se le conoce como hipervínculo.
      - E-commerce
        El comercio electrónico, o e-commerce, se refiere a la compra y venta de bienes y servicios a través de internet, generalmente en un sitio web dedicado a ese fin.
      - SSL
        (Secure Sockets Layer) es un protocolo de seguridad que proporciona una conexión cifrada entre un navegador web y un servidor, protegiendo la información transmitida.
    - - Header: La cabecera del sitio, que puede incluir su logo y el menú de navegación.
      - Footer: El pie de página, que suele incluir información de contacto y enlaces de navegación útiles.
      - Contenido principal: Es la sección central en la que se muestra el contenido relevante.
      - Navegación: Menús y links que facilitan el desplazamiento por el sitio.
      - Imágenes: Gráficos, fotografías, ilustraciones o vídeos que complementan el contenido escrito.
      - Formularios: Herramientas interactivas que permiten recolectar información del usuario.
- - - - ¿POR QUE ES IMPORTANTE EL DISEÑO WEB?
        El diseño web es clave porque es como la “cara” de tu negocio en Internet. Si tu página web se ve profesional y es fácil de usar, las personas que la visiten tendrán una mejor experiencia, confiarán más en tu negocio y es más probable que se conviertan en clientes.
        
        TERMINOS BASICOS APLICADOS AL DISEÑO WEB
        
         Balance: El equilibrio visual en diseño web significa que ningún elemento de una página debe dominar demasiado.
        
         El balance simétrico ocurre cuando ambos lados de la página son iguales, como si fueran un reflejo.
        
         El balance asimétrico logra que ambos lados tengan el mismo peso visual, pero los elementos no están organizados de manera idéntica.
        
         Contraste: El contraste es una técnica visual que consiste en combinar elementos opuestos, como colores oscuros y claros, texturas suaves y rugosas, o tamaños grandes y pequeños.
        
         Énfasis: El principio de énfasis es una técnica que te ayuda a destacar los elementos más importantes.
        
         Movimiento: El movimiento en el diseño web es lo que ayuda a llevar la mirada de los visitantes de un elemento a otro dentro de tu página.
        
         Ritmo: El ritmo en el diseño web consiste en repetir ciertos elementos para dar un sentido de consistencia y cohesión a tu marca, además de reforzar un mensaje clave.
        
         Jerarquía: En diseño web, existe un principio llamado jerarquía, que significa que lo más importante debe estar en un lugar visible y fácil de encontrar.
        
         Espacio en blanco: En arte y diseño, el espacio en blanco se refiere a cualquier área de una composición que no tiene elementos visuales.
        
         Unidad: La unidad en el diseño web significa que todos los elementos de tu página trabajan juntos para crear una experiencia agradable y coherente
        
        ELEMENTOS VISUALES DEL DISEÑO WEB
        
        • Encabezado del sitio web: El encabezado del sitio web se encuentra en la parte superior de la página y es lo primero que los visitantes ven al ingresar.
        
        • Pie de página del sitio web: El pie de página está ubicado en la parte inferior de cada página del sitio web y permanece fijo en todas ellas.
        
        • Paleta de colores: En diseño web, la paleta de colores de tu sitio establece el tono general.
        
        • Tipografía: La tipografía se refiere a los aspectos visuales del texto, como la elección de fuentes y la disposición del contenido escrito.
        
        • Fondo del sitio web: El fondo de tu página es mucho más que un simple lienzo, es el encargado de definir el estilo de todo tu sitio.
        
        • Imágenes: Las imágenes de tu sitio pueden decir más que mil palabras y, en segundos, transmitir el mensaje que deseas.
        
        • Animación: Si buscas que tu sitio se destaque, la animación es tu mejor aliada.
        
        ELEMENTOS FUNCIONALES DL DISEÑO WEB
        
        • Navegación: Un diseño web puede incluir varias páginas e ítems que los visitantes explorarán.
        
        • Velocidad: La velocidad mide qué tan rápido se carga tu sitio cuando alguien entra.
        
        • Experiencia de Usuario (UX): El diseño UX es clave para determinar cómo interactúan los usuarios con tu sitio y tu negocio.
- - - - ¿PARA QUE SIRVEN? Un sitio web sirve para tener presencia en la red. Cumple diferentes funciones con base en los objetivos planteados. Sirve para informar, vender productos o servicios, crear una comunidad o impulsar una causa, interactuar, capacitar o educar, ofrecer soporte o atención, o divertirse
      - CARACTERISTICAS DE UNA PAGINA WEB
        
        Una página web no solo debe ser atractiva a nivel estético, ¡también tiene que ofrecer una funcionalidad perfecta y ser segura!
        
        La página debe ofrecer una experiencia de navegación sencilla y permitir a los usuarios encontrar rápidamente lo que buscan.
        
        Su diseño necesita debe ser responsive para poder adaptarse a los tamaños de diferentes dispositivos y garantizar así una buena experiencia en celulares, tabletas y computadoras.
        
        Es importante que la página cargue rápidamente para mantener la atención del usuario y mejorar el SEO.
        
        También es básico implementar elementos de seguridad como certificados SSL.
        
        Además, la página web debe estar optimizada para los motores de búsqueda, lo que requiere de un uso adecuado de palabras clave y links internos.
        
        OBJETIVOS Y FUNCIONES DE UNA PAGINA WEB
        
        Los objetivos de una página web pueden variar en función de su propósito, pero suelen incluir la difusión de información, la promoción de productos o servicios, la interacción con los usuarios y la conversión de visitantes en clientes.
        
        Para el usuario, una página web debe ofrecer contenido de interés, así como ser fácil de encontrar y de navegar.
        
        Desde el punto de vista del administrador, las principales funciones son la actualización del contenido, el monitoreo del tráfico web y la gestión de la seguridad de la página para proteger los datos y poder mantener la confianza de los usuarios.
    - - Encabezado.
        
        Menú
        
        Imágenes.
        
        Contenido del sitio web.
        
        Página de inicio.
        
        Pie de página.
        
        Logo.
        
        CTA o llamados a la acción.
    - - La diferencia principal entre una página web y un sitio web está en su alcance y estructura, ya que una página web es un único documento dentro de un navegador, mientras que el sitio web es una colección de varias páginas web interconectadas.
    - - Existen muchos tipos de páginas web en función de qué objetivos se busque alcanzar con ellas y cómo estén estructuradas. Por eso, ahora que saben qué es una página web, ver unos ejemplos será aún más clarificador:
      - PAGINAS WEB ESTATICAS
      - PAGINAS WEB DINAMICAS
      - PAGINAS WEB DE COMERCIO ELECTRONICO
      - PAGINAS WEB DE BLOGS
      - PAGINAS WEB DE COMUNICASION
      - PAGINAS WEB REDES SOCIALES
      - PAGINAS WEB CORPORATIVAS
      - PAGINAS WEB INTERACTIVAS
      - PAGINAS WEB DE PORTFOLIOS
    - - El funcionamiento de una página web conlleva procesos técnicos que comienzan [cuando](un usuario ingresa una URL en su navegador. :
      - El navegador se comunica con un servidor DNS para obtener la dirección IP correspondiente al : : dominio solicitado.
      - Se envía una solicitud HTTP o HTTPS al servidor que aloja la página web.
      - El servidor procesa la solicitud, accede a los archivos necesarios (como HTML, CSS, y JavaScript) y envía la respuesta al navegador del usuario, donde se renderiza la página web solicitada.
      - La interacción entre el cliente (navegador) y el servidor es fundamental para el éxito de este procedimiento, pues el cliente solicita recursos y el servidor los entrega.
      - Este proceso puede incluir la ejecución de scripts en el servidor para generar contenido dinámico antes de enviarlo al cliente, o la recuperación de datos de bases de datos para mostrar información específica en tiempo real
      - DISEÑO Y ELABORACION DE UN SITIO WEB
        
        El diseño y la elaboración de una página web requieren de poner atención a varios elementos que permiten asegurar la mejor experiencia de usuario posible.
        
        Usabilidad, para garantizar que la navegación sea intuitiva.
        
        Responsividad, para que la página funcione bien en todos los dispositivos.
        
        Velocidad de carga, que influye directamente en la retención de visitantes.
        
        Optimización SEO, que ayuda a que la página sea más visible en motores de búsqueda.
- - - - HTML (HyperText Markup Language), para definir la estructura de los documentos.
      - XML (eXtensible Markup Language), que sirve de base para un gran número de tecnologías.
      - CSS (Cascading Style Sheets), que permite asignar estilos para la representación de los documentos.
      - Javascript, que permite otorgar dinamismo y funcionalidad.
    - - ¿Cómo se crean los estándares web?
      - La creación de un estándar Web requiere un proceso controlado, que consta de varias etapas que aseguran la calidad de la especificación.
      - Este proceso permite la intervención de todos los usuarios de las tecnologías, con el objetivo de que puedan aportar su conocimiento y opiniones para la mejora de los documentos.
      - Tras este proceso, elaborado por especialistas en la materia, se obtienen unos estándares de calidad.
      - Al estar disponible para todo el mundo, las especificaciones se depuran exhaustivamente antes de ser consideradas como recomendación o estándar.
    - - Conociendo un poco sobre la historia de los estándares y por qué se introdujeron, podemos comenzar a ver los beneficios de tener estándares para el desarrollo web.
        
        Las ventajas de seguir los estándares web establecidos son:
        
        Mantener la web gratis y accesible para todos
        
        Ayudar a simplificar el código fuente
        
        Reducción del tiempo de desarrollo y mantenimiento
        
        Hacer de la web un lugar más accesible
        
        Permitir compatibilidad y validación hacia atrás
        
        Ayudar a mantener un mejor seo (optimización de motores de búsqueda)
        
        Crear un grupo de conocimiento común
        
        ¿Qué es el W3C?
    - - Cuando se describe que un sitio o página web cumple con ciertos estándares web, usualmente quiere decir que la página tiene partes de código HTML, CSS, XML y JavaScript válido o casi válido. La parte HTML debe cumplir también ciertas guías de accesibilidad y semántica.
        
        Algunas de las publicaciones fundamentales a seguir para un uso correcto de los estándares web son:
        
        Recomendaciones para lenguajes de marcado, como el lenguaje de marcas de hipertexto (HTML), lenguaje extensible de marcado de hipertexto (XHTML), Scalable Vector Graphics (SVG), y XForms, de W3C.
        
        Recomendaciones para hojas de estilo, especialmente hojas de estilo en cascada (CSS), de W3C.
        
        Estándares para ECMAScript, más comúnmente JavaScript, de Ecma International.
        
        Recomendaciones para Document Object Models (DOM), de W3C.
        
        Nombres y direcciones de página correctamente formados y demás recursos referenciados de sus (URIs), basado en RFC 2396, de IETF8
        
        El uso apropiado de los protocolos HTTP y MIME para desplegar la página, regresar datos pedir otros recursos referenciados a ésta, basado en RFC 2616, de IETF9
        
        El trabajo de la organización W3C hacia una web semántica está actualmente enfocado por publicaciones relacionadas al Marco de Descripción de Recursos (RDF), Gleaning Resource Descriptions from Dialects of Languages (GRDDL) y Web Ontology Language (OWL).
        
        Validadores online
        
        Como para otros estándares, el W3C ofrece herramientas gratuitas de validación que son muy útiles para comprobar que la forma de utilizar estos lenguajes (sintaxis) es correcta y no contiene errores:
        
        Validador de HTML. Herramienta en línea que permite comprobar si el código HTML de nuestro sitio, o de una página de nuestro sitio, es correcto.
        
        Esta validación, que certifica la corrección del código, nos garantiza que este podrá ser visto sin problemas en cualquier navegador o dispositivo.
        
        Validador de CSS. Aplicación en línea que valida la sintaxis de las hojas de estilo en cascada (CSS) que estemos utilizando en nuestro sitio.
        
        Nos ofrece un informe detallado de los errores que pueda tener, lo que facilita la corrección de los mismos.
        
        Sigamos las normas
        
        Como casi todo en la vida, seguir una serie de pautas, normas o estándares ayuda a la realización de forma correcta de dicha tarea.
        
        En el apartado del desarrollo web se sigue la misma pauta y como se ha visto, seguir los estándares web establecidos hará que nuestros sitios web sean correctos y totalmente accesibles.
        
        En la página web de W3C se pueden consultar todos los estándares web establecidos hasta la fecha además de multitud de artículos y noticias referentes a dicho tema.
        
        Si le ha interesado el artículo y desea leer más escritos por mí puede hacerlo aquí.