PÁGINAS WEB - PRIMERO INFORMÁTICA
¿Qué es una página web?
Una página web es un documento electrónico accesible a través de internet que contiene información organizada y presentada de forma visual. Las páginas web se utilizan para diversos propósitos, como proporcionar información, promover productos o servicios, compartir contenido multimedia, interactuar con usuarios, y facilitar la comunicación y colaboración en línea. Crear una página web puede variar en nivel de complejidad. Hay opciones más sencillas, como los sistemas de gestión de contenido (CMS) que ofrecen plantillas predefinidas y requieren poco conocimiento técnico, y el creador de páginas web de GoDaddy es el máximo exponente de ello. Por otro lado, la creación de una página web desde cero puede ser más complicada, ya que requiere habilidades de programación y diseño. Además, conviene tener claro qué pasos seguir para que la web sea completa, funcional y totalmente útil para el propósito para el que ha sido ideada.
Tipos de páginas web
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:
- Páginas web estáticas: Contienen información que no cambia frecuentemente y se presenta de manera constante.
- Páginas web dinámicas: Generan contenido en tiempo real y se adaptan a las interacciones del usuario.
- Páginas web de comercio electrónico: Permiten la compra y venta de productos o servicios en línea.
- Páginas web de blogs: Publican contenido actualizado regularmente en forma de artículos o entradas.
- Páginas web de medios de comunicación: Ofrecen noticias, artículos y contenido multimedia.
- Páginas web de redes sociales: Facilitan la interacción y la conexión entre personas.
- Páginas web corporativas: Representan a empresas y organizaciones, proporcionando información sobre ellas y sus actividades.
Estos son solo algunos ejemplos de los distintos tipos de páginas web que existen, cada una con sus propias características y funciones específicas, aunque a continuación vamos a contarles con mayor profundidad en qué se diferencian dos de las principales.
Entendiendo la página web dinámica y estática
La diferencia entre una página web dinámica y una página web estática, como ya les hemos comentado unas líneas más arriba, radica en cómo se genera y presenta su contenido. Una página web estática muestra información que no cambia con frecuencia y se presenta de manera constante. Por otro lado, una página web dinámica genera contenido en tiempo real y se adapta en función de cuáles sean las interacciones del usuario.
¿Qué es una página web estática?
Una página web estática se compone de archivos HTML, CSS y archivos de imágenes que se almacenan en un servidor y se envían al navegador del usuario tal como están. Estas páginas son fijas y no cambian a menos que se realicen modificaciones manuales en el código fuente. Son ideales para webs con contenido estable y sin necesidad de actualizaciones frecuentes.
¿Qué es una página web dinámica?
Una página web dinámica se genera en tiempo real a partir de una base de datos y utiliza lenguajes de programación como PHP, Python o JavaScript. Estas páginas pueden mostrar información personalizada, interactuar con el usuario y adaptarse a sus acciones. Los contenidos se generan dinámicamente, permitiendo la actualización automática y el manejo de grandes cantidades de información.
¿Qué es Protocolo IP y para qué sirve?
El Protocolo IP o Internet Protocol (IP) es uno de los pilares básicos de Internet, ya que permite el desarrollo y transporte de paquetes de datos, aunque su recepción no está asegurada. Además, forma parte del conocido protocolo TCP/IP.
Por lo tanto, el protocolo IP actúa como si fuera una “distribuidora” de datos encapsulados o empaquetados, los cuales viajan por distintas trayectorias o “caminos”, siendo por esto último por lo que no se garantiza su recepción.
¿En qué se diferencia el protocolo IP del protocolo TCP/ IP?
Tanto el protocolo TCP / IP como el protocolo IP se basan en la transmisión de datos, en forma de paquete, por las redes. Pero se diferencian en que el protocolo IP no asegura la recepción de los paquetes de datos y el protocolo TCP/ IP asegura una transmisión fiable puesto que el protocolo TCP se encarga de controlar la transferencia de datos y el protocolo IP, en este caso, se encarga de identificar la máquina con su dirección IP.
Características del protocolo IP
- Protocolo orientado a no conexión, es decir, los paquetes de información viajan a través de la Red por diferentes trayectos hasta llegar al destino.
- Basado en datagramas, es decir, datos “empaquetados”.
- Fragmenta paquetes de datos si es necesario.
- No fiable
Ejemplos de ámbitos en los que se utiliza el protocolo IP
- Tecnología, mejora la comunicación a través la aplicación de la tecnología voIP en dispositivos.
- Seguridad, mejora la seguridad de los lugares a través de la aplicación del protocolo IP en cámaras de seguridad como las cámaras IP CCTV.
- Tecnología. Direccionamiento IP, facilita la comunicación entre dos máquinas al poseer, cada una de ellas, una dirección IP. Es decir, un identificador conformado por una serie de números.
- Protocolo TCP/ IP, hace posible que existan los servicios de e-mail, FTP o que los navegadores web puedan funcionar correctamente pues sin este protocolo no serían capaces de conectarse a la HMC (Hardware Management Console).
Navegadores web
Introducción
Un navegador web es un programa que permite ver la información que contiene una página web. El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar.
Es de vital importancia contemplar los distintos navegadores con los que los usuarios van a utilizar nuestras páginas. En teoría, los estándares web publicados por el W3C deberían permitir que las páginas fueran visualizadas exactamente igual en todos los navegadores. La realidad, sin embargo, es distinta: Cada navegador (especialmente, Internet Explorer) implementa diferencias que pueden hacer necesario el uso de técnicas "especiales" para que nuestros portales se muestren de la misma forma en todos los navegadores.
Google Chrome
Google Chrome (74,68 %), es el rey de los navegadores web en ordenadores
Google Chrome es un navegador sencillo, seguro y rápido gracias a las funciones inteligentes integradas de Google. Además de dichas funciones que te ayudarán a hacer todo lo que quieras (búsquedas rápidas, traducciones con un solo clic, artículos personalizados…), posee la velocidad que necesitas para explorar y crear en Internet. También te protege automáticamente de problemas de seguridad como la suplantación de identidad (phishing) y los sitios web peligrosos.
Google Chrome es totalmente complatible con los estándares HTML5 y CSS3.
Safari
Safari es un navegador web de código cerrado desarrollado por Apple Inc. Está disponible para Mac OS X, iOS (el sistema usado por el iPhone, el iPod Touch y el iPad) y Microsoft Windows.
El 13% de los usuarios de Euskadi.eus utilizaron este navegador durante el año 2019.
Safari es totalmente complatible con los estándares HTML5 y CSS3.
Microsoft Internet Explorer
Microsoft Internet Explorer, conocido comúnmente como IE, es un navegador web desarrollado por Microsoft para el sistema operativo Microsoft Windows desde 1995. Ha sido el navegador web más utilizado durante años, con un pico máximo de cuota de utilización del 95% entre el 2002 y 2003. Sin embargo, dicha cuota de mercado ha disminuido paulatinamente con los años. El 11% de los usuarios de Euskadi.eus utilizaron este navegador durante el año 2019. Microsoft anunció que a partir de Windows 10 dejará de publicar versiones de este navegador para sustituirlo por Edge.
Su versión más reciente es la 11. La version instalada por defecto en los ordenadores del Gobierno Vasco es la 9 (equipos con Windows 7) y la 11 (equipos con Windows 10). Se trata del navegador "oficial" para las aplicaciones internas y de intranet del Gobierno Vasco. La versión 9 no es totalmente compatible con los estándares HTML5 y CSS3
Mozilla Firefox
Mozilla Firefox es un navegador web libre y de código abierto descendiente de Mozilla Application Suite y desarrollado por la Fundación Mozilla. El 10% de los usuarios de Euskadi.eus utilizaron este navegador durante el año 2019.
Firefox puede ser utilizado en varios sistemas operativos (Windows, MacOS, Android, iOS, Linux...).
Firefox soporta completamente los estándares HTML5 y CSS3.
Microsoft Edge
Es el navegador integrado por defecto por Microsoft en su sistema operativo Windows 10, y esta llamado a sustituir a Internet Explorer (producto que MS dejará de desarrollar y soportar a partir de 2019). El 4% de los usuarios de Euskadi.eus utilizaron este navegador durante el año 2019.
Todos los equipos del Gobierno Vasco con Windows 10 tienen este navegador integrado. Ademas de para Windows, existen versiones de Edge para Android e iOS.
Edge es compatible con los estándares HTML5 y CSS3.
Opera
HOJAS DE ESTILO
A la hora de definir los estilos que se quieren aplicar a un sitio Web, se puede realizar de cuatro maneras diferentes, que explicaremos a continuación, aunque hay alguna más recomendada que otra, puesto que según la técnica que utilicemos podremos conseguir una mejor o peor optimización para el sitio Web. Dichos tipos de estilos existentes son los siguientes:
Incrustados
Los estilos incrustados son los que se definen dentro del propio documento HTML, más concretamente dentro de su cabecera, utilizando para ello las etiquetas <style></style> y definiendo en su interior las declaraciones de estilos que van a aplicarse a los elementos definidos en el cuerpo del documento HTML.
Enlazados
Los estilos enlazados son los que se aplican utilizando para ello hojas de estilo CSS externas en las que se realicen las declaraciones de los estilos que se van a aplicar a la página Web, para posteriormente enlazarla dentro del documento HTML de cada página Web mediante la etiqueta <link>. Las hojas de estilo externas que se definan tendrán que tener de forma obligatoria la extensión .css.
Además, existen tres tipos de hojas de estilo que se pueden enlazar mediante la etiqueta <link>, que son los siguientes:
Permanentes
También conocidas como persistent, son las hojas de estilo que se aplican siempre.
Preferentes
También conocidas como preferred, son las hojas de estilo alternativas que se van a aplicar por defecto.
Alternativas
También conocidas como alternate, son las hojas de estilo alternativas que pueden ser seleccionadas por el usuario.
Para que una hoja de estilos sea considerada como permanente y los estilos que se definan en su interior se apliquen a los elementos de la página Web, hay que definir dentro de la etiqueta <link> el atributo rel con el valor stylesheet asignado, y además hay que evitar el uso del atributo title, tal y como se muestra en el siguiente ejemplo:
<link rel="alternate stylesheet" title="Alternativos" type="text/css" href="estilos.css">
Importados
Además, de incluir una hoja de estilos externa mediante la etiqueta <link>, también se puede utilizar la etiqueta <style> junto con la regla @import, seguido de la palabra url y la ruta de la hoja de estilos que queremos importar entre paréntesis y definida entre comillas simples o dobles. En caso de utilizar esta técnica, hay que definirla antes de realizar cualquier vínculo de otra hoja de estilos mediante la etiqueta <link>.
En línea
Esta última técnica consiste en definir los estilos propios para cada elemento dentro de la declaración de cada etiqueta dentro del documento HTML, utilizando para ello el atributo style y estableciendo como valor para dicho atributo las propiedades y valores de los estilos que se quieran aplicar al elemento. Es la técnica menos recomendada puesto que al tener que definir los estilos mezclados dentro del propio documento HTML conseguimos que sea más difícil entender dicho código, además de una mala optimización de la Web.
A continuación, se muestra un ejemplo de cómo se pueden definir los estilos dentro de cada elemento de la página Web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de estilos importados</title>
<style type="text/css">
@import url("/estilos.css");
</style>
</head>
<body>
<p>Contenido de la página Web</p>
</body>
</html>
TABLAS
Las tablas HTML son elementos dentro del diseño web que permiten a los desarrolladores web organizar datos como texto, imágenes y enlaces en filas y columnas.
Entre otras etiquetas utilizadas al momento de trabajar con tablas HTML son: <th>, para agregar encabezados, <caption>, para insertar subtítulos, <thead> para añadir un encabezado separado a la tabla, <tbody>, que sirve para mostrar el cuerpo inicial de la tabla y <tfoot>, para crear un pie de página separado de la tabla.
El uso de tablas HTML en el diseño se ha vuelto muy común, pues las etiquetas permiten la creación de contenido web de una forma menos compleja; lo cual brinda más oportunidades de diseño.
EJEMPLO
Plantillas Web o Template
La plantilla web es un recurso fundamental al momento de crear una sitio o página web. Ya que es la carta de presentación del espacio y es el aspecto visual que se convertirá en el imán para atraer al público objetivo o internautas.
El diseño que se crea dentro de esta plantilla permite tener una estructura, donde funciona y respeta los estándares de Internet.
Para crear la estructura anteriormente mencionada, se trabaja con dos técnicas, una conocida como un LENGUAJE DE ETIQUETAS, que maqueta la base y es el HTML, y el otro es un LENGUAJE DE ESTILO, que aporta en la presentación visual y ubicación de los elementos, llamado CSS.
Ventajas de usar plantilla web
Con lo anterior expuestos podemos evaluar la facilidad de trabajar con una plantilla, algunos de los beneficios son:
Fácil manipulación y edición
Al utilizar una plantilla no se necesita tener mucho conocimiento sobre el mundo de la programación, en pocas palabras, la CURVA DE APRENDIZAJE ES BAJA-MEDIA.
Esto se logra por la creación de diseños amigables, donde las funciones principales que están habilitada para la mayoría de los usuarios son: incorporar artículos o entradas, cambiar textos y contenido informativo, agregar fotos, videos y redes sociales; también permite editar los colores de la página web.
Es asequible y económico
La inversión de una plantilla premium es asequible y económico, ya que al ser una base puede ser adaptado al proyecto de cada marca.
Hay plantillas básicas que pueden estar alrededor de unos 60 USD hasta unos 150 USD, todo esto depende de las funciones, la cantidad de diseños visuales que posee y las características complejas que puede tener.
En muchas ocasiones hay plantillas que tienen actualizaciones de manera constante, aunque la inversión es baja.
Implementación en poco tiempo
Al utilizar una plantilla se puede implementar en poco tiempo, ya que no se debe dedicar mucho tiempo para el diseño de cada rincón de tu espacio web.
Por ejemplo,
En la página web solo se debe incorporar la información básica de la marca, fotos o banner, logos, editar colores; con esto si una persona se dedica, puede tener la página web en 1 día nada más.
Si se requieren funciones especiales, como incorporar espacio ecommerce, plataforma educativa, reservación de citas; puede tomar unas cuantas semanas, para la adaptación de plugins especiales.
Desventajas de usar plantillas
Para todas las cosas en el mundo existe una contraparte, por ello es necesario conocer algunos problemas o limitaciones que podemos encontrar a la hora de trabajar con una plantilla.
Es limitada su personalización
Al ser una plantilla, es sumamente difícil cambiar la posición de algunos elementos de diseño web, por ello no son flexibles y son difíciles de modificar, es cierto que permiten cambiar tipos de letra, colores, adaptar algunos elementos en los laterales, superior o inferior; pero la estructura base está restringida según el creador.
Si deseas realizar cambios importantes tienes 2 opciones:
- Adquirir una plantilla con mayor flexibilidad que posiblemente, la inversión es más grande, alrededor de unos 200$.
- Contratar un especialista en diseño web, programador o WordPress; para editarlos y así crear una comunicación efectiva.
No están optimizados y por ello afecta su rapidez de carga
Al no tener un código limpio y bien trabajado, afecta el rendimiento para la carga de la página web y del posicionamiento SEO.
Hay que recordar que una plantilla es un producto de venta masiva, donde en muchas ocasiones, los creadores REUTILIZAN CÓDIGOS, donde según las necesidades y solicitudes del público general, van desarrollando nuevas versiones.
No es la plantilla que necesito
A la hora de comprar una plantilla, nos maravillamos con DEMOS, donde es una muestra en vivo de como se vería cada espacio.
Pero, la cruda realidad nos demuestra que al ser un PRODUCTO FABRICADO MASIVAMENTE Y ENLATADO, no ofrece respuestas concretas, enfocadas y específicas; de cada marca, por ello esto no puede competir con diseño web hecho a la medida.
Al no ser la plantilla que necesitas, si haces cambios de manera recurrente, o cambios muy significativos que afecta en la funcionalidad del espacio web, es mejor pagar por un servicio completo y tomarlo como INVERSIÓN, recuerda que LO BARATO SALE CARO, pero todo esto depende de los recursos que se tienen y de la visión de la marca.
Plataforma para adquirir una plantilla
Hay muchas plataformas increíbles donde puedes visitar, explorar y revisar el catálogo de plantillas; esto te permite ver, evaluar y adquirir la plantilla más indicada según su necesidad. Se te presentarán estás 4 plataformas para adquirir plantillas:
Template Monster
Es una plataforma completa, que ofrece diferentes opciones con respecto a la plataforma, diseño según categoría.
Posee más de 21 mil productos, que son usados en CMS como WordPress, Bootstrap, Joomla, PrestaShop, WooCommerce, OpenCart, Shopify, entre otros.
ThemeForest – EnvatoMarket
Posee más de 47 mil plantillas para el CMS de WordPress y de sitios web, lo más increíble es que venden themes desde 2 USD.
Este espacio es alimentado por un grupo de creativos, que ofrecen su trabajo en esta plataforma y conseguir ganancias a través de las ventas generadas.
Webflow
Aunque no posee una mega librería como los 2 primeros mencionados, hay que reconocer que es un espacio increíble, que te permite conocer una gran calidad en plantillas de sitios web.
Tiene aproximadamente unas 100 modelos diferentes y para usos diversos, este espacio también te ofrece un CMS comercial, recuerden que este tipo de herramienta son creadas por la marca, por lo tanto, se debe pagar por su uso, de cualquier modo, te invito a leer el siguiente artículo y aprender un poco más, haciendo clic aquí.
Creativemarket
Este Marketplace posee más de 5.500 plantillas de sitios web, donde pueden ser usadas en CMS como: WordPress (donde los usos que pueden darse son Blog, Business, Commerce, Landing Page, Magazine, Portfolio, Wedding), Bootstrap, Drupal, Joomla, Magento, OpenCart y código en HTML/CSS.
Marcos (frames)
Los marcos HTML permiten a los autores presentar documentos con vistas múltiples, que pueden ser ventanas o subventanas independientes. Las vistas múltiples ofrecen a los autores una manera de mantener cierta información visible mientras otras vistas se desplazan o se sustituyen. Por ejemplo, dentro de una misma ventana, un marco podría mostrar un gráfico estático, un segundo marco un menú de navegación, y un tercero el documento principal que puede ser desplazado, o reemplazado al navegar por el segundo marco.
Aquí tenemos un documento simple con marcos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un documento simple con marcos</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contenidos_del_marco1.html">
<FRAME src="contenidos_del_marco2.gif">
</FRAMESET>
<FRAME src="contenidos_del_marco3.html">
<NOFRAMES>
<P>Este conjunto de marcos contiene:
<UL>
<LI><A href="contenidos_del_marco1.html">Contenidos chéveres</A>
<LI><IMG src="contenidos_del_marco2.gif" alt="Una imagen chévere">
<LI><A href="contenidos_del_marco3.html">Más contenidos chéveres</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>Esto podría crear una disposición de marcos como la siguiente:
--------------------------------------- | | | | | | | Marco 1 | | | | | | | | |---------| | | | Marco 3 | | | | | | | | | | | Marco 2 | | | | | | | | | | | | | | ---------------------------------------
Si el agente de usuario no puede mostrar marcos o está configurado para no mostrarlos, representará los contenidos del elemento NOFRAMES.
Filas y columnas
Cuando se establece el atributo rows (filas) se define el número de subespacios horizontales. Cuando se establece el atributo cols (columnas) se define el número de subespacios verticales. Ambos atributos se pueden especificar simultáneamente para crear una cuadrícula.
Si no se establece el atributo rows, cada columna se extiende a lo largo de toda la longitud de la página. Si no se establece el atributo cols, cada fila se extiende a lo largo de toda la anchura de la página. Si no se establece ninguno de los dos atributos, el marco tiene exactamente el mismo tamaño que la página.
Los marcos se crean de izquierda a derecha para las columnas y de arriba a abajo para las filas. Cuando se especifican ambos atributos, las vistas se crean de izquierda a derecha en la fila superior, de izquierda a derecha en la segunda fila, etc.
Hipervínculos internos y externos
El html es un lenguaje de programación típico de las páginas Web y la interacción digital de Internet. Entre sus numerosas funciones está la de programar hipervínculos, para lo cual se requieren dos operaciones: 1) establecer las anclas o marcadores, y 2) introducir las direcciones de los enlaces.
Los descriptores para este recurso, cuando se trata de hipervínculos locales, son los de “name” (en las nuevas versiones de html ha sido ya eliminado) o “id”, y se introducen de la siguiente manera en el texto correspondiente al destino:
<a name=“nombre del marcador”> Texto asociado al marcador </a>
<a id=“nombre del marcador”> Texto asociado al marcador </a>
Luego se podrá emplear el comando “href” dentro del texto de origen para permitir los saltos a las secciones nombradas (con “name” o “id”). En el caso de que se trate de hipervínculos externos, deberá emplearse entonces el comando “href” directamente con la dirección URL solicitada.
Por ejemplo, para un vínculo local:
<a href=“nombre del marcador”>Texto del marcador</a>
Para un vínculo externo:
<a href=“dirección URL”>Texto del marcador</a>
Software de edición de sitios web
Comentarios
Publicar un comentario