PÁGINAS WEB

PAGINAS WEB

Submódulo 1. Gestiona información a través de plataformas digitales.

Una página web, también conocida como página electrónica es un documento digital, que contiene diversos tipos de contenido, como texto, imágenes, videos, enlaces, formularios interactivos, entre otros elementos multimedia.

Una página web, también conocida como página electrónica es un documento digital, que contiene diversos tipos de contenido, como texto, imágenes, videos, enlaces, formularios interactivos, entre otros elementos multimedia.

Sitio web, website o portal web es una colección de páginas web interconectadas por hipervinculos, se encuentran alojadas en un servidor web y están accesibles a través de Internet. ofrecen una amplia gama de servicios y recursos, a menudo con una interfaz de usuario personalizable que permite a los usuarios acceder a información de diversas fuentes y realizar múltiples tareas en un solo lugar

Ejemplos: portales de noticias, de servicios financieros, Entretenimiento, Institucionales, Portales de noticias, Buscadores, Redes sociales, Tiendas online, Marketplaces, Blogs, Foros, Micrositios, Portafolios, Landing pages.

El acceso a las página y sitios web se realiza a través de los navegador web. Ejemplo: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Brave, entre otros.

Las páginas web y sitios web se encuentran alojados en servidores web. Los servidores web son equipos que siempre permanecen conectados a internet.

El conjunto de sitios web existentes conforman la red de información que se conoce como Internet o World Wide Web (WWW). Cada sitio web cuenta con una dirección web o nombre de dominio, además de una dirección del servidor web donde se encuentra alojado el sitio.

Ejemplo: Dirección web: https://www.facebook.com Nombre de dominio: facebook.com Dirección del servidor web: 157.240.19.35

Cuando ingresamos a un navegador desde cualquier dispositivo (computadora de escritorio, tableta, teléfono inteligente, etc.) y escribo una dirección web, se envía la solicitud al servidor que aloja dicha página web y, el servidor responde enviando la información de la página solicitada.

Estas acciones se llevan a cabo en cuestión de segundos o milésimas de segundos dependiendo de la velocidad de tu servicio de internet y del tipo de página web que consultes.

La estructura básica de una página web:

Esta estructura es de las más comunes, pero depende de la información, contenido, conocimiento y la creatividad de los desarrolladores para generar la estructura que mejor se adapte a lo que se pretende mostrar.

La estructura básica de una página web:

• Header. Representa la cabecera de la página web y generalmente se encuentra en la parte superior
• Logo. Es el espacio donde se presenta a través de una imagen o escrito, la marca o título de la página web.
• Menú o nav. Es el menú principal de navegación, el cual a través de enlaces te permite navegar a través de las distintas páginas del sitio web.
• Body. Es donde se muestra el contenido principal de la página web
• Footer. Hace referencia al pie de página, se utiliza principalmente para mostrar el copyright, términos y condiciones, aviso de privacidad, etc..

Los sitios web se construyen a través del desarrollo de dos apartados principales: el Front-end y el back-end.

El front-end.

Se refiere al diseño de la parte visual de cada página web del sitio, lo que los usuarios observan al visitar el sitio web, como lo son los colores, imágenes, botones, enlaces, menús, etc. En el desarrollo front-end las tres tecnologías principales son: HTML, CSS y JavaScript.

HTML (Hyper Text Markup Language) Lenguaje de marcas o etiquetas de hipertexto, es el componente básico de una página web, su código permite estructurar y mostrar todo el contenido de la parte visual de la página web. CSS (Cascading Style Sheets) Hojas de Estilo en Cascada, es un lenguaje que permite dar estilos a los distintos elementos que componen la página web, a través del documento html.

JavaScript. Lenguaje de programación que se emplea en el desarrollo web, para hacer que las páginas web sean interactivas, a través de animaciones de los distintos elementos, la navegación entre páginas y responder a eventos realizados por el usuario.

El back-end.

Hace referencia al desarrollo de los procesos para generar la parte visual de la página web, estos procesos se ejecutan en el servidor web. Para el desarrollo de dichos procesos se emplean principalmente: Software de servidor web, lenguajes de programación y bases de datos.

Web Server o Software de servidor web. Es el software encargado de controlar y procesar el acceso de usuarios a archivos o información almacenada en el servidor web. Por ejemplo, al ingresar a una red social se te solicitan tus datos de acceso, este software verifica con base en los datos ingresados la información en el servidor web.

Lenguajes de programación. Es un software que permite a programadores o desarrolladores web escribir instrucciones por medio de sintaxis definidas, estas instrucciones permiten la comunicación entre el usuario y la información en el servidor web.

Bases de datos. Es una colección de información o datos organizados, almacenados de manera electrónica en un sistema, en el caso de los sitios web las bases de datos se encuentran en el servidor web, para acceder a los datos o información de las bases de datos existen software de base de datos que funcionan como interfaz entre los usuarios y la base de datos, lo que permite organizar, recuperar, modificar, actualizar y gestionar la información.

La manera en cómo se organiza el contenido de un sitio web depende en gran medida a la cantidad de información y recursos a considerar

En este ejemplo se tiene el contenido de Mi Sitio, el cual consta de 4 páginas web: 1. La página principal (por regla siempre debe llevar el nombre de index.html) 2. nosotros.html 3. contacto.html 4. servicios.html Para una mejor organización se deben separar por carpetas los contenidos de imágenes, hojas de estilo CSS y los archivos de JavaScript.

TIPOS DE PAGINAS WEB

• Según su estructura

De acuerdo a su estructura una página web se divide en:

• Estáticas

• Dinámicas

• Son páginas que se caracterizan por presentar información de manera permanente.
• Por lo regular no se actualizan periódicamente hasta que el diseñador o programador la modifica manualmente.
• Tienen un contenido fijo que no permite la interacción con los usuarios.
• Presentan enlaces o hipervínculos que conectan al usuario con otras páginas web para obtener más información o complementarla.
• Su presencia en la red es muy parecida a la lectura de un folleto impreso con textos e imágenes totalmente fijas, por lo tanto no presentan movimiento alguno.

Estáticas

Su estructura está basada en lenguaje HTML o Lenguaje de Marcado de Hipertextos y CSS o Hojas de Estilo en Cascada, en otras palabras el primero se refiere a la base para la estructura y significado del contenido y el segundo es el complemento para conformar la página web como un todo.

Caracteristicas

VENTAJAS

• Es una opción ideal cuando tienes un pequeño proyecto en el cual simplemente quieras informar a tus clientes con información de la empresa, productos o servicios, y sin necesidad de estar cambiando el contenido de la web.
• La principal ventaja de este tipo de páginas web es la facilidad de desarrollo y lo económico que pueden llegar a ser, a diferencia de las dinámicas.
• El coste inicial de una página web estática puede ser mucho menor que al de una dinámica.
• Son muy flexibles cuando se trata del diseño.
• Los tiempos de carga son muy rápidos.

DESVENTAJAS

• No son tan versátiles y efectivos cuando se trata de entregar funcionalidad.
• En pocas palabras, en una página web estática, veras la misma información, diseño y contenido cada vez que la visites, a menos que alguien aplique cambios al código fuente de forma manual.
• Una página web estática puede ser más difícil de actualizar.
• Agregar contenido a la página web o realizar actualizaciones puede incurrir en costos adicionales.
• Agregar nuevas páginas o funcionalidades a una web estática puede ser más difícil que hacerlo para una web dinámica.

Ejemplos de este tipo de páginas web son: blog personales o institucionales y los paginas diseñadas por profesores y universidades cuyo objetivo es meramente educativo y son conocidos como Web Quest.

PÁGINA WEB DINAMICAS.

• Permiten la interacción con el usuario, su contenido se puede cambiar fácilmente sin la necesidad de manipular el código fuente, la actualización de la página puede realizarse en tiempo real.
• Su diseño no cambia frecuentemente pero si la información y el contenido.
• Su construcción requiere de conocimientos profesionales y de especialización en lenguajes de programación, así como de mayor inversión de dinero, tiempo y dedicación.
• Su estructura y contenido permiten la integración de aplicaciones dentro de la página web por ejemplo, para la realización de encuestas, comentarios, foros, atención personalizada a clientes.
• Permite la creación y gestión de bases de datos principalmente por la gran cantidad de información que manejan respecto a productos, servicios y contactos.
• Son muy comunes en grandes empresas, corporaciones y gobiernos.

Ejemplos de estas páginas web son las plataformas de redes sociales o aquellas que proporcionan servicios de transmisión de audio o video

VENTAJAS

• Puede gestionar información a través de bases de datos.
• Esto permite que el usuario pueda solicitar información fácilmente de una manera organizada y estructurada dentro de un catálogo, además de crear y mostrar contenido según el tipo de usuario que acceda a la página.
• El contenido se puede gestionar a través de un CMS.
• El contenido almacenado en el CMS puede incluir una variedad de archivos, desde el texto hasta las imágenes que se muestran, diseños de página, configuraciones del sitio y más. Esto permite una flexibilidad extrema a la hora de crear el sitio y también permite que varios usuarios puedan manipular el contenido según sea necesario.
• El coste de mantenimiento es menor.
• Si la página no necesita cambios en el diseño básico o en la funcionalidad definida al inicio de su desarrollo. Ya que se puede gestionar la información a través de un CMS, existe poco o nada de costes cuando se trata de su mantenimiento.

DESVENTAJAS

*Pueden existir limitaciones en el diseño.Ya que el contenido está principalmente basado en la información contenida en la base de datos y la presentación al usuario se basa en la estructura de la misma. Esto puede hacer que el diseño sea complicado, ya que lo más sencillo es optar por un enfoque único para todas las páginas. Dependiendo del CMS, puede resultar difícil crear varios diseños o plantillas que permitan mostrar diferentes tipos de contenido de diferentes formas. *Puede involucrar altos costos de construcción iniciales.Al coste del desarrollo de la página web se le suma el coste del desarrollo de las bases de datos donde se guardará el contenido a mostrar, etc. El desarrollo también puede costar más a medida que se agregan nuevas funcionalidades. Si bien los costos de mantenimiento pueden ser más bajos como fue mencionado en las ventajas, también puede involucrar costos de desarrollo iniciales mucho más altos que al desarrollar una página web estática.

¡¡GRACIAS POR SU ATENCION!!

DESVENTAJAS

VENTAJAS

La red de Internet hoy en día ofrece un abanico muy extenso de posibilidades para satisfacer las necesidades de los usuarios en diversas áreas como: servicios, información, entretenimiento, comunicación, educación, entre otras, es por ello por lo que quienes ofrecen productos o servicios tienen la necesidad de generar un espacio en la red para llegar a más personas y mejorar sus ventas. De igual manera, aquellas instituciones, tanto del sector público como del privado, que desean informar a la población acerca de quiénes son y lo que hacen, recurren a los medios digitales para darse a conocer. Hace algunos años tener una página web era sólo para quienes tenían las posibilidades de pagarla pero hoy en día existen una gran cantidad de opciones para generar una página web, incluso de manera gratuita.

Características de las páginas web estáticas:

• Su construcción y desarrollo se realiza de manera sencilla
• Son relativamente económicas para las empresas que solo requieren tener presencia en la red .
• Representan una de las opciones más accesibles aunque con pocas posibilidades de crecimiento debido a que su diseño, desarrollo y construcción no requiere de conocimientos muy especializados o de programación.
• Generalmente su contenido se caracteriza por tener una descripción de la empresa, quiénes somos, dónde estamos y servicios. • Su objetivo principal es mostrar información de sus productos y perfil de la empresa.