Nuevas tecnologias by darwin

aaa aa

Enfoque Sistémico

Enfoque Sistémico Enfoque-Sistémico-Ing.blogspot.com

Las Nuevas Técnologias Para El Desarrollo De Páginas Web

Contenido INTRODUCCIÓN Prólogo…….……………………………………………………………………………………………..…………...4 Novedades De HTML5…………………………………………………………………………………….7 Novedades De CSS3 ……………..………………………………………………………………12 Novedades De JavaScript……………………………………………………………20

Aaaaa

Enfoque Sistémico INTRODUCCIÓN Html5 y css3 son las dos nuevas tecnologías que revolucionaran la manera en que ves la web, HTML5 también es un término de marketing que es utilizado para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de JavaScript. La versión anterior y más usada de HTML, el HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. El uso frecuente de la tecnología JavaScript ha ayudado a mejorar esto, gracias a FrameWorks (Marco de Trabajo) como jQuery que constituye el nuevo estándar en el desarrollo de páginas web. Flash en especial ha sido usado en reemplazo de HTML para desarrollar Web Apps que superaran las habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios, animaciones, componentes de interfaz complejos, entre e otras muchas cosas. A continuación mencionaremos las novedades de html5, en estructura, semántica y en aplicaciones multimedia, ya que podemos importar directamente videos, audios y dibujar vectorialmente con el apoyo de JavaScript, también mencionaremos las novedades de css3 con el cual podemos hacer una gran cantidad de efectos y animaciones que se puede conseguir al combinar estas dos nuevas tecnologías con código php y sin la necesidad de plugins externos.

Enfoque Sistémico PRÓLOGO ALGO DE HISTORIA HTML un código muy simple basado en texto. Los diseñadores de internet eran muy conscientes en eso entonces de que sus clientes tenían conexiones lentas y carecían de paciencia. Esperar a que se formara muy lentamente una simple imagen en blanco y negro en la pantalla era suficiente para sacar de quicio a cualquiera. Esto comenzó a cambiar cuando las computadoras se tomaron más veloces y los proveedores de contenido comenzaron a utilizar métodos más sofisticados para codificar contenido multimedia. EL Macromedia Flash, que ahora paso a ser un producto de Adobe, marco una gran diferencia cuando apareció a mediados de los 90 Así, las animaciones , las secuencias de video y los gráficos se volvieron más elaborados sin embargo, desde su invención a principios de los 90, el HTML no servía para alojar videos. Y es precisamente por esta razón que el código HTML5 está siendo recibido con tanta algarabía, particularmente por las empresas: esta versión puede llevar a cabo cualquier tipo de tarea dinámica y trucos visuales. HTML5 Permite a los diseñadores de la web crear gráficos avanzados, tipografía, animaciones y transiciones sin depender de terceros solo 20 años después de que diera sus primeros pasos tentativos en el mundo, y las conexiones de internet se han fenómeno revolucionario. Casi 2.000 millones de personas están conectadas en este momento, y las conexiones de internet se han convertido en parte vital del comercio internacional, de las comunicaciones e incluso de la política. A pesar del rápido crecimiento de la red, la tecnología que la apuntala ha cambiado sorpresivamente poco: en muchos casos sigue siendo más o menos la misma que utilizo sir Tim Berners-lee cuando creo las primeras páginas en su laboratorio en suiza en 1990. Sin embargo, eso podría estar a punto de cambiar gracias a una tecnología llamada HTMl5 que promete revolucionar la red completamente. Respaldada por algunas de las mayores compañías de internet, se trata de una actualización, esperada por muchos tiempos, del lenguaje HiperTextMarkup (HTML por sus siglas en ingles), el diccionario básico utilizado por casi todas las páginas de web. Creado por Sir Tim en 1991. HTML le dice a un navegador de la web todo lo que necesita saber: lo que hace la página, a donde va y cuál es su apariencia.

Enfoque Sistémico Las grandes empresas como Apple, Google , Microsoft y Adobe, todos como miembros del consorcio W3C que respalda a HTML5, ya han hecho sus apuestas en cuanto a HTML5 que es la nueva tecnología que revolucionara la web. Quizás ahora resulte difícil de imaginar pero los sitios creados originalmente en Word Wide Web. O más conocidas como las tres V dobles “la web “se escribían en lenguaje HTML que no es propiamente un lenguaje de programación, sino un lenguaje de marcado de hipertexto, esto quiere decir que nos permite poner los elementos en pantalla, pero no para ponerlos en funcionamiento. No obstante HTML es el lenguaje esencial de la web, ya que permite describir la estructura del contenido de una página de internet, realizar páginas web mucho más ricas, complejas, interactivas e interesantes, de las que se hacen hoy en día. Esto comenzó a cambiar una vez que las computadoras se hicieron mucho más rápidas, y los proveedores comenzaron a utilizar métodos más sofisticados para codificar el contenido en multimedia como gráficos, animaciones y secuencias de video que eran creadas con flash debido a que en ese entonces HTML no servía para alojar videos, y por lo tanto se tenía que recurrir a ayuda de terceros como es el caso adobe flash o Quick Time, que ahora gracias a las combinaciones de html5 y css3 junto con JavaScript representa un dinamismo a los sitios web pero… ¿que se significan esas siglas? …a continuación daré una pequeña traducción acerca de lo mencionado. HTML: es el lenguaje universal donde se construyen los sitios web, en una casa seria la estructura desde los cimientos hasta el tejado. Este código no se revisaba hacía más de 10 años, por eso entre otros motivos, la mayor parte de páginas web eran muy similares a la versión de hace una década, por lo que se buscaban soluciones como Flash o Quick Time, y tenían incorporados estos programas dentro de las páginas de internet para dotarlas de interactividad, pero casi ninguna de estas soluciones eran de código abierto como HTML y la mayor parte daban multitud de problemas a los navegadores que se cuelgan si el código no está correctamente. CSS: es un lenguaje presentacional, que se utiliza para darle forma a los sitios, en una casa seria la pintura y los muebles, ósea la finalización. Mientras HTML se encarga de poner la comida en la mesa, CSS se encarga de presentar tal contenido, por lo cual CSS es un lenguaje complementario a HTML, que presentaba casi 12 años de no ser revisado a fondo, por eso presentaba limitaciones como: que no

Enfoque Sistémico permitía colocar el tipo de letra deseado o redondear bordes y crear columnas esto obligaba a que los diseñadores buscaran nuevas estrategias para poder darle a un sitio web el aspecto deseado. JavaScript: es un lenguaje dinámico que le permite al usuario hacer cambios en los sitios web, esto quiere decir que nos permite realizar programas que se cargan en el navegador, ósea que necesitamos recargarlo cada vez que queramos modificar algo. En una casa seria la disposición de los muebles, la desventaja de este idioma es que cada navegador podía interpretarlo de manera distinta, pero aun así habían soluciones que lo facilitaban, ya que representa un dinamismo para los sitios web. Por eso html5 css3 y JavaStript permitirán dotar los sitios web de posibilidades casi infinitas, por no entrar en detalles técnicos decir que se podrá por ejemplo arrastras elementos de un sitio a otro con gran facilidad, incrustar cualquier tipo de letra a una página, crear efectos hasta ahora imposibles sin usar tecnologías cerradas como rotar una página o geo localizar al usuario sin la necesidad de una aplicación intermedia o plugins externos debido a que HTML5 es por ahora la última versión del lenguaje demarcado HTML que se comenzó a trabajar en 2007 y que a finales del 2014 este totalmente desarrollado, por lo tanto el HTML5 nos permitirá eliminar aquellos programas que tenían que incorporarse dentro de la página, por lo que ya no son necesarias, debido al que el lenguaje crea gráficos avanzados, tipografías animaciones y transiciones debido a la implementación de nuevas etiquetas que le darán semántica al lenguaje, con esto HTML5 promete revolucionar la red completamente se trata de una actualización esperada por mucho tiempo HTML5 le dice al navegador de la web todo lo que necesitamos saber, lo que hace la página, adonde va y cuál es su apariencia.

Enfoque SistĂŠmico

Enfoque Sistémico NUEVAS ETIQUETAS DE HTML5 La declaración DOCTYPE es la primera instrucción que viene en una página web, una de las principales diferencias de HTML5 con respecto de HTML4, es que ya no existen tres tipos de DOCTYPE, ahora solo existe uno mucho más fácil que la versión anteriormente en html4. <! DOCTYPE HTML> Lo que no ha cambiado con respecto a HTML4 es la estructura básica del documento, a continuación observaremos dos de las nuevas etiquetas estructurales de HTML5, el <header> que no es lo mismo que el <head> Mientras que en el <head> se coloca toda la información que se envía al navegador, en <header> se va a colocar aquella información que deba estar en la cabecera principal de la página, que en la mayoría de ocasiones se trata del Título de la Web o el Logotipo y el <Footer> donde se suelen colocar la información de la página, como la fecha, año de publicación.

La etiqueta <nav> nos permite indicar al navegador que parte de la página web son menús de navegación, podemos colocar esta etiqueta en cualquier parte de la página, sin embargo es bastante común colocarla dentro de la cabecera, ósea contenida dentro de la etiqueta <header> y dentro de esta etiqueta <nav> se coloca un método de navegación, puede ser crear una lista no ordenada “enlaces de lista”.

Enfoque Sistémico Otras de las etiquetas estructurales dentro de HTML5 son: <section> <article>, y <aside>. <section> nos sirve para introducir secciones dentro de una página web, por ejemplo el contenido de la web, y dentro de la sección se constituyen las etiquetas <article> que constituyen artículos, para contenido que esté relacionado con la propia web, pero de una manera tangencial, ósea que haga referencia a elementos circundantes de la web, colocamos una etiqueta llamada <aside> y dentro colocaremos la estructura del contenido tangencial, como todas aquellas cosas que representen información importante para el contenido de la web pero que no sea totalmente relevantes con la página, por tanto a continuación mostraremos la

estructura de un documento web en HTML5. La etiqueta <time> nos permite identificar tiempos, ya sea tiempo en calendario o tiempo horario dentro del código HTML. Si colocamos ‘Hoy es 2014-07-06’, el navegado o el indexador no es capaz de identificar que lo que estoy informando es una fecha, y lo tomara como números sin

Enfoque Sistémico formato, por eso con la etiqueta <time> le indicamos al explorador sin transferencia visual que lo transferido dentro de la etiqueta corresponde a una fecha -

Hoy es <time>2014-07-06</time>

Otra manera de introducir una fecha es mediante un parámetro, si colocamos el navegador ‘Hoy voy a ir a cine’ no va a reconocer que Hoy es una fecha, por eso introducimos el atributo ‘datetime’ y entre comillas colocamos una fecha valida. -

time datetime= “2014-07-06”>Hoy</time> voy a ir al cine.

HTML5 nos da la posibilidad de insertar videos directamente en el código HTML, para introducir un video únicamente debemos utilizar la etiqueta <video> segido por el ‘src’ y la fuente del video, y añadimos controls = “controls” para que nos muestre los controles del video. -

En HTML5 tambien podemos introducir audio dirctamente, para ello únicamente debemos utilizar las etiquetas <audio> dentro de la etiqueta de apertura introduciremos parámetros para la reproducción, al igual que el ‘src’ y la fuente del audio, y añadimos controls = “controls” para que nos muestre los controles de audio. -

Enfoque Sistémico LAS ETIQUETAS MÁS IMPORTANTES DE HTML5 Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente, las nuevas etiquetas son: <video> Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs. En un futuro capítulo hablamos un poco del drama que este tag está generando. <audio> Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador. <input *> Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la capacidad de insertar cajas tipo “email” que se auto validan, calendarios tipo “date”, sliders, números, entre otras. <canvas> Esta etiqueta nos permite dibujar usando operaciones con JavaScript directamente en una área rectangular dentro de una página HTML, esta área de dibujo vectorial y de Bitmaps es un API de dibujo entero para JavaScript. <svg> HTML5 nos permite insertar graficos vectoriales directamente en el formato SVG (Scalable Vector Graphics), derivado de XML Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash.

Enfoque SistĂŠmico

Enfoque Sistémico NUEVAS PROPIEDADES DE CSS3 Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder seguir varias técnicas (bordes redondeados, sombra en el texto, sombra en las cajas, etc.) sin necesidad de usar un editor gráfico. El CSS sirve para definir la estética de un sitio web en un documento externo debido a que se obtiene un mayor control de la presentación del sitio al poder tener todo el código CSS reunido en uno, lo que facilita su modificación (colores, tamaños de las fuentes, tamaños de elemento) y esas reglas permiten que modificando ese documento (Pueden mostrarse distintas hojas de estilo según el dispositivo que estemos utilizando) podamos cambiar la estética entera de un sitio web, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML que lo componen.

Sus Nuevas Propiedades: Atributo gradiente: Posibilidad de definir el un gradiente de color en el borde de los elementos con CSS, en un atributo no estándar de Firefox. Bordes redondeados: Las características de CSS 3 incluyen bordes redondeados, a través del atributo border-radius, que define la curvatura que debe tener el borde del elemento. Múltiples imágenes de fondo con CSS: Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3. Colores RGBA: Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de Estilo en Cascada donde se añade el canal Alfa (Opacidad). Word-Wrap: Una propiedad de CSS 3 que sirve para romper las palabras que son demasiado largas y no caben enteras por la anchura de una caja. Bordes con imágenes: El atributo border-image y varios otros de CSS 3 harán posible la utilización de imágenes como bordes de los elementos de la página, sin código HTML especial, simplemente con hojas de estilo.

Enfoque Sistémico

Sombras con box-shadow: Crear sombras con el atributo box-shadow. Por fin podremos aplicar sombras a los elementos de la página solo con la implementación de un atributo, sin usar imágenes, JavaScript ni nada extra. Resplandor exterior: Cómo realizar un elemento que tenga un resplandor exterior con CSS3 y la propiedad box-shadow. Propiedad background-origin: La propiedad background-origin permite decidir la posición de la imagen de fondo con respecto al borde, padding o el contenido del elemento. Introducción a @font-face: Fuentes con Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web. Sombras en el texto con text-shadow: Cómo aplicar sombras y otros efectos en los textos con CSS y el atributo text-shadow. text-shadow: Efectos de sombra en texto, comparables a photoshop. Bastante impresionante. Text-overflow: Cuando el texto desborde, se ponen automáticamente tres puntos suspensivos. Text-Wrap: Rompe palabras largas que no caben en una línea.

EJEMPLOS DE LAS PROPIEDADES MÁS IMPORTANTES DE CSS3

border-radius. box-shadow. border-image. gradientes. background-origin. Tranciciones.

Enfoque SistĂŠmico border-radius: Ahora es posible introducir bordes redondeados directamente en el cĂłdigo CSS, lo cual nos ahorra recortar y generar imĂĄgenes, border-radius redondea los bordes de las esquinas de un elemento.

Observaremos que ahora tenemos un texto dentro de un cuadro redondeado en nuestros <div> con CSS3

box-shadow: Ahora es posible introducir sombras proyectadas desde las cajas de texto, crea efecto de profundidad a ciertos elementos de una web, y podemos usarlas para resaltar contenido.

Enfoque Sistémico Comprobamos que tenemos una sombra gris proyectada desde la caja

border-image: CSS3 nos permite redimensionar las imágenes de fondo, también nos permite crear el tamaño en función de porcentaje border-image sirve para poner una imagen como borde, y a la vez podemos personalizar cada uno de los bordes.

especificamos el tamaño que queramos, y cuantas veces queramos que se repita.

Enfoque SistĂŠmico Gradientes: Es un atributo que se crea entre dos bordes, pueden ser lineales o radiales, nos libran de colocar imĂĄgenes que ocupa gran tamaĂąo.

El gradiente presenta tres puntos, uno que va de 0 a 100 de color blanco, otro punto intermedio de color verde que representa el 50% y un punto negro que va de 100 a 0 que representan un porcentaje en la caja.

Enfoque Sistémico background-origin: Esta propiedad nos permite identificar cual es el origen dentro del modelo de caja de la imagen de fondo.

padding-box: propiedades de anchura y altura que incluyen el tamaño de relleno, y no incluyen el borde o margen. border-box: la imagen se expande hacía en borde de la caja. content-box: establece cual es el origen de la imagen.

Tipografia: css implementa una característica como la capacidad de utilizar tipografías personalizadas.

Enfoque SistĂŠmico Observamos el texto que pone el navegador por defecto y el que colocamos mediante una fuente editable.

Transiciones: crea animaciones fĂĄcilmente, se puede animar una sola propiedades, o animarse varias propiedades a la vez.

Obtenemos un cuadrado de 100px, pero al pasar el cursor sobre este, cambiara su anchura de 100px a 300px en el transcurso de 2 segundos el cual le hemos establecido.

Enfoque SistĂŠmico

Enfoque Sistémico CAPACIDADES DE JavaScript Javascript, el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha recibido muchas habilidades nuevas. Esta es una lista de las más importantes.

Web Storage Una cookie es la forma más casposa de guardar información en el lado del cliente. También es la única forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio. Muy poco. Pero al mismo tiempo, todo el contenido de las cookies va pegado a cualquier petición HTTP que hagas al servidor. Lo que significa que por cada vez que el usuario recarga la página o baja una imagen, tiene que subir los KB que pesan todas las cookies que le hemos dado.

Las cookies apestan Web Storage soluciona este problema. Son variables que puedes guardar en el disco del usuario, con soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MB y no sólo texto. Cualquier tipo de datos cabe en un Storage.

Web SQL Este me gustaba. Es una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer 9 declaró que no implementará Web SQL1 y la realidad es que Web Storage es más que suficiente para la mayoría de usos. Así que nada, esto por ahora no sirve.

Web Workers ¿Ustedes sabían que Javascript sólo puede hacer una cosa al tiempo? Gran parte de la razón por la que Wave falló y las web apps son simples es porque la multitarea es imposible. Web Workers soluciona eso. Web Workers permite tener multiples JS

Enfoque Sistémico corriendo en paralelo en una misma página. Haciendo tareas complejas más veloces gracias al multithreading.

Web Sockets Igual que XMLSockets en Actionscript, Web Sockets permite hacer aplicaciones multiusuario en tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de Web Sockets, es posible usar implementaciones multiuser en Javascript como PubSubHubBub1.

Arrastrar y soltar Vete a gmail, crea un email e intenta arrastrar un archivo del explorador de archivos al mail. Verás que es posible adjuntarlo con sólo arrastrarlo. El gesto de arrastrar y soltar ahora es posible gracias a HTML5. Puedes traer trozos de datos o archivos enteros.

Geolocalización Mi favorita. El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la latitud y longitud de tus usuarios. Obviamente, ellos tienen que dar permiso. Lo mejor es que funciona en cualquier PC, no sólo en teléfonos. Hay varias formas de geolocalización, por wifi, por GSM… etc, HTML5 utiliza las diferentes posibilidades para proporcionar nuestra ubicación a través del navegador, por wifi, el error máximo es 100 metros, por GSM, 500. La localización por wifi se produce por la triangulación de los puntos donde se encuentran los routers que tenemos a nuestro alrededor, seguro que hemos visto alguna vez al coche de Google, ¿verdad?, pues también lleva una antena wifi escaneando los puntos de acceso y registrando su ubicación.

La API de geolocalización la podemos acceder a través del objeto navigator de la siguiente forma.

Enfoque Sist茅mico 1. | navigator.geolocation

Debemos de tener dos consideraciones antes de trabajar con esta API:

1. Comprobar si el navegador del usuario tiene implementada esta API; y esto es para evitar errores de ejecuci贸n del script; lo comprobaremos de la siguiente forma:

O un equivalente del mismo ser铆a:

2. el usuario puede denegar o permitir el acceso a su ubicaci贸n; por lo tanto esta funcionalidad no debe de ser obligatoria para el usuario; solo para mejorar su experiencia final.

Enfoque Sistémico (1 + 2) en ambos casos debemos de realizar las validaciones necesarias para evitar problemas en la ejecución; para validar el segundo caso (denegación de la solicitud por parte del usuario) la veremos más adelante.

¿Cómo obtener la ubicación del usuario?

Podemos acceder a la ubicación del usuario si y sólo si el usuario nos permitió el acceso a su ubicación y el navegador soporta dicha característica; empleando el método getCurrentPosition().

Con el método getCurrentPosition() podemos recuperar la ubicación geográfica actual del usuario; la localización es expresada en coordenadas geográficas retornada en un objeto Position.

Sintaxis del método getCurrentPosition()

1. | getCurrentPosition(MostrarLocalizacion, ManejadorErrores, opciones);

Parámetros del método getCurrentPosition()

MostrarLocalizacion: El método que recibirá la información de la localización del usuario; y esto mediante un objeto Position.

ManejadorErrores: (opcional) El método que recibirá el objeto PositionError si ocurre un error en la localización del usuario. El objeto PositionError puede retornar:

Enfoque Sistémico

PositionError.PERMISSION_DENIED: El usuario no permitió la localización.

PositionError.POSITION_UNAVAILABLE: No es posible obtener la posición del usuario.

PositionError.TIMEOUT: La operación se le acabó el tiempo y no puede continuar.

opciones: (opcional) Especifica un conjunto de opciones para recuperar la data:

frequency: Con qué frecuencia recuperaremos la posición del usuario dado en milisegundos (por defecto 10000)

enableHighAccuracy: Es un booleano que indica que la aplicación intentará ofrecer la estimación de localización más precisa posible.

Por defecto es falso (false); hay que tener en cuenta que si activamos este modo (true) puede incrementar el tiempo de respuesta.

timeout: El tiempo que dejaras pasar en milisegundos para que el método geolocation.getCurrentPosition o geolocation.watchPosition nos dé una respuesta; dicho tiempo es dado en milisegundos.

maximumAge: Especifica el tiempo transcurrido en milisegundos para la información de ubicación almacenada en caché.

Enfoque Sistémico Primer ejemplo: Para utilizar la función getCurrentPosition() podríamos hacer lo siguiente:

Como podemos apreciar primero verificamos si el API de geolocalización está disponible para luego solicitar la ubicación del usuario con el método getCurrentPosition(); pasándole como parámetro la función que recibirá el objeto Position llamada Mostrar Localización.

Segundo ejemplo: Ahora veremos un ejemplo un poco más elaborado; en donde tipificamos los errores que puedan ocurrir, veamos:

Enfoque SistĂŠmico

Con este artĂculo podemos ver una de las muchas funcionalidades que nos brinda HTML5 para el desarrollo de aplicaciones web para proveer mejores experiencias para el usuario final.