viernes, 27 de noviembre de 2015

Prototipos visuales de alta fidelidad

En el vídeo Prototipado: wireframes, mockups y prototipos se te ha explicado que existen diferentes tipos de prototipos, de baja y alta fidelidad.

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




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.




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.



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.




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.



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

lunes, 23 de noviembre de 2015

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.

Historia de HTML

El lenguaje HTML, al igual que los lenguajes o idiomas que hablan las personas, evoluciona con el tiempo.

En el siguiente vídeo se explica la historia del lenguaje HTML durante sus primeros años y su relación con otros lenguajes, como SGML, XML, HTML+ y HTML5. Además, sabrás por qué el W3C abandonó el desarrollo de XHTML y apostó por HTML5.




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.

El desarrollo Web





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.





¿Cómo funciona el DNS?

El siguiente vídeo es un vídeo oficial de red.es, "una entidad pública que trabaja para que la sociedad española aproveche al máximo el potencial de Internet y las nuevas tecnologías". Este vídeo puede ser un poco difícil de entender porque no contiene ninguna explicación, es simplemente una animación, pero con lo que te hemos explicado en Las direcciones IP y el sistema de nombres de dominio seguro que lo podrás entender correctamente.

La idea principal que transmite este vídeo es que sólo transcurren unas milésimas de segundo desde que el usuario aprieta el botón para navegar a una dirección web hasta que se resuelve la dirección IP asociada a un nombre de dominio y se solicita el recurso asociado a la dirección web.



jueves, 19 de noviembre de 2015

Creación de una página web con Blogger

Estructura de un blog

Antes de crear tu primer blog te vamos a explicar la estructura básica de un blog. Como verás, un blog no es una página web muy compleja.

Después de ver este vídeo ya podrás crear tu primer blog en Blogger.




Configuración básica

Blogger ofrece unas opciones de configuración que debes conocer. La más importante es la configuración de la zona horaria.




Edición básica de una entrada

En este vídeo te explicamos lo más importante que debes saber hacer cuando edites una entrada en Blogger.



Edición avanzada de una entrada

¿Quieres crear un enlace en una entrada? ¿Quieres insertar una imagen o un vídeo? En el siguiente vídeo te explicamos cómo hacerlo.

Además, también te mostramos cómo puedes asignar etiquetas a tus entradas. En el vídeo de la siguiente lección te explicaremos cómo las puedes usar para que los visitantes de tu blog puedan navegar por las entradas a través de las eitquetas.




Diseño y gadgets

¿Ya no te gusta el diseño de tu blog? ¿Te has cansado de los colores que tiene? No te preocupes, en cualquier momento puedes cambiar la presentación visual de tu blog sin perder nada de lo que has escrito. En este vídeo te mostramos lo sencillo que es.

Además, también te mostramos cómo puedes añadir un gadget para ampliar las posibilidades de tu blog. Por ejemplo, te vamos a mostrar cómo añadir un gadget para mostrar tus etiquetas.




Sistema de gestión de contenidos

Un sistema de gestión de contenidos (en inglés Content Management System y también conocido por sus siglas CMS) es un software que permite crear, administrar y publicar contenidos en forma de páginas web.

Un sistema de gestión de contenidos permite publicar páginas web de una forma rápida y sencilla, sin necesidad de conocer cómo están realizadas las páginas web. Pero ese no es el objetivo de este curso: el objetivo de este curso es que seas capaz de crear las páginas web por ti mismo desde cero. Sin embargo, en este curso vas a aprender a utilizar un sistema de gestión de contenidos como un paso previo a la creación de páginas web de forma autónoma.

En este curso vas a aprender a utilizar Blogger, un servicio disponible a través de Internet que se puede clasificar como un sistema de gestión de contenidos ofrecido bajo la modalidad de Software como Servicio (en inglés Software as a Service y también conocido por sus siglas SaaS), un servicio de distribución de software donde el programa y los datos que maneja el programa se alojan en servidores a los que se accede a través de Internet.

Blogger es un servicio gratuito de Google. ¿Cómo nació? Lee la noticia Google compra más de un millón de diarios personales y lo sabrás.

¿Y para qué queremos que aprendas a utilizar Blogger? Espera un poco, en el proyecto de este módulo te lo explicaremos.

¿Quieres saber más cosas? Consulta los siguientes artículos de la Wikipedia:

Las direcciones IP y el sistema de nombres de dominio

Las direcciones IP identifican los dispositivos conectados en una red, como por ejemplo un ordenador. Sin embargo, normalmente empleamos un nombre de domino (¿recuerdas el vídeo Los nombres de dominio). ¿Qué relación existe entre las direcciones IP y los nombres de dominio?

La clave está en el Sistema de Nombres de Dominio (en inglés Domain Name System). Reproduce el siguiente vídeo y lo entenderás.




Los nombres de dominio

El nombre de dominio es un nombre único que normalmente se emplea para identificar un sitio web en Internet. Un nombre de dominio aparece en una URL, pero un nombre de dominio y una URL son dos cosas distintas que no debes confundir.

¿Cómo se escribe un nombre de dominio? ¿Qué tipos de nombres de dominio existen? La respuesta a estas y otras preguntas la encontrarás en el siguiente vídeo.


Los nuevos nombres de dominio

.com, .org, .net y otros más fueron los primeros nombres de dominio que existieron en Internet. Pero Internet ha crecido mucho desde su nacimiento (¿recuerdas cuándo y dónde nació Internet?, si no lo recuerdas, vuelve a ver el vídeo sobre la historia de Internet), las necesidades han aumentado y esos nombres de dominio se han quedado pequeños.

A mediados de 2012, ICANN (Internet Corporation For Assigned Names and Numbers), el organismo que regula los nombres de dominio, publicó una lista con los 1.930 nuevos nombres de dominio de primer nivel que habían sido solicitados durante el proceso que había iniciado unos años antes. Estos nombres de dominio no existen todavía, se están introduciendo poco a poco y algunos han sido rechazados (en Program Statistics se puede consultar el número de nombres de dominio que han sido introducidos o rechazados hasta el momento).

Algunos de los nuevos nombres de dominio se refieren a profesiones, como .abogado o .doctor, así como a empresas y marcas, como es el caso de .microsoft, .google, .canon, .dunlop o .calvinklein.

Respecto a España, destacan los dominios geográficos como .barcelona o .madrid, junto a los de marcas como .zara o .movistar, y entidades financieras como .lacaixa y .bbva.

Y respecto a Latinoamérica, algunas empresas han solicitado nombres de dominio específicos, como .avianca., .globo o.uol.



Las URLs

¿Qué son las URLs? ¿Qué partes componen una URL? En el siguiente vídeo aprenderás algunas cosas que quizás desconozcas sobre las URLs, el sistema que se emplea para localizar un recurso, como por ejemplo una página web o un vídeo, en la Web.



Las URLs amigables

Las URL semánticas o URL amigables son aquellas URLs que son, dentro de lo que cabe, entendibles para el usuario. Lejos de las clásicas URLs de las páginas dinámicas llenas de variables GET y números difíciles de recordar, las URL semánticas están formadas con palabras relacionadas con el contenido de la página y fáciles de recordar. Estas se utilizan en los sitios web dinámicos (no estáticos). Por ello se están utilizando mucho más que las URL extensas.

En la siguiente tabla se muestran varios ejemplos de URLs amigables:
URL no amigableURL amigable
http://example.com/index.php?pagina=contactohttp://example.com/contacto
http://example.com/index.php?pagina=consulting&seccion=marketinghttp://example.com/consulting/marketing
http://example.com/productos?categoria=2&pid=25http://example.com/productos/2/25
http://example.com/cgi-bin/feed.cgi?feed=news&frm=rsshttp://example.com/news.rss
http://example.com/servicios/index.jsp?id=legal&subid=patenteshttp://example.com/servicios/legal/patentes
http://example.com/kb/index.php?cat=8&id=41http://example.com/kb/8/41
http://example.com/index.php?mod=perfiles&id=193http://example.com/perfiles/193

¿Ves las diferencias que existen entre una URL no amigable y una URL amigable? ¿Se entiende mejor la URL amigable?


Por cierto, el término URL amigable suele aparecer asociado a los términos SEO y posicionamiento

El hipertexto y la hipermedia

Las páginas web son el ejemplo más conocido de hipertexto e hipermedia, pero existen otros sistemas que también se basan en estos dos conceptos. En el siguiente vídeo se explican los orígenes del hipertexto y se definen los conceptos hipertexto, multimedia e hipermedia:

Hipertexto
Conjunto estructurado de textos, gráficos, etc., unidos entre sí por enlaces y conexiones lógicas.

Multimedia
Que utiliza conjunta y simultáneamente diversos medios, como imágenes, sonidos y texto, en la transmisión de una información.

Hipermedia
Conjunto estructurado de diversos medios, como textos, gráficos, imágenes y sonidos, unidos entre sí por enlaces y conexiones lógicas para la transmisión de una información.



Evolución de la Web: de la página web a la aplicación web

En el siguiente vídeo se explica cómo ha evolucionado la Web, desde el concepto inicial de página web hasta el concepto actual de aplicación web.

En este curso vas a aprender a crear páginas web, pero no aplicaciones web. Una aplicación web es un programa, un software, que se puede utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador web. El desarrollo de una aplicación web requiere conocimientos avanzados como programación y manejo de bases de datos.

Si quieres aprender más cosas sobre las aplicaciones web y su desarrollo, te recomendamos que consultes:

Historia de los navegadores web

La evolución de la Web ha estado muy influenciada por la evolución de los navegadores web, los programas que usan los usuarios para navegar por la Web y visualizar las páginas web: las páginas web han ido incluyendo nuevas tecnologías y nuevas posibilidades al mismo ritmo que lo hacían los navegadores web.

En este vídeo y en el siguiente vas a conocer los principales acontecimientos de la historia de los navegadores web.

Después de ver este primer vídeo sabrás que el primer navegador web fue desarrollado por Tim Berners-Lee, el padre de la Web. Además, también conocerás el navegador Mosaic, el primer navegador multiplataforma que supuso toda una revolución.



En la segunda parte de la historia de los navegadores web conocerás el nacimiento y muerte de la compañía Netscape Communications, sabrás quién fue el vencedor de la primera guerra de los navegadores y al final aprenderás la lección más importante de la historia de los navegadores web. ¿Cuál es?



¿Ya sabes quién inventó Internet la Web?

Atribuir la invención de algo "tan enorme" como Internet y la Web a unas pocas personas no refleja la realidad y no es muy justo. Sin embargo, es necesario realizar este tipo de simplificaciones para poder comprender la realidad.

Llegado este punto de este curso ya deberías tener claro dos cosas, dos cosas que mucha gente desconoce o que sabe de forma errónea:
  • Internet y la Web son dos cosas diferentes, relacionadas, pero son dos cosas distintas.
  • Tim Berners-Lee es considerado el padre de la Web, no de Internet. Vinton Cerf es considerado uno de los padres de Internet, no de la Web.

El 29 de octubre de 2014 se celebró W3C20 Anniversary Symposium - The Future of the Web, un simposio organizado por el W3C, la entidad que se encarga de definir los estándares técnicos de la Web, para celebrar los 20 años de su fundación. Vinton Cerf y Tim Berners-Lee estuvieron juntos en esta celebración y lucieron unas camisetas muy especiales que llevaban un mensaje para todo el mundo:
  • La camiseta de Vinton Cerf decía "Yo inventé Internet" por un lado y "Yo no inventé la Web" por el otro lado.
  • La camiseta de Tim Berners-Lee decía: "Yo inventé la Web" por un lado y "Yo no inventé Internet" por el otro lado.

¿Humor fino o humor friki (nerd)?




Historia de Internet: su nacimiento

Con los siguientes vídeos vas a aprender algunas cosas sobre la historia de Internet y de la Web. No es necesario conocer la historia de Internet y de la Web para desarrollar páginas web, pero si te ayudará a entender mejor algunos aspectos de su funcionamiento actual.

En el primer vídeo, Historia de Internet: su nacimiento, se describen los primeros años del programa ARPANet que fue la semilla para la creación de Internet, se presenta a Leonard Kleinrock y la comunicación basada en la conmutación de paquetes, se explica cómo fue la primera comunicación a través de ARPAnet en 1969, se muestra la expansión de ARPANet a través de sus primeros años y se habla del protocolo TCP, que fue desarrollado por Vint Cerf y Robert Kahn.



En este primer vídeo sobre la historia de la Web se muestran algunos antecedentes, como Vannevar Bush y el memex o Ted Nelson y el hipertexto y la hipermedia, que influyeron en la propuesta de Tim Berners-Lee para la creación de un sistema de hipertexto para compartir información en el CERN.




En este segundo vídeo sobre la historia de la Web se explica cómo fue la creación de un sistema de hipertexto para compartir información en el CERN, se muestra el sistema NeXT, se comenta cuál fue el primer servidor web en España, se presenta a Robert Cailliau que ayudó a Tim Berners-Lee a desarrollar lo que finalmente se convirtió en la Web y se habla de la creación del World Wide Web Consortium (W3C).



La Familia de protocolos de Internet

En el vídeo Internet y la Web han aparecido varios términos que quizás no conozcas: HTTP, FTP, SMTP, POP. ¿Qué significan?

La familia de protocolos de Internet es un conjunto de protocolos de red que se emplean para transmitir datos entre ordenadores a través de Internet. Existen más de cien protocolos, cada uno especializado en una función o en un tipo de comunicación concreta. Por ejemplo, el protocolo HTTP (HyperText Transfer Protocol) se emplea para la transmisión de las páginas web y el protocolo FTP (File Transfer Protocol) se emplea para la transmisión de ficheros.

Lee el artículo de la Wikipedia Familia de protocolos de Internet que ofrece un pequeño resumen sobre los protocolos que se emplean en Internet. Y consulta también Protocolos de Internet en el que están enlazados los artículos de los principales protocolos de Internet.

Después de leer lo anterior, ¿todavía tienes ganas de aprender más cosas? Sí es así, te recomendamos las siguientes lecturas sobre TCP/IP ofrecidas por Oracle:

Internet en el mundo

El acceso a Internet varía considerablemente de un país a otro. Y desgraciadamente, un mal acceso a Internet perjudica de forma sustancial la economía de un país.

En junio de 2014, la Internet Society publicó el Global Internet Report 2014. Este informe va acompañado de un mapa interactivo, Global Internet Report Map, que muestra varios datos por países de los que destacan los siguientes conceptos:
  • Porcentaje de penetración entre los usuarios de Internet.
  • Coste, como porcentaje de la renta per cápita necesaria para tener un acceso de banda ancha a Internet.
  • La mediana de la velocidad de descarga para una conexión fija a Internet.

Algunos datos son conocidos desde hace años. Por ejemplo, los países nórdicos se sitúan entre los diez primeros en porcentaje de penetración:
  • Islandia: 96,5% (1)
  • Noruega: 95,1% (3)
  • Suecia: 94,8% (4)
  • Dinamarca: 94,6% (5)
  • Finlandia: 91,5% (8)
  • Islas Feroe: 90,0% (10)

En el extremo opuesto se sitúa Eritrea con un 0,9%.

Respecto al coste, algunos de los países nórdicos vuelven a aparecer entre los diez primeros de los países donde el coste es menor. En el extremo opuesto vuelve a aparecer Eritrea con casi un 4000% (más o menos, un ciudadano medio necesita 40 veces su sueldo para poder tener una conexión a Internet).

Respecto a la velocidad de descarga, el número 1 es Hong Kong con 57,07 Mbit/s como mediana de la velocidad.

Internet y la Web

¿La Web e Internet son lo mismo? No, no son lo mismo, pero para muchas personas sí que son lo mismo y muchas veces hacen un mal uso de los dos términos.

En el siguiente vídeo se explica qué es Internet y la Web y descubrirás las diferencias que existen entre ambos. Los profesores de este curso esperamos que después de ver este vídeo tengas claro que Internet y la Web son dos cosas distintas, aunque relacionadas.






Los 25 años de la Web

¿Realmente nació la Web hace 25 años?

¿Cuándo se empieza a contar la edad de una persona, desde que es concebida o desde que nace?

Sí, la Web fue concebida hace 25 años, en concreto el 12 de marzo de 1989. Ese día, Tim Berners-Lee finalizó su informe Information Management: A Proposal, pero era simplemente eso, un informe, todavía no existía el sistema que proponía desarrollar.





El primer servidor web, el primer navegador web y la primera página web no se desarrollaron hasta finales de 1990. Así que, ¿cuándo nació realmente la Web?

Si quieres saber más, te recomendamos que consultes:

La Web

En 1989, Tim Berners-Lee llevaba varios años trabajando en el CERN, la Organización Europea para la Investigación Nuclear. Aunque Tim era físico, desde que había finalizado sus estudios universitarios se había dedicado a trabajar en temas de telecomunicaciones e informática. En marzo de 1989, Tim escribió un pequeño informe, Information Management: A Proposal, en el que proponía el desarrollo de un sistema distribuido de gestión de la información.



Tim le presentó el informe a su jefe, Mike Sendall. Mike le devolvió a Tim el informe con sólo tres palabras escritas al principio de la primera página, Vague but exciting..., impreciso pero emocionante...

¿Podía ser emocionante un informe lleno de gráficos extraños? ¿Podía ser emocionante un sistema informático?

Justo 25 años después, ahora en el año 2014, estamos celebrando que Tim Berners-Lee escribió ese pequeño informe. Porque ese pequeño informe que proponía el desarrollo de un sistema de gestión de la información para solucionar el problema que existía para compartir la información en el CERN se transformó en algo enorme, la Web.

Sólo tenía que tomar la idea del hipertexto y conectarlo a las ideas de TCP y DNS y ¡ta chan! - La Web. 
-Tim Berners-Lee

Si quieres saber más, te recomendamos que consultes: