Tema 1: PAGINA WEB

Una Página Web es un documento electrónico que forma parte de la WWW (World Wide
Web) generalmente construido en el lenguaje HTML (Hyper Text Markup Language o
Lenguaje de Marcado de Hipertexto) ó en XHTML (eXtensible Hyper Text Markup
Language o Lenguaje de Marcado de Hipertexto Extensible). Este documento puede
contener enlaces (característica del hypertext) que nos direcciona a otra Página Web
cuando se efectúa el click sobre él. Para visualizar una Página Web es necesario el uso de
un Browser o navegador. Una Página Web puede estar alojada en un ordenador local o en
un ordenador remoto. Al servidor donde esté alojada la Página Web se le denomina
Servidor Web. El Servidor Web atiende las peticiones de Páginas Web utilizando el
protocolo HTTP (HyperText Transfer Protocol); del lado del cliente es el Browser o
navegador el que recibe y muestra las Páginas Web utilizando el mismo protocolo. Otra
característica importante es que una Página Web puede ser estática (su contenido
siempre es el mismo) o dinámica (su contenido se construye a partir de la información
introducida por el usuario). Una Web es un conjunto de Páginas Web interrelacionadas
que conforman lo que se conoce como un Sitio Web. La WWW o la Web es todo el
conjunto de información interrelacionada que se haya disponible en Internet, ésta se
conforma por una serie de servidores a nivel mundial organizados por dominios (nombres
lógicos asociados a instituciones o empresas, otorgados por empresas registradoras
oficiales).
¿QUÉ ES HYPERTEXT Y COMO FUNCIONA?
El Hypertext o hipertexto, es un mecanismo de comunicación que permite desde un
documento navegar a otro documento. Este mecanismo se realiza insertando un enlace
en algún texto del ocumento y es una facilidad que provee el lenguaje HTML. Cuando
navegamos en Internet estamos visualizando Páginas Web. A cada Página Web le
corresponde un único URL (Uniform Resource Locator o localizador uniforme de recursos),
que es una secuencia de caracteres que se utilizan para identificar objetos (como
documentos e imágenes) en Internet por su localización, ej:
http://www.institutoprivadoipei.com.mx/inicio El URL identifica en que ordenador se
encuentra el objeto a mostrar (www. institutoprivadoipei.com), bajo que estructura de
directorio (/inicio). Cada enlace que se encuentren en una Página Web contiene una
dirección URL, cuando efectuamos un click sobre cualquiera de estos enlaces se envía un
requerimiento para obtener un documento que se encuentra alojado en un ordenador en
alguna parte del mundo y que está identificado unívocamente por su URL.
Una Página Web puede contener cualquiera de los elementos siguientes: Texto,
Imágenes, Audio, Objetos Animados (generalmente construidos con la herramienta Adobe
Flash), hipervínculos (característica que permite la navegación de una página web a otra),
Meta tags (son instrucciones en lenguaje HTML que le indican a los buscadores cuales son
las palabras o términos por los que debe ser indexada una página para ser encontrada),
hojas de estilo en cascada o CSS (Cascading Style Sheets) que permiten separar la
presentación de la página de su estructura
HERRAMIENTAS PARA CREAR UNA PÁGINA WEB
Para crear una Página Web se recomienda disponer de las herramientas siguientes:
Ordenador, Editor de Texto (Front Page, Dreamweaver, Notepad, Wordpad, etc.), Editor
de Archivos Gráficos (Photoshop, Paint, etc.), espacio en un Servidor Web para alojar la
Página y el software cliente del FTP (File Transfer Protocol) utilizado para enviar al servidor
web la Página Web. Dentro de la gama de los Editores de Texto se pueden utilizar desde
los más básicos (Notepad, Wordpad) los cuales requieren conocimiento experto en HTML,
los denominados intermedios (editplus, gnu emacs) que colorean las palabras claves del
código fuente, y los más completos (Front Page, Dreamweaver) que se caracterizan por
presentar el entorno conocido como WYSIWYG (What You See Is What You Get que
significa lo que ves es lo que obtienes). Este tipo de editores permite la creación de
documentos, observando en la pantalla el resultado final del mismo (no es necesario
imprimirlo). Con éste tipo de editores no es imperativo el conocimiento del lenguaje
HTML, ya que el editor genera automáticamente el código HTML resultante de la creación
del documento. El Editor de Archivos Gráficos son herramientas útiles para generar
imágenes, los más completos proveen herramientas para generar botones, texturas,
transparencias y otros efectos gráficos.

Tema 2: Dominio web

El dominio web de tu sitio web es esencialmente el equivalente a
una dirección física. De la
misma maneraque un satélite necesita una dirección o un código postal para
dar direcciones,
un navegador web necesita un nombre de dominio para dirigirtea
un sitio web.
Un dominio de internet se forma a partir de dos elementos
principales. Por ejemplo, el
nombre de dominio Facebook.com consiste del nombre del sitio web
(Facebook) y la extensión
del dominio (.com). Cuando una empresa (o una persona) compra un dominio
web, puede
especificar a qué servidor apunta el nombre de dominio.
Los registros de nombres de dominio son supervisados por una organización
llamada ICANN
(Corporación de Internet para Nombres y Números Asignados, por sus
siglas en inglés).
ICANN especifica qué extensiones de dominios están disponibles y mantiene
una base de
datos centralizada de dónde apuntan los dominios web.
Todos los sitios web que visitas constande dos elementos principales: un dominio
web y
un servidor web.
1. Un servidor web es una máquina física que aloja los archivos y
las bases de datos que
conforman tu sitio web y los envía a las personas a través de
Internet cuando visitan
tu sitio desde su computadora.
2. El dominio web o dominio de internet es lo que las personas
escriben para accedera
tu sitio, y apunta el navegador web hacia el servidor que almacena
esos recursos. Sin
un dominio web, las personas tendrían que recordar la dirección IP
específica de tu
servidor, y eso simplemente no va a suceder.
¿Cómo funcionan los dominios?
Los dominios funcionan actuando como un atajo para llegar al servidor
que aloja tu sitio web.
Sin un dominio, cualquiera que quisiera visitar tu sitio web tendría que
escribir la dirección IP
completa. Pero el problema es que una dirección IP es difícil de
memorizar o incluir en los
materiales publicitarios.
En nuestrocaso, evaluacionesipei.com el dominio. Digamos que apunta a la dirección
IP
100.90.80.70. La dirección IP apunta a un servidor, pero no resuelve el
sitio web si los
visitantes intentan usarlo. Esto se debe a que para que una dirección IP
resuelva un sitio web,
el servidor remoto debe usar el puerto 80 con una página predeterminada
(es decir,
index.html) almacenada en su directorio de aplicaciones web.
Como puedes ver, jugar con los valores predeterminados del servidor y las
direcciones IP
puede ser confuso y demorado. Es por eso que la gran mayoría
de propietarios de sitios web
optan por utilizar un servicio que ofrece dominios incluidos en paquetes de alojamiento
web anuales.
Los dominios también pueden usar redireccionamientos, lo que esencialmente te
permite
especificar que si las personas visitan tu dominio, son reenviadas
automáticamente a otro.
Esto puede ser útil para campañas y micrositios o para reenviar personas
a páginas especiales
en tu sitio principal. También pueden ser útiles para evitar confusión con el
deletreo. Por
ejemplo, si visitas www.fb.com, serás reenviado a www.facebook.com.
Diferentes tipos de dominios
No todos los dominios de internet siguen la misma fórmula, y si
bien los
dominios .com constituyen el 46.5% de todos los sitios web a nivel mundial,
eso deja mucho
espacio para otros tipos de dominios como .org y .net. En general, los tipos
más comunes de
dominios incluyen:
TLD: Dominios de nivel superior (Top Level Domains)
Un dominio de nivel superior es exactamente lo que dice su nombre:
un tipo de dominio que
se encuentra en el nivel superior del sistemade dominios de Internet.
Hay más de mil TLDs
disponibles, pero los más comunes incluyen .com, .org, .net y .edu.
Subdominios
Los subdominios son útiles porque no requieren que los webmasters adquieran
un dominio
web adicional para crear divisiones dentro de su sitio. En cambio, pueden crear
un
subdominio que efectivamente apunte a un directorio específico en el servidor.
Esto puede ser
muy útil para sitios de campañas y otros tipos de contenidos web que
deben mantenerse
separados del sitio principal.
Por ejemplo, Facebook utiliza developers.facebook.compara proporcionar información
específica para desarrolladoresde aplicaciones y web que quieranusar la API
de Facebook.
Otro buen ejemplo es support.google.com.
Tema 3: Hosting
El hosting, web hosting oalojamiento web es un servicio ofrecido por muchas
compañías mediante el cual podemos poner una página web o un conjunto de
datos en un servidor remoto para que puedan ser usados y/o consultados
por usuarios de internet. Este servicio se basa en que un usuario que quiera
utilizarlo suba los datos a un host o servidor ofrecido por la compañía. A partir de
entonces el usuario podrá consultar o ver sus datos directamente desde internet
desde cualquier lugar del mundo y si así lo desea, también podrán verlos el resto
de usuarios de la red.
La principal y más inmediata alicación del hosting es el hospedaje de páginas
web. Un autor de una página web obtiene grandes ventajas de hospedarla en un
servidor remoto. En primer lugar, estos servidores son en general
superordenadores de gran capacidad y velocidad. Por ello permiten que la página
esté operativa ininterrumpidamente, y además el acceso a los datos de esa página
será mucho más rápido que en un ordenador normal. También pueden evitar la
sobrecarga de las paginas si muchos usuarios intentan acceder a ella
simultáneamente, y gestionar las conexiones de forma óptima.
Algunas compañías ofertan también sistemas de protección de datos, seguridad
avanzada... etc...
Sin embargo existen muchos otras aplicaciones del hosting. Muchas compañías
lo usan para guardar sus datos y protegerlos, crear copias de seguridad... etc.
También ha cobrado especial importancia con el desarrollo de la red, el hosting
de imágenes y videos. Páginas como Youtube basan su éxito en ello, al permitir
almacenar en ellas todos los videos que se deseen y que puedan ser compartidos
en todo el mundo. También podemos hablar de hosting en los clientes de correo
electronico, que permiten almacenar los mensajes, o en las páginas de redes
sociales, donde hospedan los perfiles, imágenes... etc, de sus clientes.
En la actualidad, de hecho, existen muchas compañías que ya hospedan
directamente toda la configuración y las aplicaciones de los usuarios.
El sistema en nube (o cloud), lanzado por Apple y ya imitado por muchos de sus
competidores se basa en eso. Todo lo que hace un usuario es guardado
automáticamente en la nube y de ese modo nunca tendrá pérdidas de datos ni
necesitará un soporte físico para mover los datos. Simplemente accediendo a su
cuenta tendrá todo disponible desde donde quiera (mientras tenga un acceso a
internet). Las ventajas de este sistema, aún en implantación, son tantas que
parece que en el futuro el hosting será la opción más segura y fiable de trabajar
con ordenadores.
Tema 4: Introducción a html5
El HTML es un lenguaje de programación sencillo, basado en un
lenguaje de marcas o etiquetas generalizado. El HTML utiliza tags o
etiquetas para estructurar texto en: encabezado, párrafos, listas,
enlaces de hipertexto, etc. Cada símbolo usado en la etiqueta es lo
que le indica al Browser como presentar el documento contenido en la
Página Web. El inicio de una etiqueta se indica de la forma siguiente:
<etiqueta> y para indicar el fin de esa etiqueta se utiliza </etiqueta>.
La barra indica el fin de la etiqueta.
Todo documento HTML se inicia con la etiqueta <html> que actúa
como contenedora de todo el documento. El documento se divide en
un encabezado, que lo identificamos con la etiqueta <head> y es la
sección utilizada para definir el título del documento, la declaración de
estilos, scripts, etc. La otra sección corresponde al cuerpo que se
identifica con la etiqueta <body>. Esta es la sección que contiene toda
la parte visual del documento.
Para crear un vínculo dentro de un documento que referencie o
direccione a otro documento se utiliza la etiqueta a seguida de la
palabra clave href donde se colocará la dirección URL del documento
a referenciar y el texto que aparecerá mostrado en el documento,
mediante el cual se establecerá el enlace. Ejemplo:
<ahref =”/ejemplo.html”> ir al Ejemplo</a>
Esto se visualizara Ir al Ejemplo y al pasar el ratón sobre el texto se
mostrará la mano del cursor que permitirá hacer click para navegar al
documento en cuestión.
Una página básica de HTML5 sería la siguiente.
<!DOCTYPE html>
<html>
<head>
<title>Título de la página, aparece en la pestaña del navegador.</title>
</head>
<body>
<h1>Esto es un titulo</h1>
<p>Esto es un parrafo. Aqui escribimos informacion.</p>
<a href="https://programarfacil.com">Esto es un enlace a la web.</a>
</body>
</html>
Esto se veria de la siguiente manera.
Si queremos saber qué es HTML5 lo primero que tenemos que hacer
es ir a un navegador ya sea Google Chrome, Firefox y el menos
recomendado Internet Explorer. Sobre la página web que queremos ver
el código, encima del fondo, pulsar el botón derecho y habrá alguna
opción donde ponga mostrar el código.
En Chrome, el navegador recomendado desde Programarfacil, está la
opción de Ver código fuente de la página.
Con esto podremos ver el código fuente de cualquier página.
Recuerda que el único código que podemos ver a través de nuestro
navegador es HTML5, CSS y JavaScript. Cualquier otro código
del Backend como PHP, Java o C#, será interpretado por el servidor y
traducido a estos lenguajes del Frontend.
HTML5 y las etiquetas
Lo más importante dentro de este meta lenguaje, son las etiquetas. Ellas
nos permitirán situar y colocar los diferentes componentes dentro de la
página web. Te recomiendo que eches un vistazo a la web de referecia W3 School, donde encontrarás casi todas con
ejemplos y una
descripción.
Dentro del HTML tenemos muchas etiquetas. Ya has visto algunas de
las más simples, en la web básica que he creado. Pero existen infinidad
de ellas para usos diversos. Las más importantes son:
• <!DOCTYPE html>
Informa del tipo de documento, en este caso HTML.
• <html></html>
Engloba todo el código de nuestra página. Es la etiqueta principal.
• <head></head>
Indica que esto es la cabecera. Dentro de estas etiquetas se
meterá información no visual salvo el título de la página. Aquí
irían todos los enlaces a nuestros archivos CSS y Javascript
aunque es recomendable cargar estos archivos al final de nuestro
archivo HTML. Esto es debido a la optimización de la carga de
nuestra web.
• <title></title>
Título de la página. Es lo que aparece en la pestaña del navegador.
• <body></body>
Quizás la etiqueta más importante que tiene HTML. Dentro de esta
etiqueta vamos a meter todos los elementos visuales de nuestra
web.
Con estas etiquetas básias y alguna más, serás capaz de hacer un
documento HTML perfectamente operativo.