Skip to main content

Concurso de año nuevo

Este post es para agradecerle a todas las personas que han leído mi blog durante este año , a los que se han suscrito a mi canal de YouTube, y a mis seguidores en mis redes sociales, es por eso que no solo quiero darles las gracias si no que obsequiarles algo que espero les sea útil para seguir aprendiendo a desarrollar sitios y aplicaciones web, el regalo que quisiera darles es un espacio en mi servidor, con una cuenta ftp para realicen pruebas durante un año, el problema es que son tantos usuarios que no podría darles a todos una cuenta es por eso que se me ocurrió realizar un mini concurso para elegir a un ganador, ahora no sé qué dinámica realizar, ni como elegir al ganador , es por eso que realizaremos dos concursos.

 

Primer concurso

El primer concurso será diseñar una dinámica para el concurso número 2, en un correo deberán enviarme la dinámica que proponen, uno de los objetivos de estos concursos es agradecerles el apoyo pero también llegar a más personas, es por eso que daré puntos extras a las personas que diseñen propuestas que me hagan llegar a más personas por ejemplo que para participar se suscriban a mi canal y a mi Newslatter , o que le den me gusta o follow a mis cuentas de redes sociales, esto con el fin de llegar al mayor número de personas posibles.

Para enviar tu propuesta tienes hasta el 19 de enero del 2016 y tienes que enviármela a mi correo rodrigogomez05@gmail.com poniendo en el asunto “Dinámica concurso blog” en la propuesta cubrir los siguientes puntos:

  • Descripción de dinámica paso a paso lo más detalla posible.
  • Fácil implementación y que no lleve demasiado tiempo elegir al ganador.
  • Viralización de mi contenido.
  • Como se elegirá al ganador.
  • Si se usaran herramientas externas, poner un anexo con los links donde se explique el funcionamiento.

Yo elegiré la mejor propuesta y daré mi veredicto el 25 de enero, el ganador de este concurso tendrá un plan de hosting durante un año y un dominio con terminación .COM.

Segundo concurso

Para este concurso implementare la dinámica ganadora del primer concurso y anunciare al ganador el día 4 de febrero del 2016, el premio de este concurso será un dominio con terminación .COM y un plan de almacenamiento web durante un año.

Comentarios Facebook

¿Qué es la computación en la nube o cloud computing?

Es un término que representa un nuevo modelo de informática, tenido por muchos analistas por una innovación tan relevante como lo fue internet en su momento. Además, es el mejor sinónimo de la propia Web.

Cloud Computing es la evolución de un conjunto de tecnologías que afectan al enfoque de las organizaciones y empresas en la construcción de sus infraestructuras de TI. Al igual que ha sucedido con la evolución de la Web, con la Web 2.0 y la Web Semántica, la computación en nube no incorpora nuevas tecnologías. Se han unido tecnologías potentes e innovadoras, para construir este nuevo modelo y arquitectura de la Web.

Si bien Internet es un fundamento necesario, la nube es algo más que Internet. Es aquel lugar donde utilizar tecnología cuando se necesita, mientras se necesite, ni un minuto más. No se instala nada en su escritorio, ni se paga por la tecnología cuando no se utiliza.

La nube puede ser infraestructura o software, es decir, puede ser una aplicación a la que se accede a través del escritorio y se ejecuta inmediatamente tras su descarga, o bien un servidor al que se invoca cuando se necesita. En la práctica, la informática en nube proporciona un servicio de software o hardware.

No existe una definición aceptada universalmente; sin embargo, existen organismos internacionales cuyos objetivos son la estandarización de Tecnologías de la Información y, en particular, de Cloud Computing. Uno de los organismos más reconocidos es el National Institute of Standards and Technology (NIST) y su Information Technology Laboratory, que define la computación en nube (cloud computing) como:

«Un modelo que permite el acceso bajo demanda a través de la Red a un conjunto compartido de recursos de computación configurables (redes, servidores, almacenamiento, aplicaciones y servicios) que se pueden aprovisionar rápidamente con el mínimo esfuerzo de gestión o interacción del proveedor del servicio».

La nube es un conjunto de hardware y software, almacenamiento, servicios e interfaces que facilitan la entrada de la información como un servicio. El mundo de la nube tiene un gran número de actores o participantes. Los grupos de intereses del mundo de la computación en nube son: los vendedores o proveedores: proporcionan las aplicaciones y facilitan las tecnologías, infraestructura, plataformas y la información correspondiente; los socios de los proveedores: crean servicios para la nube, ofreciendo servicios a los clientes; los líderes de negocios: evalúan los servicios de la nube para implantarlos en sus organizaciones y empresas; los usuarios finales utilizan los servicios de la nube, gratuitamente o con una tarifa.

Modelos de la nube

El NIST clasifica los modelos de la computación en nube en dos grandes categorías:

  1. Modelos de despliegue. Se refieren a la posición (localización) y administración (gestión) de la infraestructura de la nube (Pública, Privada, Comunitaria, Híbrida).
  2. Modelos de servicio. Se refieren a los servicios específicos a los que se puede acceder en una plataforma de computación en la nube (Software, Plataforma e Infraestructura como Servicios).

Estas tecnologías ofrecen tres modelos de servicios:

  1. Software. Al usuario se le ofrece la capacidad de que las aplicaciones suministradas se desenvuelvan en una infraestructura de la nube, siendo las aplicaciones accesibles a través de un navegador web, como en el correo electrónico Web. Posiblemente, este es el ejemplo más representativo, por lo extendido, de este modelo de servicio. El usuario carece de cualquier control sobre la infraestructura o sobre las propias aplicaciones, excepción hecha de las posibles configuraciones de usuario o personalizaciones que se le permitan.
  2. Plataforma. Al usuario se le permite desplegar aplicaciones propias (adquiridas o desarrolladas por el propio usuario) en la infraestructura de la nube de su proveedor, que ofrece la plataforma de desarrollo y las herramientas de programación. En este caso, el usuario mantiene el control de la aplicación, aunque no de toda la infraestructura subyacente.
  3. Infraestructura. El proveedor ofrece recursos como capacidad de procesamiento, de almacenamiento o comunicaciones, que el usuario puede utilizar para ejecutar cualquier software; desde sistemas operativos hasta aplicaciones.

Los modelos de despliegue de las infraestructuras y servicios de la nube se clasifican en las siguientes categorías:

  • Nube privada. Los servicios no son ofrecidos al público en general. La infraestructura es íntegramente gestionada por una organización.
  • Nube pública. La infraestructura es operada por un proveedor que ofrece servicios al público en general.
  • Nube híbrida. Resultado de la combinación de dos o más nubes individuales que pueden ser privadas, compartidas o públicas. Permite enviar datos o aplicaciones entre ellas.
  • Nube comunitaria (community). Ha sido organizada para servir a una función o propósito común. Es preciso compartir objetivos comunes (misión, políticas, seguridad). Puede ser administrada bien por las organizaciones constituyentes, bien por terceras partes. Este modelo es el definido por el NIST, aunque la mayoría de organizaciones, proveedores y usuarios de la nube aceptan los tres modelos de despliegue: pública, privada e híbrida.

Proveedores de servicios en la nube

Dentro de este nuevo esquema informático tenemos a varios tipos de proveedores los cuales se muestran a continuación

  • Los servicios de la nube proporcionan la red e infraestructuras de computación mediante plataformas y soluciones. Los proveedores de servicios y soluciones de la nube son similares, y permiten desarrollar y proporcionar servicios y soluciones de la nube desde la perspectiva de los consumidores. Los proveedores de servicios de la nube incluyen organizaciones que operan con centros de datos propios y apoyados en servicios de virtualización. Los proveedores son variados y tienen gran implantación, aprovechando sus centros de datos y de su experiencia en alojamiento de datos y aplicaciones.
  • Proveedor de servicios de plataformas de la nube. Proporcionan plataformas basadas en la nube, hospedados en entornos de sistemas e infraestructuras específicos, para que los desarrolladores puedan acceder a la plataforma, desarrollar una nueva aplicación de negocios y alojarlas en la plataforma basada en la nube.
  • Proveedores de tecnologías. Desarrollan las herramientas y tecnologías que facilitan que la nube se establezca y se proporcione a los consumidores de recursos proporcionados por la nube. Ofrecen un amplio rango de herramientas, tecnologías, sistemas operativos para facilitar el despliegue de nubes públicas, privadas, híbridas y comunitarias.
  • Proveedores de soluciones. Desarrollan aplicaciones o suites completas, para conseguir un amplio mercado de consumidores de la nube (otras operadoras de telefonía e internet).

En la actualidad los gigantes como Microsoft, Google , IBM , Amazon y Rackspace son los líderes mundiales en proveer servicios relacionados con esta tecnología, un caso a destacar es el de Rackspace, el mayor proveedor de hosting a nivel mundial , llega a obtener 100% de ganancias netas por sus servicios , y plataforma en la nube.

Los sistemas operativos en la nube más populares son Redhat,debian , ubuntu server, MacOS server, y Windows Server.Para la virtualizacion en centro de datos utilizan VMware vSphere y Citrix XenServer.

 

Bibliografía Computacion en la nube , José Joyanes Aguilar (Autor)

Comentarios Facebook

Usabilidad de una aplicación web

 

El término usabilidad es relativamente reciente. Se puede decir que surgió poco después de la expansión de Internet, a finales de los años 90. Pero realmente la idea que quiere expresar es bastante anterior, aunque se conocía con otros nombres como por ejemplo el Diseño Centrado en el Usuario o Human-Computer Interaction (HCI).

La usabilidad se refiere a la capacidad de un software o sistema interactivo de ser comprendido, aprendido, usado fácilmente y atractivo para un usuario, en condiciones específicas de uso. También es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar sus objetivos específicos (1).

Conceptos básicos de usabilidad

Facilidad de manejo de la aplicación

Generalmente el diseñador de una aplicación es un usuario subjetivo del programa, por lo que sabe exactamente cómo manejarlo. El problema de esto, es que en ocasiones no se tiene en cuenta el nivel de experiencia de los usuarios medios.

Para solucionar este problema surge la usabilidad. Como se definió anteriormente, la usabilidad se centra en la facilidad e intuitividad en el manejo de las aplicaciones.

Equilibrar diseño y contenido

En muchas ocasiones los diseñadores inexpertos hacen uso de la regla de oro “una imagen dice más que mil palabras”. Esto no es lo adecuado, ya que en un principio podría lucir fascinante el diseño pero no están considerando la carga de todo el contenido multimedia y las limitaciones de algunos usuarios con la velocidad de internet que poseen.

Adaptación de la aplicación al medio

Uno de los problemas que se tiene que enfrentar cuando se diseña una aplicación, es el entorno en donde se ejecutara ya que no se sabe a ciencia cierta en medio donde se desempeñara.

Para afrontar esto, lo principal es preguntar al cliente el tipo de entorno donde se desarrollará; sin embargo esto no aplica para todas las aplicaciones, ya que en la actualidad y con los avances tecnológicos en hardware y con el creciente uso de dispositivos móviles, es indispensable crear aplicaciones independientes a este.

Accesibilidad de la aplicación

Un último aspecto que hace que una aplicación sea usable es que sea accesible para personas con necesidades diferentes. Hemos de centrar especialmente nuestra atención en estos usuarios y nuestra aplicación deberá adoptar ciertas medidas para que puedan utilizarla. Algunas de las medidas que se pueden tomar para alcanzar este objetivo son:

  • Utilizar una correcta combinación de colores.
  • Dar la opción de aumentar el tamaño de la letra o algún tipo de zoom en la aplicación.
  • Proporcionar la opción de imprimir o guardar en disco toda la información que ofrece la aplicación.
Comentarios Facebook

Modelo Vista Controlador

¿Qué es MVC?

MVC (Model-View-Controller) es un patrón de diseño de software en torno a la interconexión de los tres tipos de componentes principales en un lenguaje de programación como PHP, a menudo con un fuerte enfoque en la programación orientada a objetos (POO). Estos tres tipos de componentes son vagamente llamados modelos, vistas y controladores.

El modelo es donde se guarda todo la lógica del negocio de una aplicación, la lógica del negocio puede ser cualquier cosa específica acerca de cómo una aplicación almacena los datos, o utiliza servicios de terceros con el fin de cumplir con sus necesidades. Si la aplicación debe acceder a la información en una base de datos, el código deberá estar guardado en el modelo.

La vista es donde se encontrarán todos los elementos de la interfaz de usuario de una aplicación, esta puede contener código HTML, hojas de estilo CSS y archivos Javascript. Cualquier cosa que el usuario pueda ver, es guardado en la vista, y algunas veces lo que ve el usuario actualmente es la combinación de varias vistas en la misma petición.

El controlador es el componente encargado de conectar el modelo con la vista. Los controladores aíslan la lógica del negocio de un modelo de los elementos de la interfaz de usuario de una vista y maneja la forma en la que la aplicación responde a la interacción del usuario en la vista. Los controladores son el primer punto de entrada en estos componentes, ya que la primera solicitud se pasa a un controlador, que luego instancia a los modelos y vistas requeridas para cumplir con una petición a la aplicación (2).

Ciclo de vida del MVC.

  • El usuario realiza una petición.
  • El controlador captura la petición del usuario.
  • El controlador llama al modelo.
  • El modelo interactúa con la base de datos, y retorna la información al controlador.
  • El controlador recibe la información y la envía a la vista.
  • La vista procesa la información recibida y la entrega de una manera visualmente entendible al usuario (3).

Figura 1. Ciclo de vida del MVC.

Ventajas de MVC

Las principales ventajas del uso del patrón MVC son (4):

  1. La separación del Modelo y la Vista, lo cual logra separar los datos, de su representación visual.
  2. Facilita el manejo de errores.
  3. Permite que el sistema sea escalable si es requerido.
  4. Es posible agregar múltiples representaciones de los datos.

Desventajas de MVC

Las principales desventajas del uso del patrón MVC son (4):

  1. La cantidad de archivos que se deben mantener incrementa considerablemente.
  2. La curva de aprendizaje es más alta que utilizando otros modelos.
  3. Su separación en capas, aumenta la complejidad del sistema.
Comentarios Facebook

Poniendo Audio con HTML5

Si naciste igual que yo en los 90’s o antes, y tuviste computadora conectada a internet , sabrás de que era imposible poder ver videos en el navegador o poner un reproductor en nuestro sitio ya que los navegadores de esa época no eran compatibles con esos formatos, a esta problemática existencial llegaron los famosos archivos FLV ( Flash Video ) , que hasta hace poco era el reino y señor de los contenidos multimedia embebidos en el navegador , pero con la llegada de HTML 5 y sus API para poder tener un reproductor de archivos sonoros con solo una líneas de código o un sencillo pero práctico reproductor de videos que soporta múltiples formatos , han hecho que los desarrolladores implementen esta nueva forma tan sencilla de mostrar contenido multimedia en sus sitios y aplicaciones. Si no me creen que es tan sencillo sigue leyendo este post y aprende como poder tener un reproductor de música funcional en nuestro sitio en menos de 5 min.

Audio.

Para reproducir un archivo de audio en una página web, debemos utilizar la etiqueta <audio>, que en sintaxis mínima e ideal llevaría esta sencilla estructura

 

Pero esto no producirá ningún resultado, ni visual, ni auditivo, ya que estaría faltando definir atributos que controlen la visualización del reproductor y la manera en que se comenzará a reproducir o no el archivo en cuestión. Veamos entonces cuáles son las opciones existentes.

Atributos

Al entrar al sitio web se empezará a reproducir el archivo que hayamos puesto en el atributo src
y es tan simple hacer esto con tan solo definir el atributo autoplay en el tag audio.

 


Otro atributo para el control de esta etiqueta es loop que sirve para que el archivo vuelva a reproducirse cada vez que finalice de manera infinita, un caso de aplicación sería una música de fondo que queremos que escuche nuestro visitante y ambientar nuestro sitio según el enfoque del mismo, por ejemplo para un sitio de algún restaurante o museo de alta categoría se pondría de fondo una canción tranquila como una sinfonía, en cambio para una empresa dedicada a vender equipo de supervivencia usaríamos sonidos parecidos a los de una jungla o escenarios de naturaleza.

En lo personal a mí me gusta usar este atributo pero siempre con la visualización de los controles para que los visitantes puedan parar el sonido en cualquier momento.

Para poder visualizar los controles de stop, play, la barra de tiempo, regulación de sonido, y la duración total tenemos que definir el atributo controls, con esto tendremos listo nuestro reproductor de música sin ningún código extra con solo HTML5.

< audio src="archivo.ogg" autoplay controls loop>

Al usar el tag de audio tenemos tener en cuenta que no todos los navegadores soportan los mismos formatos de archivo de sonido, es por eso que tenemos que poner varias opciones de formato, en la tabla de abajo se muestra el navegador y el formato que soporta. De igual manera algunas versiones de los navegadores no soportan elementos de audio, puedes ver las versiones de los diferentes navegadores que soportan este elemento en la tabla de abajo.

Browser

MP3

WAV

OGG

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

YES

NO

Opera

YES

YES

YES

Elemento

Chrome

IE

Firefox

Safari

Opera

<audio>

4.0

9.0

3.5

4.0

10.5

Para definir las diferentes opciones del archivo que queramos reproducir se necesita poner el tag  <source src="horse.ogg" type="audio/ogg">  donde el atributo type se define el tipo de archivo con el cual el navegador identificara cual soporta y ese va a reproducir, este paso quedaría de la siguiente manera.

En esta tabla se muestra como debemos definir los media types según el formato que manejemos, como vieron no es muy complicado tener un reproductor en nuestro sitio,es algo básico pero depués les mostraré como  personalizarlo con algo de CSS3 y javascript para hacer cosas interesantes.

 

Formato del archivo

Media Type

MP3

audio/mpeg

Ogg

audio/ogg

Wav

audio/wav

Código del video Tutorial

 

Comentarios Facebook

Geo localización JavaScript

Actualmente esta funcionalidad en las aplicaciones web y móviles se ha popularizado, ejemplos de esto son foursquere, Google Maps, Facebook entre otras.

Con HTML5 obtener la ubicación del usuario es muy fácil pero tenemos que tener en cuenta que no todos los dispositivos cuentan con un GPS que permite una localización más precisa por una triangulación de antenas y satélites, otros solo cuentan con conexión vía ISP y el navegador típicamente tomará esta información por IP o por triangulación de puntos de acceso Wi-Fi.

Para implementar la geo localización debemos asegurarnos de que el navegador soporta la API de geo localización de HTML5.

Para recuperar la localización del usuario haremos uso del objeto navigator.geolocation y la función básica para este caso es getCurrentPosition(), su sintaxis es :

getCurrentPosition(FuncionExito[,FuncionError],opciones);

FuncionExtito le dice al navegador al cual función debería llamar si los datos de localización han sido encontrados como disponibles. La función indicada toma los datos de la localización obtenida y actúa en consecuencia.

FuncionError, este parámetro llama a una función en curso de que la petición de localización falle por alguna razón que escapa de nuestro control. Es opcional pero es una buena práctica.

Opciones, aquí se maneja internamente a su vez tres parámetros opcionales que se encierran entre los símbolos «{ }».

  • enableHighAcurrency:  indica al navegador que utilice una fuente de información exacta si está disponible. Los valores posibles son TRUE o FALSE. NOTA : Usted no puede controlar la fuente de información.
  • Timeout:Le indica el monto de máximo de tiempo del que dispone para calcular la posición actual. Si el cálculo no se completa en el tiempo indicado, la función de error se dispara. El valor se da en milisegundos.
  • maximumAge: Señala que tan vieja puede ser la información de localización antes de volver a recalcularla. El valor también se indica en milisegundos.

 

 

Ejemplo

 

Comentarios Facebook

Implementación de dos zonas gatekeeper H.323

 

Figura 1. Topología de red practica

Para la segunda práctica utilizamos 2 gatekeeper para marcar 2 zonas diferentes, aquí cambia la configuración de ambos Gateways y de ambos gatekeeper.

Para el gatekeeper 1 tomamos las configuraciones de la practica uno y se le agrega las siguientes secciones

[RasSrv::Neighbors] Nombre para identificar a los vecinos en la red

GK1=GnuGK

GK2=GnuGK

[Neighbor::GK1] Aquí se especifican las configuraciones de un vecino

GateKeeper Identifier=GK1 Identificador del gatekeeper

Host=172.16.0.3 una dirección ip para este vecino

SendPrefixes=100, 200, 300, 400, 4444, 700, 800 Lista de prefijos que este vecino espera recibir

AcceptPrefixes=500, 600, 700, 800, 5555, 100, 200, 300 lista de prefijos que el gatekeeper aceptara

ForwardLRQ=always determina si el LRQ recibido deberá o no ser reenviado

[Neighbor::GK2] Aquí se especifican las configuraciones de un vecino

Gatekeeper Identifier=GK2 Identificador del gatekeeper

Host=172.16.0.4 una dirección ip para este vecino

SendPrefixes=500, 600, 700 800 Lista de prefijos que este vecino espera recibir

AcceptPrefixes=100, 200, 300, 400, 5555, 900 lista de prefijos que el gatekeeper aceptara

ForwardLRQ=always determina si el LRQ recibido deberá o no ser reenviado

Figura 2. Archivo creado para Gatekeeper 1.

Para el caso del gatekeeper 2 instalamos el GnuGK como en la práctica uno y creamos el archivo GK2.ini con la siguiente información del GK1

Figura 3. Archivo creado para Gatekeeper 2.

Después se configura un Gateway como en la práctica uno.

Figura 4. Pantalla inicial del entorno web de los fxs.

Figura 5. Advance Setup del entorno web de los fxs.

Figura 6. Parámetros de configuración del Gateway 1.

Y para el segundo Gateway queda de la siguiente manera

Figura 7. Parámetros de configuración del Gateway 2.

Iniciamos los servicios del GnuGK con el siguiente comando, teniendo en cuenta que la ruta y el nombre del archivo puede cambiar (la ruta y el nombre puede variar según donde se creara el archivo).

gnugk –tt –c /home/Joel/GK1.ini para el gatekeeper uno

gnugk –tt –c /home/GK2.ini para el gatekeeper dos

Acto seguido Aplicamos las configuraciones y reiniciamos ambos Gateways para realizar las pruebas necesarias.

 

Comentarios Facebook

Paginacion y filtrado de tablas con javascript

Hace unas semanas mientras desarrollaba una aplicación web, en la cual necesitaba mostrar tablas ,y por la cantidad de registros tenia que mostrarlos paginados , del lado del servidor usaba CodeIgniter  y aunque este framework tiene un librería para paginas datos , no tiene una para filtrarlos o realizar búsquedas,por eso empecé a buscar una hecha para poder usarla.

Dentro de las que puede encontrar la mejor fue DataTable esta librería además de paginar datos  permite hacer funciones de auto completado para filtrar resultados, ordenamiento,cargado dinámico a través de AJAX entre mas funcionalidades gracias a que tiene una API para que puedas extenderla para lo que se ocurra.

Veremos ahora como usarla con la configuración inicial, lo primero que debemos hacer es abrir nuestro editor de texto preferido y creamos un nuevo archivo con la estructura básica HTML5 .

Después descargargamos Jquery ya que DataTable depende de esta.Tenemos dos  formas de usar Jquery descargandolo a  nuestra computadora o cargándolo remotamente.

Ahora descargamos DataTable, al igual que Jquery podemos descargarlo o mandar a cargar usando el CDN.

Ahora solo nos faltan los datos que queremos paginar para esto copia el siguiente código y ponlo dentro del tag body de nuestro ducumento.

solo falta inicializar el plug in de la siguiente manera , crearemos otro archivo llamado table.js, y dentro de este pondremos lo siguiente.

Nuestro archivo HTML quedaría de la siguiente manera.

Y si abrimos en   nuestro navegador el archivo podras ver algo como esto(click en la imágen para verla en grande).

demo data tableLes dejo el link para que descarguen los archivos.

DESCARGAR ARCHIVOS

Comentarios Facebook