MODULO 1 (BITACORA Y ESTRUCTURA

DE SITIOS WEB)

Hemos visto el revuelo que ha causado el inicio del módulo, sobre todo por la
expectativa hacia el código para crear páginas web. Tenemos compañeros que
dominan el tema, otros que conocieron las formas anteriores de diseñarlas y
algunos que no hemos traveseado en esta área; así que lo primero es estandarizar
nuestra concepción grupal.

¿Por qué usar código?

Si ahora hay tantos programas que nos permiten generarlo, ¿por qué escribirlo
nosotros mismo? Porque no estamos en un curso de diseño de páginas web,
estamos en un programa de experto en su administración, y debemos dominar la
base sobre la cual funciona la world wide web, el código HTML. Por eso nuestra
dinámica de la Matrix, en la que vemos todo por fuera: bonito, funcional, atractivo,
pero ¿qué hay detrás? Vamos a descubrirlo.

HTML5 es la última colección de estándares para el diseño y desarrollo de páginas

web. No es un lenguaje de programación, así que no debes preocuparte o temerle,
al contrario, este lenguaje se basa en una colección que nos muestra la manera en
que se presenta la información en un navegador web y la manera de interactuar
con ella.

Como todo lenguaje, debemos aprender a conocerlo, usarlo y entenderlo y para

ello iniciaremos con la estructura básica de una página HTML5:
Las palabras en inglés mostradas en color amarillo y expuestas entre los símbolos
<> son parte del lenguaje HTML5 y se las denomina etiquetas, ya que marcan
secciones, partes o elementos de una página web y que tendrán una característica
específica según el diseño. Por ello en lugar de programar una página web, se la
maqueta o etiqueta.

No importa el dispositivo que uses: un ordenador de escritorio, un equipo portátil,

una pantalla gigante o una muy pequeña, una tableta o un teléfono inteligente; el
HTML5 te permite crear una página totalmente compatible y los elementos de la
estructura que acabas de conocer son considerados como el estándar en la
actualidad.

Para iniciar el trabajo como webmaster con HTML5 necesitamos ciertas

herramientas de trabajo en línea o e-work, que describimos a continuación:

Navegadores web
Existe una discusión muy grande con respecto a cuál es el mejor navegador, pero
para un webmaster no hay un mejor o un peor, todos son necesarios tomando en
cuenta los utilizados por los usuarios en la red. Para ello te sugerimos los que
vienen instalados de forma predeterminada en los ordenadores y que son usados
por los usuarios novatos o con menor experiencia, luego suma uno que tenga una
acogida estadística fuerte, pero que no pertenezca al grupo anterior y por último
algún navegador preferido por ti a manera personal. A continuación te mostramos
los que usamos nosotros, ubicados en el mismo orden:

• Sistema Windows - Microsoft Edge

• Sistema Mac OSX & iOS - Safari
• Sistema Linux - Mozilla
• Sistema Android - Chrome
• Estadística fuerte - Firefox
• Uso personal - Opera

Editor HTML
Dependiendo del sistema operativo que uses en tu ordenador, instala un editor
HTML para que puedas escribir tus códigos con la mayor eficiencia posible. Te
sugiero:

• Sistema Windows - Notepad Plus++

• Sistema Mac OSX - TextMate
• Sistema Android - HTML Editor
• Sistema Linux - Blue Griffon

Área digital de trabajo

Ubica un directorio en tu ordenador que uses específicamente como tu área de
trabajo como webmaster y mantenlo ordenado a un nivel de paranoia, esto es
demasiado importante. El nombre del directorio debe cumplir con las reglas de
los 5 sin:

• sin espacios
 • sin tildes o acentos
• sin eñes (enies)
• sin símbolos especiales como ,;/&%$"@#+*?}, etc
• sin mayúsculas

Crea subdirectorios que te permitan ordenar los archivos que almacenarás en este
espacio, por ejemplo:

• Recursos
• Software
• Plantillas
• Proyectos
• etc.

Crea todos los necesarios para evitar el caos y que dicha organización se convierta
en un aliado y no en una muralla.

Software actualizado
Verifica que tu ordenador tenga la última versión disponible para su sistema
operativo, comprobando primero la compatibilidad necesaria para evitar problemas
de funcionamiento. Un webmaster está en el tope de los usuarios de Internet, no
puede quedarse rezagado en versiones antiguas.

Selecciona y actualiza un programa antivirus, máximo uno adicional al que venga

predeterminado en tu sistema. Instalar más de un antivirus, lejos de protegerlo,
ocasiona una mayor debilidad a tu entorno.

La última versión de Java, que es un lenguaje de programación usado por miles de

gurús, webmasters y diseñadores, desde sitios web, juegos en línea, efectos
digitales, hasta el funcionamiento de multimedia y compatibilidad de dispositivos
periféricos, móviles o wearables. Descárgala y actualízala desde www.java.com

Bitácora web u offline

Nuestra carpeta offline debe ser una reproducción exacta, a forma de respaldo, del
sitio tal y como será publicado en Internet. Eso indica que su peso, tamaño físico,
número de archivos, etc., deben ser estrictamente aquellos que se encuentran
usados en el diseño dentro de la estructura web de nuestro sitio.

Muy importante
El detalle de estas herramientas o recursos están determinados para aquellas
personas que quieren empezar desde cero, pero apuntando a los estándares
internacionales de la W3C, World Wide Web Consorcium, la máxima entidad en la
red, presidida por Tim Bernes Lee, el padre de la Web, creador del código HTML. Si
ya tienes experiencia y te acomodas con otras distintas a las expuestas, puedes
usarlas sin problema alguno, además eres libre de compartir tu experiencia con tus
compañeros en los espacios del aula determinados para ello.
El código HTML5 está compuesto por un lenguaje de etiquetas que se constituyen
en elementos que entregan características especiales a ciertas secciones o
contenidos en una página web.

A continuación encontrarás los elementos o etiquetas HTML con su respectiva

descripción:

Elemento raíz
<!doctype html> Define que el documento está bajo el
estándar de HTML 5
<html> Representa la raíz de un documento HTML o
XHTML. Todos los demás elementos deben ser
descendientes de este elemento.
Metadatos del documento
<head> Representa una colección de metadatos
acerca del documento, incluyendo enlaces a,
o definiciones de, scripts y hojas de estilo.
<title> Define el título del documento, el cual se
muestra en la barra de título del navegador o
en las pestañas de página. Solamente puede
contener texto y cualquier otra etiqueta
contenida no será interpretada.
<base> Define la URL base para las URLs relativas en
la página.
<link> Usada para enlazar JavaScript y CSS externos
con el documento HTML actual.
<meta> Define los metadatos que no pueden ser
definidos usando otro elemento HTML.
<style> Etiqueta de estilo usada para escribir CSS en
línea.
Scripting
<script> Define ya sea un script interno o un enlace
hacia un script externo. El lenguaje de
programación es JavaScript
<noscript> Define un contenido alternativo a mostrar
cuando el navegador no soporta scripting.
Secciones
<body> Representa el contenido principal de un
documento HTML. Solo hay un elemento
<body> en un documento.
<section> Define una sección en un documento.
<nav> Define una sección que solamente contiene
enlaces de navegación
<article> Define contenido autónomo que podría existir
independientemente del resto del contenido.
<aside> Define algunos contenidos vagamente
relacionados con el resto del contenido de la
 página. Si es removido, el contenido restante
seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Los elementos de cabecera implementan seis
niveles de cabeceras de documentos; <h1> es
la de mayor y <h6> es la de menor
importancia. Un elemento de cabecera
describe brevemente el tema de la sección que
introduce.
<header> Define la cabecera de una página o sección.
Usualmente contiene un logotipo, el título del
sitio Web y una tabla de navegación de
contenidos.
<footer> Define el pie de una página o sección.
Usualmente contiene un mensaje de derechos
de autoría, algunos enlaces a información
legal o direcciones para dar información de
retroalimentación.
<address> Define una sección que contiene información
de contacto.
<main> Define el contenido principal o importante en
el documento. Solamente existe un elemento
<main> en el documento.
Agrupación de Contenido
<p> Define una parte que debe mostrarse como
un párrafo.
<hr> Representa un quiebre temático entre
párrafos de una sección o articulo o cualquier
contenido.
<pre> Indica que su contenido está preformateado
y que este formato debe ser preservado.
<blockquote> Representa un contenido citado desde otra
fuente.
<ol> Define una lista ordenada de artículos.
<ul> Define una lista de artículos sin orden.
<li> Define un artículo de una lista ennumerada.
<dl> Define una lista de definiciones, es decir, una
lista de términos y sus definiciones asociadas.
<dt> Representa un término definido por el
siguiente <dd>.
<dd> Representa la definición de los términos
listados antes que él.
<figure> Representa una figura ilustrada como parte
del documento.
<figcaption> Representa la leyenda de una figura.
<div> Representa un contenedor genérico sin
ningún significado especial.
Semántica a nivel de Texto
<a> Representa un hiperenlace, enlazando a otro
recurso.
<em> Representa un texto enfatizado, como un
acento de intensidad.
<strong> Representa un texto especialmente
importante.
<small> Representa un comentario aparte, es decir,
textos como un descargo de responsabilidad o
una nota de derechos de autoría, que no son
esenciales para la comprensión del
documento.
<s> Representa contenido que ya no es exacto o
relevante.
<cite> Representa el título de una obra.
<q> Representa una cita textual inline.
<dfn> Representa un término cuya definición está
contenida en su contenido ancestro más
próximo.
<abbr> Representa una abreviación o un acrónimo;
la expansión de la abreviatura puede ser
representada por el atributo title.
<data> Asocia un equivalente legible por máquina a
sus contenidos. (Este elemento está
solamente en la versión de la WHATWG del
estándar HTML y no en la versión de la W3C
de HTML5).
<time> Representa un valor de fecha y hora; el
equivalente legible por máquina puede ser
representado en el atributo datetime.
<code> Representa un código de ordenador.
<var> Representa a una variable, es decir, una
expresión matemática o contexto de
programación, un identificador que
represente a una constante, un símbolo que
identifica una cantidad física, un parámetro
de una función o un marcador de posición en
prosa.
<samp> Representa la salida de un programa o un
ordenador.
<kbd> Representa la entrada de usuario o usuaria,
por lo general desde un teclado, pero no
necesariamente. Este puede representar
otras formas de entrada de usuario o
usuaria, como comandos de voz transcritos.
<sub>,<sup> Representan un subíndice y un superíndice,
respectivamente.
<i> Representa un texto en una voz o estado de
ánimo alterno, o por lo menos de diferente
calidad, como una designación taxonómica,
un término técnico, una frase idiomática, un
pensamiento o el nombre de un barco.
<b> Representa un texto hacia el cual se llama la
atención para propósitos utilitarios. No
confiere ninguna importancia adicional y no
implica una voz alterna.
<u> Representa una anotación no textual sin
articular, como etiquetar un texto como mal
escrito o etiquetar un nombre propio en texto
en chino.
<mark> Representa texto resaltado con propósitos de
referencia, es decir por su relevancia en otro
contexto.
<ruby> Representa contenidos a ser marcados con
anotaciones ruby, recorridos cortos de texto
presentados junto al texto. Estos son
utilizados con regularidad en conjunto a
lenguajes de Asia del Este, donde las
anotaciones actúan como una guía para la
pronunciación, como el furigana japonés.
<rt> Representa el texto de una anotación Ruby .
<rp> Representa los paréntesis alrededor de una
anotación ruby, usada para mostrar la
anotación de manera alterna por los
navegadores que no soporten despliegue
estándar para las anotaciones.
<bdi> Representa un texto que debe ser aislado de
sus alrededores para el formateado
bidireccional del texto. Permite incrustar un
fragmento de texto con una direccionalidad
diferente o desconocida.
<bdo> Representa la direccionalidad de sus
descendientes con el fin de anular de forma
explícita al algoritmo bidireccional Unicode.
<span> Representa texto sin un significado específico.
Este debe ser usado cuando ningún otro
elemento semántico le confiere un significado
adecuado, en cuyo caso, provendrá de
atributos globales como class, lang, o dir.
<br> Representa un salto de línea.
<wbr> Representa una oportunidad de salto de línea,
es decir, un punto sugerido de envoltura
donde el texto de múltiples líneas puede ser
dividido para mejorar su legibilidad.
Ediciones
<ins> Define una adición en el documento.
<del> Define una remoción del documento.
Contenido incrustado
<img> Representa una imagen.
<iframe> Representa un contexto anidado de
navegación, es decir, un documento HTML
embebido.
<embed> Representa un punto de integración para una
aplicación o contenido interactivo externo
que por lo general no es HTML.
<object> Representa un recurso externo, que será
tratado como una imagen, un sub-documento
 HTML o un recurso externo a ser procesado
por un plugin.
<param> Define parámetros para el uso por los plugins
invocados por los elementos <object>.
<video> Representa un video y sus archivos de audio y
capciones asociadas, con la interfaz necesaria
para reproducirlos.
<audio> Representa un sonido o stream de audio.
<source> Permite a autores o autoras especificar
recursos multimedia alternativos para los
elementos multimedia como <video> o
<audio>.
<track> Permite a autores o autoras especificar una
pista de texto temporizado para elementos
multimedia como <video> o <audio>.
<canvas> Representa un área de mapa de bits en el que
se pueden utilizar scripts para renderizar
gráficos como gráficas, gráficas de juegos o
cualquier imagen visual al vuelo.
<map> En conjunto con <area>, define un mapa de
imagen.
<area> En conjunto con <map>, define un mapa de
imagen.
<svg> Define una imagen vectorial embebida.
<math> Define una fórmula matemática.
Datos tabulares
<table> Representa datos con más de una dimensión.
<caption> Representa el título de una tabla.
<colgroup> Representa un conjunto de una o más
columnas de una tabla.
<col> Representa una columna de una tabla.
<tbody> Representa el bloque de filas que describen los
datos concretos de una tabla.
<thead> Representa el bloque de filas que describen
las etiquetas de columna de una tabla.
<tfoot> Representa los bloques de filas que describen
los resúmenes de columna de una tabla.
<tr> Representa una fila de celdas en una tabla.
<td> Representa una celda de datos en una tabla.
<th> Representa una celda encabezado en una
tabla.
Formularios
<form> Representa un formulario, consistiendo de
controles que pueden ser enviados a un
servidor para procesamiento.
<fieldset> Representa un conjunto de controles.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un control de
formulario.
<input> Representa un campo de datos escrito que
permite al usuario o usuaria editar los datos.
<button> Representa un botón.
<select> Representa un control que permite la
selección entre un conjunto de opciones.
<datalist> Representa un conjunto de opciones
predefinidas para otros controles.
<optgroup> Representa un conjunto de opciones
agrupadas lógicamente.
<option> Representa una opción en un elemento
<select> o una sugerencia de un elemento
<datalist>.
<textarea> Representa un control de edición de texto
multi-línea.
<keygen> Representa un control de par generador de
llaves.
<output> Representa el resultado de un cálculo.
<progress> Representa el progreso de finalización de una
tarea.
<meter> Representa la medida escalar (o el valor
fraccionario) dentro de un rango conocido.
Elementos interactivos
<details> Representa un widget desde el que un
usuario o usuaria puede obtener información
o controles adicionales.
<summary> Representa un resumen, título o leyenda para
un elemento <details> dado.
<command> Representa un comando que un usuario o
usuaria puede invocar.
<menu> Representa una lista de comandos.

Los colores también tienen una codificación dentro del HTML. La misma está dada
por su nombre estándar o por el código hexadecimal (del 0 a la letra f) de los
colores en el formato RGB, es decir Red - Green - Blue. (Rojo - Verde - Azul). La
combinación de estos 3 colores, en diferente intensidad nos presentan diferentes
colores y resultados.

A continuación una tabla que nos muestra esas combinaciones:

A pesar de que los colores pueden ser codificados directamente en los archivos
HTML, el estándar ideal sería que se encuentren definidos en los archivos css, que
son aquellos que determinan los estilos de la página web, entre ellos los colores.

Los estándares web para el uso de imágenes toman en cuenta los siguientes
parámetros:

• Tamaño físico
• Peso del archivo
• Resolución
• Tipo de archivo

Tamaño físico
Nos permite determinar el espacio que ocupará la imagen dentro de nuestro sitio
web. Este tamaño se mide en píxeles con las dimensiones de ancho y alto
limitadas por el autor de la página, según el diseño requerido. Existe una
categorización de imágenes por su tamaño:

• Imágenes grandes, usadas como fondos del sitio web o para efectos de
animación de imágenes centrales. Normalmente su dimensión excede el estándar
de 1.024 px de ancho por 768 px de alto.
• Imágenes pequeñas, usadas en iconografía, miniaturas de fotografías o
imágenes complementarias. Su dimensión es inferior a los 256px.
• Imágenes medianas, consideradas como elementos clave dentro de nuestro
diseño, son aquellas imágenes de tamaño normal o convencional, cuya dimensión
es superior a los 256px. e inferior a 1.024px. La mayor cantidad de imágenes en
nuestro diseño se encuentran en esta sección.
• Microimágenes, imágenes cuya dimensión es inferior a 16px y que suelen
apoyar al diseño complementario del sitio o enganchar el diseño a la estructura
del navegador web.

Peso del archivo

Directamente proporcional al tamaño físico de la imagen, éste estándar permite al
diseñador evitar que su sitio web sea muy pesado y no se muestre adecuadamente
en las conexiones a internet lentas o inestables. La relación adecuada según el
tamaño es:

• grandes - 128 kb
• medianas - 64 kb
• pequeñas - 32 kb
• micro - 8 kb
Aparentemente el peso es demasiado pequeño, pero una página web tiene varias
imágenes y varios archivos que deben cargar cada vez que el usuario ingresa al
sitio y la suma del peso de todos los archivos es lo que da la velocidad de carga de
nuestra página web. De allí la importancia de cuidar este estándar.

Resolución
Determina la claridad y calidad de la imagen, sin embargo, también es
directamente proporcional al peso del archivo. A mayor calidad o mejor resolución
de la imagen, mayor el peso del archivo. La clave es determinar un equilibrio entre
la calidad y su peso y se logra con la ayuda de programas de manipulación o
edición de imágenes digitales.

Es necesario señalar en este punto que las imágenes del diseño gráfico
convencional para impresión no son las adecuadas para ser usadas en la web. No
hay que confundir diseño gráfico con diseño web, los estándares son diferentes.
Aún cuando una imagen generada para diseño gráfico puede adaptarse a los
estándares web, el proceso inverso resulta complejo y normalmente requiere
volver a crearse.

Tipo de archivo
Este estándar es fijado por el uso más popular de los archivos usados en la web y
actualmente los tipos aceptados por los navegadores modernos son:

• .jpg
Imágenes de fotografías de calidad y buena resolución. Este formato permite
eliminar varios detalles del archivo de imagen en un proceso de compresión, pero
manteniendo su calidad, lo que da como resultado una excelente imagen de bajo
peso y gran calidad.
• .gif
Imágenes de baja calidad usadas como complemento al diseño global del sitio
web, como líneas, íconos, bordes, logos, etc.
• .png
Imágenes usadas como principal o complementaria, no pierde detalles en un
proceso de compresión ocasionando que su peso sea mayor al de un jpg. Algunos
navegadores no soportan ciertas características del formato png, como la
transparencia.
• .ico
Imágenes usadas para el favicon o archivo de imagen corporativa del sitio
embebido en el navegador web.

HTML5 generó una total revolución en el uso del código para inserción de las
imágenes en un sitio web. Antes, las imágenes eran fijas y no respondían a los
estándares responsive o debían estar acompañadas de una cantidad de etiquetas,
scripts o códigos de apoyo para que se adapten al tipo de pantalla o dispositivo
que está usando el usuario. Sin embargo, hoy en día, el nuevo
elemento <picture> de HTML5 permite describir con todo detalle como deben
cargarse las imágenes en el sitio web, adaptándose de manera automática al
proceso responsive.

Anteriormente, el código único y más simple para insertar una imagen era:

CODIGO ANTIGÜO

<img
src="images/imagen-unica.jpg"
alt="descripción">

Con HTML5, esta sintaxis cambia con el uso del elemento <picture> en el que se
debe definir todas las imágenes responsive que colocaremos como disponibles y
que serán seleccionadas por el navegador según el dispositivo o tamaño de la
pantalla que tenga el usuario. Ahora, el código es el siguiente:

CÓDIGO SIMPLE
inserción de una imagen cualquiera

CÓDIGO RESPONSIVE
inserción de imágenes según tamaño de la pantalla del dispositivo del usuario.

CÓDIGO SIMPLE

<picture>
<img
src="images/imagen-pequena.jpg"
alt="descripción">
</picture>

CÓDIGO RESPONSIVE

<picture>
<source
media="(min-width: 650px)"
srcset="images/imagen-larga.jpg">
<source
media="(min-width: 465px)"
srcset="images/imagen-mediana.jpg">
<img
src="images/imagen-pequena.jpg"
alt="descripción">
</picture>

Sin embargo, HTML5 sigue unido con el estilo de la página con los archivos CSS,
así que debemos agregar unas líneas de código al estilo, sea dentro de la página o
en el archivo de estilo principal .css, según nuestra estructura y diseño, de la
siguiente manera:

Estilo incluido en el archivo .html

<style> img { display: block; margin: 0 auto; } </style>
Estilo en el archivo .css
.img { display: block; margin: 0 auto; }

Con este elemento estamos listos para incluir imágenes responsive dentro de
nuestro sitio web, con la diferencia de que no debemos tener solo una imagen
única, sino varias que se adapten al diseño que podrá ser visualizado en todos los
dispositivos.

Hemos observado a lo largo de esta aventura digital que la estructura web actual
combina HTML5 y CSS3 de manera tal que los resultados sean siempre responsive,
es decir, que puedan observarse en cualquiera tamaño de pantalla y navegador
moderno disponible en los diferentes dispositivos electrónicos de la actualidad.

Sin embargo, los nuevos elementos HTML5 toman en cuenta recursos o productos
generados por nosotros mismos, pero el proceso de embebido o inclusión de una
tercera codificación en nuestro sitio web suele no respetar las características
responsive de la estructura.

Por ejemplo, para embeber o insertar un video YouTube dentro de mi sitio web,
anteriormente debía colocar un código gigantesco en el que destacaban los
elementos <object> y <embed> como vemos el ejemplo a continuación:

CODIGO ANTIGÜO

<object
width="425"
height="344">
<param name="movie" value=
"http://www.youtube.com/Âv/9sEI1AUF" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always"
/>
<embed src=
"http://www.youtube.com/ Âv/9sEI1AUF"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>
</object>
Obviamente, este código entrega los parámetros de ancho y alto del video como
cualquier recurso de terceros para ser embebido y eso lo convierte de manera
automática en un recurso no responsive, es decir, que no cumple con los actuales
estándares web actuales para ser visualizado en dispositivos móviles.

Esto deja por fuera no sólo a los videos YouTube, Vimeo o DailyMotion, sino
también a herramientas valiosas como SoundCloud, Twitter, Google Maps,
Instagram, Vine, Storify y muchos más.

La combinación de elementos HTML5 y CSS3 puede dar solución a este

inconveniente. A continuación podrás encontrar el proceso resumido en 4 etapas:

1. Estilo CSS3
2. Contenedor HTML5
3. Código de embebido
4. Edición del código
1. ESTILO CSS3
Inserción del código de estilo que adaptará el recurso de un tercero embebido en
nuestro sitio web.

CODIGO CSS
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

2. CONTENEDOR HTML5
Dentro de nuestro documento .html debemos generar un espacio que contendrá el
recurso embebido. Este espacio se denomina contenedor y es el que buscará el
estilo descrito en el CSS3. El código que debemos insertar en el lugar donde estará
el embebido es:

CODIGO HTML5
 <p>
<div class='embed-container'>
aquí va el código de embebido editado
</div>
</p>

3. CÓDIGO DE EMBEBIDO
Normalmente en los recursos o herramientas de la web 2.0 y 3.0 tenemos la
opción de compartir lo que estamos observando, entre estas opciones
encontramos la de insertarlo en nuestro sitio web. Cuando seleccionamos
inserción, el sitio nos entrega un código para que lo agreguemos a nuestro sitio
web, este es el código de embebido.

4. EDICIÓN DEL CÓDIGO

El código de embebido contiene parámetros de alto, ancho, relación, publicidad,
enlaces, etc. que deben ser retirados para que no generen conflicto con nuestro
recurso incrustado, como lo muestra el ejemplo a continuación con un video de
YouTube:

CÓDIGO ORIGINAL
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Y422egdg5X4"
frameborder="0" allowfullscreen>
</iframe>

CODIGO EDITADO
<iframe
src="https://www.youtube.com/embed/Y422egdg5X4"
frameborder="0" allowfullscreen>
</iframe>

Luego de desarrollar cada una de estas etapas, nuestro recurso embebido tendrá
los estándares de un sitio web responsive y se adaptará adecuadamente a todo tipo
de pantalla y dispositivo.
CURSO FATLAS MODULO 2 (DOMINIOS Y
PANEL DE CONTROL)
DOMINIO WEB

Internet es conocida como la superautopista de la información porque une toda la

información conectada a la red y codificada para ser encontrada a través de los
sistemas de búsqueda existentes. Sin embargo, para que los ordenadores puedan
ser parte de esta gran red, es indispensable que cumplan con ciertos estándares
que permiten mantener la red organizada.

Estos estándares se conocen como protocolos. Te recomiendo el video de Alberto

Palomares Chust, de la Universidad Politécnica de Valencia, que nos explica los
"Protocolos básicos de Internet".

Concretando, a continuación tienes de manera muy clara y específica, información

que explica cada detalle relacionado con los dominios web.

Dominio de internet
"El Nombre de Dominio es un mnemónico que se corresponde con una serie de 4
grupos de números conocidos comunmente como “dirección IP” o más
formalmente “Internet Protocol Numbers”. Sirve para la ubicación universal de
recursos y servicios en Internet, como las páginas web o el correo electrónico
entre otros, al formar una dirección de Internet conocida como URL (Universal
Resource Locator). Un ejemplo de URL es: http://www.fatla.org/

Utilidad de los dominios

Como mnemónico, para relacionar un dirección IP con un nombre (más fácil de
recordar), por ejemplo la dirección IP 198.57.166.140 corresponde a fatla.org,
como se puede observar es mucho más difícil acordarse de una secuencia
numérica que de un nombre.

Dirección IP
Es una serie de 4 números, con un valor entre 0 y 255 cada una, que identifica a
cada ordenador conectado a Internet, es algo parecido a la relación entre números
de teléfono y teléfonos, (para tener línea telefónica es necesario tener un número
desde el que se hacen y reciben las llamadas).

Igual que los teléfonos digitales pueden tener múltiples números, en Internet, un
solo ordenador puede tener muchas direcciones IP.
Dominio de primer nivel o tld “Top Level Domain”
El primer nivel es el que está a la derecha del nombre del dominio, es decir, .com,
.net . org, .info, .es, etc., por ejemplo, en el dominio www.fatla.org, el primer nivel
es .org. Este primer nivel está controlado por organizaciones distintas dependiendo
del tipo de dominios, por ejemplo, los famosos .com y .net los controla Verisign,
los regionales una organización de cada país.

Los dominios de primer nivel se dividen en dos grandes grupos, los dominios
genéricos (.aero, .biz, .com, .coop, .edu, .gov, .info, .int, .mil, .museum, .name,
.net, .org, .pro y .travel) y los regionales, que son 243 extensiones de 2 caracteres
que equivalen al código corto de 237 códigos de la ISO3166-1.

Existen seis TLDs regionales que no corresponden con ningún código ISO3166-1,
son ac, gg, im, je, tp y uk que corresponden respectivamente a “Ascension
Island”, “Guernsey”, “Isle of Man”, “Jersey”, “East Timor” y “United Kingdom” (el
código ISO del Reino Unido es GB, aunque su TLD en Internet es UK). En esta
página de IANA se puede encontrar una lista de todos los TLDs regionales
(identificados como “country-code”).

"Los dominios de primer nivel más conocidos son los denominados clásicos: .com,
.net, .org, .biz, .info, .me. "(*3)
Dominios de segundo nivel
La entidad o empresa que controla un dominio de primer nivel, es la que a su vez
delega los nombres de segundo nivel, por ejemplo, el segundo nivel de
yahoo.com, sería yahoo, que estaría delegado por Verisign, que es la organización
que controla los dominios de primer nivel .com y .net. Se puede ver una lista de
las organizaciones que controlan los dominios genéricos de primer nivel (TLDs) en
esta pagina de IANA.

Para usar un nombre de dominio de segundo nivel, por ejemplo “minombre.com”,

es necesario pagar un mantenimiento a la organización que controla este TLD, o
en ocasiones (como sucede con los nombres genéricos), hay uno o más
vendedores autorizados llamados “registradores”. Aunque no todos pueden ser
registrados libremente por cualquiera, como es el caso de los dominios .mil ó .edu,
o muchos dominios regionales para los que no existe posibilidad de registro, o
tiene un registro restrictivo como los .pt (dominios regionales de Portugal).

Nuevos dominios
ICANN va a lanzar unos 1500 nuevos tipos de dominio (TLDs), en junio de 2013, la
lista puede verse aquí:
http://newgtlds.icann.org/en/program-status/application-results/

"Los nuevos dominios han permitido una mayor democratización de internet y

entre los más destacados constan: .education, .university, .academy, .ninja, .
foundation, .center, .club, .agency, .global, .international, etc."(*3)

Dominios de tercer nivel o subdominios

El tercer y siguientes niveles, también conocidos como subdominios, están a la
izquierda del segundo nivel, por ejemplo, en “noticias.fatla.org” “noticias” sería un
subdominio y en “www.fatla.org” “www” sería un subdominio.

Cuando pagamos por un dominio y se nos cede su gestión administrativa y técnica

(delegación), debemos facilitar al registrador o entidad que controla el TLD de
nuestro dominio, al menos dos servidores DNS, que serán “autoritativos” para el
dominio que hemos comprado (normalmente se encarga de esto nuestro
proveedor de Internet), estos servidores deben estar configurados correctamente
para utilizar los distintos servicios de nuestro dominio en Internet (páginas web,
email, etc.), apuntando el nombre o nombres a las direcciones IP
correspondientes.

Una vez que disponemos de un dominio registrado, podemos delegar los siguientes
niveles para que sean controlados por otros servidores de nombre, por ejemplo,
nosotros podríamos delegar cualquiercosa.fatla.org, apuntándolo a otro servidor
DNS, que a su vez podría hacer lo mismo, es decir, es todo una cadena de
delegaciones, donde el nivel anterior controla a los siguientes, y por tanto, en
último término es el ICANN quien controla todos los nombres de Internet, ya que
controla la zona root, que es el nivel de base.

Subdirectorios
Por último, no hay que confundir los subdirectorios del disco duro del servidor con
los nombres de dominio. Se diferencian porque siempre empiezan por una barra
“/” y están a la derecha del nombre de dominio. Por ejemplo, en
www.fatla.org/noticias/ el nombre de dominio sería “www.fatla.org” y /noticias/,
es un subdirectorio o carpeta dentro de ese servidor (igual que las carpetas de
nuestro disco duro)."(*1)

FQDN
"Sigla en inglés de fully qualified domain name, es un nombre que incluye el
nombre de la computadora y el nombre de dominio asociado a ese equipo. Por
ejemplo, dada la computadora llamada «hacker» y el nombre de dominio
«fatla.org.», el FQDN será «hacker.fatla.org.»; a su vez, un FQDN asociado a
hacker podría ser uno que contenga otros elementos como:
«webmaster.hacker.fatla.org.». En los sistemas de nombre de dominio de zonas, y
más especialmente en los FQDN, los nombres de dominio se especificarán con un
punto al final del nombre, aunque se puede omitir.

La longitud máxima permitida para un FQDN es 255 caracteres (bytes), con una
restricción adicional a 63 bytes por etiqueta dentro de un nombre de dominio. Las
etiquetas FQDN se restringen a un juego de caracteres limitado: letras A-Z de
ASCII, los dígitos, y el carácter «-» , y no distinguen mayúsculas de minúsculas.
En 2004 se añadieron algunos caracteres como «ä, ö, ü, é, à, è...» como
caracteres permitidos para las etiquetas.

La sintaxis de los nombres de dominio se discute en varios RFC -- RFC 1035, RFC
1123 y RFC 2181."

RFC
Request for Comments son una serie de publicaciones del grupo de trabajo de
ingeniería de internet que describen diversos aspectos del funcionamiento de
Internet y otras redes de computadoras, como protocolos, procedimientos, etc. y
comentarios e ideas sobre estos. Cada RFC constituye un monográfico o
memorando que ingenieros o expertos en la materia han hecho llegar al IETF, el
consorcio de colaboración técnica más importante en Internet, para que éste sea
valorado por el resto de la comunidad. De hecho, la traducción literal de RFC al
español es "Petición de comentarios".

Estas publicaciones se remontan a 1969, cuando Steve Crocker inventó un sistema

eficaz de hacer llegar las propuestas técnicas al resto de grupos de trabajo que
experimentaban con ARPANET, la precursora de Internet.

Los protocolos más importantes de Internet están definidos por RFC, como el
protocolo IP detallado en el RFC 791, el FTP en el RFC 959, o el HTTP —escrito por
Tim Berners-Lee et al.— en el RFC 2616."(*2)

Configuración DNS
Relación entre direcciones IP y dominios
"Se relacionan usando los “servidores de nombres de dominio” o servidores DNS ”
Domain Name System”. Cada proveedor de servicios en Internet tiene uno o varios
de estos servidores, cuando desde nuestro navegador (o programa de email, FTP,
etc), tratamos de acceder a un nombre de dominio, por ejemplo yahoo.com, el
DNS de nuestro proveedor de acceso le dice a nuestro navegador cual es su
dirección IP para que sepa donde debe conectarse.

Varios dominios con una sola IP

En una sola IP se pueden tener múltiples dominios y subdominios. Esto es una
práctica recomendable, ya que las direcciones IP son un recurso limitado y cada
vez quedan menos disponibles. Las principales organizaciones encargadas de la
delegación de las direcciones IP (RIPE en Europa) exigen actualmente la
justificación del uso que se va a dar a cada dirección IP antes de asignarla, no
siendo válido el uso exclusivo para un dominio, a no ser que este necesite un
certificado SSL.

Funcionamiento de los dominios

Los dominios indican en que dirección IP está un servidor en Internet, que es la
única forma de acceder a sus contenidos. Para averiguar esa dirección se utiliza
una consulta a unos servidores especiales llamados servidores de nombres o
servidores DNS “Domain Name System”. Estos servidores funcionan de una forma
jerárquica, trasladando las preguntas para averiguar dónde está un dominio
determinado, en este orden:

• Servidores de la zona root (raíz), controlada por unos servidores predefinidos y

distribuidos en varias localizaciones (especialmente EEUU)
• Servidor TLD “Top Level Domain” correspondiente. El TLD es el “tipo” de dominio,
indicado por las letras del dominio empezando desde la derecha del nombre hasta
el primer punto (por ejemplo .com, .net, .es…)
• Servidor autoritativo. Es el servidor de nombres que almacena la información
específica de un dominio, llamado ZONA. Este servidor suele estar controlado por
 el proveedor de servicios de Internet y en algunos casos por la empresa
registradora o usuarios con los conocimientos y recursos suficientes.

Zona root
El nivel básico de todos los dominios es la “zona root” que está representada por
un punto a la derecha del dominio, que aunque nunca se pone, existe. De hecho
podemos utilizarlo, por ejemplo intervia.com. (el punto detrás del .com) Los
servidores de la zona root son 14 en todo el mundo, diez de ellos en EEUU. Sin la
zona root sería imposible utilizar nombres de dominio en Internet, por lo que es
sumamente importante. ICANN es el organismo que controla la zona root. Para
conocer las zonas, puedes visitar: http://root-servers.org/

Cuando pagamos por un dominio y se nos cede su gestión administrativa y técnica

(delegación), debemos facilitar al registrador o entidad que controla el TLD de
nuestro dominio, al menos dos servidores DNS, que serán “autoritativos” para el
dominio que hemos comprado (normalmente se encarga de esto nuestro
proveedor de Internet), estos servidores deben estar configurados correctamente
para utilizar los distintos servicios de nuestro dominio en Internet (páginas web,
email, etc.), apuntando el nombre o nombres a las direcciones IP
correspondientes.

Entre las cosas que podemos controlar desde el servidor DNS de nuestro dominio
de segundo nivel, están los posteriores niveles o subdominios, por ejemplo, el
conocido www, no es más que un subdominio o dominio de tercer nivel, que puede
configurarse desde nuestro servidor de nombres (DNS).

Por ejemplo, en el caso del dominio fatla.org, existe además un dominio de tercer
nivel www.fatla.org, que en este caso apunta a la misma dirección IP que el
dominio principal, aunque esto no tendría por que ser así, por ejemplo, hay
muchos dominios que tienen configurado www.midominio.com como dominio
principal para las páginas web, pero no han configurado el nombre principal del
dominio, por lo que cuando tratamos de cargar midominio.com (sin www),
obtenemos un error. Esto se debe a que el nombre principal no se configuró en el
servidor DNS del dominio.

En el caso de algunos dominios regionales la entidad encargada del registro

además de controlar el segundo nivel, controla también el tercer nivel de algunos
nombres para obtener más combinaciones, por ejemplo, los dominios del Reino
Unido para uso comercial son .co.uk, aunque también existen .net.uk, .org.uk y
.me.uk (entre otros), esto mismo ocurre con los dominios de Japón, Portugal,
Argentina, Brasil y España, entre otros. En ese caso, lo que controlaríamos desde
nuestro servidor de nombres sería el cuarto y posteriores niveles.

Una vez que disponemos de un dominio registrado, podemos delegar los siguientes
niveles para que sean controlados por otros servidores de nombre, por ejemplo,
nosotros podríamos delegar cualquiercosa.fatla.org, apuntándolo a otro servidor
DNS, que a su vez podría hacer lo mismo, es decir, es todo una cadena de
delegaciones, donde el nivel anterior controla a los siguientes, y por tanto, en
último término es el ICANN quien controla todos los nombres de Internet, ya que
controla la zona root, que es el nivel de base.

Zona root alternativa

Dado que quien controla la zona root controla todos los nombres de Internet, es
decir, el ICANN, ¿qué pasaría si hubiera una zona root alternativa?. De hecho esto
ya ocurrió, una empresa llamada new.net montó su propia zona root alternativa,
creando infinidad de nuevos TLDs como .agente, .amor, .arte, .book, .chat, .club,
.deporte, .xxx y así hasta casi cien nuevos TLDs. El problema es que su zona no
está soportada por ningún buscador, por lo que si buscáramos en Google, nunca
encontraríamos este tipo de dominios y al no estar en los servidores de raíz. Estos
dominios no eran accesibles a no ser que se modificara la configuración del
sistema operativo. Tal vez debido a esto, hace ya tiempo de new.net no funciona.

Cuando se habló hace unos años (en 2012), de la posibilidad de que con el
acuerdo ACTA, un comité en EEUU pudiera cerrar cualquier dominio, saltando
legislaciones nacionales y jueces, sólo por orden de algunas empresas de gestión
de derechos de autor, el pánico cundió y se iniciaron algunos proyectos para crear
un sistema de registro de dominios libres, basados en protocoloes P2P, como fue el
caso de dot-p2p:
http://p2pfoundation.net/Dot-P2P

Varias empresas, entre ellas algunas muy importantes en internet, pidieron que se
detuviera aquella locura de ACTA, cuando vieron que corría el riesgo de que un
sistema de registro de dominios descentralizado, gratuito e imposible de controlar,
podría convertirse en una alternativa al jugoso y millonario negocio de los
dominios."(*1)

Configuración de los DNS

"El TLD o dominio de primer nivel, debe ser registrado en cualquier agente
autorizado, pero el registro sin configuración, se mantendrá aislado y sin
funcionamiento. Para activar un dominio web, es indispensable que el mismo sea
configurado para que apunte a un servidor que contiene DNS establecidos.

Por ejemplo: fatla.org se encuentra registrado y apunta a los servidores

establecidos por la corporación VGCORP. Los servidores de VGCORP asignan dns a
sus servidores para que se enlacen con las direcciones IP asignadas a los
dominios, de la siguiente manera:

DNS1 - ns1.vgcorp.net - 198.57.166.140

DNS2 - ns2.vgcorp.net - 198.57.166.152

Luego de registrar un dominio, debes configurar o apuntar tu dominio a tu servidor

web y activarlo en el panel de control del servicio de hosting que hayas
contratado."(*2)

Pero el proceso que permite la comunicación entre los servidores, los dominios, los
DNS y la transferencia de los datos entre ellos se lleva a cabo, gracias al Protocolo
TCP/IP. A continuación, te invito a mirar detenidamente el siguiente video que te
muestra el funcionamiento de todo este proceso, basado en el modelo OSI. Puede
resultarte complejo a un inicio, pero, son detalles muy importantes de
comprender, para que te adaptes a la dinámica de un real webmaster.

LINK video explicativo del Modelo OSI : https://youtu.be/WeP7zbuj36Q

Hosting y Servidores
El servidor es el equipo o máquina (física o virtual) que está conectada a Internet
ofreciendo diversos recursos y el hosting se podría decir que es solo un espacio de
alojamiento en el servidor utilizando ciertos recursos técnicos. Es decir, si se
decide contratar un servidor se dispondrá de más recursos técnicos que un hosting
(podría darse el caso que un hosting avanzado iguale o supere en ciertos aspectos
a algún otro servidor básico).

En un mismo servidor puede haber varios hostings, por lo que si se contrata un

hosting es posible que en la misma dirección IP del servidor se encuentren
diferentes hostings o alojamientos web. Los servidores suelen ser menos
económicos que los hosting, pero es la opción más recomendada si se quiere
disponer de mayor control sobre los recursos técnicos. Además, con un servidor se
podría evitar compartir IP con otros hostings o alojamientos de Internet.

Los Servidores también se podrían diferenciar entre varios tipos: Servidor

compartido, servidor virtual o servidor dedicado. Existen diferentes configuraciones
técnicas de los hosting o servidores, por lo que puedes encontrar diversas
diferencias entre los recursos que ofrece cada uno. A continuación un breve video
que te explica sobre los servidores:

https://youtu.be/AsJWIxh84No

Web Hosting
Es el servicio que provee el espacio en Internet para los sitios web. Si queres crear
tu página web y que otros puedan visitarla, vas a necesitar publicar o subir los
archivos a un servicio de web hosting.

Éstos servicios funcionan ofreciéndote computadoras de grandes prestaciones

(servidores web), utilizando conexiones de alta velocidad además de muchas otras
prestaciones. Cuando alguien escribe tu dirección web (como por ejemplo
www.fatla.org), ellos se conectaran al servidor web donde esté alojado tu pagina y
descargarán los archivos de tu sitio.

Cuando te ofrecen una cuenta de hosting, te están ofreciendo una pequeña parte
del disco duro que tiene el servidor, con el fin de poder publicar ahí las páginas
web, y otros aspectos que varían en función del panel de control que te ofrezca.
Cada uno aporta interfaz distinta y funcionalidades que pueden adaptarse mejor o
peor. En popularidad, cPanel se lleva la máxima popularidad, aunque no muy por
encima de otros.

En el hosting, también hay otros aspectos que es bueno analizar, ya que cada
persona tiene sus necesidades, y nadie puede decirte qué es mejor para ti sin
antes saber qué proyecto tienes en mente.

Hemos hablado del espacio en disco como la característica principal para definir
que es el hosting, ya que la palabra, traducida a español, significa “alojamiento”.
Otros términos que hacen referencia a esto son web hosting o alojamiento web. El
uso más típico de un hosting es crear un sitio web (que, en realidad, no es más
que un conjunto de ficheros en formato HTML que son las páginas web), pero
también puedes usar tu hosting simplemente para permitir la descarga de
cualquier otra cosa (documentos PDF, ficheros MP3 de audio, vídeo, etc.)

Aparte de los servicios básicos de alojamiento de fichero, un servicio de hosting

incluye otros servicios de mucho valor añadido. Entre ellos, los más importantes
son los siguientes:

• Un servidor de correo electrónico que permite que tengas cuentas de correo con
tu propio nombre de dominio.
• Alojamiento de aplicaciones web pasadas en PHP y bases de datos para crear
webs generalistas, blogs, tiendas online o foros de discusión, por citar algunas
de las aplicaciones más importantes.
• Acceso vía FTP para almacenar y descargar ficheros.
• Crear discos virtuales, es decir, crear almacenamiento en la nube con tu propio
servicio de hosting al que accedes como si lo tuvieras en tu ordenador."(*1)

VPS
"Un VPS es un servidor privado virtual, tu propia isla privada en un servidor
dedicado más grande. Un VPS te da un control total sobre una parte de un
servidor, en esencia es como un recipiente que contiene un sistema operativo y te
proporciona acceso root para hacer con ella lo que se requiera. Mientras que otros
clientes están en el servidor o nodo, que se encuentra en su contenedor, nadie
tiene acceso a tu contenedor específico, por lo que es fiable y seguro.

En lugar de registrarte en un servidor dedicado que generalmente son muy caros,

un Servidor VPS te permite utilizar muchos más recursos en un entorno de
alojamiento compartido, además, el control sobre lo que está corriendo en el
servidor, como por ejemplo, decidir qué aplicaciones deseas utilizar. Tienes la
capacidad de crear accesos a un panel de control para tus propios clientes, todo es
cuestión de poder, tu tienes el control y funcionalidad!

Si has superado tu alojamiento compartido o, simplemente necesitas más de un

servidor compartido que se te proporciono, un Servidor VPS es para ti. Muchos
clientes de VPS dirigen sus propios negocios de alojamiento web, lo que les
permite registrar a sus propios clientes. Otros clientes sólo quieren ejecutar Java y
Tomcat, donde la mayoría de los proveedores comunes no permiten eso. Aquí es
donde entra en juego VPS."(*2)

Cloud Computing o Nube

El Cloud Computing es un conjunto de tecnologías empaquetadas y listas para
ofrecer un servicio a través de una página web o panel de administración, donde
se pueden contratar servidores, redimensionar los recursos, como la memoria
RAM, el espacio en los discos duros, etc. Todo ello se ofrece para que pueda ser
gestionado sin tener altos conocimientos de administración de sistemas. El termino
‘instancia’ en Cloud, sería el equivalente a ‘máquina virtual’ en virtualización, salvo
que en el Cloud las instancias pueden ser máquinas virtuales o Contenedores.

Las soluciones Cloud permiten ahorrar inversiones iniciales en servidores, además

de ofrecer flexibilidad en los recursos que usas en cada momento.

Cloud Público
Se refiere a un servicio de Cloud Computing, donde la infraestructura se comparte
entre diferentes clientes (SaaS). Para facilitar su comprensión y haciendo un símil,
esto sería como un Hosting compartido o un VPS (Virtual Private Server), donde
cada cliente tiene reservados los recursos que contrata, pero comparten la misma
infraestructura de servidores y dispositivos de red. Un par ejemplos de cloud
público son Amazon AWS y RackSpace.

• “Pago por uso”, se paga por los recursos mientras estos los tenga reservados o
asignados en su cuenta.
• No se requiere de una inversión en servidores.
• La migración a otro proveedor es más fácil que si hubiera que mover servidores
físicos.
• No requiere de altos conocimientos ni tiempos para redimensionar el hardware
de una instancia.

Dependiendo del tipo de proveedor de servicios Cloud que se elija, la asignación de

recursos se puede automatizar o no, aumentando la efectividad y ahorrando en
costes de personal. Por ejemplo Amazon tiene un servicio llamado AutoScaling,
donde se puede configurar para que se añadan o se liberen instancias
automaticamente según se necesiten.

Cloud Privado o VPC

El Cloud Privado, es una infraestructura Cloud que solo usa un único cliente (IaaS),
por lo que no comparte recursos físicos.”

Link Explicativo sobre Cloud Computing : https://youtu.be/VOn6tg3e1t4

Servidor dedicado
"Los servidores dedicados son la forma mas avanzada de alojamiento web, en la
cual se alquila un servidor completo para uso exclusivo, disponiendo de este
manera, de un control completo sobre el servidor. La conexión a Internet se
proporciona al servidor, utilizando conexiones Ethernet.
Trabajando como ISP, los proveedores de servicios en Internet, o ISP´s, necesitan
disponer de servidores dedicados para alojar las páginas web de sus clientes, de
este modo, se pueden ofrecer servicios personalizados de alojamiento web a cada
cliente, ofreciendo un espacio en disco y ancho de banda para cada cliente de
modo individual.

Algunas aplicaciones web, necesitan de la implantación de aplicaciones de terceros

o componentes extras que en los alojamientos web convencionales, no se
incluyen. Algunos componentes extras, solo son posibles de utilizar si se instalan
directamente en el servidor dedicado con derechos de administrador, por eso, un
simple alojamiento web, no permitirá desarrollar al 100% proyectos complejos.

Comparando un alojamiento web convencional a un servidor dedicado, las

diferencias son muy significativas, ya que en los servidores dedicados los límites
son establecidos por el hardware que compone el servidor por lo que en tema de
desarrollo podremos hacer lo que queramos. En el caso de un alomiento web
nuestra límitación se centra en la cantidad de espacio de disco que nos
proporcione nuestro proveedor y de los componentes extras ya que estén
incluidos. Como es lógico contratar un servidor dedicado tiene un coste superior a
un alojamiento web, pero las posibilididades que esta opción nos ofrece son
realmente amplias."

Panel de Control
Características
El panel de control de un servidor web es un software que provee una interfaz
gráfica para la gestión de usuarios y la administración de los servicios del servidor.

Generalmente son en sistemas operativos tipo unix, tal como GNU/Linux y BSD,
sin embargo también existen en otras plataformas como por ejemplo Windows
Server o Mac OSX Server.

Funciones
Algunas de las funciones que contienen los paneles de control son:

• Estadísticas de visitas.
• Detalles sobre la cuota de ancho de banda utilizada.
• Administración de archivos y directorios.
• Configuración de cuentas de correo electrónico.
• Administración de bases de datos.
• Administración de cuentas de usuarios de servidores FTP.
• Acceso a los archivos de registros del servidor.
• Manejo de subdominios.

Activación
Para poder acceder a un panel de control, el servidor, a través de su
administrador, debe tener asignado una cuenta cliente a la que se puede acceder
desde el dominio apuntado al servidor que proporciona el hosting. Esta asignación
se hace desde otro software que administra el servidor, que aprenderemos a usar
en los módulos superiores.

Tipos y opciones
Existen diferentes tipos de paneles de control web, a continuación, podrás
encontrar algunos de los más conocidos, con sus respectivos enlaces, si deseas
investigar un poco más al respecto:

Contenido del CPanel

En el caso del programa académico de Webmaster, usaremos el panel de
control denominado CPanel, uno de los más populares en los servidores web y
servicios de hosting. El contenido de este panel de control nos muestra:
A lo largo de los ejercicios prácticos, iremos conociendo cada uno de estos
elementos.
Administrador de Archivos
Más conocido como "file admin" por su original en inglés, es una herramienta que
se encuentra dentro del panel de control y que nos permite organizar, controlar y
por supuesto, como su nombre lo indica, administrar todos los archivos de nuestro
hosting, servidor o espacio en la red.

El administrador de archivos entrega acceso y control sobre los archivos

correspondientes a un dominio específico y a los subdominios correspondientes. Si
tenemos más de un dominio web activo, cada uno debe tener asignado un panel
de control y por lo tanto un administrador de archivos independiente.

Normalmente estos administradores de archivos tienen una estructura visual un

tanto convencional, que suele adaptarse a los OS (sistemas operativos) más
populares como: MS Windows o Mac OSX, Linux, entre otros. Sin embargo los
estándares internacionales le han entregado una imagen muy propia y por
supuesto agradable a su entorno web.

Ubicamos al administrador de archivos, dentro de la categoría archivos en

nuestro panel de control:

En ésta sección presionamos sobre la opción: Administrador de archivos, Al

hacerlo, se abrirá una nueva ventana o una nueva pestaña, que contiene
el administrador de archivos de tu hosting en internet.

Esta pantalla está dividida en 3 secciones:

Sección 1, es la cabecera con las opciones de administración del administrador de

archivos, valga la redundancia; y debajo dividida; a la izquierda la sección 2, las
carpetas que contienen la información en tu hosting y a la derecha la sección 3,
con el contenido expandido de cada una de esas carpetas.

En la sección 2, o sección inferior izquierda, presiona sobre la

carpeta public_html. Esta carpeta contendrá todo aquello que será visible en la
sección online de tu web hosting, como tus proyectos web, páginas, plataformas,
etc. Normalmente se le conoce como webroot.

En la sección 3, o sección inferior derecha, aparecerá el contenido

del public_html escogido.

La sección 1, muestra las operaciones más comunes y necesarias para un

webmaster dentro del administrador de archivos, entre otras:
Debajo de la cabecera, separándola de las ventanas de carpetas y contenidos, se
encuentra el navegador interno, que entre otras opciones nos muestra las
siguientes:
Las opciones de la cabecera, tanto de las operaciones como del navegador, se
activan seleccionando el archivo o carpeta con la cual se desea realizar la acción
requerida y posteriormente el ícono que lo ejecutará.

Generador de Sitios Web

En el módulo anterior aprendimos a editar sitios web maquetándolos con código
HTML5. Dentro del panel de control, tenemos una herramienta que nos permite
construir un sitio web estándar de manera automática a través de la tecnología
Site Builder o generador automático de sitios web.

Al ingresar al panel de control, el primer ícono que encontrarás es el Site

Publisher o publicador de sitios web, sin embargo, esta herramienta pertenece a
la categoría de Dominios, donde también encontrarás el acceso correspondiente.
Al ingresar a la herramienta, encontraremos los 3 pasos para generar
automáticamente nuestro sitio web.

En el paso 1: seleccionar un dominio, debemos seleccionar el dominio o

subdominio en el que se creará el nuevo sitio web. Por default (término informático
muy común entre los webmaster para determinar un proceso establecido como
predeterminado), se instalará en el dominio principal.

En el paso 2: select a template, nos permite seleccionar una de las 3 plantillas

disponibles: sitio web personal, negocios o sitio en construcción. Solo hay que
seleccionar la plantilla deseada.

En el paso 3: customize and publish, personalizar y publicar, nos solicita

información relacionada al nuevo sitio web y al final, a través de un botón
llamado Publish, podremos publicar nuestro sitio web.

Para editar nuestro sitio web con la misma herramienta, debemos simplemente
ingresar a ella y seleccionar el dominio o subdominio con el que estamos trabajando
o el que deseemos editar. Luego de hacer los cambios respectivos, volvemos a
presionar el botón Publish para terminar.
CURSO FATLAS MODULO 3 (Emails,
Subdominio, Redirección, Métrica y
Estadisticas)
EMAIL

"El correo electrónico, también conocido como e-mail (del inglés, electronic mail);
es un servicio de red que permite mandar y recibir mensajes con múltiples
destinarios o receptores, situados en cualquier parte del mundo.

Para usar este servicio se necesita cualquiera de los programas de correo electrónico
que ofrece la red. En un mensaje de correo electrónico, además de un texto escrito,
puede incluir archivos como documentos, imágenes, música, archivos de video, etc.

La facilidad de uso, su rapidez y el abaratamiento de costos de la transmisión de

información han dado lugar a que la mayoría de las instituciones, empresas y
particulares tengan en el correo electrónico su principal medio de comunicación,
desplazando del primer lugar a la correspondencia tradicional, al teléfono y al fax.

Los mensajes electrónicos viajan hasta su destino casi en forma instantánea, y lo

que es mejor, se puede obtener respuesta de igual manera. Uno puede comunicarse
con una persona, disminuyendo el costo de una conversación telefónica o envío de
fax.

Tener un buzón de correo en Internet es muy parecido a tener un aparato aéreo o

casilla postal, pero sin necesidad de ir al salto físico para recoger los mensajes. Estos
llegan al computador, cada vez que se conecta con su proveedor de acceso, donde
se mantienen almacenados, en espera de que su destinatario los pueda leer.

El funcionamiento del envío de correo electrónico se basa en fragmentar el mensaje

enviado en pequeños paquetes de datos individuales. Cada uno de éstos recibe una
“etiqueta” con la dirección del destinatario. En Internet, existen unos denominados
Routers (enrutadores), los cuales transmiten estos paquetes por el camino más
rápido al destinatario. Una vez que lleguen todos, éstos se volverán a reunir en un
solo mensaje.

La única condición del usuario es que disponga de una dirección de correo

electrónico, la cual se reconoce de la siguiente manera; por ejemplo,
[email protected]; mararmas es identificador o nombre del usuario, en
este caso María Armas. El signo arroba (@) separa al usuario del resto de la
dirección; ciberlink, identifica un proveedor o empresa que ofrece el servicio; com,
corresponde a dominios que utilizan empresas comerciales; y br, indica el país de
ubicación del servicio o red, en este caso Brasil.

Cabe señalar, que hoy en día se extienden diversos tipos de envíos perniciosos y
amenazas a través de este sistema de comunicación. Se tiene al ataque de virus a
través de ficheros adjuntos infectados por éstos; al hoax, que es un mensaje con
contenido falso o engañoso y normalmente distribuido por cadena; y el spam que
suele tratarse de información publicitaria, no solicitada por el usuario." (*1)

En el panel de control de nuestra cuenta web, tenemos la categoría de Correo

Electrónico o Email, que consta de 3 secciones de opciones para que la
administremos, a continuación encontrarás las más comunes. Para conocer la
descripción de cada ícono, presiona sobre él:

ACA VAN MUCHAS IMAGENES

SUBDOMINIO Y REDIRECCION

En el panel de control de nuestra cuenta web, tenemos la categoría de Dominios,

que a su vez contiene 6 herramientas de configuración.

A pesar de que conocimos sobre los dominios en el módulo anterior, éstas

herramientas nos permitirán organizar adecuadamente nuestro sitio web o
estructurar las secciones del mismo para que los resultados sean más útiles y
efectivos. Esta eficiencia no se orienta únicamente al usuario de nuestro sitio en la
red, sino también para los administradores, tanto para obtener información
de métrica y estadísticas, como para preparar procesos de escalabilidad en un
futuro cercano.

MATRICA Y ESTADISTICAS

La métrica es una sección de nuestro panel de control, que nos permite encontrar
información importante sobre quienes visitan nuestro sitio web, desde sus IP's,
hasta el navegador que usaron, los archvios que descargaron o el sistema operativo
que posee el dispositivo a través del cual se conectó.
Sin embargo, cuando el servidor procesa estas estadísticas genera una carga fuerte
hacia el procesador y puede ocasionar lentitud en los demás procesos que puedan
estar desarrollándose de manera paralela. Por ello, las estadísticas suelen tener un
control en cuanto a la cantidad de ocasiones que pueden ser solicitadas, así que, no
hay que abusar de ellas o no podrás acceder a las mismas cuando realmente las
necesites.
GESTIÓN DE BASE DE DATOS EN
SERVIDORES WEB MODULO 4
Definición de base de datos
Se define una base de datos como una serie de datos organizados y relacionados
entre sí, los cuales son recolectados y explotados por los sistemas de información
de una empresa o negocio en particular.

Características
Entre las principales características de los sistemas de base de datos podemos
mencionar:
Independencia lógica y física de los datos.
Redundancia mínima.
Acceso concurrente por parte de múltiples usuarios.
Integridad de los datos.
Consultas complejas optimizadas.
Seguridad de acceso y auditoría.
Respaldo y recuperación.
Acceso a través de lenguajes de programación estándar.

Sistema de Gestión de Base de Datos (SGBD)

Los Sistemas de Gestión de Base de Datos (en inglés DataBase Management
System) son un tipo de software muy específico, dedicado a servir de interfaz entre
la base de datos, el usuario y las aplicaciones que la utilizan. Se compone de un
lenguaje de definición de datos, de un lenguaje de manipulación de datos y de un
lenguaje de consulta.
Elementos de una base de datos

Para construir una base de datos debemos, obviamente, tener datos que se
encuentran almacenados en campos cuya relación mutua establece un registro y
cuya acumulación se guarda en un archivo. El conjunto de archivos relacionados
nos entregan una base de datos.

dato => campo => registro => archivo => BD

A continuación comparto contigo un video de conceptos básicos de un curso de

base de datos creado por el grupo Código Compilado. El video es muy importante
para que entendamos lo que es una base de datos, sus elementos, pero sobretodo
su estructura:
https://youtu.be/yoeV4Ex8C8U

Base de Datos MySql

Definición, uso y origen

MySQL es un sistema de gestión de base de datos relacional (RDBMS) de código

abierto, basado en lenguaje de consulta estructurado (SQL).

MySQL se ejecuta en prácticamente todas las plataformas, incluyendo Linux, UNIX,

MAC y Windows.

MySQL, que fue concebido originalmente por la compañía sueca MySQL AB, fue
adquirida por Oracle en 2008. Los desarrolladores todavía pueden usar MySQL bajo
la Licencia Pública General de GNU (GPL), pero las empresas deben obtener una
licencia comercial de Oracle.
Forks

Un fork significa bifurcación, y en programación supone copiar un proyecto y partir

de este, hacerle modificaciones. Los forks de MySQL incluyen:

Drizzle, un sistema de gestión de base de datos ligero de código abierto en el

desarrollo basado en MySQL 6.0.

MariaDB, un reemplazo popular "drop-in" desarrollado en la comunidad para

MySQL que utiliza las API y los comandos de MySQL.

Percona Server con XtraDB, una versión mejorada de MySQL conocido por su
escalabilidad horizontal.

Motores de almacenamiento

Elige tu motor de almacenamiento MySQL. El motor de almacenamiento (storage-

engine) se encarga de almacenar, manejar y recuperar información de una tabla.

MyISAM

Usado por defecto por el sistema administrador de bases de datos relacionales

MySQL hasta su versión 5.5. Este tipo de tablas están basadas en el formato ISAM
pero con nuevas extensiones.

InnoDB

Incluido como formato de tabla estándar en todas las distribuciones de MySQL AB

a partir de las versiones 4.0. Su característica principal es que soporta transacciones
de tipo ACID y bloqueo de registros e integridad referencial. InnoDB ofrece una
fiabilidad y consistencia muy superior a MyISAM, si bien el mejor rendimiento de
uno u otro formato dependerá de la aplicación específica. Este es el motor de
almacenamiento que usaremos en el ejercicio práctico.

ARCHIVE

Se usa para guardar grandes cantidades de datos sin índices con una huella
relativamente pequeña.

CSV

Almacena datos en ficheros de texto usando valores separados por comas.

FEDERATED

Está disponible desde MySQL 5.0.3. Es un motor que accede a datos en tablas de
bases de datos remotas en lugar de tablas locales.

EXAMPLE

Es un motor de pruebas que no hace nada. Su propósito es servir como ejemplo en

el código fuente MySQL para ilustrar cómo empezar a escribir nuevos motores de
almacenamiento. Como tal, tiene interés principalmente para desarrolladores.

BERKELEY BD (BDB)

Sleepycat Software ha proporcionado a MySQL el motor de almacenamiento

transaccional Berkeley DB. A este motor de almacenamiento se le llama
tradicionalmente BDB. Se incluye soporte para BDB en distribuciones fuentes de
MySQL y en distribuciones binarias MySQL-Max .

MEMORY (HEAP)

Crea tablas con contenidos que se almacenan en memoria.Éstas se conocían

préviamente como HEAP . En MySQL 5.0, MEMORY es el término preferido,
aunque HEAP se soporta para compatibilidad con versiones anteriores.
MERGE (MRG_MyISAM)

Es una colección de tablas MyISAM idénticas que pueden usarse como una.
"Idéntica"significa que todas lsas tablas tienen información de columna e índice
idéntica. No puede mezclar tablas en que las columnas se listen en orden distinto,
no tengan exactamente las mismas columnas, o tengan los índices en orden distinto

BLACKHOLE

Se puede usar para hacer desparecer los datos de algunas tablas que no nos
interesen. Por ejemplo, en un entorno master-slave podemos eliminar una tabla
grande que no nos cabe en disco. O también, si tenemos una aplicación que no
podemos modificar, descartar los datos que se introducen en dicha tabla.

A continuación encontrarás un video que resultará interesante para que conozcas

un poco más acerca de MySQL.

https://youtu.be/GaJtCtmYd74

PHPMyAdmin

Es un programa de libre distribución en PHP, creado por una comunidad sin ánimo
de lucro. Es una herramienta muy completa que permite acceder a todas las
funciones típicas de la base de datos MySQL a través de una interfaz web muy
intuitiva.

La aplicación en si no es más que un conjunto de archivos escritos en PHP que

podemos copiar en un directorio de nuestro servidor web, de modo que, cuando
accedemos a esos archivos, nos muestran unas páginas donde podemos encontrar
las bases de datos a las que tenemos acceso en nuestro servidor de bases de
datos y todas sus tablas.

La herramienta nos permite crear tablas, insertar datos en las tablas existentes,
navegar por los registros de las tablas, editarlos y borrarlos, borrar tablas y un largo
etcétera, incluso ejecutar sentencias SQL y hacer un backup de la base de datos.

Los diferentes paneles de control de servidores web, lo suelen tener instalado por
defecto, de manera que puedas administrar tus bases de datos sin inconveniente
alguno.

PHPMYAdmin, facilita los procesos de administración de base de datos MyAQL,

sobretodo para aquellos usaurios que carecen de conocimientos profundos sobre
BD y programación web.

Gestor de Base de Datos

Al igual que la herramientas que conocimos en la semana anterior, PHPMyAdmin,

existen muchas herramientas en la red para gestionar base de datos, trabajar con
ellas, crearlas o incluso administrarlas.

Normalmente no son tan adaptables, sino que su existencia se enfoca a

funcionalidades específicas, en especial cuando la alimentación de las mismas, sale
del enfoque manual singular y se revierte hacia la comunidad o la pluralidad de un
grupo de usuarios convertidos en un objetivo específico, según las necesidades o
requerimientos del administrador de la base de datos.

Varias herramientas pueden ser instaladas en nuestros servidores a partir de

nuestro panel de control y otras funcionan de manera exclusiva dentro de los
servidores del sitio patrocinador. Como cualquier otra herramienta de internet, no
todas son gratuitas, a pesar de que la mayoría son de código abierto, muchas tienen
opciones demo o básicas sin costo, pero cuando uno desea incrementar las
funcionalidades, y sale de las limitaciones obvias, es necesario cubrir un costo
específico.

Herramientas en la web

Tomando en cuenta los detalles aclarados anteriormente, he tomado un grupo de

herramientas web que pueden resultarte útiles, cada una se constituye como un
gestor de base de datos, sin embargo, no todas son iguales en su operatividad o
administración, te sugiero que visites varias, pruebes, travesees y mires aquella que
consideres más interesante.
A continuación comparto contigo los enlaces a esas herramientas, solo presiona
sobre el ícono y se abrirá una nueva ventana con el sitio web correspondiente:

Google Forms : https://www.google.com/intl/es/forms/about/

Wufo: http://www.wufoo.com.mx/
Obvibase: https://www.obvibase.com/
Kohezion: https://www.kohezion.com/
Sodadb: https://sodadb.com/