HTML Imágenes

En el contenido del siguiente vídeo verás:

• El concepto de hipermedia, la etiqueta img, sus atributos obligatorios (src, alt), opcionales (width, height, longdesc, ismap, usemap) y los atributos desaconsejados.
• Las características de los formatos gráficos (GIF, JPG/JPEG, PNG), los mapas de imagen y su uso (map, area, atributos usemap e ismap).

Las imágenes son el elemento principal que confiere a la Web su carácter de hipermedia, es decir, su capacidad de integrar en un único soporte, la página web, contenidos muy distintos como texto, imagen, vídeo, audio y otros.

En algunos sitios web el uso de imágenes es escaso, y su ausencia no plantea ningún problema.

En otros sitios web, cuando las imágenes no se visualizan, pueden aparecer algunos problemas de uso en la página.

Sin embargo, en otros sitios web, la ausencia de imágenes puede hacer que el sitio web sea totalmente inútil.

La etiqueta para insertar una imagen en HTML es <img>. Si consultamos la documentación oficial, de HTML 4 y de HTML5 del World Wide Web Consortium, el , veremos que no ha habido grandes cambios en la sintaxis de esta etiqueta. 

Ejemplos de etiqueta <img> en HTML5

La etiqueta <img> tiene dos atributos obligatorios, src y alt.

El atributo src indica la ruta en la que se encuentra la imagen, mientras que el atributo alt es el texto alternativo que se debe visualizar cuando la imagen aún no se ha cargado o no se puede cargar por diversas razones, como puede ser que no exista o que su formato no sea válido. El atributo alt es muy importante para la accesibilidad de una página web.

La etiqueta <img> posee los siguientes atributos opcionales: 

width y height para definir las dimensiones de la imagen, el ancho y el alto.

longdesc para indicar la URL de una página en la que se proporciona una descripción larga de la imagen, este atributo también es muy importante para la accesibilidad de una página, y por último, 

ismap y usemap para definir mapas de imagen.

Los mapas de imagen se pueden procesar en el lado del cliente o en el lado del servidor.

Un mapa de imagen en el lado del cliente se define con dos etiquetas de HTML:

Con la etiqueta <map> se define el mapa de imagen, con sus distintas zonas activas. El mapa de imagen debe tener un nombre, ya que ese nombre se emplea en la etiqueta <img> para relacionar el mapa de imagen con la imagen correspondiente.

Con la etiqueta <usemap> para indicar el nombre del mapa que se quiere utilizar.

Cada zona activa o sensible del mapa de imagen se define mediante una figura geométrica.

Existen tres tipos de figuras geométricas que se pueden emplear.

Se definen con la etiqueta <area>, que posee los siguientes atributos

shape 

para indicar el tipo de figura geométrica, 

coords 

para indicar las coordenadas de la figura geométrica, 

href 

para indicar la URL del destino del enlace y 

alt 

para definir el texto alternativo que representa la figura geométrica en el caso de que no se pueda visualizar la imagen. Recuerda que este atributo alt ayuda a mejorar la accesibilidad de la página web.

El tipo de figura geométrica “rect” define un rectángulo que está definido por las coordenadas (x, y) de su esquina superior izquierda y las coordenadas (x, y) de su esquina inferior derecha. En HTML, la esquina superior izquierda corresponde a la posición (0,0).

El tipo de figura “circle” define un círculo que está definido por las coordenadas (x, y) del centro y el radio r.

Finalmente, el tipo de figura “poly” define un polígono , regular o irregular, de n lados definido por las coordenadas (x, y) de los vértices que forman el polígono.

Por último, ya sabemos crear un mapa de imagen, pero ¿para qué se usan en las páginas web?
Bueno, eso depende de tu imaginación, tú le debes buscar los posibles usos, pero para ayudarte un poco, te voy a contar tres usos típicos.
Por supuesto, se pueden utilizar para verdaderos mapas geográficos, por ejemplo, para seleccionar las oficinas o tiendas de una empresa en una región particular.
También se emplean cómo método de navegación cuando se utiliza una barra de menú especial, por ejemplo creada mediante iconos.
Y por último, antes se utilizaba bastante en la página principal o portada de un sitio web en el que se daba a conocer cada una de las secciones del sitio web por medio de una imagen.

En HTML se puede incluir una imagen como fondo de ciertos elementos, como por ejemplo como fondo de la propia página o de una tabla, pero este uso está totalmente desaconsejado y se debe realizar mediante CSS.

---

Los formatos gráficos que son considerados como estándar son: 

GIF, JPG y PNG

---

• El primero, el formato GIF, es el más antiguo y el primero que se empleó en las páginas web. Sus características más particulares son que sólo soporta paletas de colores con 256 colores, permite transparencia pero de un solo color y permite realizar animaciones sencillas.

• El formato JPG es quizás el más popular en la Web, y ello es debido a que permite trabajar con imágenes con más de 16 millones de colores y con tamaños de ficheros muy pequeños. Esto se logra mediante el uso de algoritmos de compresión con pérdidas.  La compresión con pérdidas significa que una vez comprimida una imagen, al descomprimirla no se obtendrá la imagen original, sino una aproximación

• El último formato que vamos a ver es PNG. Este es un formato que se creó específicamente para la Web y ofrece una gran variedad de posibilidades.  Si se compara con el formato JPG, ofrece la máxima calidad, ya que utiliza un formato de compresión sin pérdidas, pero claro, esto es a costa de producir ficheros con un tamaño superior al formato JPG.

HTML Tablas

Una tabla HTML, tal y como explica Wikipedia, es una forma gráfica de representar información de manera esquematizada, ordenada y compacta.

                

Estas son las tres etiquetas básicas y las más utilizadas:
La etiqueta table indica el inicio y cierre de la tabla.
El resto de etiquetas necesariamente estarán recogidas entre <table> y </table>.
tr representa una nueva fila de la tabla.
td es la etiqueta de último nivel y se traduce en una celda de datos en la tabla.

Para añadir semántica a la tabla, contamos con la etiqueta th que sustituye a la etiqueta td para celdas de cabecera.

Es posible utilizarlas en cualquier punto de la tabla, aunque su uso se recomienda para las primeras y las últimas filas y columnas de la tabla.
Esta etiqueta también se puede utilizar para trabajar estilos; de hecho, verás que los navegadores destacan el texto de estas celdas en negrita.

      Ejemplo tabla sencilla en HTML5

                                 

También es posible agrupar filas en tres bloques de estilos.

thead agrupa una o más filas de cabecera,

tbody se utiliza para agrupar filas de cuerpo, típicamente aquellas que contienen el grueso de los datos y tfoot, como cabría esperar, agrupa las filas del pie de la tabla.

Caption añade un título sobre la tabla.

Igual que en los procesadores de texto, en HTML es posible combinar celdas.

Para ello utilizamos dos atributos de las celdas: colspan y rowspan.

Colspan y rowspan esperan un valor entero que especifique cuántas columnas o filas, respectivamente, ocupa la celda.

Para dar estilos por columnas podemos hacer uso de las etiquetas colgroup y col.

La etiqueta col no tiene etiqueta de cierre, pero conviene cerrarla adecuadamente para cumplir con el estándar.

El atributo span funciona de forma parecida en colgroup o col a como lo hacían colspan y rowspan para las celdas de la tabla.

El valor del atributo indica el número de columnas que agrupará colgroup o col.

Para aplicar estilos a las columnas, es necesario estudiar el tema CSS.

En resumen, las etiquetas básicas para codificar una tabla en HTML son table para la tabla, tr para cada fila y td para las celdas.

Para añadir un título a la tabla, utiliza la etiqueta caption entre las etiquetas table.
Th, en sustitución de td, añade semántica especificando celdas de cabecera.
Las etiquetas que puedes usar para facilitar el trabajo posterior de CSS son las agrupaciones de filas: thead para las de cabecera, tbody para las filas de datos y tfoot para las del pie de la tabla, así como agrupaciones de columnas: colgroup y col.
Los atributos colspan y rowspan de las etiquetas th y td sirven para extender las celdas y el atributo span de las etiquetas colgroup y col para extender columnas.

Tabla HTML  (Evolución del desempleo en España)

Y para terminar, te dejo tres consejos que espero te sean útiles:


1. Utiliza tablas HTML exclusivamente para representar tablas y no caigas en la tentación de maquetar tu página con tablas: el código generado resulta farragoso, tu página no será accesible y además no es cool.

Antes se utilizaban las tablas para maquetar y, pese que a día de hoy puedas visitar algunas páginas conocidas que siguen haciendo uso de estas prácticas, como la de la CIA, hay más argumentos en contra que a favor. 
En la página www.hotdesign.com/seybold/spanish, puedes leer muchos más.

2. Repasa bien la combinación de celdas, recuerda que una mala codificación puede dar lugar a resultados desastrosos.

3. Utiliza la agrupación de filas y columnas para que el posterior trabajo de estilo con CSS resulte más sencillo.

Módulo 4: Cómo se escribe una página web correcta

      
Los objetivos de este módulo son: 

• Aprender a crear páginas web con tablas e imágenes. 
• Aprender a válidar el código HTML para crear páginas web correctas. 
• Aprender las principales novedades de HTML5.

En las semanas anteriores has aprendido los conceptos básicos sobre la creación de páginas web. Algunas cosas importantes, como el juego de caracteres o la validación del código HTML no las hemos explicado para facilitarte el aprendizaje. Pero esta semana ya toca, tienes que aprender a realizar páginas web correctas.

Además, esta semana vas a aprender a incluir elementos nuevos en una página web.

Vas a aprender a crear tablas para mostrar datos tabulados.

Y vas a aprender a insertar imágenes.

En las próximas semanas aprenderás a insertar otros elementos multimedia, como por ejemplo los vídeos.

Por último, también vas a aprender las principales novedades que incorpora HTML5, la última versión de HTML.

---

HTML: juego de caracteres

---

El juego de caracteres, también llamado codificación de caracteres, es la pesadilla de la mayoría de los informáticos porque es una fuente de problemas inagotable.

En el siguiente vídeo se muestran ejemplos reales de problemas con el juego de caracteres y se proporcionan los consejos más importantes para trabajar con el juego de caracteres:

Utiliza siempre el mismo juego de caracteres.

Utiliza UTF-8 sin BOM.

Diferencias entre ISO-8859-1 (Latin1) e ISO-8859-15 (Latin9). 

Cómo se indica el juego de caracteres en HTML (etiqueta meta). 

Diferencias entre HTML4, XHTML1 y HTML5. 

¿Alguna vez el nombre de un fichero o su contenido no lo has podido ver bien al moverlo de un sistema operativo a otro?

¿Alguna vez has instalado un programa y no se visualizaban correctamente algunos caracteres?

¿Alguna vez te han dado un justificante, un extracto bancario o un recibo en el que no se mostraban correctamente algunos caracteres?

¿Alguna vez has entrado en una página web y te aparecían caracteres chinos cuando la página no estaba en chino?

Si alguna vez has sufrido un problema parecido y te has sentido solo porque pensabas que eras el único al que le pasaba, no te preocupes, porque no estabas solo, mucha gente como tú, sufre estos problemas todos los días.

Sin duda alguna, en el campo de la informática, el juego de caracteres es de las cosas más simples que más problemas ocasiona.

Mapa de caracteres, ASCII, ISO-8859-1, Latin-1, ANSI, UTF-8, UTF-8 sin BOM, Unicode, Cotejamiento.

¡Menudo lío! ¿Qué significa todo esa sopa de términos?

A muchos experimentados informáticos, las palabras “juego de caracteres” les produce horribles pesadillas. Para que a ti tampoco te produjese pesadillas y entendieses correctamente qué es el juego de caracteres, tendría que empezar por el principio, por la primera descripción conocida de un sistema de numeración binario que se debe a un matemático hindú del siglo tercero antes de nuestra era.

Después te tendría que explicar que el sistema binario moderno fue documentado en su totalidad por el gran matemático Leibniz, en el siglo XVII. Leibniz utilizó el 0 y el 1, al igual que el sistema de numeración binario actual.

La regla más importante es muy fácil de recordar: utiliza siempre el mismo juego de caracteres en todo lo que hagas. ¿Qué significa esto en una aplicación web?

Significa que todos los ficheros que compongan tu sitio web, deben estar almacenados en el mismo juego de caracteres: tus ficheros HTML, CSS, JavaScript, de texto, etc.

Pero también tus páginas PHP. Y cualquier fichero de texto que leas desde PHP. Y también los datos que estén almacenados en tu base de datos. Y también la conexión que establezcas con tu base de datos. Y si invocas a un servicio web que te devuelve datos en formato XML o JSON, pues lo mismo, los datos que te devuelva también tienen que estar en el mismo juego de caracteres.

Sencillo, ¿verdad? Pues no es tan sencillo, porque esto muchas veces es imposible de lograr, no porque no se pueda, sino porque no depende de nosotros. Lo normal es que en un escenario real nos encontremos con algo parecido a esto, 

un escenario en el que NO puedes utilizar el mismo juego de caracteres en todos los elementos de tu sistema. Y normalmente, el problema suele convertir en algo muy grave, con solución, pero muy costosa.

En ese momento es cuando te toca llamar al informático para que te solucione el problema, pero no a un informático que se dedica a instalar el Windows o a cambiar tarjetas gráficas, no, a un informático de verdad.

¿Qué juego de caracteres debo usar? Yo te recomiendo, UTF-8 sin BOM, es la solución a todos los problemas, y te permite mezclar en un mismo documento textos en cualquier idioma, es decir, te permite mezclar caracteres de cualquier alfabeto, pero absolutamente sin ningún problema.

Si no puedes utilizar UTF-8 sin BOM por alguna razón, entonces te recomiendo ISO-8859-1, también llamado Latin1. Después de UTF-8, es el mejor juego de caracteres para los idiomas de Europa occidental, incluido el español.

Pero si necesitas escribir el símbolo del euro, entonces debes utilizar ISO-8859-15, también llamado Latin9.

Latin1 y Latin9 se diferencian únicamente en 8 caracteres que han cambiado, y el único realmente importante para el español es la sustitución de un carácter que seguramente nunca has usado por el símbolo del euro.

¿Cómo indico el juego de caracteres en HTML?

Se realiza mediante una etiqueta <meta>, que se escribe en el <head> de la página web, pero depende de la versión de HTML que estés utilizando.

Si estás utilizando HTML4, debes utilizar esta sintaxis

Si estás utilizando XHTML 1, debes utilizar alguna de estas dos sintaxis. Además, si empleas un juego de caracteres diferente a UTF-8, también tendrás que indicar el juego de caracteres mediante la declaración de documento XML al principio de la página web

Y por fin llegamos a HTML5. ¿Cómo será en HTML5? ¿Más fácil? ¿Más complicado? Bueno, en HTML5 se ha intentado hacer el lenguaje HTML más sencillo, así que han simplificado la forma de indicar el juego de caracteres y ahora es algo tan sencillo como esto 

UTF-8 sin BOM / con BOM

En el siguiente vídeo se explica qué es UTF-8 sin BOM (Byte Order Mark) y con BOM y se muestran los habituales problemas con los editores de texto

Los formularios

Un formulario web (en inglés web form) permite al usuario introducir datos para que sean enviados a un servidor web para que sean procesados.

Cuando realizas una búsqueda en un buscador e introduces las palabras que quieres buscar, estás utilizando un formulario web.

Cuando te registras en un sitio web e introduces tus datos personales, estás utilizando un formulario web.

Cuando realizas una compra e introduces los números de tu tarjeta de crédito, estás utilizando un formulario web.

Cuando realizas una actividad de tipo test en este curso, estás utilizando un formulario web.

En definitiva, un formulario web es un elemento básico en cualquier sitio web.

En las siguientes lecciones vas a aprender a crear formularios con HTML. Sin embargo, los formularios que vayas a crear no van a funcionar, ¿por qué?

Un formulario se compone de dos partes, la parte cliente y la parte servidor. La parte cliente es la que vas a aprender en este curso: la creación del formulario. La parte servidor es la encargada de recibir los datos para procesarlos, como por ejemplo insertarlos en una base de datos. Esta parte no te la vamos a enseñar en este curso, queda pendiente para otro curso.

A continuación se explican los formularios tradicionales con HTML (qué es un formulario, para qué sirve un formulario), se muestran las etiquetas y atributos que se emplean en un formulario y los métodos de envío (GET, POST). Además, se explican los siguientes controles de un formulario:

input.

text.

checkbox.

radio.

file.

password.

hidden.

button.

submit.

image.

reset.

Los usuarios normalmente rellenan un formulario modificando sus controles, antes de enviar el formulario a un agente para que lo procese (a un servidor web, a un servidor de correo, etc.)

¿Y para qué se utilizan?

Pues justamente para eso, para permitir que el usuario envíe información al servidor.

Formularios de registro o acceso a sitios web, formularios de contacto; hasta para escribir un comentario en Facebook estamos utilizando un formulario.

Los formularios se envían mediante dos métodos: GET y POST.


Con GET, el envío está limitado y la información enviada es visible; sin embargo, es útil para poder guardar el resultado en marcadores o favoritos.

y con POST, el envío no tiene limitación y los datos no son visibles en la URL, además, permite la subida de archivos.

Todas las etiquetas de formulario deben ir entre etiquetas <form> y </form> para que su información sea enviada con el formulario.





La etiqueta <input /> es de las más utilizadas en formularios, con ella podemos definir gran parte de los controles típicos de formularios: entradas de tipo texto, casillas de verificación y de opción (conocidas como radio), archivos, contraseñas, campos ocultos y botones varios.

“action” es el único atributo requerido para la etiqueta <form>.

Especifica siempre el atributo “type”.

Necesitarás un botón “submit” para enviar el formulario.

En la medida de lo posible, separa contenido de estilos, lo agradecerás cuando tengas que mantener la web.

En esta segunda parte hemos visto el uso de las etiquetas <select> y <option> para insertar listas desplegables o de selección múltiple.

Permitir al usuario escribir texto con más de una línea de forma cómoda mediante <textarea>.

Cómo hacer más accesibles nuestros formularios utilizando etiquetas <label> para asociar texto a controles.

Y a agrupar controles en conjuntos con <fieldset> para hacer los formularios más digeribles para el usuario.

Consejos que espero te sean de utilidad:

Utiliza <textarea> en lugar de <input /> de tipo texto cuando el usuario vaya a escribir cantidades de texto considerables.

Usa <select> en lugar de <input /> de tipo “radio” cuando ofrezcas tres o más posibilidades al usuario.

Y, en la medida de lo posible, facilita el trabajo a tus usuarios mediante la etiqueta <label>.

EJEMPLO FORMULARIO DE REGISTRO

Click en la imagen para ampliar

Los centros de datos de Google

En el año 2012, Google creó el sitio web Centros de datos de Google en el que mostraba por primera vez los entresijos de las instalaciones que alojan los servidores en los que se almacenan físicamente los correos de Gmail, los vídeos de YouTube o los índices que permiten las búsquedas en su motor de búsqueda.

Paséate por un centro de datos de Google

https://www.google.com/about/datacenters/inside/streetview/

Los Centros de datos de Google (o Google Data Center) son instalaciones especialmente creadas por Google para el almacenamiento y gestión de sus servidores. Constan de distintos elementos electrónicos tales como sistemas de almacenamiento, dispositivos de comunicación, elementos de climatización y dispositivos de seguridad.

En el 2013 Google tiene 13 centros de datos en los que, según las estimaciones realizadas sobre los últimos datos energéticos emitidos se calcula que habría un total de 900,000 servidores.

La localización de los Google Data Center construidos en 2013 es la siguiente:

Estados Unidos:

• Berkeley County, Carolina del Sur
• Council Bluffs, Iowa
• Douglas County, Georgia
• Mayes County, Oklahoma
• Lenoir, North Carolina
• The Dalles, Oregon

Sur America:

• Quilicura, Chile

Europa:

• St. Ghislain, Belgica
• Hamina, Finlandia
• Dublin, Irlanda

Asia:

• Kowloon, Hong Kong
• Jurong West, Singapur
• Changhua County, Taiwan

Los servidores que se usan en los centros de datos son montados a medida por Google y funcionan bajo una distribución de Linux también completamente personalizada por Google.

Distribuir los servidores de forma deslocalizada en vez de en una única estructura tiene una serie de ventajas.

Rapidez de acceso, la distancia al punto de conexión con un servidor es uno de los factores que influyen en la velocidad con la que obtendremos los datos, cuanto más cerca estemos del centro de datos correspondiente, más rápida será nuestra búsqueda.

Fiabilidad del sistema, tener varios centros de datos en vez de uno solo de un tamaño mucho mayor, protege al sistema frente a caídas inesperadas, provocadas desde fallos en servidores, cortes de corriente, o incluso catástrofes naturales.

Coste reducido, construir un único centro de datos centralizado y de un tamaño desmesurado es mucho más caro que construir varios más pequeños.

Distribución en distintas franjas climáticas, los centros de datos están distribuidos a lo largo de diversas franjas climáticas con diferente estacionalidad, esto permite compensar altas temperaturas en un área, desviando el trabajo a las zonas más frías en esa época, lo cual repercute directamente en el gasto energético.

Distribución en distintas franjas horarias, existe también la posibilidad de desplazar carga hacia los centros de datos que puedan aprovechar tarifas más bajas de electricidad, como por ejemplo durante horas nocturnas de bajo consumo.

Cómo se publica un sitio web en Internet

Para que un sitio web se pueda usar, se debe copiar desde el servidor de desarrollo hasta el servidor de producción para que esté disponible para cualquier usuario en todo momento.

La copia se suele realizar mediante FTP, File Transfer Protocol, el protocolo de transferencia de archivos.

Para realizar la copia se tiene que usar un programa específico que se llama cliente de FTP. Vamos a utilizar un cliente de FTP llamado FileZilla. Este programa es gratuito, así que lo puedes descargar y utilizar sin miedo a que te metan en la cárcel los hombres de negro.

DESCARGAR FILEZILLA

Como puedes ver, este programa está disponible para diferentes plataformas: Windows, Linux y Mac OS X.

Además, como es un proyecto open source, un proyecto de código abierto, también te puedes descargar el código fuente.

Lo primero que te descargas no es el programa en sí, sino un administrador de descargas que te hará unas preguntas.

Una vez instalado el programa te recomiendo que consultes la documentación básica, las “Instrucciones de uso básicas” y “Cómo configurar FileZilla y la red local”.

Te voy a mostrar a continuación un ejemplo real de uso.

Este es el programa que voy a usar para realizar la transferencia de FTP, FileZilla. Este programa permite cambiar el interfaz. Ahora mismo se está mostrando con el interfaz por defecto, pero si me voy al menú “Edición”, “Opciones”, tengo una opción llamada interfaz donde puedo cambiar la distribución de los paneles. La distribución por defecto se llama “Clásico”, pero puedo poner otra clase de distribuciones. En mi caso, como dispongo de una pantalla panorámica, una pantalla de Full HD, la voy a cambiar a pantalla panorámica que me muestra una distribución más adecuada.

En esta distribución a la izquierda tenemos el sitio local. El sitio local es mi ordenador, el disco duro de mi ordenador. En el primer panel aparece la estructura de directorios y a la derecha aparece el contenido del directorio que tenga seleccionado.

A la derecha tenemos lo mismo pero para el sitio remoto, para el servidor de FTP al que me voy a conectar. Ahora mismo aparece vacío porque no está establecida ninguna conexión.

Hay diferentes formas de establecer una conexión. Tenemos la posibilidad de realizar una conexión rápida. Para ello simplemente tengo que introducir estos datos: nombre del servidor, nombre del usuario, contraseña y puerto. Por tanto necesito estos datos de mi servidor en el cual voy a publicar mi página web.

El ejemplo lo voy a realizar con un sitio web que tengo alojado en Hostinger. Hostinger es una empresa de alojamiento que ofrece hosting gratuito y también hosting de pago. He elegido Hostinger simplemente porque la conozco, no es que sea la mejor o la peor, simplemente porque la conozco.

El primer paso es obtener los datos de mi cuenta de FTP. Aquí tengo creado este sitio web, esta cuenta y me voy a la opción de administrar. Y busco los datos de FTP. En concreto tenemos aquí “Acceso FTP”.

Y se me proporcionan los datos que yo voy a necesitar en el programa FileZilla para establecer la conexión. Tenemos servidor, nombre de usuario, contraseña y puerto.

El puerto lo podemos dejar vacío para que use como vemos aquí el puerto predeterminado para FTP que es el puerto 21. Por tanto este dato no hace falta meterlo, pero estos tres sí que los necesitamos: servidor, nombre de usuario y contraseña.

Vuelvo a la página de mi empresa de alojamiento, hosting y tenemos los datos que necesito. En primer lugar tenemos el nombre de host o el nombre del servidor. Copio todo esto, copiar y me lo llevo a FileZilla y lo copio aquí en servidor.

A continuación necesito el nombre de usuario. Repito lo mismo. Me voy a los datos y busco el nombre de usuario, usuario FTP y copio todo esto. Copiar y pegar. Y por último necesito la cotraseña que evidentemente pues aquí no me aparece, aparecen unos puntitos, pero que la tengo ya guardada en otro sitio y simplemente pues la pego. Y le doy a conexión rápida.

Al establecer la conexión en este panel va a salir el log, el registro de la conexión y se activarán estos dos paneles. Vamos a verlo.

No es necesario, pero podría yo consultar el log, el registro y ver lo que ha ocurrido. En este caso todo ha ido bien, la conexión se ha establecido correctamente, si no se puede me saldrían aquí algunos mensajes de error.

Por ejemplo, voy a cambiar el nombre de usuario, voy a borrar esto de 32, le doy a conexión rápida, le digo que aborte la conexión actual, aunque podría establecer una conexión en una nueva pestaña, podría tener dos conexiones abiertas. Voy a abortar la actual y se intenta conectar y esta vez no se puede conectar, claro porque este usuario no existe. Así que presta atención cuando te conectes mediante FTP para ver lo que ha ocurrido, consulta la ventana de registro de log.

Bien, voy a volver a poner el usuario correcto. Le doy a conexión rápida y ahora otra vez se ha podido conectar.

Bien, aquí aparece, digamos que el disco duro del servidor remoto al que me estoy conectando. Este no es el disco duro de mi ordenador, es este, sino que es de un ordenador al cual ahora mismo me estoy conectando.

Aparece una estructura de directorios, el directorio raíz, que tiene dos directorios, logs y public_html. Y además en el raíz aparece un fichero que pone “no cargar aquí”. Yo aquí no tengo que cargar mi sitio web que lo tengo aquí preparado.

¿Dónde lo tengo que cargar? Bueno, lo tengo que cargar a la carpeta public_html, pero si no lo sé, no hay problema, me lo explica aquí mi sitio de alojamiento, me dice “Carpeta dónde cargar archivos” y justo me indica que public_html.

Antes de subir los ficheros vemos que ya hay algo. Hay un fichero llamado default.php y un fichero .htaccess. Si yo accedo a mi sitio web, le doy a recargar, vemos que me sale esta página. Esta es la página por defecto que me proporciona mi empresa de alojamiento, es justo este fichero default.php.

Cuando yo ahora suba mi sitio web aparecerá mi página.

Mi sitio web es muy sencillo, está compuesto de dos páginas, ahora lo veremos y tenemos una carpeta img donde he almacenado una imagen que va a aparecer en la primera página.

Para subir mi sitio web lo puedo hacer de varias formas. Puedo seleccionar todo el contenido, botón derecho, le doy a subir. O simplemente lo selecciono y puedo arrastrarlo. Yo lo arrastro y se ha subido sin problemas.

Podemos ver como en la pantalla, en el panel de registro me han ido apareciendo muchos comandos y mucha información. Y aquí en este panel de estado aparecen transferencias satisfactorias y se me informa de los tres ficheros que acabamos de subir. Aparece la ruta local y la ruta del servidor remoto de destino donde lo he subido por FTP y todo se ha subido correctamente.

Bien, yo ya tengo subido mi sitio web y lo podría probar. Si yo ahora recargo, ya me aparece mi página, “Prueba de FTP”, en la página aparece una imagen, tengo puesto un enlace a la segunda página y de la segunda página puedo volver a la primera página. Es un ejemplo muy sencillo.

¿Por qué ha aparecido automáticamente mi página?

Pues porque la he llamado index.html. Los servidores web normalmente están configurados para buscar unas páginas por defecto. En este caso este servidor web busca en primer lugar la página index.html y la muestra. Y si no la encuentra, mostrará la página default.php. Si yo por ejemplo ahora le cambio el nombre, lo renombro y la llamo por ejemplo principal pues al volver aquí a mi sitio web ahora no volverá a salir mi página, sino que saldrá la página por defecto, ya que no existe index.html. Yo sí que puedo acceder a mi página, pero tengo que escribir su nombre, el nombre del archivo.

Repito, si yo quiero que aquí por defecto salga mi página principal pues mi página principal se tendrá que llamar index.html, index.

Volvemos al navegador y ahora al recargar fijate que vuelve a salir mi página.

Sencillo, ¿verdad?

Bien, recuerda que cuando trabajamos con FTP estramos transfiriendo archivos de nuestro ordenador, de nuestro disco duro a un disco duro remoto, al servidor de FTP. Y en cualquier momento puedes volver a subir una nueva versión. Eso sí, cuando vuelvas a subir una nueva versión, por ejemplo voy a subir este fichero pues evidentemente se me va a avisar de que estoy intentando sobreescribir un fichero que ya existe y se me indicará lo que quiero hacer, sobreescribir, cambiar el nombre, etc. Lo típico que aparece cuando también estoy copiando un fichero entre dos directorios en mi propio disco duro que puede ocurrir que que ya exista un fichero con el mismo nombre.

En el siguiente vídeo se muestra un ejemplo de publicación de un sitio web en un servicio de alojamiento mediante un cliente de FTP online.

El alojamiento (hosting)

Ya tienes tu nombre de dominio, ¿ya puedes publicar tu sitio web?

¡Nooooo! Eso es un error muy común, confundir el nombre de dominio y el alojamiento.

Si compro un nombre de dominio, ¿recibo también un sitio web? ¿Puedo comenzar a recibir correos electrónicos en ese dominio inmediatamente?

Registrar un nombre de dominio sólo significa que usted ha obtenido determinados derechos para usar el nombre para el término del registro. El alojamiento de sitios web o el servicio de correo electrónico no estará disponible a menos que haya convenido específicamente esos servicios en relación con el nombre de dominio. A modo de analogía, la compra de una parcela de tierra no tiene como resultado automático la construcción de una casa.

Crear un sitio web consta de varios pasos, como la obtención de servicios de alojamiento y la publicación de contenido. Crear un servicio de correo electrónico también consta de algunos pasos de configuración. Muchos registradores ofrecen paquetes que pueden incluir estos servicios junto con el registro del nombre de dominio. Sin embargo, estos servicios también pueden configurarse de forma separada; puede hacerlo usted mismo u otros proveedores que contrate.

Así que, en tu proceso de desarrollar tu sitio web, el siguiente paso va a ser buscar y emplear un servicio de alojamiento (en inglés se suele decir hosting) para poder publicar tu sitio web en Internet.

Cómo comprar un dominio de Internet

¿Cómo se compra un dominio de Internet?, ¿está libre el dominio que yo quiero?, ¿qué son los agentes registradores?, ¿cuánto me va a costar un dominio?, ¿cómo lo renuevo?, ¿por qué hay dominios registrados pero sin usar? En este vídeo encontrarás las respuestas a estas y otras preguntas.

Antes de comprar un nombre de dominio tienes que decidir su tipo. ¿Genérico o territorial? Lo mejor es que compres ambos, el .com y el .es si estamos hablando de España. ¿Alguno más? Sí, deberías plantearte la posibilidad de comprar alguno más, ya que los nombres de dominio genéricos han aumentado considerablemente, tal como se puede ver en la página Registry Listing de ICANN:
.autos
.bike
.club
.computer
...

En el artículo Registro de dominios de la Wikipedia se describe el siguiente procedimiento de registro de un dominio:

-Elegir un dominio.

• Verificar la disponibilidad del nombre de dominio deseado en algún registrador.
• Ingresar los datos personales.
• Elegir la cantidad de tiempo que el dominio permanecerá registrado.
• Pagar el dominio, normalmente con tarjeta de crédito (o también por transferencia bancaria).

-Una vez arrendado, el ahora registrante del dominio debe configurarlo con la URL a la cual redireccionar, IP del servidor al que encontrará mediante la DNS, servidor DNS usada por este.

-El registrante del dominio debe esperar un tiempo para que el dominio sea reconocido en todos los servidores de Internet. Para los dominios .com y .net la demora es entre 4 y 8 horas, y para otros es generalmente entre 24 y 48 horas. En ese período:

• El registrador contacta con ICANN y realiza el proceso de forma transparente para el registrante.
• Se avisa al registrante que el dominio fue registrado.

-El nuevo dominio funciona, y resuelve a la IP apropiada en el servidor DNS usado, pero no en el resto de servidores DNS del mundo. Poco a poco se va propagando el cambio al resto de servidores (propagación DNS). Como cada uno tiene distintos tiempos de actualización y parámetros de caché distintos, pasan varias horas hasta que todos los servidores DNS del mundo conocen cómo hacer la resolución del dominio.

-La página ya es accesible mediante un nombre de dominio desde cualquier computadora.

En España, los agentes registradores de nombres de dominio oficiales aparecen en el sitio web de dominios.es:

http://www.dominios.es/dominios/es/agentes-registradores/todos-los-agentes-registradores

Módulo 3: Cómo se publica un sitio web

Los objetivos de este módulo son:

• Conocer los diferentes nombres de dominio que existen. 
• Ser capaz de comprar un nombre de dominio sin ayuda. 
• Conocer las principales características que se deben analizar a la hora de elegir un servicio de alojamiento o hosting. 
• Aprender a publicar un sitio web en un servicio de alojamiento o hosting. 
• Aprender a crear formularios en las páginas web.

Un sitio web se tiene que publicar en Internet para que sirva para algo. Guardado en tu ordenador no sirve de mucho.

Podrías convertir tu ordenador en un servidor web, pero eso se escapa de los objetivos de este curso. Pero no te preocupes, existen soluciones más sencillas.



Esta semana vas a aprender a publicar un sitio web en un servicio de alojamiento o hosting.



Existen servicios gratuitos y de pago. En este curso vas a aprender a utilizar un servicio gratuito, que para aprender y realizar pruebas está muy bien. Pero te aconsejo que contrates un servicio de pago cuando necesites tener tu página web personal o la página de tu empresa en Internet.



Puedes encontrar servicios de pago desde menos de cinco euros al mes. Si eres de los que se gasta más de cinco euros en un ron con cola todos los sábados por la noche, creo que gastarte menos dinero en un alojamiento web no será un problema. Y te aseguró que será una inversión más provechosa.



Además, también vas a aprender qué son los nombres de domino y cómo comprar uno. Aquí te vuelvo a decir lo mismo que antes: puedes publicar un sitio web con un nombre genérico, pero te aconsejo que realices una pequeña inversión y compres un nombre de domino propio. La inversión es pequeña, depende del tipo de nombre de domino (.es, .com, .net), pero por unos diez euros al año puedes tener un domino con tu nombre o el nombre de tu empresa.

El lenguaje HTML: Conceptos básicos

Los comienzos siempre son difíciles... ¿Qué programa necesito para escribir una página web? ¿Por dónde empiezo? ¿Qué pasa si me equivoco? ¿Puedo romper algo?

Poco a poco, antes de correr hay que aprender a caminar.

En el siguiente vídeo se explica que HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML (esto es muy importante que lo recuerdes, no lo olvides). También se muestra la estructura de un elemento (etiqueta) y se explican las etiquetas básicas (html, head, title, body, h1, h2, h3, h4, h5, h6, p, strong, em).

Nota: Si la presentación visual no se define con HTML, ¿entonces con qué se define? Se define con CSS (Cascading Style Sheets), y no te preocupes, eso te lo explicaremos más adelante. Ahora, recuerda, poco a poco.

El lenguaje HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML.

En la actualidad, el lenguaje HTML está desarrollado por el World Wide Web Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la Web.

En la página del W3C puedes encontrar mucha información sobre HTML:

http://www.w3c.es/

Para aprender HTML y otras tecnologías web te recomiendo el sitio web W3Schools. En este sitio puedes encontrar un apartado de tutoriales:
http://www.w3schools.com/



A continuación se explica la creación de una página sencilla con el Bloc de Notas de Microsoft Windows:

Lo que hemos visto ha sido una simplificación, para que sea más fácil de entender. En otro vídeo veremos detalles adicionales que son necesarios para que una página web sea realmente correcta.

Recuerda que la etiqueta principal de una página web es la etiqueta <html>. La etiqueta <html> debe encerrar todo el contenido de la página web. A mí me gusta, cuando escribo el código de la página HTML, escribir, cuando escribo la etiqueta de inicio, escribo automáticamente la etiqueta de cierre. Así no se me olvida. No es obligatorio, pero es un consejo que te doy.

A continuación, dentro de la etiqueta <html>, dentro de la página web, la siguiente parte, la primera parte es la cabecera, la sección <head>. En la sección <head> recuerda que se escribe información, los metadatos que definen cómo se va a procesar la página web, cómo se va a visualizar, pero normalmente en el <head> no se escribe nada que deba aparecer visualmente en la página web. Por ahora, lo único que sabemos escribir es la etiqueta <title>, que es el título de la página web. Le voy a poner de título “Érase una vez HTML”. Y recuerda, si hemos abierto la etiqueta <title>, debemos de cerrarla.

Después del <head> tenemos el apartado <body>, el cuerpo de la página. Todo lo que escribamos aquí en el <body> sí que se va a ver, se va a pintar en la página web.

El bloc de notas es un editor sencillo, ahora vamos a usar uno más potente, el Notepad ++  para seguir editando nuestra página web.

Notepad ++  es un editor gratuito, muy ligero y rápido, y dispone de interesantes características, como syntax hightlight, opción que colorea la sintaxis del código que escribimos, la opción de autocompletar etiquetas, o el soporte de diferentes juegos de caracteres, incluyendo Unicode. Dispone de un gran conjunto de plugins que amplía sus funciones.

LINK DE DESCARGA:         https://notepad-plus-plus.org/download/v6.7.8.2.html

EJEMPLO CREACIÓN DE PÁGINA WEB CON HTML:

CLICK PARA AMPLIAR

Reglas Básicas:

Etiquetas siempre cerradas.

Documentos bien formados.

Etiquetas en minúsculas.

Valores de los atributos siempre entre comillas.

Las listas son un elemento muy importante para estructurar correctamente el contenido de una página web. Como autor de páginas web debes seleccionar el tipo de lista adecuado para cada situación.
En el siguiente vídeo se explican los diferentes tipos de listas que existen en HTML (ul, ol, dl) y la creación de listas anidadas:

El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas.

Las listas no ordenadas, las listas ordenadas y las listas de descripción.

Cada una de estas listas se crea con una etiqueta específica de HTML: 
<ul> para la lista no ordenada
<ol> para la lista ordenada 
<dl> para la lista de descripción.

Los elementos de las listas se definen de la siguiente forma.

Para la lista no ordenada y la lista ordenada se emplea el elemento <li>.

Para la lista de descripción se emplean los elementos <dt> y <dd>.

Ul es el acrónimo de unordered list, lista no ordenada.

En una lista no ordenada, el orden de aparición de los elementos no es importante.

Cada elemento de la lista se define con <li>, que es el acrónimo de list item.

Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos.

LISTAS

LISTA DE DESCRIPCIÓN

La Web se basa en dos conceptos que han sido explicados en el primer módulo de este curso: el hipertexto y la hipermedia.

El hipertexto permite crear, agregar, enlazar y compartir información con una estructura no secuencial que proviene de diversas fuentes por medio de enlaces. Los enlaces también se conocen como hipervínculos, vínculos o ligas (en Sudamérica). Y en inglés se emplean los términos hyperlink y link.

En el siguiente vídeo se explica qué es el hipertexto, los tipos de enlaces que se pueden crear (intradocumental, extradocumental) en las páginas web, el concepto de URL (Uniform Resource Locator) que ya debes conocer y se proporcionan algunos consejos para crear enlaces correctos.