DESARROLLO WEB

1. Introducción

Hoy en día casi todos utilizamos a diario el servicio de internet. Ahora, la pregunta que nos debemos hacer es, ¿Qué es lo que podemos encontrar en internet?

Correcto, en internet podemos encontrar mucha información. Como por ejemplo: deportes, el tiempo, tutoriales, vídeos, música, etc. Para mostrar esta información se utilizan las páginas web.

En esta unidad didáctica vais a descubrir como funciona en el interior una página web. Intentaremos que tengáis una primera aproximación como se creán páginas web y también a crear una la página web de vuestro cuaderno digital mediante el uso de Google Sites.

En esta unidad aprenderemos a desarrollar nuestro propio sitio web. Para ello haremos uso de Google Sites, se trata de una aplicación de Google que nos permite crear y gestionar sitios web de manera fácil y sin necesidad de tener conocimientos avanzados de programación o diseño web.

A lo largo de esta situación de aprendizaje aprenderás a: 

• Conocer la construcción de aplicaciones informáticas y web, entendiendo su funcionamiento interno, de forma segura, responsable y respetuosa.

• Conocer y resolver la variedad de problemas potencialmente presentes en el desarrollo de una aplicación web, tratando de generalizar posibles soluciones.

2. Páginas web

2.1 ¿Qué es una página web?

Esta pregunta puede parecer sencilla, pero no lo es en absoluto. Para responderla vamos a preguntarle a una gran fuente de información, Wikipedia.

"Una página web es un documento de la World Wide Web «con dirección propia». Las páginas web son entregadas por un servidor  web al usuario y mostradas en un navegador web para que actúe como «unidad de recuperación» de la información almacenada en su interior. Un sitio web está formado por muchas páginas web enlazadas bajo un nombre de dominio común.​ El nombre «página web» es una metáfora de las páginas de papel encuadernadas en un libro." 

Probablemente esta definición solo te haya ayudado un poco a aclara la pregunta. Veamos un video que probablemente te ayude un poco más a aclarar tus ideas. 

Estoy seguro que tras ver el video, tienes mucho más claro qué es una página web. ¿Aún tienes dudas?.

Los equipos conectados a la web se dividen en clientes y servidores. 

Los clientes son los dispositivos de los usuarios, éstos emplean un navegador para acceder a la información (Firefox, Chrome, etc).

Por otro lado, los servidores son los ordenadores que almacenan sitios y aplicaciones web. Utilizan un software especial, que les permite escuchar las peticiones de los clientes, procesarlas y enviar una respuesta. Normalmente, los servidores se encuentran situados en centros de datos.

HTTP  (Protocolo de Transferencia de HiperTexto) es empleado en la comunicación entre clientes y servidores, y DNS (Sistema de Nombres de Dominios) se encarga de traducir nombres en direcciones IP.

2.2 ¿Cómo se forma un sitio web?

Un sitio web se compone de diferentes archivos. Unos archivos son código como los documentos html, las hojas de estilo y los programas javascript; otros archivos son recursos como imágenes o vídeos.

Cuando un dispositivo cliente quiere acceder a una página web, los archivos que componen el sitio web se descargan desde el servidor al cliente.

En ese momento, el navegador (Mozilla, Chrome, etc.) interpreta el código (html, css y js) y muestra la web al usuario. Estos archivos son troceados en paquetes para su envío.

Dividimos el desarrollo web en dos áreas diferenciadas (cliente y servidor).

CLIENTE

En el entorno cliente creamos las páginas web con las que interactúan los usuarios y  utilizamos principalmente los lenguajes: 

• HTML para estructurar y organizar los contenidos.

• CSS para conseguir una apariencia determinada.

• JavaScript  para controlar el comportamiento.

SERVIDOR

En el entorno servidor se crean páginas web dinámicas, normalmente insertando datos desde una base de datos dentro de plantillas HTML.  Para ello, solemos utilizar:

• Frameworks web escritos en lenguajes como python, php o javascript que hacen más fácil escribir y escalar aplicaciones web.

• Bases de datos SQL/NoSQL (almacenan datos en tablas / o bien mediante modelos más flexibles como pares clave-valor o colecciones). 

2.3 HTML, CSS y JAVASCRIPT

Estos son los tres lenguajes principales que se utilizan en el front-end de nuestra aplicación, es decir, se utilizan en el lado del cliente en el propio navegador. Pero ¿cuál es la diferencia entre ellos? ¿Son realmente todos lenguajes de programación?

Comparando cada uno de ellos ahora, podemos usar el cuerpo humano como una página web como ejemplo, de la siguiente manera: 

HTML es el esqueleto, formado por los huesos que lo sostienen. CSS es la piel, el cabello y las ropas, creando la apariencia que realmente vemos cuando miramos a alguien. Y por fin, Javascript es el músculo que le da movimiento al cuerpo. 

2.4 ¿Necesito saber programar para crear una página web?

Actualmente,  para crear un sitio web bien diseñado no necesitas tener un gran conocimiento sobre los lenguajes del apartado anterior, aunque puede facilitarte la tarea si los tienes.

Para hacerlo, existe unas herramientas conocidas como Creador Web es un software que te permite crear tu propio sitio web sin ningún conocimiento en lenguajes de programación. Estas herramientas facilitan la vida de las personas que quiere crear y publicar su propio sitio web y no tienen los conocimientos necesarios.

Estas herramientas suelen tener una interfaz intuitiva y amigable que ofrece varias plantillas según el tipo de sitio web que quieras crear. Puedes pensar en este software como en un convertidor que funciona así: tú eliges una parte visual del sitio como por ejemplo una barra de menú, y el creador web la convierte en un trozo de código.

VENTAJAS

• No necesitas saber programar.

• Ahorras tiempo.

• Son baratos o incluso gratis.

INCONVENIENTES

• Quedas limitado a las opciones que te permita la herramienta.

Algunas de estas herramientas son:

2.5 Google Sites

Google Sites es una plataforma online ofrecida por la empresa Google como parte de la suite de productividad de G Suite. Esta aplicación permite a los usuarios crear y gestionar sitios web de manera fácil y sin necesidad de tener conocimientos avanzados de programación o diseño web.

Los usuarios pueden crear páginas web para diversos propósitos, como sitios personales, sitios de proyectos, páginas de empleados, sitios de organizaciones, etc. reuniendo en un único lugar y de una forma rápida información variada, como pueden ser vídeos, calendarios, presentaciones, archivos, etc.

VENTAJAS

• Es intuitivo y fácil de usar, lo que lo hace accesible incluso para usuarios sin experiencia técnica o conocimientos de programación. La interfaz de arrastrar y soltar facilita la creación y edición de contenido, lo que permite a los usuarios construir rápidamente un sitio web sin complicaciones.

• Esta plataforma está integrada con otras herramientas de colaboración de Google, como Google Drive y Google Docs. Esto significa que varios usuarios pueden colaborar en un mismo sitio web en tiempo real, realizar cambios y agregar contenido simultáneamente.

• Se integra perfectamente con otras aplicaciones y servicios de Google, lo que facilita la incorporación de contenido y recursos adicionales en el sitio web. Puedes agregar fácilmente documentos de Google Drive, calendarios de Google Calendar, vídeos de YouTube y más.

• Está alojado en la infraestructura de Google, lo que significa que no tienes que preocuparte por el alojamiento y el rendimiento del sitio web. Además, Google cuenta con medidas de seguridad robustas para proteger tu sitio web y los datos asociados. Esto incluye la autenticación de dos factores, el cifrado de datos y la protección contra ataques cibernéticos, lo que brinda tranquilidad en términos de seguridad.

2.6 ¿Por dónde empiezo?

Para crear tu sitio web, debes acceder con la cuenta del instituto a Google Sites.

Una vez dentro de la aplicación web, tan solo debes de empezar a diseñar tu sitio web.

¿Qué hago si tengo alguna duda?

• Siempre puedes consultar el manual de Google para utilizar esta aplicación.

• En esta presentación encontrarás funciones más básicas.

• También tienes los siguientes videos donde se explica como se puede crear un sitio web con Google sites: