Haciendo Web » JavaScript http://www.haciendoweb.cult.cu Mejorando la Intranet Cubana Tue, 21 May 2013 16:05:27 +0000 es-ES hourly 1 http://wordpress.org/?v=3.4.2 AngularJS Y El Futuro Del Desarrollo Web http://www.haciendoweb.cult.cu/angularjs-y-el-futuro-del-desarrollo-web/ http://www.haciendoweb.cult.cu/angularjs-y-el-futuro-del-desarrollo-web/#comments Mon, 15 Apr 2013 18:42:41 +0000 Jorge Enrique Dominguez http://www.haciendoweb.cult.cu/?p=11808 Estamos desarrollando aplicaciones web con arquitecturas concebidas hace más de 10 años.  En el mudo actual con todo tipo de dispositivos, tamaños de pantallas, formas de uso (táctil, no táctil, offline, online…) quizás no sea la forma más adecuada.

El problema

Hace 2 años publiqué un post en el que hablaba sobre la necesidad de cambiar el modelo cliente/servidor en el desarrollo web, donde toda la lógica de la aplicación reside en el servidor, para tender hacia un modelo donde la lógica reside en el cliente y permite el uso de aplicaciones web incluso cuando no hay conexión a Internet.

Con el auge de los dispositivos móviles el uso de aplicaciones web cuando no hay conexión se convierte en algo necesario.

Comentaba en dicho post que hoy por hoy en los navegadores web solo se puede programar en Javascript y por lo tanto si vamos a desarrollar nuestra aplicación en Javascript para que esté disponible en el lado del cliente, también parece lógico desarrollar en dicho lenguaje en el lado del servidor para estandarizar y aprovechar al máximo nuestro conocimiento del lenguaje.

La solución

Hasta ahora no había visto ninguna tecnología que permitiese realizar este tipo de desarrollo de forma eficiente y aunque existen muchos frameworks de desarrollo web en Javascript casi todos se basan en el modelo actual cliente/servidor.

AngularJS cambia este tipo de concepto y es un framework que permite dotar de un mayor peso al cliente web y además lo hace de una forma eficiente y sencilla.

Como principal novedad aporta una extensión del leguaje HTML que le permite manipular datos.

Hasta ahora HTML permitia un marcado del tipo de datos a representar, su contenido y el aspecto.  AngularJS añade el tratamiento de datos a esta ecuación y el navegador ya dispone de información suficiente como para saber como mostrar todos los registros de un array o filtrar los registros para mostrar un subconjunto de ellos, por poner 2 ejemplos.

 

Otra característica relevante es que la conexión entre los datos en el navegador y nuestro modelo se realiza de forma automática y bidireccional, no tenemos que actualizar de forma manual nada, angularjs actualizará automáticamente nuestra vista cuando se produzcan cambios en el modelo y viceversa.  En el modelo actual de desarrollo cualquier cambio en el navegador del cliente implica enviar esos datos al modelo y repintar de nuevo la parte actualizada para reflejar esos cambios.  Todo ese trabajo se realiza automáticamente en AngularJS sin necesidad de repintar ni actualizar manualmente.

AngularJS está desarrollado por Google lo que si bien no le garantiza el éxito si que garantiza un producto de calidad, con recursos y soporte.  Además quien impide a Google incluir en su navegador Chrome todas estas funcionalidades de forma nativa.

Resumen

Los grandes avances en el desarrollo de aplicaciones web dan más y más peso a Javascript como lenguaje de desarrollo.  No voy a entrar en el debate, estéril por otra parte, de si Javascript es un lenguaje adecuado y bien construido.  Es el lenguaje que entienden todos los navegadores y por lo tanto la única alternativa para desarrollar en el lado del cliente.

AngularJS pone a nuestro alcance la posibilidad de desarrollar aplicaciones web que proporcionan una mejor experiencia a quienes la usan, que debe ser la finalidad de todo desarrollador web.  En mi opinión es hacía este tipo de desarrollos hacía donde avanzaremos en un futuro cercano.

78.4 kB AngularJS (247)

fuente: http://www.alvareznavarro.es/2012/10/angularjs-y-el-futuro-del-desarrollo-web/

]]> http://www.haciendoweb.cult.cu/angularjs-y-el-futuro-del-desarrollo-web/feed/ 3 Imágenes Rotatorias en el Blog http://www.haciendoweb.cult.cu/imagenes-rotatorias-en-el-blog/ http://www.haciendoweb.cult.cu/imagenes-rotatorias-en-el-blog/#comments Thu, 31 Jan 2013 19:29:08 +0000 Odecte Rodríguez Madruga http://www.haciendoweb.cult.cu/?p=11556 1. Introducción:
El presente tutorial les permitira añadir imágenes que cambian automáticamente en el blog.

2. Javascript:
Vamos a:

Pa -> Multiblog -> Módulos -> Personalizado -> Modificar

Dentro del contenido pegaremos lo siguiente:

    <script language="Javascript" type="text/javascript">
        mis_imagenes = new Array("IMAGEN1","IMAGEN2","IMAGEN3","IMAGEN4")
        mi_imagen = 0
        imgCt = mis_imagenes.length
        function rotacion() {
        if (document.images) {
        mi_imagen++
        if (mi_imagen == imgCt) {

        mi_imagen = 0
        }
        document.anuncio.src=mis_imagenes[mi_imagen]
        setTimeout("rotacion()", 2 * 1000)
        }
        }
        </script>
        <body onload="rotacion()">
        <img src="http://illiweb.com/fa/empty.gif" name="anuncio" alt="Anuncios" />
        </body>

En donde IMAGEN1,2,3,4, corresponderán a las direcciónes de las imágenes que aparecerán en el widget de forma automática.

Una vez hayamos personalizado correctamente todo pinchamos Registrar.

]]> http://www.haciendoweb.cult.cu/imagenes-rotatorias-en-el-blog/feed/ 0 Repositorio web de plugins jQuery http://www.haciendoweb.cult.cu/repositorio-web-de-plugins-jquery/ http://www.haciendoweb.cult.cu/repositorio-web-de-plugins-jquery/#comments Thu, 06 Sep 2012 11:00:17 +0000 Darkwin http://www.haciendoweb.cult.cu/?p=9594 Handpicked jQuery Plugins Repository v2 es la segunda versión de un repositorio que presume de seleccionar manualmente algunos de los mejores plugins jQuery.

Clasificados por categorías según su funcionalidad todos estos plugins jQuery están listos para empezar a ser usados y disponen junto a una breve descripción una demo del mismo.

Además todos aquellos que lo deseen tienen también la posibilidad de encontrar cada uno de estos plugins en un CDN, de forma que sea posible usarlo sin ni siquiera tener que descargarlos.

En cuanto a plugins jQuery que podemos encontrar en esta selección destaca aquellos relativos a efectos visuales, funcionalidades para formularios y menús, creación de sliders, efectos en texto, o integración con redes sociales como Twitter.

Tras el lanzamiento de esta nueva versión de Handpicked jQuery Plugins Repository, todos los scripts ahora corren sobre jQuery 1.7.2. Usuarios interesados pueden acceder a este repositorio online de plugins jQuery desde iwantaneff.in/repo.

Fuente: DesarrolloWeb

]]> http://www.haciendoweb.cult.cu/repositorio-web-de-plugins-jquery/feed/ 2 Usar geolocalización con Google Maps http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps-2/ http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps-2/#comments Fri, 06 Jul 2012 15:45:23 +0000 Juan Pablo Pérez Manes http://www.haciendoweb.cult.cu/?p=8991 google map logoEste tutorial muestra cómo usar la API de geolocalización combinada con la API de Google Mapspara mostrar nuestra posición actual sobre un mapa con HTML5.

Nivel: Medio

¿Qué es la geolocalización?

Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador.

Conociendo nuestra posición

Esta API destaca por lo fácil que es usarla. Por ejemplo:

Código :

<script>
     function localizame() {
           navigator.geolocation.getCurrentPosition(coordenadas);
     }

     function coordenadas(){
           var latitud = position.coords.latitude;
           var longitud = position.coords.longitude;
     }
</script>
Con este código tan simple tenemos almacenados en las variables <em>latitud</em> y <em>longitud</em> <strong>la latitud y longitud de nuestra posición</strong>

Controlando errores

Es posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos:

Código :

<script>
function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
}
</script>

Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition:

Código :

<script>
        function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function errores(err) {
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }
</script>

Combinando la API de geolocalización con la API de Google Maps

Veamos los pasos directamente sobre los comentarios del código:

Código :

<!DOCTYPE html>
<html>
<head>
    <title>Localizador</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/
    <style>
        body{
            font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <header>
        <h1>Localizador mediante HTML5</h1>
    </header>
    <section>
        <article>
            <div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/
        </article>
    </section>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/

    <script type="text/javascript">
        var map;
        var latitud;
        var longitud;

        $(document).ready(function() {
            localizame(); /*Cuando cargue la página, cargamos nuestra posición*/   
        });

        function localizame() {
            if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function coordenadas(position) {
            latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
            longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
            cargarMapa();
        }

        function errores(err) {
            /*Controlamos los posibles errores */
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }

        function cargarMapa() {
            var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */
            var myOptions = {
                zoom: 17,
                center: latlon, /* Definimos la posicion del mapa con el punto */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };/*Configuramos una serie de opciones como el zoom del mapa y el tipo.
            map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */

            var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */

            var marcador = new google.maps.Marker({
/*Creamos un marcador*/
                position: coorMarcador, /*Lo situamos en nuestro punto */
                map: map, /* Lo vinculamos a nuestro mapa */
                title: "Dónde estoy?" 
            });
        }
    </script>
</body>
</html>

Autor: Antonio Navajas

]]> http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps-2/feed/ 1 Ext JS 4.1 disponible http://www.haciendoweb.cult.cu/ext-js-4-1-disponible/ http://www.haciendoweb.cult.cu/ext-js-4-1-disponible/#comments Thu, 26 Apr 2012 23:37:25 +0000 Darkwin http://www.haciendoweb.cult.cu/?p=7526
Ext JS 4.1 es la primera actualización de la cuarta versión de esta poderosa biblioteca JavaScript para el desarrollo de aplicaciones web interactivas.

Este nuevo lanzamiento a cargo del equipo de desarrollo de Ext JS representa un nuevo paso adelante en el rendimiento del framework además de añadir características y herramientas como SDK Tools Beta 3 con los que mejorar nuestras aplicaciones web.


Aquellos que deseen conocer en detalle las caracteríticas de esta actualización de esta biblioteca JavaScript pueden acceder a www.sencha.com/blog/ext-js-4-1-final-released.

Interesados en la descarga de Ext JS 4.1 pueden acceder a www.sencha.com/extjs/download.

PD: Vamos hacer lo posible para poder brindar la descarga.

Fuente: DesarrolloWeb

]]> http://www.haciendoweb.cult.cu/ext-js-4-1-disponible/feed/ 2 Usar geolocalización con Google Maps http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps/ http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps/#comments Mon, 09 Apr 2012 03:08:02 +0000 Juan Pablo Pérez Manes http://www.haciendoweb.cult.cu/?p=6965 google map logoEste tutorial muestra cómo usar la API de geolocalización combinada con la API de Google Maps para mostrar nuestra posición actual sobre un mapa con HTML5.

Nivel: Medio

¿Qué es la geolocalización?

Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador.

Conociendo nuestra posición

Esta API destaca por lo fácil que es usarla. Por ejemplo:

<script>
     function localizame() {
           navigator.geolocation.getCurrentPosition(coordenadas);
     }

     function coordenadas(){
           var latitud = position.coords.latitude;
           var longitud = position.coords.longitude;
     }
</script>

Con este código tan simple tenemos almacenados en las variables latitud y longitud la latitud y longitud de nuestra posición

Controlando errores

Es posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos:

<script>
function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
}
</script>

Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition:

<script>
        function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function errores(err) {
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }
</script>

Combinando la API de geolocalización con la API de Google Maps

Veamos los pasos directamente sobre los comentarios del código:

<!DOCTYPE html>
<html>
<head>
    <title>Localizador</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/
    <style>
        body{
            font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <header>
        <h1>Localizador mediante HTML5</h1>
    </header>
    <section>
        <article>
            <div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/
        </article>
    </section>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/

    <script type="text/javascript">
        var map;
        var latitud;
        var longitud;

        $(document).ready(function() {
            localizame(); /*Cuando cargue la página, cargamos nuestra posición*/
        });

        function localizame() {
            if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function coordenadas(position) {
            latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
            longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
            cargarMapa();
        }

        function errores(err) {
            /*Controlamos los posibles errores */
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }

        function cargarMapa() {
            var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */
            var myOptions = {
                zoom: 17,
                center: latlon, /* Definimos la posicion del mapa con el punto */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };/*Configuramos una serie de opciones como el zoom del mapa y el tipo.
            map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */

            var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */

            var marcador = new google.maps.Marker({
/*Creamos un marcador*/
                position: coorMarcador, /*Lo situamos en nuestro punto */
                map: map, /* Lo vinculamos a nuestro mapa */
                title: "Dónde estoy?"
            });
        }
    </script>
</body>
</html>

Fuente: Cristalab

]]> http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps/feed/ 0