Aprendiendo programación Web: mayo 2015

domingo, 10 de mayo de 2015

Módulo 3: Cómo se publica un sitio web (V) - ¿Cómo se 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.

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

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.

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.

Módulo 3: Cómo se publica un sitio web (IV) - 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. 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.

En el siguiente vídeo 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.

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.

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.

Para saber más:
webs.com
wix.com
Google Sites
Blogger
WordPress
Comparativa de hosting profesional

Módulo 3: Cómo se publica un sitio web (III) - El 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.

Módulo 3: Cómo se publica un sitio web (II) - 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 el servidor DNS usado por éste.
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.

Módulo 3: Cómo se publica un sitio web (I) - 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.

Módulo 2: Cómo se escribe una página web (IX) - HTML: tres errores típicos

En el siguiente vídeo se muestran tres errores (confusiones o malas prácticas) que hasta gente que lleva muchos años creando páginas web comete de vez en cuando:

Saltos de línea.
Espacios en blanco.
Referencias de caracteres (caracteres especiales).

Después de ver este vídeo esperamos que tú no cometas estos errores.

Para saber más:
W3Schools

Módulo 2: Cómo se escribe una página web (VIII) - HTML: problemas con los editores

En el siguiente vídeo se muestran algunos problemas que se pueden tener en Microsoft Windows con el editor Bloc de Notas y en Apple Macintosh con el editor TextEdit.

Módulo 2: Cómo se escribe una página web (VII) - HTML: enlaces

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.

Para saber más:
RFC 1738 - Uniform Resource Locators (URL)

Módulo 2: Cómo se escribe una página web (VI) - HTML: listas

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.

sábado, 9 de mayo de 2015

Módulo 2: Cómo se escribe una página web (V) - 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.

En el siguiente vídeo se explica la creación de una página sencilla con el Bloc de Notas de Microsoft Windows. ¿A que nunca hubieses imaginado que con el humilde Bloc de Notas se podían crear páginas web?

En el siguiente vídeo se explican las reglas básicas que se deben aplicar en la creación de una página web:

Etiquetas siempre cerradas.
Documentos bien formados.
Etiquetas en minúsculas.
Valores de los atributos siempre entre comillas.

También se dan algunas recomendaciones sobre los caracteres válidos en los nombres de los ficheros.

Para saber más:

W3Schools
HTML (Wikipedia)
HTML/Training

Módulo 2: Cómo se escribe una página web (IV) - Sobre HTML5

El 28 de octubre de 2014 el W3C publicó HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014, 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.

Si quieres saber algo más sobre la publicación de HTML5 consulta la nota de prensa del W3C HTML5 is a W3C Recommendation.

Importante: el material educativo de este curso fue preparado antes de la publicación de HTML5 como estándar, por lo que a veces se puede indicar que HTML5 no es un estándar.

Módulo 2: Cómo se escribe una página web (III) - El lenguaje HTML

HTML son las siglas de HyperText Markup Language, que puede traducirse como lenguaje de marcas o marcado de hipertexto.

El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver el código HTML de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar:

Ver código fuente de la página en Google Chrome y Mozilla Firefox.
Ver código fuente en Internet Explorer y Opera.

El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:

html
head
meta
title
link
style
script
body
p
a
strong
em
img
form
input
select
textarea
table
tr
th
td
blockquote
hr
ul
ol
li
div
span

En las siguientes lecciones vas a aprender la estructura básica de una página web y el uso de las etiquetas que más se suelen utilizar. Pero antes, te proponemos que aprendas algunas cosas de la historia de HTML:

Para saber más:
Dave Raggett - A history of HTML
HTML+ (Hypertext markup format)
RFC 1866 - Hypertext Markup Language - 2.0
W3C - The basics of HTML
WHATWG - HTML Standard

Módulo 2: Cómo se escribe una página web (II) - Prototipado: wireframes, mockups y prototipos

En el vídeo El desarrollo web se han mostrado las principales fases del desarrollo de un sitio web. En la segunda fase, "Planificación", aparecían los hitos "Wireframes" y "Revisión Wireframes".

En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla, aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.

En el siguiente vídeo se explican las diferencias que existen entre los wireframes, los mockups y los prototipos, se explica la importancia de prototipar una aplicación o sitio web antes de implementarla y se muestran los diferentes tipos de diagramas que se emplean para representar la navegación, la estructura y el funcionamiento de una aplicación o sitio web.

La diagramación en la arquitectura de información

Documenting the design of a web application -Part one: Using Garrett’s Visual Vocabulary to document the Information Architecture

Interaction design

Los Elementos de la Experiencia de Usuario

Yahoo! Mail: Simplicity Holds Up Over Time

Information Architecture for the World Wide Web

Designing and Coding a WordPress Theme From Scratch (Part 2)

A design process revealed

Wireframes for the Wicked

Hay muchas herramientas gratuitas para la creación de prototipos, como Pencil Project:

En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), y cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).