martes, 17 de noviembre de 2015

Modulo 2 - Listas


Modulo 2 - HTML Conceptos Básicos

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.


HTML- Estructura y Contenido
Tutorial
w3schools.com


El lenguaje HTML describe
La estructura y el contenido de una página web
orrecto! HTML sólo define la estructura y el contenido de una página web, la presentación de una página web se define con otra tecnología llamada Cascading Style Sheets (CSS).

Quién desarrolla el lenguaje HTML?
W3C
El lenguaje HTML es desarrollado por el World Wide Web Consortium (W3C) un organismo internacional en el que participan empresas como Apple y Microsoft.

En HTML, ¿la etiqueta final o de cierre puede llevar atributos?
No

¿Se puede ver el código HTML de cualquier página publicada en Internet?
Si
El código HTML de una página no se puede ocultar o encriptar.

Editor de texto
Notepad++
https://notepad-plus-plus.org/


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


No son obligatorios pero es lo mejor

Modulo 2 - 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

1990
Tim Berners lee
HTML
URL
HTTP

SGML=XML

Tim Berners-lee invento las etiquetas href

HTML+ (1993)
Con tablas y formularios
navegador Arena que soportaba este lenguaje

1994 W3C

Nov 1995 HTML 2.0

1997 HTML 3.2

1999 HTML 4.01

2000 XHTML 1.0

2005 HTML 5



Quién es considerado el padre del lenguaje HTML
Tim Berners-Lee
Tim Berners-Lee desarrolló a principios de los años noventa las tres tecnologías que son básicas para el funcionamiento de la Web: HTML, URL y HTTP

A partir de qué se desarrolló el lenguaje HTML
SGML
Standard Generalized Markup Language (SGML) es la tecnología en la que se basó Tim Berners-Lee para desarrollar HTML

Qué elemento no incluía la primera versión de HTML?
blink.
Esta etiqueta fue introducida en el navegador Netscape Navigator para tuviera una característica adicional frente a Microsoft Internet Explorer

egún el W3C, ¿cuándo se espera que HTML5 esté terminado y sea una recomendación oficial?
2014
Y así ha sido, el 28 de octubre de 2014 se publicó "HTML5 - A vocabulary and associated APIs for HTML and XHTML"

Qué significa HTML?
 HyperText Markup Language.


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.

Modulo 2 - 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

Modulo 2 - Programas para Iniciar el Diseño de la página


Antes de crear la primera página web de un sitio web deberías tener claro a dónde quieres llegar, lo que quieres construir. El primer paso es que desarrolles los prototipos de tu sitio web y de tus páginas web.

Los prototipos los puedes hacer a mano, con lápiz y papel. O también puedes usar un programa específico para crear prototipos.
Existen multitud de herramientas en la Web que puedes emplear para crear todo tipo de diagramas, incluidos los diferentes tipos de prototipos que se te han explicado (wireframes, mockups).
Algunas son gratuitas, como Pencil Project:
http://pencil.evolus.vn/

Otras son de pago, como Balsamiq:

o Gliffy:

viernes, 13 de noviembre de 2015

URLs

En el vídeo Las URLs se te propone como ejercicio que aprendas por tí mismo qué son las URLs amigables, también llamadas URLs semánticas y a veces URLs bonitas.

¿No sabes por dónde empezar a buscar? Consulta el artículo de la Wikipedia URL semántica y podrás leer:

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.

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


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.
¿Y qué pasa en tu país? Realiza la actividad que te proponemos a continuación


jueves, 12 de noviembre de 2015

Modulo 2 - 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



El desarrollo de una aplicación o sitio web se divide en:
parte cliente y servidor. Las aplicaciones web se desarrollan en base a la arquitectura cliente-servidor, un modelo de aplicación distribuida en el que las tareas se reparten entre los proveedores de recursos o servicios, llamados servidores, y los demandantes, llamados clientes.

El desarrollo de una aplicación o sitio web se puede dividir en:
Contacto inicial, planificación, contenido, diseño, desarrollo y lanzamiento

Modulo 2 - Como se escribe una pagina web

En el módulo anterior has aprendido a crear páginas web mediante Blogger, un sistema gestor de contenidos, un programa específico para la creación de páginas web. Pero, ¿realmente tú estás creando la página web, o la está creando el programa en base a las acciones que realizas en el programa?
Cuando creas una página web con Blogger o algún programa similar, el programa te impone una serie de limitaciones: estás limitado a hacer aquello para lo que el programa ha sido programado. ¿No te gustaría tener un control total sobre lo que puedes hacer?
En este módulo vas a comenzar a aprender a hacer páginas web por ti mismo, sin ayuda de nada. Para lograrlo debes aprender HTML (HyperText Markup Language), el lenguaje con el que se escriben las páginas web.
Aprender HTML es muy parecido a aprender un idioma. Cuando te propones aprender un idioma nuevo, no esperas aprenderlo en 21 días, en tres meses o en un año: lo normal es que tardes varios años. HTML no es tan difícil como un idioma, no te llevará toda la vida aprenderlo, pero sí que necesitarás meses o años.
Por otro lado, cuando te propones aprender un idioma nuevo, no empiezas aprendiendo todas las palabras del diccionario: vas aprendiendo palabras nuevas poco a poco. Con HTML ocurre lo mismo: no intentes aprender todo el lenguaje a la vez, tienes que aprenderlo poco a poco. En este módulo y en los siguientes irás aprendiendo poco a poco las principales características de HTML.
Nota: Te hemos dicho HTML no es tan difícil como un idioma, no te llevará toda la vida aprenderlo, pero sí que necesitarás meses o años. En realidad, sí que te va a llevar toda la vida aprenderlo, porque el lenguaje HTML está en constante evolución. Los idiomas también evoluciona, ¡pero HTML lo hace mucho más rápido!