lunes, 31 de octubre de 2016

Determinar las resolucion de pantalla en Javascript y CSS y ajustar los objetos en pantalla

Diseñar una página web es un proceso complejo. Mas por que debemos tener en cuenta, que la WEB ahora es accesada desde diversos dispositivos.

Simplemente al acceder desde una PC se usan una gran variedad de resoluciones de pantalla. Ahora si sumamos tablets y smartphones, se vuelve un proceso dificil ajustar el contenido a la pantalla.

En ocaciones determinamos el tamaño o la posicion de un objeto de forma fija en pantalla. Además le damos cierto margen, entre otras propiedades.

Pero al trabajar con resoluciones de pantalla diferentes, vamos a tener que los objetos no se acomodaran correctamente en la pantalla.

¿Que podemos hacer?

Una opcion es redimensionarlos y reacomodarlos dinámicamente, dependiendo del tamaño de la pantalla del dispostivo de salida.

Para eso claro, necesitamos conocer el alto y el ancho de la pantalla del dispositivo de salida. ¿Como podemos hacerlo? Bueno usando 2 lenguajes que se ejecutan del lado de la maquina cliente. Ya hemos visto que tanto JavaScript como CSS tienen poder de modificar los objetos que vemos en pantalla. Asi que veamos como hacerlo con ambos.


1.-JavaScript


Mira el siguiente codigo:

        if( screen.height == 768 ||screen.height == 720 )
         $("#Menu").css( { top:120 });
     
     if( screen.width == 1024)
           $("#Menu").css( { left:636});

¿Sencillo no?

Si te fijas la clave son las instrucciones screen.heigh y screen.width. Estas nos devuelven el ancho y el alto de la pantalla.

En la primera condicion le indico que si el alto de la pantalla es 768 o 720 pixeles, al elemento Menu, le modifique la propiedad top (que indica en que posicion de la pantalla estará la parte superior del objeto) con el metodo css.

El método css permite modifica dinámicamente las propiedades css de un objeto.

En la segunda condición pregunto por el ancho de la pantalla. Si es de 1024 pixeles, esta vez modifico la propiedad left, que me indica la posicion izquierda de la pantalla donde comienzael objeto.

Ambos valores se los doy en pixeles.

De esta manera , con diferentes resoluciones de pantalla, estaría ubicando mi objeto en una posición diferente.


2.-CSS

Veamos ahora un ejemplo de como ajustar contenido con CSS:

@media screen and (max-width: 800px){
 #content_header
   font-size: 12px !important;
   width:800px; height:100%; display:table; margin:0 auto; 
   }
}

@media screen and (max-device-width: 800px){
 #content_header
   font-size: 12px !important;
   width:800px; height:100%; display:table; margin:0 auto; 
   }
}

Como pueden ver la clave esta en la etiqueta @media screen con la condicion  max-width max-device-width.

Podemos usar esta etiqueta como un if, y dentro de ella definir todas las propiedades de CSS que deseemos para los objetos. Esta opción es mas completa, podemos definir tamaño de fuenete, ancho del objeto, alto del objeto, el padding , el marging, y un sin fin de propiedades. Prácticamente todo lo que deseemos y podemos construir un objeto diferente para resolución de pantalla.

No hay que olvidar, que si definimos mas propiedades fuera de esa etiqueta, serán ignoradas, es decir tenemos que poner la defición completa de las propiedades del objeto, pues no se heredan.

Si yo hubiera definido #content_header antes, y quisiera cambiar solo una propiedad como el tamaño de fuente, no me es posible. Debo volver a copiar todas las propiedades del objeto, que solo aplicaran cuando el ancho sea 800 px.

En todos los caso default, donde el ancho no sea 800 px, tomara mis propiedades genericas.

De esa manera podemos empezar a jugar un poco, con la construcción de páginas webs para diferentes resoluciones de pantalla.

Para la altura seria algo similar

@media screen and (max-height: 768px){
 #MiCuenta {
    padding:60px;
    padding-bottom: 10px;
    cursor:pointer;
    font-weight:bold; color:#fafafa; border-right:1px solid #c3c3c3;
   }
}
@media screen and (max-device-height: 768px){
 #MiCuenta  {
    padding:60px;
    padding-bottom: 10px;
    cursor:pointer;
    font-weight:bold; color:#fafafa; border-right:1px solid #c3c3c3;
   }
}

Y ya con esto podemos irnos adaptarnos a las diferentes resoluciones de pantalla. !A programar!








viernes, 28 de octubre de 2016

Tener siempre la ultima versión de mis archivos JavaScript y CSS en la maquina del usuario

Ya hemos analizado en una entrada anterior, como construir un buen sitio web dinamico. Eso muchas veces, incluirá el usar archivos .PHP, .JS y .CSS.

Recordando un poco lo aprendido, los archivos .php estan en el servidor, y no tenemos acceso a ellos en código fuente desde la máquina local. Eso es una enorme ventaja en terminos de mantenibilidad. Si haces un cambio en un archivo PHP en automático todas las máquinas que se conecten a tu sitio tendrán la nueva versión, ya que los archivos PHP siempre son enviados cada que se piden por la máquina (en demanda). Es decir cada que solcicitas un archivo PHP este es ejecutado en el servidor.

Recordemos que Javascript, se encarga de controlar los eventos que pasan en el navegador, y CSS de controlar el aspecto visual que tendrá la página web en pantalla.

Los navegadores actuales, suelen hacer todo lo posible para que las páginas se carguen lo más rápido posible. Eso incluye el uso del caché, que no es otra cosa que guardar la mayor parte de los elementos posibles de una página cuando se abre por primera vez, en disco duro local. De esa manera si vuelves a entrar a la misma página, el navegador solo debe checar los cambios y no descarga toda la informacion completa. Esto es múy util en el caso de imagenes y recursos multimedia, de esa manera se acelera la carga de las pagnas web.

Los navegadores acuales tienen la manía de guardar los archivos JS y CSS en cache. Esto tiene sus ventajas y desventajas. Ventaja, que Javascript actua directamente sobre el navegador, y CSS sobre la presentación de la web, asi que al estar en caché la carga de la página es más rápida.

Pero como desarrolladores, no nos agrada esa idea. Cada que yo hago un cambio a mi JavaScript o CSS, en teoría el navegador debería reconocerlo y cargar la nueva versión. Pero no es así. La memoria del navegador es algo persistente. Una solución a nivel de usuario es pulsar F5 ya que manda un comando de refescar y trae de nuevo los archivos. A veces, ni eso funciona y será necesario borrar el historial del navegador, que es donde se guarda el cache. 

Pero no podemos decirle a todos nuestros usarios, "oye hice un cambio en mi JavaScript, por favor vacia tu historial". No es practico.

¿Hay alguna solución?

Claro. Aqui apelamos  a las propiedades de nuestro PHP. Recordemos, que este si se refresca cada que se abre la página, es indispensable pues se ejecuta en el servidor.

¿Donde mandamos llamar nuestros archivos JS y CSS? En el PHP precisamente, como ya hemos visto.

Ua técnica muy usada en muchos sitios web, es tener una página llamada header.php y otro footer.php. Por cuestiones de diseño, muchas veces queremos tener un header y un footer comun, para todo nuestro sitio.

Así nuestras páginas tendrían la siguiente estrcutura:

<?php
require("common/header.php");
?>

//codigo de mi pagina


<?php require("common/footer.php");?>

¿Por que mencionamos esto? Por que por lo general, todas las invocaciones a archivos JS y CSS se hacen en el hedaer, de esa manera, no es necesario repetir el codigo en cada página.

De esta manera cada página invocada, debe llamar al header. El header controlara las invocaciones a recursos externos como los archivos JS y CSS.

Veamos ahora un ejemplo:

<link rel="stylesheet" href="<?=$urlSitio;?>/includes/css/MiCSS.css?version=1.0" type="text/css" media="all" />

<script type="text/javascript" src="<?=$urlSitio;?>/includes/js/MiJS.js?version=1.0"></script>

Notemos la diferencia con otros ejemplos usados anteriormente. Al invocar tanto el archivo CSS, como el JS, añadimos al final lo siguiente : ?version=1.0.

Como si estuvieramos mandando la version como un parámetro. Dentro de nuestros archivos, no tenemos que hacer ningun cambio relativo a esto. Simplemente le estamos diciendo al navegador, que busque una nueva versión del archivo, es decir, que no será un resurso estático.

¿Que pasará si hago un cambio a mi Javascript y deseo que todas las máquinas clientes carguen la nueva versión? Simplemente, en el archivo PHP donde lo llamo, cambio el parametro version a 1.1. Y si hago otro a 1.2. Y así sucesivamente.

De esta forma al cargar el PHP, el navegador sabra en automatico que la versión que tiene en cache del Javascript no le sirve, y cargará la nueva desde el servidor.

Pero, mientras yo no modifique el parametro versión trabajará con la copia local, lo que es bueno pues ayuda al rendimiento de la página.

¿Sencillo no?

Por eso es mas sencillo si agrupo todas las llamadas a recursos externos,si las tengo todas en mi archivo header, será muy sencillo, cambio una línea, y en automatico todas las páginas cargaran la nueva versión.

De esta manera con PHP, controlo la subida de nuevos recurso JS y CSS al navegador, independientemente de la memoria cache.








jueves, 27 de octubre de 2016

Tres carencias de Usabilidad de IOS

La lucha de los sistemas operativos en el entorno móvil, suele definirse en 2 grandes jugadores Android e IOS. Aunque Android tiene más de 80 % de cuota de mercado, el uso del smartphone es tan intensivo, que con una cuota pequeña IOS está presente en en muchos dispositivos.

Ventajas y desventajas, ofrece cada sistema. De IOS se destaca la estabilidad. De Android la libertad y personalización, ya que aunque es muy estable, se dice que IOS es mejor en ese aspecto.

Hoy me concentraré en un aspecto que suele alabarse de IOS: la usabilidad. Se dice que es uno de los sistemas más sencillos que existe, y es cierto. Aunque Android va casi a la par (como experimento dale a un niño o una persona mayor un Android, y podrá usarlo), no iguala su sencillez.

Sin embargo hay ciertos aspectos en que la usabilidad de Android es mejor. Hoy hablare de 3 de ellos.

1.- Escritorios y Widgets


 Android es bastante parecido a un PC. Al iniciar lo primero que vez es el escritorio. Un escritorio donde puedes poner accesos directos a apps, contactos, o incluso widgets. En contraste con eso, en IOS al iniciar ves directamente el cajón de aplicaciones. No existe algo como un escritorio. Un lugar donde puedas tener tus apps mas usadas. Incluso windgets utiles para realizar funciones rápidas.

Es cierto en la ultimas versiones IOS incluye widgets (¿alguien dijo que Apple copia?)...en la barra de notificaciones. No es muy comodo tenerlos ahi , todos juntos.

En cambio la personalizaión que puedes lograr en un escritorio con Android, es fantastica. Mira algunos ejemplos:





No solo es mucho mas estetica la presentacion de Android, ademas es practica: puedes reproducir musica, leer un libro, ver el clima, usar una calculadora, todo sin abrir la app, directamente desde el widget.

¿Facil no?


2.- Boton Atras 


El boton atrás crea polémica. Es cierto no siempre sabes a donde te va a llevar. Pero es muy comodo para navegar entre aplicaciones. En IOS solo tienes el boton home. ¿Que pasa si quieres retroceder a un paso anterior? Bueno el diseñador de la app debio preveerlo y poner un boton. Pero no todos lo hacen.

Algo que es un poco frustante en IOS es que siempre que quieres regresar, debes hacerlo a la pantalla principal. Home es tu unica opción. Y si ibas a la mitad de un proceso largo , es estresante.

3.- Ajustes dentro de la aplicacion


La primera vez que quize hacer un ajuste en una aplicación en IOS me quede desconcertado. Viniendo del mundo Windows, cada aplicación es un mundo aparte y tiene su propio menu de ajsutes.

Es lo mas natural. Pero cuando me explicarion que en IOS todos los ajustes se hacen en la parte de ajustes me resulto confuso . ¿Ysi no quiero salir de la app? ¿Por que tengo que cerrarla para hacer un ajuste? ¿Que no se supone que la sección de ajustes es exclusiva para el sistema operativo ? ¿Por que mezclar todo? En serio, detesto tener que salir de una app e ir a justes para modificar algo, que se podría modificar dentro de la misma app.

Android lo hace como windows , encapsulando y separando perfectamente SO y aplicaciones. ¿Quieres ajustar algo en una app? Ahi mismo puedes hacerlo. ¿Quieres ajustar algo en el SO? Ve a la seccion de ajustes del SO.


Vaya que en este sentido IOS es mas complicado.

De hecho para varias cosas, tienes que ejecutar mas pasos en IOS, y es una navegacion un tanto menos agil.

Por supuesto, la optimizacion del sistema es buena.

El diseño, a mi modo de ver, no es el más óptimo.

Aunque al final, puede haber muchos otros aspectos por los que un usuario se decida sobre Android /IOS. Ya hemos analizado algunas ventajas de Android.






martes, 7 de junio de 2016

Ejecución de AJAX en forma síncrona

AJAX fue todo una revolución para el desarrollo web. Esta tecnología permite comunicarte con el servidor, enviar peticiones, y recibir la respuesta sin necesidad de refrescar la página.

El usuario lo ve como si fuera un programa interactivo, el pide algo, y el navegador envía la respuesta.

No es necesario volver a dibujar toda la página, sólo se actualizan los elementos necesarios.

AJAX fue creado para funcionar esencialmente en modo asíncrono. ¿Qué significa esto? Básicamente, que AJAX se ejecuta, y permite que el código que sigue después de la llamada AJAX continúe en ejecución. Además la página web sigue respondiendo a eventos y el usuario sigue interactuando de forma normal. Mientras, el objeto AJAX esta esperando la respuesta del servidor, sin interferir con la actividad de la página.Una vez terminada la petición AJAX al recibir una respuesta, se ejecuta el código que escribiste en la petición AJAX.

Esto es muy útil debido al tiempo de retardo. Después de todo al ejecutar AJAX envías un mensaje al servidor, el cual ejecuta como consecuencia de tu llamada un script de PHP. El script, puede consultar a la BD, crear XMLs, e incluso invocar a otros scripts en otros servidores, en fin puede hacer varios procedimientos. Es decir que no tienes idea de cuánto tiempo va a tomar de ejecución. Y una vez terminada la ejecución, te envía un string de respuesta, que a su vez recorre toda la red hasta el cliente.

Si AJAX no fuera asíncrono, todo ese tiempo de retardo la pantalla de tu navegador se congelaría, esperando la respuesta. Y tu página parecería mucho menos interactiva. Es cierto que no sería necesario refrescar por completo la página, y que solo estaría enviando y recibiendo strings,pero tomando en cuenta la red el tiempo de respuesta podría ser apreciable.

Ahora bien, no siempre necesitarás el modo asíncrono de AJAX. En ocasiones, cuando envías un a petición AJAX, necesitas esperar obligatoriamente la respuesta, y no puedes permitir la ejecución del código, ni la interacción con el usuario, hasta que tengas lista la respuesta.

Como ejemplo supongamos que tienes un enlace. Pero en el evento onClick, ejecutarás una petición AJAX para hacer una consulta a la BD y terminar de crear el enlace con los datos obtenidos. ¿Por que no cree el enlace como debía desde el inicio? Porque es una página interactiva, y mi usuario ha interactuado con ella, así que el transfondo ejecute peticiones AJAX y modifiqué la BD de datos. E incluso al dar el último click, el usuario pudo haber escogido una opción y eso afectará el contenido del enlace. E incluso tiene que ejecutar un proceso en la BD, antes de darme el enlace definitivo. Y el problema, es que si en el evento onClick, ejecuto mi petición AJAX, si esta funciona en modo asíncrono, continuará ejecutando el código de manera normal, es decir, lanzará mi enlace aún no terminado al final del evento.

Es solo una de las muchas situaciones en las que el modo asíncrono de AJAX no nos sirve. Por eso AJAX también cuenta con un modo síncrono. Como su nombre lo indica, este se ejecuta de manera síncrona es decir en secuencia, y el flujo de ejecución no puede continuar hasta que AJAX recibe una respuesta del servidor, por lo tanto es como si se ejecutará el código lineal. Incluso los eventos dejan de ser atendidos por Javascript.

¿Cómo podemos lograr esto? Veamos algunas formas.


1.-Forma 1


La primera forma será trabajando con el objeto AppXMLHttpReq().  El uso de este objeto es sencillo.
A continuación un código que muestra cómo ejecutarlo en forma síncrona:

     envioAjax  = AppXMLHttpReq();
    envioAjax.open("GET", "/php/llena_datos_envio.php?datos="+array, false);
     envioAjax.onreadystatechange=function()
        {
            if (envioAjax.readyState==4)
            {
             / /aqui va tu codigo        
           
                 return;
            }
        }    
     envioAjax.send(null);

Si ya sabes usar este objeto, notaste que no hubo mucho cambio. Simplemente al ejecutar el open, al final lleva el parámetro false, que es el que indica que el modo asíncrono sera cancelado y en su lugar se ejecutará en modo síncrono.Entonces la ejecución esperará al readyState=4 y entonces  ejecutará tu código. Una vez terminada la llamada AJAX, seguirá ejecutando el código que hayas escrito en el flujo normal.


2.-Forma 2

Una segunda forma es utilizando jquery. Mediante $.ajax. La cual también es sumamente sencilla:

$.ajax({
                      async: false,
                      type: 'GET',
                      url: "php/cps_generar_pedido.php?compra="+numero+"&destruye=SI",
                      success:function(resp){
                       / /aqui va tu codigo 
                      return (resp);                    
                     } } });

Una vez mas el truco es configurar el modo asíncrono en false. Solo cuando termine la petición AJAX se ejecutará el código en function, y una vez terminado el resto del código.


2.-Forma 3

Quizá ahora te preguntes si también puedes usar esto con $.post o $.post . Bueno en una sola línea , no es posible. Pero si se configura el objeto ajax, que al final usan $.post y $.get, se puede lograr en unas cuantas líneas. 

$.ajaxSetup({
          async: false
        });

$.post("/php/carrito_agregar.php",{key:llave,cantidad:$("#ArticuloC").text()}, function(resp){ 
if (resp !== "ERROR") {
alert("Producto agregado correctamente");
RegresarCarrito();
} else 
alert("Lo sentimos ocurrió un error"); });

$.ajaxSetup({
        async: true
      });

Como puedes ver es sencillo. Primero que nada con ajaxSetup, pones todas las llamadas a AJAX en false o modo síncrono.

Después ejecutas el $.post. En este caso le pase los argumentos key y cantidad. PHP me devolverá algo, y se ejecutará function. Solo cuando se haya ejecutado, podrá continuar la ejecución normal de mi programa.

Una vez hecho esto, pongo otra vez las llamadas en modo asíncrono que es el estándar, activando asynctrue

2.-Forma 4


Ahora bien el manejo de los tiempos en JavaScript es complicado. En ocasiones ni con todas estas técnicas se puede lograr el resultado deseado. En especial si anidas funciones dentro de otra. Hay una forma aún más segura de garantizar que el código se ejecute solamente cuando finalice una llamada AJAX.

Para esto usaremos $.when. Su uso es sencillo , pero mejor definamoslo con un ejemplo:

function carritoVacio(){ //regresa si el carrito esta vacío    
    return $.ajax({
        async: false,
        type: 'GET',
        url: "php/carrito_vacio.php",
        success:function(resp){    
          return resp;
        }
    })
}

$.when(carritoVacio().done(function(a1){            
       
                res = a1.search("NO");              
                if (res != -1)
                {                  
                  window.location = "/calcularEnvioPreeliminar/?compra="+compra;            
                }
                else
                {              
                    document.location.href=urlSitio+"/cuenta";
                 }
            }))

Primero que nada tengo mi función carritoVacio(), en mi caso es un AJAX, que me va a retornar si el carrito de compras tiene artículos o no. Ahora para asegurarme que este AJAX se ejecute por completo antes de continuar la ejecución del código, utilizó el $.when. Que lo único que indica, es que solamente cuando la función carritoVacio a terminado y regresado una respuesta, puedo ejecutar el código que se encuentra dentro del $.when.

Por lo tanto Javascript esperará pacientemente la ejecución del AJAX. Y luego ejecutara function, con el parámetro de entrada a1, que es lo que me retornó la función carritoVacio().

En mi caso de acuerdo a la respuesta invoco a un script u otro diferente, que es como controlo el flujo de navegación en la página.

En fin pueden utilizarse muchas técnicas, ya que si no estás acostumbrado a la ejecución asíncrona de ajax, puede ser todo un dolor de cabeza.

Ahora sabes como controlarlo, ¡a programar!




martes, 26 de abril de 2016

Invocar una nueva página, tras cargar mi página, con PHP-Javascript


Supongamos que tienes una página en PHP que deseas que efectúe un cierto proceso. Recordamos que en PHP se efectúa la comunicación con la Base de Datos, así que son múltiples cosas las que puedes hacer.

En mi caso, hice un script que se conecta a un webservice, la envía un XML, y recibe un XML de donde tomo ciertos datos. Esos datos me servirían para crear una nueva página (en este caso, el costo de envío). Así lo explique en una entrada anterior.

Generalmente en PHP, se puede cambiar de página utilizando el header('Location:'). Básicamente le dices, que ahora tu página se convierte en la nueva página que le indiques en el header.

Hay un par de problemas al usar el header para cambiar de página. Primero, para mi caso como era un documento XML mi página, que a su vez enviaba y recibía otro XML, el header tenía que corresponder al de un XML. Y ese header no funciona para páginas normales.

Además un segundo inconveniente: el header debe ser lo primero que despliegues en pantalla , el header debe ser llamado antes de mostrar cualquier cosa por pantalla, etiquetas HTML, líneas en blanco desde un fichero o desde PHP. Y como yo estaba primero que nada construyendo un XML, ese XML era enviado, así que falla al querer cambiar el header. Así que si deseas usar el header para cambiar la página, puedes hacer algunas acciones como consultar la base de datos y otros procesos, pero no desplegar nada en pantalla antes.

Yo creo un XML, y después envió toda mi página en XML al webservice de DHL, así que obviamente ya hubo una salida de información, y la redirección para cambiar de página después de hacer este proceso vía PHP es imposible.

Esta opción no funciona, y por mas que busqué en la red no encontré otra forma de invocar una página con PHP.

Es aquí donde entre Javascript. Lo que hice fue dejar que PHP hiciera todo el proceso. Y después mandará un página construida con todos los datos y un pequeño script de JavaScript. Recordemos que PHP se ejecuta en el servidor, así que cualquier código Javascript siempre se ejecutará después de PHP.

Al momento de estar cargando mi página, ya con todos los datos listos, el navegador se encontró con mi pequeño script:


 echo '<script type="text/javascript">
         function lanzadera(){
document.location.href="'.$urlSitio.'/pagar/?referencia='.$referencia.'&tipo='.$tipoPago.'&costoEnvio='.$costoEnvio.'&dias='.$days2.'";
         }
         window.onload = lanzadera;</script> ';  

El cual le dice que al momento de cargar la ventana (la cual ya tiene todos los datos que obtuve del webservice y que PHP consulto), ejecute una función, por medio del evento window.onload.

La función lanzadera, hace algo muy sencillo: cambia la localización de mi ventana a el script que yo deseo, es decir invoca una nueva página. A esa nueva página le mando los datos que ya consulte: costo de Envío, días que toma el envío, etc.

De esta manera es transparente para el usuario, aunque yo ejecute 2 scripts de PHP diferentes, el lo ve como si fuera una sola página y todo el proceso que hubo para crearla permanece oculto. 

El cual era mi objetivo desde un principio. Así que ya sabes, cuando necesites ejecutar 2 páginas php, sin que el usuario lo note, esta es una buena técnica. 

miércoles, 20 de abril de 2016

Como Android /ARM acabo con Windows/INTEL

En una entrada anterior, estuve analizando como GOOGLE supo leer el futuro de la tecnología mejor que Microsoft , y de esa forma convirtió a Android en el sistema operativo mas usado en el mundo, desbancando a Windows.

Pero no solo ese cambio ha traído el uso masivo de los smartphones. Retrocedamos a la época de las primeras PC. Cuando Bill Gates y Paul Allen vieron el número de enero de 1975 de Popular Elechtronics y descubrieron la Altair 8800. Una de las claves de esa máquina, es que fue la primera computadora de próposito general con un microprocesador.

El microprocesador era un INTEL 8008. Este procesador fue creado por INTEL. INTEL era un empresa que fue fundada en Mountain View (California) en 1968 por Gordon E. Moore (químico y físico, famoso por su "Ley de Moore") y Robert Noyce (físico y co-inventor del circuito integrado) cuando salieron de la empresa Fairchild Semiconductor. La empresa había decidido tomar un camino arriesgado, creando los primeros microprocesadores: circuitos que contenían en una sola pastilla de silicio, todos los componentes necesarios de un procesador: unidad de control, unidad aritmetico-lógica, registros, etc.

Era un invento revolucionario, pero aún no se hacía con el éxito entre los consumidores. La Altair 8800, era solo un máquina de propósito general, que no había desarrollado su potencial. Solo una caja de luces para aficionados.

Pero entonces llegan Bill y Paul y la dotan de el Altair BASIC, un software con el que el usuario podia programar la máquina e interactuar con ella. El éxito de esa máquina y sus sucesoras, fue total.

De ese modo y a través de máquinas similares que siguieron , como la IBM PC, los procesadores de INTEL llegaron a estar en todas partes. No solo Microsoft si no también INTEL se vio beneficiado con el nacimiento de la PC. La arquitectura de INTEL fue la más exitosa, en especial la familia X86 que iba incluida en las IBM PC. Casi todas las máquinas incluían los chips de INTEL.

Tal fue el monopolio de estas empresas que llegó a llamársele WIN-TEL: máquinas con procesador INTEL y sistema operativo Windows. Windows llego a funcionar bajo otras arquitecturas, pero siempre era preferida la X86. IBM cedió a Microsoft e INTEL dos de los componentes esenciales de la PC, y pronto todos los fabricantes de hardware hicieron lo mismo. Así podían ofrecer lo mismo que IBM, y solo necesitaban instalar el software de Microsoft para que hiciera lo mismo. y para que todo fuera compatible, se usaban los mismos procesadores. 

Sin embargo ni Microsoft ni INTEL, supieron ver el enorme potencial de la revolución móvil que se gestaría años después, estaban cómodos en la cima dominando el mercado de las computadoras personales.

La arquitectura X86 tiene ventajas y desventajas. Comencemos por lo básico: se basa en la arquitectura CISC (Complex Instruction Set Computer o   Computador con Conjunto de Instrucciones Complejas). Esta arquitectura está basada en instrucciones complejas, que indican a un procesador múltiples tareas a efectuar con una sola instrucción. Como consecuencia, se necesitan menos instrucciones para ejecutar un programa. Por lo tanto se necesitan compiladores mas sencillos, y menos memoria para guardar las instrucciones. Los primeros procesadores de INTEL y todos los que dominaron la era del PC, están basados en CISC.

Debido al poder ejecutar instrucciones complejas, los procesadores CISC tienen una gran potencia de calculo. Sin embargo tienen también sus desventajas. El hardware debe ser complejo y consume una gran cantidad de energía. Al consumir tanta energía , llega otro problema letal: el sobrecalentamiento. ¿A quien no se le fundió alguna vez una tarjeta madre debido al calor del procesador? Es por eso que si abres una CPU, lo primero que ves son los enormes ventiladores de la tarjeta madre y el procesador. Los procesadores CISC debido al alto calor que generan, con el tiempo llegan a fundir los circuitos, para evitar esto se necesita ventilación mecánica.

Por eso las máquinas portátiles no pudieron seguir reduciéndose de tamaño, la disipación de calor a sido uno de los principales problemas de las computadoras.

Desde los años 70 en IBM comenzó a desarrollarse una tecnología que permitiera optimizar el rendimiento del procesador. Como resultado de esa investigación nació RISC (Reduced Instruction Set Computing o Computador con Conjunto de Instrucciones Reducidas). Esta arquitectura se basa en una idea muy simple: descomponer una instrucción compleja, en un conjunto reducido de instrucciones genéricas. De esa manera con la arquitectura RISC se tienen menos instrucciones diferentes, y cada instrucción ejecuta menos tareas. Es decir que CISC tiene un conjunto amplio de instrucciones, y cada una de ellas hace muchos tareas. 

Las ventajas de RISC son notables, se necesitará hardware mas sencillo, por lo tanto se consume menos energía y el calentamiento es mucho menor. Como desventaja, requiere mas memoria y los compiladores tienen mayor trabajo al traducir las instrucciones a ensamblador.

El IBM 801 que empezó a crearse en 1975, fue diseñado por John Cocke y es considerado el primer procesador RISC de la historia. Pero en esa época la arquitectura CISC dominaba y RISC no se abrió paso en las computadoras personales.

Si embargo las diferencias entre las dos arquitecturas son notables, la arquitectura RISC permite construir procesadores que pueden ir en dispositivos mas pequeños pues no necesitan disipador de calor. Su principal desventaja era la falta de potencia de calculo pues rerquerian mas instrucciones para hacer los mismo que CISC.


Los dispositivos móviles adoptaron la tecnología RISC, basada en la arquitectura ARM. ARM venida de Acorn Computers Ltd, es una arquitectura en base RISC,  En 1983, Acorn inició el diseño de lo que un par de años más tarde fue la Acorn RISC Machine, ARM, y que tuvo en el ARM1 su primer chip final . Sin embargo no tuvo mucho éxito por esos años. En 1998 la empresa se transformó en ARM Holdings.

ARM nació como una arquitectura para uso en ordenadores y dispositivos de bolsillo, su primer exponente en el terreno móvil fue el Newton de Apple en 1993. Pero seguía sin tener éxito pues es resto de la tecnología que integraba el Newton no estaba a la altura.

Poco a poco fue ganando popularidad con la aparición de los teléfonos celulares y las pda, basados mayormente en la tecnología ARM. Sin embargo estos dispositivos distaban de ser tan populares como las PC.

Un punto de inflexión lo marca la aparición del primer Iphone en 2007: INTEL rehusó participar en el proyecto, y Apple buscó una solución basada en ARM. Aún entonces no se notaba tanto el impacto, pues a pesar del éxito del Iphone, como lo fue el Apple II en la época de las PC, era un producto destinado a un nicho y condenado a no dominar el mercado.

Sin embargo la mesa estaba puesta para Google, que como he mencionado en otras entradas lanzó Android para dominar el mercado móvil, el HTC Dream, el primer smartphone con Android, aparece en 2008. Google supo ver la revolución que era el smartphone, los aciertos de hardware de Apple, y como podía dominar el mundo del software. 

Por supuesto el núcleo de todos los futuros smartphones, serían los procesadores ARM. Pero el sistema operativo que los mandaría sería Android. Google dotó de una interfaz sencilla y visual, una capacidad de efectuar múltiples tareas y una versatilidad enorme a los dispositivos ARM.

El resto lo conocemos, el día de hoy existen mas dispositivos con Android que PC con Windows. Pero la gran mayoría de estos dispositivos tienen una característica mas en comun:  tienen como cerebro un procesador ARM. Aunque ha habido intentos de INTEL de entrar en el mercado móvil, han sido tardío y escasos. Android ha sido adaptado a la arquitectura X86, pero nativamente solo existía para ARM. 

Es por ello que Google no ha sido el único beneficiado con el surgimiento del smartphone y de llamada era POST-PC. ARM también ya que ha hecho que sus procesadore sean los mas populares.

A diferencia de INTEL, ARM no fabrica sus procesadores, licencia el diseño a diversas empresas que se encargan de fabricarlos. Qualcomm. Mediatek, Samsung, Nvidia, entre otras, se encargan de producir chips ARM.

Mientras INTEL sigue cayendo en ganancias y utilidades, porque no supo entender la próxima revolución tecnológica. En esta era POST-PC las ventas de las PC siguen cayendo, y las de smartphones aumentando. 

Los procesadores ARM permiten que tu smartphone puedas tenerlo contigo, ya que al no necesitar disipadores de calor no incluyen ventilación y pueden tener un tamaño reducido. Y claro, como procesadores que son, se calientan, pero a un grado menor que la arquitectura X86.

La era POST-PC ha traído grandes cambios en la tecnología y aquellos que no han sabido ver el futuro, se están quedando obsoletos y condenados a vivir del pasado.




viernes, 15 de abril de 2016

Envío y recepción de XML a Web Services con PHP. Un ejemplo práctico para Webservice de DHL

El día de hoy vamos a hablar de Web Services. Primero que nada ¿que es un Web Service?

Piensa en el Internet. Por definición, es una red para compartir datos. Generalmente, interactúa con el usuario. Tu entras a una página web, rellenas algunos campos y obtienes información a cambio como respuesta. La mayoría de las páginas, están hechas para interactuar con el usuario. Sin embargo , la red tiene mucho potencial. Y una de las premisas básicas de la tecnología moderna, es automatizar lo más posible los procesos. Es decir que la red no solo sea usada solo por personas, sino por procesos automáticos.

Por supuesto, una página normal en HTML no nos sirve para esto. No solo es difícil de leer, no ofrece descripción de los datos y en general no se adecua a un formato que pueda ser leído por un proceso, está hecha para ser leída por un humano. Pensando en eso tenemos el concepto de Web Service. Un web service es una tecnología que mediante un conjunto de estándares y protocolos, permite intercambiar datos entre aplicaciones. Es decir es un sitio web, que en vez de esperar entrada de personas que interactúen con él, está esperando recibir una solicitud de una aplicación externa en el cliente, y asu vez mediante la información de entrada, será procesada y generará una salida que le devuelve al cliente.

Básicamente es una herramienta muy poderosa, ya que permite la comunicación de las aplicaciones con los sitios web, y el intercambio de datos. Imagina que tienes un programa que toma una serie de datos de tu base de datos local, los procesa y envía a un web service externo, que de acuerdo a estos le devolverá una respuesta que podrá interpretar tu programa local y en base a ella actuar.

Esta herramienta es especialmente útil, para compartir y acceder a datos entre diversos sitios web. Como ejemplo, digamos que tengo una tienda en línea. Yo poseo los datos del producto, precios, además de datos de los compradores y en fin todo lo que necesito para mi tienda. Pero quiero implementar la cotización del envío de dichos productos a mis clientes, y que se haga dentro de mi página.

DHL, usándolo como ejemplo, tiene un cotizador en línea por supuesto, pero lo que yo quiero es que mi sitio mediante código se contacte con el cotizador y le mande los datos necesarios: peso, alto, ancho, profundidad, número de piezas, y claro código postal del cliente a donde hare el envio; y despues recibir la cotización para integrarla en el costo del producto. Todo esto debe ser transparente para el usuario de mi página.

Un apunte mas, los web services se envían los datos mediante XML. Así que si conoces este formato, es hora de empezar a conocerlo. A primera vista no es muy legible, pero es un estándar muy aceptado.Para comunicaciones vía AJAX la mayoría de los programadores prefieren JSON.   Hay una cierta controversia sobre si XML o JSON es un mejor lenguaje de intercambio de datos, pero no entraremos en ella pues daría para un enorme post.

Al final XML no es mas que una cadena de texto con cierto formato. Algo muy importante que debes tener en cuenta: todo se engloba dentro de TAGS o etiquetas, tiene una estructura jerárquica, puedes usar arreglos y estructuras de datos, y siempre debes cerrar el TAG que abriste.

Al final si has usado HTML, verás que XML es muy similar. Solo que mientras HTML describe cómo es una página web, XML describe cómo es un conjunto de datos.

Llegados a este punto, entendemos cómo funcionara la comunicación con el web service:

1.-Tomo datos, ya sea de mi base de datos u otra fuente, y los usó para construir un archivo XML, el cual debe tener el formato y estructura requerida por el web service.

2.- Envío el XML a el web service.

3.-El web service recibe mi XML.

4.- El web service interpreta mi XML. Lee los datos que le envíe.

5.- Mediante un proceso interno el web service genera una respuesta en formato XML de acuerdo a los datos recibidos.

6.- Me envía este nuevo XML.

6.-.-Recibo la respuesta en XML. 

7.-Interpreto mi XML para poder utilizar los datos que me han sido enviados.

Ahora bien este proceso lo haremos mediante PHP. En una entrada anterior, ya vimos cómo crear un XML y enviarlo a otra máquina. Básicamente XML es solo texto, así que formamos nuestra cadena de texto con los datos requeridos. Y para el envío, utilizaremos la herramienta CURL. Quedaria el codigo siguiente:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

</head> 
<body>
<?php
$codigoPostal = $datosEnvio->nDirCP;
$referencia = str_pad($referencia, 28, "0", STR_PAD_LEFT);
$site = 'DHLMexico';
$password = 'hUv5E3nMjQz6';
$countryCode= 'MX';
$postalCode= '25000';
$paymentCountryCode = 'MX';
$dimensionUnit = "CM";
$weigthUnit = "KG";
$time = time();
$tiempo =  date("Y-m-dTH:i:sP", $time);
$fecha = date("Y-m-d", $time);
$GMT = date("P", $time);
$tiempo =str_replace ( "CD",  "", $tiempo );
$tiempoRecoleccion = "PT".date("H", $time)."H".date("i", $time)."M";

 $buffer= '<?xml version="1.0" encoding="UTF-8"?>
<p:DCTRequest xmlns:p="http://www.dhl.com" xmlns:p1="http://www.dhl.com/datatypes" xmlns:p2="http://www.dhl.com/DCTRequestdatatypes" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.dhl.com DCT-req.xsd">
    <GetQuote>
    <Request>
      <ServiceHeader>
        <MessageTime>'.$tiempo.'</MessageTime>
        <MessageReference>'.$referencia.'</MessageReference>
        <SiteID>'.$site.'</SiteID>
        <Password>'.$password.'</Password>
        </ServiceHeader>
    </Request>
    <From>
      <CountryCode>'.$countryCode.'</CountryCode>
      <Postalcode>'.$postalCode.'</Postalcode>
    </From>
   <BkgDetails>
      <PaymentCountryCode>'.$paymentCountryCode.'</PaymentCountryCode>
      <Date>'.$fecha.'</Date>
      <ReadyTime>'.$tiempoRecoleccion.'</ReadyTime>
      <ReadyTimeGMTOffset>'.$GMT.'</ReadyTimeGMTOffset>
      <DimensionUnit>'.$dimensionUnit.'</DimensionUnit>
      <WeightUnit>'.$weigthUnit.'</WeightUnit>
      <Pieces>';
  $i=0;
  while ($articulo = $detalleCompra->fetch_object())
  {
    $i++;
  $linea = queryOne("SELECT nLinea FROM InvArticulos WHERE nArticulo=$articulo->nArticulo ");
  $medidasArt =  queryOne ("SELECT nAltura,nAnchura,nProfundidad,nPeso FROM InvLineas WHERE nLinea=$linea->nLinea ");
    $anchura =  $medidasArt->nAnchura;
    $altura = $medidasArt->nAltura;
    $profundidad= $medidasArt->nProfundidad;
    $peso = $medidasArt->nPeso;
    $buffer.='<Piece>
          <PieceID>'.$i.'</PieceID>
          <Height>'.$altura.'</Height>
          <Depth>'.$profundidad.'</Depth>
          <Width>'.$anchura.'</Width>
          <Weight>'.$peso.'</Weight>
        </Piece>';
  }
 $buffer.='</Pieces>';
  $buffer.='<IsDutiable>N</IsDutiable>
      <NetworkTypeCode>AL</NetworkTypeCode>
</BkgDetails>
    <To>
      <CountryCode>'.$countryCode.'</CountryCode>
      <Postalcode>'.$codigoPostal.'</Postalcode>
    </To>
   <Dutiable>
      <DeclaredCurrency>MXN</DeclaredCurrency>
      <DeclaredValue>0</DeclaredValue>
    </Dutiable>
  </GetQuote>
  </p:DCTRequest>';


$url ="http://xmlpitest-ea.dhl.com/XMLShippingServlet";  //URL de DHL

$prexml = $buffer;

//Iniciamos una sesion cURL
$soap_do = curl_init();
//Indicamos a donde deseamos enviar nuestro post
curl_setopt($soap_do, CURLOPT_URL,$url );
//Indicamos lo que queremos enviar en nuestro post, en este caso un xml
curl_setopt($soap_do, CURLOPT_POSTFIELDS,$prexml);
//Añadimos una opción más para poder almacenar la respuesta en una variable
curl_setopt($soap_do, CURLOPT_CONNECTTIMEOUT, 300);
curl_setopt($soap_do, CURLOPT_RETURNTRANSFER, 1);
//Ejecutamos el curl y almacenamos la respuesta en una variable

$respuesta=curl_exec($soap_do);

//Cerramos nuesta sesión
curl_close($soap_do);

Como se puede ver, es muy sencillo. Solo debemos dar los datos correctos, y seguir la estructura del XML que espera recibir el web service, En este caso esta estructura deben proporcionarnosla así, como una descripción de los datos esperados. Para este ejemplo incluimos unidades de medida, peso, longitud, ancho, profundidad, todo para cada articulo. Luego vía CURL, usando la URL del Web service, mandamos la información. Y esperamos recibir una respuesta, claro. No olvides poner las cabeceras correctamente, para tu XML se cree en el formato adecuado.

A continuación:

$xmlsimp = simplexml_load_string($respuesta);
$response = $xmlsimp->GetQuoteResponse->BkgDetails;

$tarifa1=0;
$tarifa2=0;
$days1 =0;
$days2=0;
foreach($response->QtdShp as $item)
{
 
    if($item->LocalProductName == "ECONOMY SELECT DOMESTIC" && $tarifa1==0)
    { $tarifa1=  $item->ShippingCharge;
$days1=(int)$item->TotalTransitDays+(int)$item->PickupPostalLocAddDays+(int)$item->DeliveryPostalLocAddDays;
      }
 
    if($item->LocalProductName == "EXPRESS DOMESTIC")
    {
      $tarifa2=$item->ShippingCharge;
$days2=(int)$item->TotalTransitDays+(int)$item->PickupPostalLocAddDays+(int)$item->DeliveryPostalLocAddDays;
      }
}  

echo "TARIFA ECONOMY SELECT DOMESTIC:".$tarifa1." entrega en ".$days1;
echo "TARIFA  EXPRESS DOMESTIC:".$tarifa2." entrega en ".$days2;


Lo primero que hago es cargar mi XML de respuesta con simplexml_load_string. Esa es la parte fácil, lo más complicado siempre es descifrar la estructura del XML para recorrerlo. Esa función te devuelve una estructura de datos que puedes recorrer como cualquier estructura en PHP. ¿Pero como sabes en que nivel esta el dato que necesitas? En mi caso, debía bajar al siguiente nivel:

$xmlsimp->GetQuoteResponse->BkgDetails

Lo que me indica que dentro de mi TAG principal, debía bajar al TAG GetQuoteResponse, y a su vez dentro de este ir al TAG BkgDetails. ¿Cómo lo supe? Pues no me quedo de otra que inspeccionar visualmente mi XML. Es un poco complicado, pero no queda de otra que verlo y ver que TAG va dentro de cada TAG, viendo donde se cierra y abre cada una. Y en caso de XML complejos, suele ser tedioso. No lo olvides, para indicar que vas a leer cierto TAG, se hace con el operador ->, y cada vez que lo usas bajas un nivel dentro de la estructura.

Una vez en el nivel adecuado, tengo el TAG QtdShp, el cual es un arreglo de TAGs en el cual cada elemento es un producto que ofrece DHL. Con producto me refiero a la clase de envio, el cual puede ser de varios tipos.

Como la información está en forma de  arreglo puede recorrerse con un for each. Dentro de ese TAG tengo tanto el monto del costo de envío, como los días que tomas el envio contenidos en 3 TAGS diferentes que debo sumar. Así que ya solo es de seleccionar los productos adecuados que sí puedo aplicar, en este caso "ECONOMY SELECT DOMESTIC" y "EXPRESS DOMESTIC". Y así obtengo los datos que necesito.

Como ves, una vez conociendo la estructura del XML, es muy fácil leer los datos que necesitas.

¿Sencillo no? Bueno no siempre funcionara  a la primera. por ello no olvides incluir estas lineas:

if(curl_errno($soap_do))
{
    echo 'error:' . curl_error($c);
}

Asi si tu XML tiene mal algun campo o error en el formato, verás el error que te regreso el Web service.

En realidad como puedes observar el crear un XML, enviarlo a un Web service y procesar la respuesta con PHP es muy sencillo. El mayor problema que tendrás será descifrar la estructura del XML.




jueves, 14 de abril de 2016

¿Qué es XAMPP? Y cómo convierte tu máquina en un servidor WEB

Cuando uno comienza en el mundo de PHP, lo primero que te das cuenta es que no es un lenguaje que venga listo para usarse, ni que cuente con un IDE de desarrollo. Si, no es Visual BASIC.

Una de las razones de esto, es que está muy enfocado al desarrollo web, por lo que básicamente se espera que ejecutes PHP en tu navegador.

Es cierto PHP también puede ejecutarse desde la consola, pero generalmente la mayoría de los scripts de PHP son creados para ejecutarse en un servidor web.

¿Y como hago para ejecutar PHP vía mi navegador?

Bueno, necesitas que tu máquina sea un servidor web. Para esto en realidad solo necesitas un programa que actúa como un servidor web. Espera, ¿pero que es un servidor web? Aplicandolo al software, es un programa que procesa la aplicación del lado del servidor, realizando conexiones con el cliente y generando respuestas. Se oye complicado. Pero básicamente, el servidor recibe peticiones a través del navegador y te entrega en respuesta una página web. Recibe las peticiones bajo HTTP, y te regresa código HTML (incluido JavaScript). Recuerda, ese código que recibes, tu navegador se encarga de interpretarlo y transformarlo en letras y colores bonitos, lo que recibe es un esquema de la pagina web (imagina lo pesado que sería transmitir si te mandara en lugar del guión, toda la página hecha).



Recuerda, el servidor web es el que construye la estructura de la página web. Es decir toma el código PHP, lo ejecuta, y genera una página en código HTML. Así que si quieres ver el resultado de tus scripts PHP en el navegador, necesitas un servidor web.

Es aquí donde entra Apache. Apache es un servidor web de código abierto, disponible para Linux, Windows, UNIX, Mac OS, en fin todas las plataformas.

Es decir, cuando tu envías una URL a tu navegador, Apache hace varias funciones. Por ejemplo, toma la URL , la interpreta y se encarga de identificar a qué recurso del servidor se refiere. Si le mandas parámetros, los interpreta y proporciona como entrada a tu script. Una vez identificado el archivo, ejecuta todos los lenguajes que se ejecutan del lado del servidor como PHP, y finalmente te manda el resultado.

¿Donde entra XAMPP en todo esto? Bueno XAMPP no es mas que un paquete de software integrado, como sus siglas dicen contiene: Apache, MySQL, PHP y Perl. La X significa que es universal: se ejecuta en UNIX, Linux, Windows y Mac Os.

Ya que contiene el servidor web, la base de datos y los lenguajes de programación necesarios para desarrollo web, si quieres comenzar con PHP lo ideal es que instales el paquete XAMPP completo. Si lo haces, en automático tu máquina será un servidor web. El link de descarga está aquí.

Una vez instalado, ya tienes PHP. Pero además tienes un entorno para ejecutarlo. El instalador de XAMPP es muy sencillo. Te hará la instalación completa de Apache, MySql y PHP y te los deja configurados y listos para funcionar.

Una vez instalado, abre el "XAMPP Control Panel" que se encuentra en Menú Inicio->Todos los Programas->XAMPP, si tu máquina funciona bajo Windows.


Como ves, es muy sencillo, este programa te indica gráficamente si Apache y MySql están encendidos, y si no están simplemente debes dar click en el botón Start para arrancarlos. Y si deseas apagar un módulo, en el botón Stop. Como nota Apache usa los puertos 80 y 443 y MySql el 3306, pero a veces el firewall o el antivirus te los bloquean, así que si te da mensaje de error al querer encender estos módulos, prueba bajar el firewall y el antivirus. Así que el control de los módulos, lo haces en este panel.

En el apartado Config puedes configurar tu servidor web. Para Apache los archivos mas importantes son:

httpd.conf : El archivo principal de configuración de Apache. Incluye los módulos de Apache que se cargan y otros parámetros importantes.

php.ini: El archivo de configuración de PHP.

config.inc.php: El archivo de configuración de PHPmyAdmin (este es un administrador de la BD mySql que se lanza vía el navegador web).

Y para MySql el archivo:

my.ini: Contiene la configuración de la Base de Datos MySQL.

En el apartado Logs del Panel de Control, tenemos algunos logs muy importantes, por ejemplo para Apache:

error.log: contiene el log de los errores del servidor Apache.

php_error_log: contiene el log de los errores de PHP.

Y para mySQL tenemos el archivo:

mysql_error: contiene el log de los errores de la BD mySql.

Como ves mediante este panel puedes hacer toda la administración de tu servidor.

Una vez instalado XAMPP ya estas listo para empezar a desarrollar en PHP. No lo olvides C:\xampp\htdocs es tu directorio raíz en donde Apache buscará las páginas web. Dentro de ese directorio puedes crear diversas subcarpetas para diferentes proyectos, digamos que cada proyecto es un sitio web. El primer archivo en ejecutarse en cada carpeta, es el index.php.

Por ejemplo, teclea http://localhost/ en tu navegador. Aparecerá la página de XAMPP que se crea mediante el archivo index.php que viene incluido en la instalación. Si creas una supcarperta, solo teclea http://localhost/nuevacarpeta donde nueva carpeta es el nombre que le diste a tu carpeta. Si creas un archivo index.php, se ejecutara. Y vuala !ya estas programando en PHP!. Es el inicio. De ti depende lo lejos que puedas llegar.







viernes, 12 de febrero de 2016

¿Por qué programar del lado del del servidor?

En entradas anteriores he analizado como existen lenguajes que operan del lado del servidor al momento de cargar una página web.

Estos lenguajes tienen entre sus ventajas el que cuentan con acceso a la base de datos del servidor, y no son enviados al cliente como tal, sino sólo los resultados que generan.

¿Por qué existe este paradigma de programación?

Bueno la razón principal es la seguridad. Imagina que un lenguaje de scripting como JavaScript, pudiera acceder directamente a la Base de Datos del servidor. En un mundo donde la gente por lo general busca robar, incluso información, sería bastante inseguro.

El detalle con los lenguajes de scripting, es que el usuario puede verlos y modificarlos. Después de todo, se ejecutan en el navegador, y el usuario debe poder tener control en lo que pasa en el. Recuerda que son lenguaje más orientados a la interfaz gráfica. 

De modo que JavaScript es sensible  a ser modificado por el usuario. Y es usado por los hackers para hacer inyecciones de código Javascript. Por supuesto, al ser código que se ejecuta en el navegador, su alcance es limitado, y se necesita mucha habilidad para causar daño con esta técnica.

Pero si JavaScript tuviera acceso a la Base de Datos, cualquier usuario podría hacer llamadas a la información de tu servidor y con eso, básicamente podría tomar el control completo de tu sistema. Por eso los lenguajes de script del navegador, no pueden acceder a la Base de Datos del servidor. Aunque de hecho, solo pueden ejecutarse en tu navegador, así que mientras viven en el servidor están "dormidos". Y no se les permite establecer conexiones con el servidor.

Y también es una de las razones , por las que los lenguajes del lado del servidor no entregan código fuente. Siempre es posible para un usuario ver el código HTML y JavaScript que tiene la página. Pero PHP, no llega como tal hasta tu navegador.

Por supuesto, un usuario no podría ejecutar código PHP a menos que tuviera montado un servidor en su máquina. Pero podría ver cosas muy comprometedoras. Recuerda que en PHP se hacen las consultas a la Base de Datos, así que podría ver toda la estructura de tu base de datos, tablas, columnas, información de los registros, etc. 

Además podría ver la información que procesas con PHP. La cual dependiendo de tu sistema, puede ser muy sensible.

Es por eso que al navegador solo le entregas resultados, nada de código fuente. Pongamos un ejemplo. Digamos que utilizas una cadena como firma electrónica, para transacciones comerciales.

Digamos que es para el pago de un producto y la creas así:

$firma = sha1($nom_producto.$nombre_tienda.$monto.$id_pedido.$clave_secreta);

De estos datos el nombre del producto, el nombre de tu tienda, el monto o el id del pedido son datos que fácilmente se puede ver en el formulario que creaste en HTML. Por supuesto, el usuario debe tener acceso a estos datos. Pero no debe poder saber cómo creaste tu firma.

Lo que si puede ver es el resultado de la variable firma que sería:
Resultado SHA-1: 332de724dde0ed9e71d2d07cc5aaf3c49a526b58

Sin embargo, si fuera un atacante, el tener esta información le es inútil. ¿Por qué? En primera, porque no sabe cómo se construyó la firma, el solo ve el resultado. Por eso si obtuviera el código fuente sería peligroso.

Además la variable clave secreta, se consultó de tu base de datos, y a menos que tenga acceso al código PHP, tampoco sabe cómo acceder a ella. En ningún momento puede verla en el formulario, ya que solo forma parte del resultado compuesto firma.

Adicionalmente claro, le entregamos todo cifrado con SHA-1. No somos tontos, sabemos que la información importante debe ir cifrada. SHA-1 es irreversible, así que aunque lo vea ahí no sabe de donde salio.

Por supuesto como se ve solo el resultado, ni siquiera sabe si usamos SHA-1, MD5 u otro metodo de encriptacion.

Y por eso el código fuente PHP, no se entrega al navegador. A menos claro, que tengas un error

martes, 9 de febrero de 2016

NetBeans como IDE para desarrollo en JAVA y otros lenguajes, como un Visual Studio libre

Todo buen programador sabe la importancia de contar con buenas herramientas de diseño y desarrollo.  Es cierto, la herramienta no hace al programador, pero puede facilitarte mucho la vida.

Entre las herramientas más esenciales, se encuentra el contar con un buen IDE. Un IDE es un Ambiente de Desarrollo Integrado (Integrated Development Environtment, en inglés), incluye un editor de código, así como compilador y entorno de ejecución. Por supuesto, puedes programar usando solo bloc de notas, o usar incluso editores potentes como el Notepad ++, y muchos programadores lo hacen así.

Pero usar un IDE te hará más fácil e intuitivo el trabajo, y más divertido el programar. Cuando piensas en un buen IDE, de seguro lo primero que se te viene a la mente es el profesional Visual Studio de Microsoft.Muchas generaciones de programadores han empezado sus primeros proyectos en este entorno, que te facilita enormemente las cosas. En mi caso particular empecé con Visual Basic,  y fue una delicia empezar a programar usando esta aplicación tan completa.  Objetos, librerías, bueno, Visual Studio tiene todo integrado y gráfico, convirtiendo la programación en algo sencillo y ameno. De hecho, yo había programado antes en COBOL, C++, BASIC y otros lenguajes, pero mi aprendizaje de Visual Basic marcó un antes y después en mi vida como programador. Aprendí que la programación puede ser aún más divertida y visual, y que el programador solo debería preocuparse por la lógica del código, y no por el diseño de los objetos o como va a compilar o a crear su ejecutable, o por cómo va a enlazar diversos componentes y librerías. Una ventaja de Visual Studio, es que está fabricado para productos de Microsoft, por lo que se integra naturalmente con toda la suite de Office, y con el sistema operativo Windows. Si vas a generar aplicaciones para Windows no hay nada mejor.

Pese a ser un producto de lo más profesional , intuitivo y robusto que existe, Visual Studio tiene algunas carencias. Todas ellas a causa de ser un producto de Microsoft. Primero que nada , el costo, sabemos que los productos de Microsoft son caros. Segundo, solo funciona con lenguajes de Microsoft, Visual Basic, C# o más bien ahora .NET, y solo pensando en plataformas Windows. Por supuesto, Windows es el sistema operativo por excelencia en el mundo del PC. Pero la programación moderna exige abrir tus horizontes. Por simple ejemplo, la mayoría de los servidores no utilizan Windows como sistema operativo, montan UNIX y Linux y debes ser capaz de generar aplicaciones para ellos.

¿Existe algun IDE tan profesional como Visual Studio, para otros lenguajes y que sea libre? Fue una pregunta que me hice por mucho tiempo. Después de todo, la tendencia moderna es el auge del software libre. Linux, Android, Java, PHP, mySQL, en fin, no todos tan libres pero enfocados más o menos a la misma filosofía. Y cuando tuve que programar en JAVA, me pregunté seriamente si podría encontrar un buen IDE para hacer mi desarrollo.

JAVA es un lenguaje que se ha vuelto omnipresente. Para mi no es tan sencillo, pero ha sido necesario que me adapte a su uso. Una de sus mayores ventajas es la portabilidad: creas un programa en JAVA, y podrás ejecutar tu aplicación en Linux, UNIX, Windows, básicamente cualquier sistema. Eso también trae una desventaja, que siempre será un poco más lento correr una aplicación JAVA que una hecha nativamente para tu arquitectura, ya que JAVA corre sobre una máquina virtual.

Anteriormente use Eclipse para desarrollar en JAVA. No tengo nada en lo personal contra Eclipse, es de hecho muy completo y tienes muchas herramientas, pero siempre me pareció demasiado pesado y lento. Quizá el problema, es que es demasiado completo, cargar Eclipse para que funcionara exigia mucho tiempo, y una buena dosis de memoria RAM.

Así que no, no quería volver a usar Eclipse, que además de lento me parecía algo complejo. Siempre pensé que Eclipse no está a la altura de Visual Studio, y no me gusta como IDE. Fue entonces cuando me topé con NetBeans. Decidí probarlo, ya que de todos modos, no me iba a adentrar en programar en JAVA sin un IDE. Y puedo decir que ha sido una de las experiencias más gratas de mi vida como programador. NetBeans as ágil, sencillo, visual, y robusto. Es como siempre soñé que sería un Visual Studio libre.

Veamos algunas de las características de este IDE, que me agradaron:

1.-Ligero


Como había dicho, Eclipse siempre me pareció pesado. Ahora que tengo NetBeans noto mucha diferencia.

NetBeans carga relativamente rápido, y en ningún momento he sentido que se me alente cuando esta en funcionamiento.

Quizá porque no cargo tantos complementos, pero tampoco me consume demasiada memoria RAM. 


2.- Sencillez


Siempre me pareció un poco más complejo hacer las cosas en Eclipse, desde cargar una librería hasta agregar un componente.

Netbeans hace los procesos más sencillos y sobre todo su interfaz es mas sencilla y limpia. La interfaz de Eclipse me parece un poco recargada.

Por eso NetBeans me ha hecho más rápido y ágil el desarrollo de código, me parece más intuitiva su interfaz.


3.- Colores el código


En este punto todos los IDE te ofrecen un valioso apoyo, e incluso editores como el Notepad ++.

NetBeans soporta colores de código para múltiples lenguajes, si el lenguaje no se soporta de forma predeterminada, solamente tienes que instalar el plugin correspondiente. 


Para quien no está familiarizado con los colores de código, te diré que un IDE te hace la siguiente distinción: palabras reservadas del lenguaje, comentarios, constantes, cadenas de texto, entre otros.

De esa manera es mucho más fácil identificar los diferentes elementos de tu código y depurar errores.

4.-Indentación de código


Muchos de los elementos de la edición de código, están pensados para que se nos haga más fácil entender y modificar esa maraña que llamamos código.

Si , ya no programamos en 1 y 0 , pero aún la lógica de un programa puede hacerse tan complicada, que cuando intentas leerlo terminas perdiéndote sin entender nada.

El mejor código, entre otras cosas, es el que es legible y entendible, hasta para una persona que no fue el desarrollador. Tu código debe estar tan bien estructurado y presentado, que una persona que no tiene conocimiento de tu programa en particular, debe poder ser capaz de leerlo y modificarlo.

Tu mismo te ahorrarás dolores de cabeza si lo pones presentable. Una técnica muy usada para esto, es la indentación.  Esto consiste simplemente en alinear los bloques de código de manera horizontal para que sean más entendibles para el ser humano.

Entre las reglas básicas de la identación, es que si abres una condición, o un ciclo, el código que esté dentro debe estar indentado (cargado ciertas columnas a la derecha). Si dentro de ese ciclo o condición, metes otra, a su vez el código que esté dentro debe estar indentado.

En el caso de una condición, el código que esté dentro la parte positiva del if, debe ir al mismo nivel que el código que esté dentro de la parte negativa o else.

De esa manera la identación nos permite reconocer a primera vista los bloques de código, ciclos, condiciones, y la lógica general y flujo del programa. Para mas información, lee aqui.

NetBeans y otros editores saben que necesitas indentar, y te lo hacen fácil. En el caso de NetBeans, basta con seleccionar el texto a indentar, y pulsar el indentado a la izquierda o derecha en la barra de herramientas. Automáticamente, insertará o quitará espacios para desplazar tu código un número fijo de posiciones. Y así lo va alineando.



5.-Comentar /Descomentar código


Los comentarios son parte esencial de un programa. Le explican al ser humano que hace el programa.Y como el programa debe ser mantenido y modificado por un ser humano, es importante que lo entienda correctamente.

Ahora bien, tienen otro uso esencial. Generalmente al programar, terminamos arrepintiendonos de cierto código, O nos piden un cambio, Pero como el código es una bella obra de arte, que además podemos volver a utilizar, no nos gusta borrar código. Mas si aún estamos probando y no sabemos que desastre se hará y cómo regresar al estado anterior.

Por eso mientras estamos en desarrollo, es una práctica muy común comentar/descomentar código. Comentar el código es la forma mas sencilla de eliminarlo. NetBeans nos facilita este trabajo.

Igual que con la indentación, solo tienes que seleccionar un bloque de texto, y en la barra de herramientas la opción Comment, para comentar el texto, o Uncomment para descomentarlo. Bien por NetBeans.


6.- Autocompletar


Una de las cosas que más me gustaba de Visual Studio, es que pensaba por ti. Es decir, tienes un objeto, una función, o alguna de esas cosas que no sabes que tantos atributos o propiedades tiene, y deseas hacerle algo. Y no sabes que. Y de repente, tú ponías un . y en automático Visual Studio reconocía que querías hacerle algo y desplegaba una lista de todos los métodos y propiedades de dicho objeto.

Y decías !magia! piensa por mí. Bueno es una característica que facilita mucho el desarrollo. Y si, NetBeans también la incluye. Al poner punto, te despliega la lista completa de lo que puedes poner como código válido a continuación, puedes seleccionar una opción y te la pone.

Por supuesto la descripción del método incluye el tipo que es y los parámetros de entrada que recibe.


Otro detalle es cuando pones una llave { debajo de un if, o un while, o for y das enter, en automático te pone llave de cierre }. Si pones un  paréntesis ( después de un if o un while o for, en automático te pone el paréntesis de cierre ) para que puedas cerrar la condición. Si pones un corchete [ de inmediato te pone el corchete de cierre ]. Vaya va escribiendo por ti a poco a poco haciéndote más rápida y ágil la edición del código.


7.-Ayuda en línea.


Muy ligado al concepto de autocompletar, está la ayuda que nos proporciona el editor. Por ejemplo, si pones un punto y debes elegir entre diversos métodos, no solo te aparece la lista de estos, si no además en la parte superior un cuadro con ayuda en línea que contiene información sobre los mismos.

Es muy útil porque contiene información detallada sobre el método a utilizar.  En especial si utilizas JAVA la documentación es bastante completa y ayuda bastante a tu aprendizaje. !Que bueno que alguien te explica mientras programas!



8.- Detección de errores.


Una de las razones básicas para usar un IDE, es que en automático va revisando la sintaxis de tu programa mientras lo escribes.

¿Recuerdas cuando programabas en COBOL u otro lenguaje en un editor, y luego el compilador te arrojaba chorrocientos mil errores? Bueno con NetBeans , eso casi no pasa.

Todo buen IDE debe ir revisando tus errores, y te va marcando el código que está mal escrito. NetBeans tiene 3 variantes: un color rojo para los crasos errores sintácticos (no corre porque no corre, porque no le pusiste punto y coma),  un amarillo con sugerencias para hacer más legible y eficiente tu código, y un gris para recomendaciones semánticas para el mejor uso de variables (por ejemplo: declaraste esta variable y nunca la usaste).

Ligado a esto, si posicionas el cursor sobre el código que está en error, NetBeans te muestra un mensaje de ayuda que te dice precisamente porque está equivocado.


La ayuda complementaria es muy útil, las sugerencias muestran que NetBeans es muy quisquilloso a la hora de evaluar tu código. Por ejemplo, en el caso de la revisión en JAVA te marca error si no pones ciertas instrucciones dentro de un bloque try-catch.

En el caso de las sugerencias, te indica si asignas 2 veces una variable, si declaras una variable que después no utilizas, si un método nunca es invocado e incluso te sugiere que siempre uses llaves en tus bloques condicionales o en los ciclos. En fin todo un maestro corrigiendo tu código.


9.- Tener organizado y estructurado tu proyecto.


Cuando trabajas con lenguajes orientados a objetos, lo más común es tener múltiples clases y librerías dentro del mismo proyecto.

NetBeans te hace muy fácil el agregar clases, y también el importar librerías para tu proyecto. Una forma de hacerlo es de archivos JAR que se van agregando a tu proyecto.

Y cuando finalmente generas tu ejecutable, te lo empaca todo junto en un archivo JAR que está listo para ser utilizado en cualquier máquina, con todas sus librerías y dependencias incluidas.




9.- Compilar y Ejecutar.


Una de las ventajas de usar un IDE es que puedes compilar y ejecutar tu programa, todo en el mismo entorno. Atrás quedaron los días de editar con un editor de textos, luego compilar, y luego ejecutar. Eso es obsoleto.

Los IDES como NetBeans o Visual Studio te permiten compilar el código y ejecutarlo con solo oprimir un botón. 




NetBeans de inmediato compilara y ejecutará el programa. Por supuesto si lo deseas, esta la opción de solo compilarlo.

Por supuesto, NetBeans también incluye una de las herramientas mas poderosas de Visual Studio: el correr paso a paso.

Imagina tu programa como una gran caja negra. Cuando está en tiempo de ejecución simplemente hace lo que le ordenaste hasta que truena por algún error o termina por una ejecución exitosa ¿Como saber que paso en medio? ¿Como saber exactamente por qué trono? Si no llego a arrojar resultados en pantalla es desesperante.

Bueno con los lenguajes visuales y los IDE no tienes por que adivinar qué ocurre. Puedes saberlo. Para hacer esto, en lugar de ejecutar de forma normal tu programa, puedes ejecutarlo una instrucción a la vez. En NetBeans simplemente con pulsar F7.

Es una delicia ver cómo se va ejecutando tu programa línea por línea. Incluso puedes ver que valores van tomando las diferentes variables que has utilizado. Sin duda facilita mucho la vida. Cuando estas corriendo paso a paso, en cualquier momento puedes dar F5 para correrlo de modo normal. O incluso detener la corrida, con el botón stop en la barra superior de herramientas.



Ahora bien otra herramienta muy útil para la depuración es el breakpoint. Un breakpoint es simplemente una línea de código que marcas para el programa detenga su ejecución al llegar a esa línea.

Para correr el programa de modo que respete los breakpoints, es importante hacerlo en modo Debug, con Control+F5 o seleccionando la opción en el menú.

Al llegar al breakpoint se detendrá la ejecución. Una vez allí, se puede reanudar de manera normal con F5, o incluso paso a paso con F7.

Para agregar un breakpoint basta con dar click secundario y elegir Breakpoint, y luego Enabled.



Una ventaja adicional es que en Netbeans en tiempo de ejecución puedes ver la consola,  e incluso te permite inspeccionar el valor que van tomando las diferentes variables de tu programa en tiempo de ejecución.

Todo esto en la ventana inferior, en la pestaña Output puedes ver las salidas que ha mandado la consola (aqui puedes imprimir con diversas instrucciones), y en la Pestaña Variables inspeccionar directamente el valor de las diversas variables de tu programa.




¿Todo esto se va pareciendo mucho a Visual Studio, no? Pues sí NetBeans es el IDE que más he encontrado parecido a este excelente producto.

Para más información sobre como ejecutar y debuguear en NetBeans lee el siguiente enlace.

Gracias a esta herramienta, ejecutar código JAVA es bastante amigable.

10.- Diseño Gráfico y Visual


Cuando probé por primera vez Visual Studio, algo que me encanto es que era todo gráfico y Visual. Para crear un objeto en pantalla no tienes que hacer cientos de líneas de código. Basta tomar de manera gráfica con el mouse una plantilla del objeto, arrastrar, acomodar en pantalla y soltar.

Visual Studio parece un programa de diseño, al que vas agregando código. Eso hace muy fácil la tarea de desarrollo. Siempre he dicho que el diseño de los objetos, debe ser independiente de su programación. El diseño me dice como es un objeto , y la programación que hace un objeto.

¿Pero existirá algún software libre que facilite tanto la tarea de desarrollo de sistemas gráficos como Visual Studio? Bueno para empezar, los lenguajes libres no están tan orientados al entorno gráfico. Baste decir que JAVA es anterior a Visual Basic. Y mientras JAVA es un lenguaje de propósito general, Visual Basic nació enteramente dedicado a la programación Visual. Aunque hereda la sintaxis del lenguaje BASIC, desde su mismo inicio fue creado como un lenguaje Visual pensado para aplicaciones de escritorio con las que el usuario interactúa mediante la interfaz gráfica. 

Por supuesto JAVA se ha hecho cada vez más Visual, y es considerado un lenguaje enteramente orientado a objetos. ¿Es posible que sea tan fácil programar en JAVA como en Visual Basic? Más allá de la sintaxis del lenguaje, NetBeans proporciona poderosas herramientas para facilitar el desarrollo en JAVA de programas con interfaces gráficas. 

Te proporciona un editor gráfico, que puedes utilizar en determinadas clases, como la JFrame por ejemplo.

La primera vez que lo vi me quede sorprendido. !Por fin un IDE que permite programar interfaces gráficas en JAVA de forma sencilla!

Su funcionamiento es básicamente el mismo que en Visual Studio: eliges, arrastras, posicionas y sueltas. 


Si deseas modificar las propiedades de un objeto, simplemente das click secundario y eliges Properties. Puedes cambiar el color, tipo de letra, si es editable, seleccionable, etc

Puedes dimensionar el objeto por medio de la interfaz gráfica. En fin es un completo editor de objetos.

Por supuesto, las interfaces gráficas en JAVA aún están un poquito debajo de la calidad que ofrece Visual Basic. Pero vaya que ahora es mucho más fácil construirlas. Recuerdo mis años mozos cuando todo era teclear un montó de líneas de código.

Sin duda NetBeans es el IDE más completo y bien logrado que he encontrado de software libre. Y ha hecho algo increíble, hizo que me gustara programar en JAVA. Al final, creo que JAVA solo era una chica incomprendida, a la que no me habían presentado ya arreglada y bonita.