Tutorial Dia a Noche

Tutorial Aquí

Web 1.0, 2.0 y 3.0

INTRODUCCIÓN:

Internet es una herramienta de información, comunicación y entretenimiento que ofrece muchas posibilidades a los usuarios. Sin embargo, no siempre ha sido como lo conocemos, sino que ha sufrido una evolución a lo lardo de los años. Aquí veremos desde sus inicios con la Web 1.0, pasando por la 2.0 hasta llegar a la versión más reciente 3.0. Comencemos.
Video Resumen del artículo: http://www.youtube.com/watch?v=C9Ng64IVB5w&feature=related

¿Qué es internet?

Red de computadoras, formada a su vez por muchas redes independientes ,que se pueden comunicar unas con otras, intercambiar mensajes y, compartir información en forma de archivos. Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web (WWW, o "la Web"), hasta el punto en que es habitual la confusión entre ambos términos (WWW e Internet).

¿Qué es la WWW?

La World Wide Web consiste en una interface simple y consistente para acceder a la inmensidad de los recursos de Internet. Es la forma más actual de ofrecer información, el medio más potente. La información se ofrece en forma de páginas electrónicas.

El World Wide Web o WWW o W3 o simplemente Web, permite saltar de un lugar a otro, eligiendo el que más nos convenga. Lo más interesante es que con pocos clicks, uno se puede mover por toda Internet.

El surgimiento de la World Wide Web ha ayudado a un crecimiento considerable de Internet en la actualidad. Compañías pequeñas, empresas grandes, ayuntamientos, estados, gobiernos de distintos países, universidades, bibliotecas, están presentes en Internet.

WEB 1.0 (1991-2003)

Se refiere a un estado de la WWW, y cualquier página web diseñada con un estilo anterior a la aparición del fenómeno Web 2.0.

Se trata de un sistema basado en hipertexto, que permite clasificar información de diversos tipos, conocido como “la gran telaraña mundial.” El usuario no puede interactuar con el contenido de la página (nada de comentarios, respuestas, citas, etc), estando totalmente limitado a lo que el Webmaster sube a ésta.

Considerado como el acceso más sencillo y comprensible al universo de la información disponible en Internet, web 1.0 enlaza páginas o documentos localizados en la red sin importar su ubicación física o geográfica

La Web 1.0 fue el primer navegador de texto estático conocido antes de 2001, momento en que Internet dio un giro inesperado a un desarrollo superior.

El software utilizado con Web 1.0 requería de su instalación para su aplicación. Se utilizaba HTML (Hyper text Markup Language) e imágenes de formato GIF (normalmente en una resolución de 88 x 31), incluyendo marcos o framesets , lo que generaba mayor número de visitas al sitio.

WEB 2.0

Término asociado a aplicaciones web que facilitan el compartir información, el diseño centrado en el usuario y la colaboración en la World Wide Web. Web 2.0 permite a los usuarios interactuar y colaborar entre sí como creadores de contenido generado por usuarios en una comunidad virtual, a diferencia de sitios web donde los usuarios se limitan a la observación pasiva de los contenidos que se ha creado para ellos. Como ejemplos de la Web 2.0 están los servicios de red social, alojamiento de videos, blogs, comunidades…

Las aplicaciones web son muy potentes y sencillas de manejar enfocadas al usuario final. Su desarrollo está basado en el CMS¹ (Sistemas de Gestión de Contenidos).

En la Web 2.0 el usuario es el protagonista. Es característico por su participación y gran utilidad.

¿Qué es un CMS?₁

Sistema de Gestión de Contenidos (Content Management System), permite la creación y administración de contenidos principalmente en páginas web. Consiste en una interfaz que control a una o varias bases de datos donde aloja el contenido. El sistema permite manejar de manera independiente el contenido y el diseño.

WEB 3.0

Web 3.0 es un término que se utiliza para describir la evolución del uso y la interacción en la red hacia diferentes caminos. Ello incluye, la transformación de la red en una base de datos, un movimiento hacia hacer los contenidos accesibles por múltiples aplicaciones non-browser, el empuje de las tecnologías de inteligencia artificial, la web semántica, la Web Geoespacial, o la Web 3D. Frecuentemente es utilizado por el mercado para promocionar las mejoras respecto a la Web 2.0. El término Web 3.0 apareció por primera vez en 2006 en un artículo de Jeffrey Zeldman, crítico de la Web 2.0. Actualmente existe un debate considerable en torno a lo que significa Web 3.0, y cuál sea la definición más adecuada.

La Web semántica o Web 3.0 es la "Web de los datos". Se basa en la idea de añadir metadatos semánticos y ontológicos a la World Wide Web. Esas informaciones adicionales (que describen el contenido, el significado y la relación de los datos) se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad entre los sistemas informáticos usando "agentes inteligentes". Agentes inteligentes son programas en las computadoras que buscan información sin operadores humanos.

Con la web 3.0 se busca que los usuarios puedan conectarse desde cualquier lugar, cualquier dispositivo y a cualquier momento.

¿Cómo se caracteriza y diferencia la Web 3.0 de la Web 1.0 y de la Web 2.0?

• Web 1.0 - Personas conectándose a la Web
• Web 2.0 - Personas conectándose a personas - redes sociales, wikis, colaboración, posibilidad de compartir.
• Web 3.0 - Aplicaciones web conectándose a aplicaciones web, a fin de enriquecer la experiencia de las personas, a esto agrega: estado de conciencia del contexto en la Web Geoespacial, autonomía respecto del navegador y construcción de la Web Semántica.

Diferencias entre Web 2.0 y 3.0

Web 2.0

• Un software de escritorio transformado en una aplicación web.
• Web que respetan los estándares del XHTML.
• Separación de contenido del diseño con uso de hojas de estilo.
• Permite la Sindicación de contenidos.
• Se utiliza Ajax (Asincronical Javascript and XML).
• Implementación de Flash, Flex o Lazlo.
• Uso de Ruby on Rails para programar páginas dinámicas.
• Utilización de redes sociales al manejar usuarios y comunidades.
• Se da control total a los usuarios en el manejo de su información.
• Proveer APis o XML para que las aplicaciones puedan ser manipuladas por otros.
• Facilitar el posicionamiento con URL sencillos.

Web 3.0

• Aplicación Web con mucho AJAX.
• Podrán trabajar todas juntas.
• Serán relativamente pequeñas.
• Gestionarán datos que estarán "en la nube".
• Podrán ser ejecutadas en cualquier dispositivo (PC, teléfono móvil, etc).
• Serán muy rápidas y muy personalizables.
• Se podrán distribuir viralmente (correo electrónico, redes sociales, servicios de mensajerías, etc).

Tutorial After Effects Transformación y Mov.

Tutorial Aquí

Herramientas de Selección de Photoshop

Tutorial Herramientas de Selección

HTML5 VS Flash

Introducción:

HTML es el lenguaje de etiquetas que utiliza una Web, nace en la década de los noventa producto de Tim Berners-Lee, el hombre que inventó la Web. Se actualiza en varias versiones hasta que llegamos a la 4.01, que es el actual estándar en el año 1999. Pasa mucho tiempo hasta que HTML5 comienza a moldearse, a partir del año 2008 y en el 2009 comenzamos a ver el soporte en varios navegadores. Continua evolucionando, ya que aún no es estándar, se encuentra en Working Draft (Borrador de Trabajo), sin embargo ya podemos verlo en muchas webs importantes. Varias empresas importantes están apoyando el HTML5 e impulsando su estandarización y perfeccionamiento, entre ellas cabe destacar Google, Mozilla, Adobe y Microsoft, entre otras.

En cambio, HTML5 es un lenguaje que llega con un conjunto de tecnologías que permiten construir la nueva Web. Como decíamos anteriormente, gran parte de este estándar aún está en Draft, es decir, en borrador, pero ha tenido que salir a la luz para brindar soluciones necesarias en el mundo de la telefonía móvil y en nuevas tecnologías.

Flash llega en la década de los noventa de la mano de Macromedia, empresa absorbida por Adobe en 2005. A diferencia de HTML, Flash no es un lenguaje de libre comercio, sino que es una aplicación de pago que funciona como un entorno de desarrollo multimedia, muy famosa sobre todo entre diseñadores. Flash crea películas en formato SWF que se reproducen en un navegador con el plugin adecuado. Su éxito se basó en la popularidad de este plugin, el reproductor de Flash, instalado en la mayoría de los navegadores de escritorio. Con la expansión de las plataformas móviles y la negativa de algunas empresas, con Apple a la cabeza, de incluir este reproductor entre sus dispositivos, Flash se encontró en una encrucijada difícil de salir ¿el desenlace? Hacia finales de 2011, en el mes de Noviembre, Adobe anunció que no habría nuevas versiones de Flash para móviles, y que pondrían sus energías y gran parte de su gente a trabajar en soluciones para HTML5. También se anunció que se redefinía el enfoque de Flash. Probablemente esta ha sido una de las grandes noticias para el mundo del desarrollo Web en el 2011 y aún hoy sigue siendo un tema controvertido.
Un aspecto que vale resaltar en esta historia es que Flash no está muerto aún, simplemente se ha redefinido su aplicación para enfocarse en juegos y algunas necesidades particulares, pero sí deja de tener peso en lo que a desarrollo Web se refiere.

¿Porqué es mejor HTML5? Simplemente porque es una instancia superadora a HTML4; porque llega de la mano de CSS3, una evolución notable de las hojas de estilo que conocíamos y porque revaloriza el papel de JavaScript en la Web, como el lenguaje que “sabe hablar” con las nuevas APIs que llegan con HTML5.
¿Porqué HTML5 puede reemplazar a Flash en nuestros desarrollos Web? Porque ofrece un soporte nativo para los nuevos navegadores, tanto mobile como desktop, y porque también existen opciones para que muchas de sus funciones tengan compatibilidad crossbrowser con navegadores antiguos. Claro que no todas las características pueden emularse con la misma fidelidad y performance, pero también es cierto que el IE6 countdown ya marca que Intenet Explorer 6 en Argentina solo tiene el 1,6% de la cuota del mercado, en Venezuela 2,5 y en Estados Unidos menos del 1%. La renovación de IE7 e IE8 también llegará y el problema de compatibilidad con versiones anteriores cada vez será menor.

------------------------------------

Concretamente, siete ejemplos demuestran la potencia del HTML5: un visor de vídeos que nos permite “jugar” con él, un editor de fuentes, una galería de imágenes y ejemplos de las posibilidades respecto a transiciones de imágenes, vistas de 360 grados y audio. Por supuesto todo esto sin necesidad alguna de instalar complementos adicionales y con unos consumos más que aceptables.

Algunos cambios más importantes del HTML5 son:

Audio y Video

La reproducción de video y audio, que se lleva a cabo mediante etiquetas como en los siguientes ejemplos:

Video:

<video id="video" width="640" height="480" volume=".7" controls autoplay>

  <source src="video.ogg" type="video/ogg"> </source>

</video>

y, en el caso del audio:

<audio>

  <source src="music.oga" type="audio/ogg">

</audio>

Nueva estructura

Teniendo en cuenta la utilización que dan a algunos elementos div con identificadores muy comunes, los desarrolladores crearon una nueva estructura de elementos que cambiarán la manera de elaborar el contenido (sobre todo de blogs) y la manera en que los buscadores lo analizan.
Se trata de las etiquetas:

article : Una entrada independiente en un blog, sitio o revista.

footer : El final de la página, donde se incluyen los modos de contacto, etc.

header : No el elemento head, sino la cabecera de una determinada página.

nav : Una colección de vínculos a otros sitios o páginas.

section : Una sección determinada que incluye su propio encabezamiento.

Mark, Aside y Time

Mark se utiliza para dar importancia a un texto en concreto:

<p>La <mark>etiqueta mark</mark> es utilizada para llamar la atención.</p>

Quizás no hayan reinventado la rueda con esta etiqueta, pero con <aside> podremos definir un bloque que representa una nota o explicación, relacionado con alguna otra parte del contenido.
Por otro lado, han creado una etiqueta que mejora el manejo de fechas y horas (esto se hacía en HTML4 mediante la etiqueta abbr):

<time datetime="2010-03-29">Marzo</time>.

<time>09:00</time>

Mejoras en <input type…>

Se han añadido nuevos tipos de ingreso de texto, ahora se puede especificar si se trata de una url o un email, un entero, una fecha, etc. Algunos ejemplos:

<input type="email">

<input type="url">

<input list="title-list"> 

<datalist id="title-list">

  <option value="...">

</datalist>

Además, la validación de los datos ingresados también será más sencilla gracias a otras nuevas etiquetas.

Cuadro de diálogo

Con la etiqueta <dialog> podemos incluir cualquier tipo de diálogo.

<dialog>

 <dt> Usuario 1:

 <dd> Hola!

 <dt> Usuario 2:

 <dd> Hola! :)

</dialog>

Barra de progreso, canvas y puntuación

Con la etiqueta <progress> podremos incluir el progreso de una tarea que se esté ejecutando, mas trabajando en conjunto con JavaScript podremos incluir también una barra de progreso visual.

<progress>

  <span id="objprogress">76</span>%

</progress>

y con <meter> insertamos un valor fraccional de una medida escalar, que seguramente usaremos junto a JavaScript para incluir de manera muy simple el típico gráfico de una a cinco estrellas.
Con <canvas>, implementado por primera vez por Apple para sus widgets, podremos dibujar gráficos dinámicos e interactivos.
Finalmente, la etiqueta <device> permitirá al cliente acceder a varios dispositivos, como puede ser una webcam, en tanto con <embed> podemos determinar contenido embebido, como por ejemplo un plug-in.