lunes, 16 de noviembre de 2015

Modulo 4 Como se escribe una pagina web correcta

4.1 Presentación
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.
4.2 ¿Estas escribiendo bien tus pagina?
Ya has aprendido muchas cosas, ya sabes escribir páginas web sencillas pero, ¿estás escribiendo bien tus páginas?
"Klaro, este testo lo puedes entender, quisas alla errores que te confundan, pero si lo bes dos vezes seguro que lo entiendes."
Con las páginas web ocurre lo mismo, pueden tener errores que hagan que los navegadores se confundan y no interpreten correctamente nuestras páginas
Después de todo el esfuerzo invertido en crear una página web, ¿te gustaría que un navegador web mostrase algo distinto de lo que tú has querido hacer? Para evitarlo debes escribir páginas web correctas: páginas bien estructuradas y sin errores.
4.3 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.
Recomendación para juego de caracteres : UTF-8 sin BOM, ISO-8859-1 (Latin 1),  ISO-8859-15 (Latin 9) si necesitas colocar el símbolo del euro.

4.4  HTML: el juego de caracteres y los editores de texto
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.


Representación en hexadecimal BOM son 3 bytes (EF BB BF) = ï >> ¿ en caracteres

4.5 HTML: Tablas 
En el siguiente vídeo se explican las etiquetas básicas para crear tablas en HTML (table, tr, th, td) y las etiquetas avanzadas (thead, tbody, tfoot, caption, colgroup, col).

Link relacionados:





4.6 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).

Consejos atributos de manejo de imágenes obsoleto align, border, hspace, vspace, body background, table background, se realizan ahora con CSS. 

4.7 HTML: Validación de código
Debes ver el vídeo "HTML: validación del código" en el que:
  • Se explica la validación del código HTML.
  • Se muestran las diferentes versiones que existen de HTML.
  • Se explica qué es el DOCTYPE y qué valor de DOCTYPE se debe usar.
  • Se muestra una lista de DOCTYPEs populares.
  • Se presentan los servicios de validación más populares, como W3C Markup ValidatorWDG HTML ValidatorValidator.nu.
  • Se realiza una demostración de validación de tres páginas.

Link relacionados:

http://www.w3.org/QA/2002/04/valid-dtd-list.html (Uso del Doctype)

http://validator.w3.org/  (Validador de codigo de una pagina web)

http://www.htmlhelp.com/tools/validator/ (Validador de codigo de una pagina web)

https://html5.validator.nu/ (Validador de codigo de una pagina web)

Video: HTML5: ¿Por qué es importante escribir código correcto? (1/3)


Video: HTML5: ¿Por qué es importante escribir código correcto? (2/3)

Video: HTML5: ¿Por qué es importante escribir código correcto? (3/3)

4.8 HTML5: Introducción
El 28 de octubre de 2014 el W3C publicó "HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014", en dicha fecha, lo que supone que HTML5 ya tiene el rango de estándar.
¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportarán mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.
En el siguiente vídeo se comenta la nueva versión de HTML5, los problemas de compatibilidad que pueden existir con los navegadores y se ofrecen algunos consejos para aprender HTML5.
Link para chequear la compatibilidad con HTML 5

Video ¿Cuál es el mejor: HTML, XHTML, HTML5?
http://diveintohtml5.info/ (Para aprender HTML5)
http://diveinto.html5doctor.com/  (Para aprender HTML5 esta actualizada)
4.9 HTML5: ¿Qué es HTML5?
En el siguiente vídeo verás las principales tecnologías de la familia HTML5:
  • HTML5.
  • Canvas.
  • SVG.
  • Geolocalización.
  • Caché.
  • Base de datos.
  • Web workers.

Link para ver la compatibilidad de los navegadores con las versiones de HTML, CCS
4.10  HTML5: de HTML4 a HTML5
HTML5 incorpora nuevas etiquetas semánticas que definen la estructura de una página web. En el siguiente vídeo se presentan estas etiquetas y se explica cómo transformar una página web de las versiones antiguas de HTML a la nueva versión HTML5.


Link relacionado:


4.11 Los formularios en HTML5
HTML5 incorpora novedades muy interesantes para la creación de formularios. Estas novedades aumentan los tipos de controles (se añade un control para introducir una fecha o un correo electrónico) y las características que se pueden configurar (se puede definir un patrón de entrada o un placeholder) pero hay que llevar cuidado al usarlas, ya que no todos los navegadores las aceptan todas por ahora (pero sí que lo harán en breve).
En las siguientes lecciones se resumen las novedades principales y se muestran algunos ejemplos. Si quieres complementar y contrastar lo que se explica, te recomendamos la lectura de Formularios en HTML5.
4.12 HTML5: Nuevas funcionalidades en formularios (parte 1)
En el siguiente vídeo se presentan los nuevos controles de HTML5:
  • url.
  • tel.
  • email.
  • number.
  • color.
  • search.
  • range.
  • datetime.
  • datetime-local.
  • date.
  • month.
  • week.
  • time.
Además, se comenta el soporte por parte de los navegadores y se muestra la representación de algunos controles en dispositivos móviles.

Link relacionado:


4.13 HTML5: Nuevas funcionalidades en formularios (parte 2)
En el siguiente vídeo se presentan los nuevos atributos que se pueden emplear en los controles de los formularios:
  • autocomplete.
  • autofocus.
  • min.
  • max.
  • step.
  • pattern.
  • placeholder.
  • required.
También se explica qué es Modernizr y los polyfills.

Link relacionado:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills (Cuando el navegador no soporta algun comando de HTML5)


4.14  HTML5: Ejemplo de formulario
En este vídeo verás un ejemplo de formulario en HTML5. Recuerda que los nuevos controles de formulario de HTML5 es una de sus mejores características.


4.15 Los navegadores web son buenos pero tontos. ¿Por qué?
Los navegadores web son programas muy complejos que deben ser capaces de interpretar y representar las páginas web, que cada vez emplean tecnologías más complejas y avanzadas.
Los navegadores web deben ser "buenos" pues deben manejar cualquier página web, aunque contenga errores (que suele ser lo normal, lo extraño es encontrar una página web que no contenga errores). Pero los navegadores web a veces son "tontos" y no son capaces de interpretar correctamente una página web cuando contiene muchos errores. Cuando esto ocurre la página se puede mostrar de una forma incorrecta.
Para evitar esta situación es muy importante que escribas correctamente el código HTML. En las próximas lecciones vas a aprender a validar el código HTML para localizar y corregir los errores que puedan tener tus páginas web.

4.16 HTML5: ¿Por qué es importante escribir código correcto? (1/3)
En este vídeo se explican las principales causas por las que una página web no se ve igual en todos los navegadores:
  • Fallos de los navegadores.
  • Problemas de compatibilidad entre los navegadores.
  • Soporte de HTML por los navegadores.
  • Errores en el código HTML.

4.17 HTML5: ¿Por qué es importante escribir código correcto? (2/3)
En este vídeo se muestran algunos ejemplos de errores en el código HTML:
  • Etiqueta <b> sin cerrar.
  • Etiqueta <span> sin cerrar.
  • Comillas del valor de un atributo sin cerrar (2 versiones).
  • Valor del atributo size de la etiqueta "input" incorrecto.
4.18 HTML5: ¿Por qué es importante escribir código correcto? (3/3)
En este vídeo se explica qué es el DOM (Document Object Model) y por qué es la razón por la que los navegadores muestran una página de diferentes formas cuando tiene un error.

Link relacionado 


4.19 Presentación del proyecto
Los objetivos del proyecto de este módulo son:
  • Mejorar el sitio web con la incorporación de nuevos elementos como las tablas, las imágenes y los nuevos controles de formulario de HTML5.
  • Comprobar que todas las páginas web están correctamente escritas y no presentan errores.
  • Publicar en Internet el sitio web formado por varias páginas conectadas mediante enlaces.
MÓDULO 4: Cómo se escribe una página web correcta

Objetivos

  • Mejorar el sitio web con la incorporación de nuevos elementos como las tablas, las imágenes y los nuevos controles de formulario de HTML5.
  • Comprobar que todas las páginas web están correctamente escritas y no presentan errores.
  • Publicar en Internet el sitio web formado por varias páginas conectadas mediante enlaces.

Qué tengo que hacer

En este módulo tienes que mejorar las páginas de tu sitio web con la incorporación de nuevos elementos, como las tablas y las imágenes.
Recuerda que las tablas no las tienes que utilizar para distribuir el contenido en tus páginas web: las tablas son para mostrar datos tabulados, no para maquetar el contenido de las páginas web. La maquetación se realizará mediante CSS (Cascading Style Sheets), la tecnología que se explicará en la segunda parte de este curso. Si quieres saber más cosas sobre esto te recomendamos la lectura de Porqué diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas.
También puedes mejorar los formularios de tu sitio web con la incorporación de los nuevos controles que añade HTML5. HTML5 ya es un estándar, fue publicado como recomendación el 28 de octubre de 2014 (HTML5 - A vocabulary and associated APIs for HTML and XHTML), pero eso no significa que todas sus características se puedan emplear: no todos los navegadores actuales admiten las nuevas características y por supuesto existe un problema de compatibilidad con los navegadores antiguos. Por tanto, antes de usar una nueva característica te recomendamos que consultes algún sitio web en el que puedas comprobar el grado de compatibilidad de las nuevas características de HTML5:
Por último, en este proyecto también te pedimos que escribas páginas web válidas, páginas web que se ajustan al estándar. Muchas personas han aprendido a hacer páginas web por la simple observación de cómo están hechas las páginas web y eso ha conducido a que se repitan malas prácticas. En el artículo Obsolete practices to avoid se indican algunas cosas que no se deben hacer en las páginas web porque son erróneas o han quedado obsoletas (ya no tiene sentido hacerlas). Al principio de este artículo se indica un problema que se da muchas veces:
Many people learned HTML, CSS, and JavaScript by viewing the source of pages and then copying and pasting them, without considering whether or not the original site was well implemented. This means that they have perpetuated coding practices that might have been necessary in the past, but are irrelevant now.This article tries to list older coding practices that over time have become unnecessary or bad practices.
Traducido al español:
Muchas personas aprendieron HTML, CSS y JavaScript mediante la visualización del código fuente de las páginas y luego copiaban y pegaban el código, sin tener en cuenta si el sitio web original estaba bien implementado. Esto significa que se han perpetuado prácticas de codificación que podrían haber sido necesarias en el pasado, pero que son irrelevantes ahora.
Tienes que aprender a utilizar las herramientas que te pueden ayudar a validar el código HTML de tus páginas web. Por ejemplo, te recomendamos que utilices Markup Validation Service del W3C.
Por último, no te olvides de publicar en Internet tu sitio web.
AVISO IMPORTANTE
Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este material o de la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España 2014” y expresamente, si es posible, mediante un enlace activo a http://google.es/activate. Revisado, marzo 2014.

4.20 ¿Y ahora qué?
Si has llegado hasta aquí y has leído todas las lecciones, has visto todos los vídeos y has hecho todos los ejercicios debes de haber aprendido muchas cosas, pero el haber llegado hasta aquí no es el final de tu aprendizaje, más bien es el principio.
Todavía te quedan muchas cosas por aprender de HTML. Gracias a este curso tienes una base para seguir aprendiendo por tu cuenta. Pero quedan muchas más cosas que vas a aprender con nosotros, pero eso será en la segunda parte de este curso.
4.21 HTML: ¿migrar a un nuevo juego de caracteres?
Debes ver el vídeo "HTML: ¿migrar a un nuevo juego de caracteres?" en el que plantean diferentes posibilidades ante el problema de migrar o no migrar un sitio web que ya existe a otro juego de caracteres.


Link relacionado:



4.22 XML: HTML y XHTML
En el siguiente vídeo se explican las diferencias entre XML, HTML y XHTML



sábado, 14 de noviembre de 2015

Modulo 3 Como se publica un sitio WEB

3.1 Presentación
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.

3.2 Un sitio WEB tiene que estar en la WEB.
Tu sitio web va creciendo poco a poco. Por ahora, tu sitio web está alojado en tu ordenador, sólo lo puedes usar tú. ¿Qué hay que hacer para que lo puedan usar otras personas?
El sitio web se tiene que publicar en Internet. Para ello hay que hacer varias cosas, como comprar un nombre de dominio o contratar un servicio de alojamiento. Todo eso y más cosas te las vamos a explicar en este módulo.

3.3 Los nombres de dominio
En el Módulo 1 aprendiste qué son los nombres de dominio, los diferentes tipos de nombres de dominio que existen y las diferencias que existen entre los nombres de dominio y las URLs.
Para completar satisfactoriamente este curso no es necesario que poseas un nombre de dominio propio: se puede publicar un sitio web en Internet utilizando un nombre de dominio genérico. Pero, si Leo Messi (http://www.leomessi.com/) y Cristiano Ronaldo (http://www.cristianoronaldo.com/) tienen su propio nombre de dominio, ¿por qué tú no puedes también poseer tu propio nombre de dominio?
Desde este curso te animamos a que tengas tu propio nombre de dominio. Pero muy importante, a diferencia de Leo Messi y Cristiano Ronaldo, tú sabrás comprar y gestionar un nombre de dominio por ti mismo por muy poco dinero.
Pero, ¿cómo se compra un nombre de dominio? ¿Mi nombre de dominio puede ser cualquier cosa? En la siguiente lección vas a encontrar un vídeo que te ayudará a comprar un nombre de dominio para tu sitio web.

3.4 Como comprar un dominio en 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:
  1. Elegir un dominio.
    1. Verificar la disponibilidad del nombre de dominio deseado en algún registrador.
    2. Ingresar los datos personales.
    3. Elegir la cantidad de tiempo que el dominio permanecerá registrado.
    4. Pagar el dominio, normalmente con tarjeta de crédito (o también por transferencia bancaria).
  2. 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.
  3. 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:
    1. El registrador contacta con ICANN y realiza el proceso de forma transparente para el registrante.
    2. Se avisa al registrante que el dominio fue registrado.
  4. 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.
  5. La página ya es accesible mediante un nombre de dominio desde cualquier computadora.
Para chequar su un dominio fue registrado:

Contacto: armando@dlsi.ua.es

@fundamentosBD

http://www.dlsi.ua.es

http://www.youtube.com/user/fbdua

http://fbddocs.dlsi.ua.es

Links relacionados:

http://pixabay.com/

http://commons.wikimedia.org/

3.5 Donde compro mi nombre de dominio


Comprar, comprar un nombre de dominio no se puede: se puede registrar por un período de tiempo.
Existen muchos agentes registradores de nombres de dominio que ofrecen múltiples ofertas: registro por uno o varios años, registro con o sin hosting, registro de uno o varios nombres de dominio, etc. Antes de decidirte por un agente registrador te aconsejamos que busques y compares, y eso es lo que te proponemos en la siguiente actividad.
3.6 Secuestro de los nombres de dominio
Un nombre de dominio puede ser secuestrado, puede ser adquirido por ciertas personas de forma ilícita con el fin de obtener un beneficio económico.
En el artículo Registro de dominios de la Wikipedia se describen los siguientes negocios fraudulentos:
  • Adelantarse en el registro.
  • Registrar nombres parecidos.
  • Registrar un dominio cuando alguien se olvida de renovarlo.
  • Y muchos otros.
Como se suele decir, "le puede pasar a cualquiera", así que te recomendamos la lectura del artículo Secuestradores de dominios para conocer un caso que se produjo en España. Y el artículo Puntos a tener en cuenta sobre el incidente del secuestro del dominio Diigo para conocer un caso internacional reciente. Descubre lo que pasó en esos dos casos para evitar que te ocurra a ti.
3.7 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. Es un error tan común que la Guía para principiantes para nombres de dominio publicada por ICANN (Internet Corporation For Assigned Names and Numbers), incluye una pregunta sobre ello:
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.
3.8 Como publicar un sitio web: Alojamiento (hosting) (1/3)
Debes ver el vídeo "Cómo publicar un sitio web: Alojamiento (hosting) (1/3)" en el que se explica qué se necesita para publicar un sitio web en Internet, las diferencias entre un servidor propio frente a un alojamiento (hosting) contratado, se explica qué es un alojamiento o hosting y se muestran los principales tipos de alojamiento:
  • Compartido.
  • Servidor virtual privado.
  • Servidor dedicado.
  • Housing.
  • En la nube.

Link de empresa que ofrecen alojamiento gratuito:




3.9 Como publicar un sitio web: Alojamiento (hosting) (2/3)
En Internet puedes encontrar miles y miles de ofertas de alojamiento. ¿Cómo elegir la mejor? Es difícil, tendrías que analizarlas todas, así que olvídate. Pero sí que puedes intentar elegir una muy adecuada a tus necesidades.
En el siguiente vídeo se explican los principales criterios que hay que tener en cuenta para elegir un alojamiento adecuado:
  • Calidad.
  • Sistema operativo.
  • Almacenamiento.
  • Transferencia.


3.10 Como publicar un sitio web: Alojamiento (hosting) (3/3)
En el siguiente vídeo se explican los últimos criterios que hay que tener en cuenta para elegir un alojamiento:
  • Velocidad de transferencia.
  • Lenguajes de programación.
  • Bases de datos.
  • Dominios/subdominios.
  • Otros.
  • Precio.

3.11 ¿Como publica un sitio web en internet?
Tu sitio web empieza a tomar forma, todavía no lo has terminado, te falta mucho, hasta que no acabe este curso no lo tendrás terminado. Sin embargo, puede ser que ya tengas ganas de tenerlo publicado en Internet, quizás quieras tener la URL de tu sitio web para que tus familiares, amigos y enemigos puedan acceder a él y lo puedan criticar.
¿Cómo se publica un sitio web en Internet para que todo el mundo pueda acceder a él?
Ahora mismo, tu sitio web está en tu ordenador, pero en los siguientes vídeos aprenderás a publicarlo o ponerlo en Internet en un ordenador "especial", el servidor de producción.
¿Qué es el servidor de producción?
Normalmente, en un entorno profesional de desarrollo web es muy normal que se utilicen diferentes ordenadores para diferentes propósitos:
  • El servidor de desarrollo: es el ordenador en el que se desarrolla el sitio web, no necesita estar conectado a Internet.
  • El servidor de pruebas: es el ordenador en el que se puede comprobar el correcto funcionamiento de un sitio web en su conjunto.
  • El servidor de respaldo o de versiones: es el ordenador en el que se almacena todo el código desarrollado y permite recuperar versiones antiguas del código.
  • El servidor de producción: es el ordenador en el que está funcionando el sitio web, al que están accediendo los usuarios del sitio web y que está conectado a Internet (excepto si el sitio web es para una intranet).
En tu caso, tu ordenador personal realiza las funciones de servidor de desarrollo, servidor de pruebas y servidor de respaldo (¡no te olvides de realizar copias de seguridad de tu trabajo de forma periódica!), aunque si tienes varios ordenadores te puedes montar un entorno de trabajo como el anterior. ¿Y el servidor de producción? Es el ordenador en el que vas a publicar tu sitio web.
3.12 Como publica un sitio web en internet (1)
En el vídeo "Cómo se publica un sitio web en Internet (1)" se explica cómo se copia un sitio web desde el ordenador de desarrollo al ordenador de producción mediante el protocolo FTP (File Transfer Protocol).

http://www.net2ftp.com/ Cliente ftp online
3.13 Como publica un sitio web en internet (2): Cliente ftp
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.

https://filezilla-project.org/ Cliente ftp gratuito.
http://www.hostinger.es/ Servicio Hosting gratuito
3.14 Como publica un sitio web en internet (3): Cliente ftp online
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.
3.15 La nube
"La nube", ¿qué es la nube en informática? La nube es un término que empezó a ponerse de moda a partir del año 2010, tal como podemos observar en el siguiente gráfico de Google Trends:
Gráfico de Google Trends
Desde entonces, todo el mundo habla de la nube, pero la nube informática es tanto o más escurridiza que las nubes reales.
El artículo de la Wikipedia Computación en la nube define "la nube" como:
La computación en la nube, conocido también como servicios en la nube, informática en la nube, nube de cómputo o nube de conceptos, (del inglés cloud computing), es un paradigma que permite ofrecer servicios de computación a través de Internet.
Es decir, lo que se lleva haciendo más de 40 años, desde el año 1969 cuando nació Internet. Sí, nada nuevo bajo el sol. Lo nuevo que ofrece la nube es la posibilidad de ejecutar directamente en la Web a través de un navegador aplicaciones que en el pasado requerían la instalación previa del software en el ordenador.

En los siguientes vídeos se explica con más detalle qué es la nube y se muestra la tecnología física, el hardware, que permite que la nube funcione.


3.16 HTML5: Computación en la nube
Debes ver el vídeo "HTML5: Computación en la nube" en el que se explican las ventajas y desventajas de la computación en la nube:
  • Accede a tus aplicaciones y datos desde cualquier sitio.
  • Olvídate de las versiones.
  • Utiliza tus aplicaciones y datos desde cualquier dispositivo con un navegador.
  • No te preocupes por tu ordenador.
  • No te preocupes por las copias de seguridad.
  • Olvídate de los virus y otras amenazas.
3.17 Los centros de datos de googles 
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.
En el siguiente vídeo se muestra una pequeña visita virtual por uno de los centros de datos de Google:
Si te ha gustado la visita virtual que se muestra en el vídeo anterior la puedes repetir tú mismo a través de la página Paséate por un centro de datos de Google.
Por último, en el Álbum de fotos se muestra parte de la tecnología que se emplea en los centros de datos de Google.

¿Qué líquido “especial” emplea Google para refrigerar sus centros de datos?
Aunque te sorprenda, Google emplea simplemente… agua. Si quieres, tu ordenador también se puede refrigerar por agua o por aceite. Consulta el artículo de la Wikipedia Refrigeración líquida (informática) si quieres aprender más sobre este tema.
Estas tuberías de colores transportan el agua dentro y fuera de nuestro centro de datos de Oregón. Las tuberías azules suministran agua fría y las rojas devuelven el agua caliente para que se enfríe.
Miles de metros de tuberías recorren nuestros centros de datos. Las pintamos con colores vivos no solo porque es más divertido, sino también para distinguirlas. La tubería de color rosa brillante de esta foto lleva agua de la fila de enfriadores (unidades verdes de la izquierda) a una torre de refrigeración exterior.
Vista aérea de una de nuestras plantas de enfriamiento, donde el agua de mar del golfo de Finlandia refrigera por completo el centro de datos allí ubicado.
¿Qué tipo de red local se emplea en los centros de datos de Google?
Se emplea una red de área ocal de tipo Ethernet. Consulta el artículo de la Wikipedia Ethernet si quieres aprender más sobre este tema.
Las tuberías no son lo único colorido en nuestros centros de datos. Estos cables Ethernet están organizados por colores. Esto puede ayudar a reducir los tecnicismos: "Pásame un cable azul".
Estos conmutadores de Ethernet conectan nuestra red de instalaciones. Gracias a ellos, podemos comunicarnos con los principales mecanismos de control del sistema de enfriamiento de nuestro centro de datos y supervisar esos mecanismos.
¿Qué sistema emplea Google para realizar copias de seguridad de sus datos?
Google emplea un sistema de cintas robotizado. Las cintas son un sistema de copia de seguridad (backup) lento, pero ofrecen una gran capacidad de almacenamiento y son muy baratas.
Tenemos copias de seguridad de todos los datos (por si les ocurre algo). Uno de los lugares en los que se hacen copias de seguridad de la información es la biblioteca de cintas. Unos brazos robóticos (que se observan al final del pasillo) nos ayudan a cargar y descargar cintas cuando necesitamos acceder a ellas.
Esta es una vista más de cerca de las cintas de copia de seguridad de nuestra biblioteca de cintas. Cada cinta tiene un código de barras único para que nuestro sistema automático pueda encontrar la cinta correcta.
¿Qué hace Google cuando un disco duro está defectuoso?
Google inutiliza los discos duros defectuosos para que no puedan ser usados y no se pueda acceder a la información que almacenan:
Como parte de nuestro compromiso con la preservación de la seguridad de los datos de nuestros usuarios, destruimos en el lugar todas las unidades defectuosas.
¿Cuántos centros de datos posee Google en la actualidad? ¿Dónde se encuentran?
A día de hoy (20/10/2014), Google posee 13 centros de datos distribuidos por 3 continentes:
  • 7 en América: Condado de Berkeley, Carolina del Sur; Council Bluffs, Iowa; Condado de Douglas, Georgia; Quilicura, Chile; Condado de Mayes, Oklahoma; Lenoir, Carolina del Norte; The Dalles, Oregón.
  • 3 en Europa: Hamina, Finlandia; Saint-Ghislain, Bélgica; Dublín, Irlanda.
  • 3 en Asia: Hong Kong; Singapur; Taiwán.
Y una pregunta de broma, ¿qué vehículo emplean los ingenieros de Google para moverse por sus instalaciones?
Estas tuberías de colores llevan y traen agua para enfriar la instalación. También se muestra una bicicleta G-Bike, el vehículo elegido por los miembros de nuestro equipo para dar una vuelta fuera de los centros de datos.

3.18 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.
3.19 HTML: Formularios Parte - 1
En el siguiente vídeo 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.
3.20 HTML: Formularios Parte - 2

En el siguiente vídeo se explican los formularios tradicionales con HTML y los siguientes controles de un formulario:

  • select.
  • option.
  • optgroup.
  • textarea.
  • label.
  • fieldset.
  • legend.
Link relacionados:

http://html.conclase.net

http://www.htmlquick.com/es/

http://www.w3schools.com/html/html_forms.asp

3.21 Presentación del proyecto


MÓDULO 3: Cómo se publica un sitio web

Objetivos

  • Mejorar el sitio web con la incorporación de nuevos elementos como los formularios.
  • Publicar en Internet el sitio web formado por varias páginas conectadas mediante enlaces.
  • Optativo: registrar un nombre de dominio y contratar un servicio de alojamiento de pago.

Qué tengo que hacer

Poco a poco tu sitio web va creciendo y mejorando. Por ejemplo, en este módulo has aprendido a crear formularios web. A tu sitio web ya le puedes añadir un formulario, por ejemplo un formulario de contacto para que la gente pueda contactar contigo. Pero, ¿cómo se recogen los datos del formulario?
Lo normal es utilizar una base de datos para recoger la información transmitida a través de un formulario en una página web. Por ejemplo, consulta el artículo Sending and retrieving form data de Mozilla Developer Network en el que se incluye el siguiente gráfico:
A basic schema of the Web client/server architecture
Los datos que se introducen en un formulario en el lado del cliente (el navegador web) se envían a través de Internet al servidor web, donde son recogidos y almacenados en una base de datos (no está representada en el gráfico anterior) para su posterior consulta. Pero para hacerlo así es necesario tener conocimientos de programación y de bases de datos y eso está fuera de los objetivos de este curso. Sin embargo, existe una alternativa fácil de implementar, como vamos a ver a continuación.
En el atributo action de la etiqueta <form> que define un formulario se puede indicar un correo electrónico para que los datos se envíen directamente a un correo electrónico. ¿Cómo se hace? Consulta los siguientes recursos que contienen ejemplos que puedes copiar a tus páginas web:
El protocolo mailto también se puede utilizar en los enlaces. En el artículo Email links se explica.
Una vez tengas ampliado (añade páginas nuevas con más contenido) y mejorado (añade al menos una página web con un formulario) tu sitio web, publícalo en Internet. Para publicar el sitio web puedes utilizar un servicio de alojamiento gratuito o de pago. Servicios gratuitos de alojamiento hay muchos, aquí tienes algunos muy populares:
Además, como parte optativa de este proyecto te proponemos que registres tu propio nombre de dominio y contrates un servicio de alojamiento de pago.
Una vez hayas publicado tu sitio web en Internet, publica en el foro del curso su URL para que otros compañeros puedan comentar lo que has hecho.
AVISO IMPORTANTE
Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este material o de la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España 2014” y expresamente, si es posible, mediante un enlace activo a http://google.es/activate. Revisado, marzo 2014.

3.22 Lista de reproduccion :
En la siguiente lista de reproducción están juntos todos los vídeos de este módulo, por si necesitas repasar.

https://formacionactivate.appspot.com/idesweb-parte-1/unit?unit=3&lesson=22

3.23 Alojamiento (Hosting) Gratuito

En el siguiente vídeo se explica el concepto de alojamiento (hosting) web, las ventajas y desventajas de un alojamiento gratuito y las características básicas (calidad, sistema operativo, almacenamiento, límite de transferencia, lenguaje de programación, bases de datos, dominios y subdominios, publicidad).





Link relacionado:

http://verhosting.com

3.24 Alojamiento (Hosting) Gratuito -Hostinger.es

En el siguiente vídeo se explican las características principales de hostinger.es, se muestra cómo crear una cuenta y se explica cómo publicar una página web de ejemplo.


3.25 Alojamiento (Hosting) Gratuito 000webhost.com

En el siguiente vídeo se explican las características principales de 000webhost.com, se muestra cómo crear una cuenta y se explica cómo publicar una página web de ejemplo.