Gestión de sitios web

EMPEZAR

Introducción a la gestión de sitios web

Índice

Sitios web

Apps y Asistentes

Lenguajes

Quiz

Herramientas

Bibliografía

¿Qué elementos encontramos dentro de un sitio web? ¿Para qué sirve cada uno de ellos? En este apartado, vamos a ver qué son y qué funcionalidad tienen los archivos, los dominios, las IRL o los hipervínculos entre otros conceptos y elementos clave dentro de un sitio web.

Sitios web

INFO

Sitios Web

Los sitios web son archivos que los usuarios descargan con sus navegadores desde ordenadores remotos. Cuando un usuario decide acceder a un sitio web, le comunica al navegador la dirección del sitio y el programa descarga los archivos, procesa su contenido y lo muestra en la pantalla.

UD1_Introducción a la gestión de sitios web

Debido a que los sitios webs son de acceso público e Internet es una red global, estos archivos deben estar siempre disponibles. Por este motivo, los sitios web no se almacenan en ordenadores personales, sino en ordenadores especializados diseñados para despachar estos archivos a los usuarios que los solicitan. El ordenador que almacena los archivos y datos de un sitio web se llama servidor y el ordenador que accede a esta información se llama cliente.

INFO

Sitios Web

Los servidores son muy similares a los ordenadores personales, con la diferencia de que están continuamente coectados a la red y ejecutando progrmas que les permiten responder a las solicitudes de los usuarios, sin importar cuándo se reciben o de dónde proceden.

UD1_Introducción a la gestión de sitios web

Los programas más populares para servidores son Apache, para sistemas Linux, e IIS (Internet Information Server), creado por Microsoft para sistemas Windows. Entre otras funciones, estos programas son responsables de establecer la conexión entre el cliente y el servidor, controlar el acceso de los usuarios, administrar los archivos y despachar los documentos y recursos requeridos por los clientes.

INFO

Archivos

Los sitios web están compuestos de múltiples documentos que el navegador descarga cuando el usuario los oslicita. Los documentos que conforman un sitio web se llaman páginas y el proceso de abrir nuesvas páginas, navegar (el usuario navega a través d elas páginas del sitio). Para desarrollar un sitio web, tenemos que crear un archivo por cada página que queremos incluir. Junto con estos archivos, también debemos incluir los archivos con las imágenes y cualquier otro recurso que queremos mostrar dentro de estas páginas (las imágenes y otros medios gráficos se almacenan en archivos aparte).

UD1_Introducción a la gestión de sitios web

En el ejemplo, se incluyen directorios llamados flores e imágenes; y cuatro archivos llamados contacto.html, index.html, nosotros.html y noticias.html. Los directorios se crean para almacenar las imágenes que queremos mostrar dentro de las páginas web y otros recursos como los archivos que contienen los códigos en CSS y JavaScript.

Importante

Los servidores son flexibles en cuanto a los nombres que podemos asignar a nuestros archivos, pero existen algunas reglas que debería seguir para asegurarse de que sus archivos son accesibles.

UD1_Introducción a la gestión de sitios web

Evitar espacios

Evitar caracteres con funciones especiales en la web

pagina intro.html

pagina_intro.html

?, %, #, /

Usar solo letras minúsculas sin acentos y números.

INFO

Página de inicio

Aunque index es el nombre más común, no es el único que podemos asignar al archivo por defecto. Algunos servidores, designan otros nombres como home o default, e incluyen diferentes extensiones. Por ejemplo, si en lugar de programar nuestros documentos en HTML, lo hacemos en un lenguaje de servidor como PHP, debemos asignar a nuestro archivo index el nombre de index.php. El servidor contiene una lista de archivos y continúa buscando hasta que encuentra uno que coincida con esa lista. Por ejemplo, Apache primero busca por un archivo con el nombre index y la extensión .html, pero si no lo encuentra busca por un archivo con el nombre index y la extensión .php.

UD1_Introducción a la gestión de sitios web

INFO

Dominios y URL

Los servidores se identifican con un valor llamado IP (Internet Protocol). Esta IP es única para cada ordenador y, por lo tanto, trabaja como una dirección que permite ubicar a aun ordenador dentro de una red. Cuando el navegador tiene que acceder a un servidor para descargar el documento solicitado por el usuario, primero busca en el servidor a través de esta dirección IP y luego le pide que le envíe el documento. Las direcciones IP están compuestas por números enteros entre 0 y 255 separados por un punto, o número y letras separadas por dos puntos (dependiendo de la versión).Busca la dirección: 216.58.215.35 ¿Qué sitio web es?

UD1_Introducción a la gestión de sitios web

Si quieres conocer las direcciones IP de distintos sitios web puedes usar el siguiente buscador: Dirección IP

En diseño web podemos trabajar con diferentes lenguajes pero, cuando hablamos de HTML5 incorporamos tres características: estructura, estilo y funcionalidad, con lo que integra 3 lenguajes de programación independientes, HTML, CSS y Javascript.

Lenguajes

INFO

Lenguajes

Estos lenguajes están compuestos por grupos de instrucciones que los navegadores pueden interpretar para procesar y mostrar los documentos al usuario.Para crear nuestros documentos, tenemos que aprender todas las instrucciones incluidas en estos lenguajes y saber cómo organizarlas.

Los lenguajes de programación más usados

INFO

HyperText Markup Language

HTML

HTML es un lenguaje compuesto por un grupo de etiquetas definidas con un nombre rodeado de paréntesis angulares. Los paréntesis angulares delimitan la etiqueta y el nombre define el tipo de contenido que representa. Algunas etiquetas, son declaradas individualmente (por ejemplo, <br>) y otras son declaradas en pares, que incluyen una de apertura y otra de cierre, como <html></html> (en la etiqueta de cierre, el nombre va precedido por una barra invertida).Tanto las etiquetas individuales como las de apertura pueden incluir atributos para ofrecer información adicional acerca de sus contenidos (por ejemplo, <html lang="es">. La combinación de etiquetas individuales y etiquetas de apertura y cierre, se llama elementos. Los elementos compuestos por una sola etiqueta se usan para modificar el contenido que los rodeao o incluir recursos externos, mientras que los elementos que incluyen etiquetas de apertura y cierre se utilizan para delimitar el contenido del documento.

Etiquetas básicas HTML5

Cada vez que creemos un documento debemos declarar en la primera línea la etiqueta individual del tipo de documento <!DOCTYPE html> seguida por una etiqueta de apertura <html lang="es">. Recuerda que entre las etiquetas <html> y </html> se incluyen otros elementos que representan la cabecera y el cuerpo del documento <head> y <body>, los cuales a su vez encierran más elementos con sus respectivos contenidos <title> y <p> demostrando cómo se compone un documento HTML. Los elementos se listan uno a continuación de otro y también dentro de otros elmentos, de modo que se construye una estructura tipo árbol con el elemento <html> como raíz.

<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer documento HTML</title> </head> <body> <p>HOLA MUNDO!</p> </body> </html>

Documento "Hola Mundo"

A tener en cuenta

En general, todo elemento puede ser anidado, convertirse en un contenedor o ser contenido por otros elementos. Los elementos exclusivamente estructurales como <html>, <head> y <body> tienen un lugar específico en un documento HTML, pero le resto son flexibles.Los atributos pueden contener valores, por ejemplo en lang="es", lang es el atributo y el valor es se asigan al atributo usando el carácter =. Los atributos ofrecen información adicional acerca del elemento y su contenido. Además, los atributos se declaran siempre dentro de la etiqueta de apertura (o etiquetas individuales) y pueden tener una estructura que incluye un nombre y un valor por sí mismos, como el atributo html de la etiqueta <!DOCTYPE>.

INFO

Cascading Style Sheets

CSS

CSS es el lenguaje que se utiliza para definir los estilos de los elementos HTML, como el tamaño, el color, el fondo, el borde, etc. Auqnue todos los navegadores asignan estilos por defecto a la mayoría de los elementos, estos estilos generalmente están lejos de lo que queremos para nuestros sitios web.Para declarar estilos personalizados, CSS utiliza propiedades y valores. Esta construcción se llama declaración y su sintaxis incluye dos puntos después del nombre de la propiedad, y un punto y coma al final para cerrar la línea.Las propiedades CSS se pueden agrupar usando llaves. Un grupo de una o más propiedades se llama regla y se identifica por un nombre llamado selector.Existen diferentes técnicas para aplicar estilos CSS a elementos HTML. Si se aplican en hojas diferentes, se han de vincular al comienzo del documento HTML.

Etiquetas básicas CSS

JavaScript

A diferencia de HTML y CSS, JavaScript es un lenguaje de programación. Para ser justos, todos estos lenguajes pueden ser considerados lenguajes de programación, pero en la práctica exiten algunas diferencias en la forma en la que suministran las instrucciones al navegador.HTML es como un grupo de indicadores que el navegador interpreta para organizar la información, CSS puede ser considerado como una lista de estilos que ayudan al navegador a preparar el documento para ser presentado en pantalla, pero JavaScript es un lenguaje de programación comparable con cualquier otro lenguaje profesional como C++ o Java.JavaScript difiere de los demás en que puede realizar tareas personalizadas, desde almacenar valores hasta calcular algoritmos complejos, incluida la capacidad de interactuar con los elementos del documento y procesar su contenido dinámicamente.

Lenguajes del servidor

Los códigos programados en HTML, CSS y JavaScript son ejecutados por el navegador en el ordenador del usuario (cliente). Esto significa que, después de que los archivos del sitio web se suben al servidor, permanecen inalterables hasta que se descargan en un ordenador personal y sus códigos son ejecutados por el navegador. Aunque esto permite la creación de sitios web útiles e interactivos, hay momentos en los cuales necesitamos procesar la información en el servidor antes de enviarla al usuario. El contenido producido por esta información se denomina contenido dinámico, y es generado por códigos ejecutados en el servidor y programados en lenguajes que fueron especialmente diseñados con este propósito (lenguajes de servidor). Cuando el navegador solicita un archivo, contiene este tipo de código, el servidor lo ejecuta y luego envía el resultado como respuesta al usuario. Estos códigos no solo se utilizan para generar contenido y documentos en tiempo real, sino también para procesar la información enviada por el navegador, almacenar datos del usuario en el servidor, controlar cuentas, etc.Exiten varios lenguajes disponibles para crear código ejecutable en los servidores. Los más populares son PHP, Ruby y Python.

Crear un sitio web involucra múltiples pasos. Tenemos que programar los documentos en HTML, crear los archivos con los estilos CSS y los códigos en JavaScript, configurar el servidor que hará que el sitio sea visible a los usuarios y transferir todos los archivos desde nuestro ordenador al servidor. Por fortuna, existen muchas herramientas disponibles que nos pueden ayudar con estas tareas.

Herramientas

Editores

Los documentos HTML, así como los archivos CSS y JavaScript, son archivos de texto, por lo que podemos usar cualquier editor incluido en nuestro ordenador para crearlos, como el bloc de notas, pero también existen editores de texto especialmente diseñados para programadores y desarrolladores que pueden simplificar nuestro trabajo. Estos editores resaltan texto con diferentes colores para ayudarnos a identificar cada parte del cógido, o listan los archivos de un proyecto en un lateral para ayudarnos a trabajar con múltiples archivos al mismo tiempo.

A partir del código base, crea al menos 3 documentos HTML en distintos editores y haz una captura de pantalla de cada uno. En un documento de texto, en la tarea de Google Classroom explica qué editores has usado, cómo es su interfaz, si son o no gratuitos y dónde se pueden conseguir.Especifica los sistemas operativos en los que funcionan y los requisistos del sistema que necesitan.

<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer documento HTML</title> </head> <body> <p>HOLA MUNDO!</p> </body> </html>

Editando código en distintas herramientas

Una vez que nuestro sitio web está listo para ser presentado en público, tenemos que registrar el dominio que los usuarios van a escribir en la barra de navegación para acceder a él. Denominamos dominio al nombre personalizado de una web con una extensión que determina el propósito del sitio web.

Registro de dominios

INFO

Dominios y extensiones

El nombre puede ser cualquiera que deseemos, y contamos con diferentes opciones para definir la extensión, desde los .com o .biz con propósitos comerciales o aquellas opciones sin ánimo de lucro o personales como .org, .net, .info; así como las extensiones regionales que incluyen un valor adicional para determinar la ubicación del sitio.

Webs para comprobar dominios

• Dominios
• DonDominio
• Dominios Libres
• Name

Cómo obtener un dominio

Para poder obtener un dominio para nuestro sitio web, tenemos que abrir una cuenta con un registrante y adquirirlo. La mayoría de los dominios requieren del pago de un arancel anual, pero el proceso es relativamente sencillo y hay muchas compañías disponibles que pueden hacerse cargo del trámite por nosotros. La más popular es GoDaddy (www.godaddy.com), pero la mayoría de las compañías que ofrecen servicios para desarrolladores también incluyen la posibilidad de registrar un dominio. El proceso de registro es sencillo, tenemos que decidir el nombre y la extensión que vamos a asignar a nuestro dominio, realizar una búsqueda para asegurarnos de que el nombre que hemos elegido no está siendo utilizado y se encuentra disponible, y luego hacer el pedido.

¿Y si mi dominio está registrado?

Cuando el dominio está registrado, el sistema nos pide los nombres de servidores (nameservers) que queremos asociar al dominio. Estos nombres son cadenas de texto compiestas por un dominio y un prefijo, generalmente NS1 y NS2, que determinan la ubicación de nuestro sitio web (los nombres del servidor o nameservers los facilita el servidor en el que se almacena nuestro sitio web). Si aún no contamos con estos nombres, podemos usar los que ofrece la compañía y cambiarlos más adelante. La compañía que registra el dominio asigna nombres de servidor por defecto que ellos usan como destino provisional (también conocido como aparcamiento o parking).

Configurar y mantener un servidor exige conocimientos que no todos los desarrolladores poseen. Por este motivo, existen compañías que ofrecen un servicio llamado alojamiento web (web hosting), que permite a cualquier individuo alquilar un servidor condigurado y listo para almacenar, y operar uno o múltiples sitios web.

Alojamiento web

INFO

Tipos de alojamientos web

Existen diversos tipos, desde aquellos que permiten que varios sitios web operen desde un mismo servidor (alojamiento compartido) hasta servicios más profesionales que reservan un servidor completo para un único sitio web (alojamiento dedicado), o distribuyen un sitio web extenso en muchos servidores (alojamiento en la nube), incluidas varias opciones intermedias.La principal ventaja de tener una cuenta de alojamiento web es que todas ofrecen un panel de control con opciones para crear y configurar nuestro sitio web.

Opciones más comunes que nos ofrecen los alojamientos web:

• File Manager es una herramienta web que nos permite administrar los archivos de nuestro sitio. Con esta herramienta podemos subir, bajar, editar o eliminar archivos en el servidor desde el navegador sin tener que usar ninguna otra aplicación.
• FTP Accounts es un servicio que nos permite administrar las cuentas que usamos para conectarnos al servidor por medio de FTP (File Transfer Protocol). FTP es un protocolo de comunicación diseñado para transferir archivos desde un ordenador a otro en la red.
• MySQL Databases es un servicio que nos permite crear bases de datos para nuestro sitio web.
• phpMyAdmin es una aplicación programada en PHP que podemos usar para administrar las bases de datos creadas para nuestro sitio web.
• Email Accounts es un servicio que nos permite crear cuentas de email con el dominio de nuestro sitio web (info@midominio.com).

El panel de opciones más popular en el mercado es cPanel.

El coste de un alojamiento

El coste de una cuenta de alojamiento puede variar entre algunos dólares por una cuenta compartida hasta cientos de dólares al mes por un servidor dedicado. Una vez que abrimos la cuenta, la compañía nos envía un email con la información que necesitamos para acceder al panel de control y configurar el servidor. El sistema de la compañía generalmente crea todas las cuentas básicas que necesitamos, incluida una cuenta FTP para subir los archivos. Además de las cuentas de alojamiento de pago, existe alojamiento gratuito que podemos usar para practicar, pero estos servidores incluyen propaganda o imponen restricciones que impiden el desarrollo de sitios web profesionales. Siempre se recomienda comenzar con una cuenta de alojamiento compartido que piede costar unos 5 dólares al mes para aprender cómo trabaja un servicio de alojamiento profesional y estudiar todas las opciones que ofrece.

Las cuentas de alojamiento web ofrecen un servicio para administrar los archivos del sitio web desde el navegador. Esta es una web a la que podemos acceder desde el panel de control para subir, bajar y editar los archivos en el servidor. Es una herramienta útil, pero solo práctica cuando necesitamos realizar pequeñas modificaciones o subir unos pocos archivos. La herramienta aprovecha un sistema que se encuentra integrado en los navegadores y que trabaja con un protocolo llamado FTP (File Transfer Protocol) usado para transferir archivos desde un ordenador a otro en una red.

Programas FTP

FTP

Los navegadores incluyen este sitema porque lo necesitan para permitir a los usuarios descargar archivos pero, debido a que su principal propósito es descargar y mostrar sitios web en pantalla, ofrecen una mala experiencia a la hora de manipular estos archivos. Por ello, los desarrolladores profesionales no utilizan el navegador, sino programas diseñados específicamente para transferir archivos entre un cliente y un servidor usando el protocolo FTP. El mercado ofrece varios, incluidas versiones de pago y gratuitas. El programa gratuito más popular es Fillezilla, el cual ofrece varios paneles con información acerca de la conexión y los ordenadores que participan, incluidos dos paneles lado a lado con la lista de los archivos locales y remotos.

Algunas veces, abrir un sitio web completo en un ordenador personal no siempre es posible. Algunos códigos JavaScript solo trabajan cuando se descargan desde un servidor, y tecnologías de servidor como PHP requieren ser alojadas en un servidor para funcionar. Para trabajar con estas clases de documentos existen dos alternativas: podemos obtener una cuenta de alojamiento web de inmediato y usarla para hacer pruebas, o instalar un servidor en nuestro propio ordenador. Esta última opción hará que no se pueda acceder a nuestro sitio web desde internet, pero nos permite probarlo y experimentar con el código antes de subir la versión final a un servidor real.

MAMP

MAMP

Existen varios paquetes que instalan todos los programas necesarios para convertir nuestro ordenador en un servidor. Estos paquetes incluyen un servidor Apache (para despachar archivos web a través del protocolo HTTP), un servidor PHP (para procesar código PHP) y un servidor MySQL (para procesar bases de datos de tipo MySQL que podemos usar para almacenar datos en el servidor). El que se suele recomendar para iniciarse es MAMP pues es un paquete gratuito, disponible para Windows y Mac; el cual es fácil de instalar y usar.

Instalación MAMP

MAMP crea un directorio dentro de su propio directorio llamado htdocs donde se supone que debemos almacenar los archivos de nuestro sitio web, pero si lo deseamos, podemos asignar un directorio diferente desde la opción Preferencias. Esta opción abre una nueva ventana con varias pestañas para su configuración. La pestaña Web Server muestra el directorio actual que usa el servidor Apache y ofrece un botón para seleccionar un diferente. Después de seleccionar el directorio en el que se encuentran los archivos de nuestro sitio web, podemos acceder a ellos desde el servidor. Apache crea un dominio especial llamado localhost para referenciar al servidor y, por lo tanto, se puede acceder a nuestrio sitio desde la URL http://localhost/. Si queremos acceder a un archivo específico, solo tenemos que agregar el nombre del archivo al final de la URL, http://localhost/contacto.html

El sistema de Apple incluye su propia versión del servidor Apache, lo que obliga a MAMP a conectar con Apache en un puerto diferente para evitar conflictos. Por esta razón, se ha de especificar el puerto 8888 cuando se intenta acceder al localhost (http://localhost:8888)

Repasa la unidad realizando el siguiente test para comprobar cuánto se te ha quedado

Quiz

EMPEZAR

Pregunta 1/5

¿Qué son los sitios web?

Vídeos que los clientes ven en una web

Internet

Archivos que los usuarios descargan con sus navegadores

¿Todas las etiquetas son flexibles?

No, hay etiquetas fijas y etiquetas flexibles

Sí, no existen de otro tipo

No, la etiqueta <br> es la única no flexible

Pregunta 2/5

Son lenguajes del servidor

HTTP, CSS y Java

HTML, PHP y JavaScritp

PHP, Ruby y Pyton

Pregunta 3/5

¿Qué permite instalar un servidor en nuestro propio ordenador?

Un programa FTP

MAMP

Tener Internet

Pregunta 4/5

¡Incorrecto!

Volver a intentarlo

Quiz superado

¡Enhorabuena!

03

07

02

06

04

05

01

Manual básico de creación de páginas web

Manual HTML básico

Guía rápida de creación web para novatos

Guía rápida para crear tu sitio web

Web desing basics

Creating A Webpage Using HTML & CSS

Libros de programación

Bibliografía

¡Lección finalizada!