BrianUR » Web http://www.brianur.info Wed, 01 Feb 2012 16:50:13 +0000 en hourly 1 http://wordpress.org/?v= Video: Trasladando un servidor de un datacenter a otro sin apagarlo http://www.brianur.info/cambiar-de-datacenter-un-servidor-sin-apagarlo/ http://www.brianur.info/cambiar-de-datacenter-un-servidor-sin-apagarlo/#comments Wed, 28 Sep 2011 19:33:15 +0000 juarbo http://www.brianur.info/?p=1472 En el siguiente vídeo se evidencia como un grupo de administradores de sistemas configuran y planifican todo para cambiar de datacenter un servidor que ha estado uptime durante más de 6 años. Mantener un servidor en línea por el mayor tiempo posible es uno de los aspectos que más preocupa a los administradores de sistemas, la alta disponibilidad y el asegurar que los servicios que corren en el servidor se encuentren siempre disponibles, es algo que en muchos casos, marca la diferencia cuando un usuario va a contratar un servicio en dicha empresa o debe elegir entre un servidor u otro.

Pinche aquí para ver el vídeo

En este vídeo vemos como los administradores del servidor lo transportan por 7 kilómetros (Una parte en tren y una parte a pie) manteniéndolo conectado y funcionando durante todo el trayecto. El servidor se conecta a una UPS que le brinda la energía necesaria durante todo el trayecto; Para asegurar la conectividad a Internet conectan una laptop a dicho servidor, la cual le provee Internet por medio de una conexión 3G y aseguran el acceso al servidor y el trafico correcto mediante una VPN.

]]> http://www.brianur.info/cambiar-de-datacenter-un-servidor-sin-apagarlo/feed/ 0 No-anom: Extensión de Firefox para filtrar a Anonymous http://www.brianur.info/no-anom/ http://www.brianur.info/no-anom/#comments Thu, 21 Jul 2011 02:55:41 +0000 Brian Urban http://www.brianur.info/?p=1276 Últimamente se torna bastante fastidioso leer cada tres segundos algo sobre Anonymous ya sea en redes sociales, sitios webs que visitamos o incluso el amigo que cree que porque hacen denegaciones de servicio con un programa son hackers y no deja de hablar del tema.  No-anom es una sencilla extensión para ser usada en aquellos casos mencionados anteriormente (menos el ultimo, claro) que filtra el nombre e imágenes del grupo en cuestión en nuestro Firefox:

Imagen tomada de un articulo de alt1040.com haciendo uso de No-anom

Descargar No-anom.

Después de descargar no-anom.xpi arrástralo hasta el navegador para su instalación. Todos los créditos a Greg Leuch y su extensión Shaved Bieber, yo solo hice unas pequeñas modificaciones para filtrar la palabra y para que funcionará en Firefox 5.

]]> http://www.brianur.info/no-anom/feed/ 1 ¿Qué es Open Graph protocol y cómo funciona? http://www.brianur.info/%c2%bfque-es-open-graph-protocol-y-como-funciona/ http://www.brianur.info/%c2%bfque-es-open-graph-protocol-y-como-funciona/#comments Tue, 19 Jul 2011 17:13:21 +0000 Brian Urban http://www.brianur.info/?p=1252 Para definir Open Graph de una forma sencilla piensa en el momento cuando compartes un enlace en Facebook: lo normal sería ver una imagen, una descripción y un titulo que toma automáticamente Facebook para mostrar, el problema es cuando por ejemplo toma una imagen aleatoriamente del sitio que muchas veces no tiene nada que ver con lo que queremos compartir o en el peor de los casos no aparece una imagen y de la misma forma el titulo y descripción que toma no son descriptivas.

Ahí es donde Open Graph trabaja, permitiendo con un simple método incluir información precisa sobre nuestro sitio web para una correcta representación del contenido de nuestro sitio en redes sociales. En el caso específico de la red social de Mark Zuckerberg, usar este método no solo nos servirá a la hora de compartir un enlace sino también cuando un usuario le de un “me gusta” a un post, en vez de publicarse en su muro un simple enlace aparecerá el titulo, descripción y imagen que nosotros queramos; de esta forma podemos atraer nuevos visitantes/clientes.

¿Cómo funciona Open Graph?

Sencillo, solo debes incluir en la cabecera de tu sitio la etiqueta <meta> especificando la información de la siguiente forma:

<head>
<title>El Tales</title>
<meta property="og:title" content="El Tales"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://tales.com/info/"/>
<meta property="og:image" content="http://visajes.com/tales.jpg"/>
<meta property="og:site_name" content="Tales"/>
<meta property="fb:admins" content="TU_ID"/>
<meta property="og:description"
content="El tales o visaje visajoso es aquel elemento visaje que se une con el tin
         para formar el visajimiento conocido como TinTales, el cual reune cosillas varias."/>
</head>

Cada una de las propiedades son bastante descriptivas, no todas son obligatorias pero las que siempre tienen que ir son: og:title, og:type, og:image, og:url. Los usos de este protocolo son muchos, para que te des cuenta puedes visitar la documentación en Facebook donde explican cada una de las propiedades que puedes usar.

]]> http://www.brianur.info/%c2%bfque-es-open-graph-protocol-y-como-funciona/feed/ 4 Crear un reloj analógico con Javascript http://www.brianur.info/crear-un-reloj-analogico-con-javascript/ http://www.brianur.info/crear-un-reloj-analogico-con-javascript/#comments Thu, 16 Dec 2010 18:43:08 +0000 Brian Urban http://www.brianur.info/?p=1047 El siguiente reloj puede ser creado sin necesidad de usar imágenes ni CSS, gracias a una librería en Javascript llamada Raphaël que nos permite crear gráficos de una manera sencilla.

<script type="text/javascript" src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
 <script type="text/javascript">

 function draw_clock(){
 canvas = Raphael("clock_id",200, 200);
 var clock = canvas.circle(100,100,95);
 clock.attr({"fill":"#f5f5f5","stroke":"#444444","stroke-width":"5"})
 var hour_sign;
 for(i=0;i<12;i++){
 var start_x = 100+Math.round(80*Math.cos(30*i*Math.PI/180));
 var start_y = 100+Math.round(80*Math.sin(30*i*Math.PI/180));
 var end_x = 100+Math.round(90*Math.cos(30*i*Math.PI/180));
 var end_y = 100+Math.round(90*Math.sin(30*i*Math.PI/180));
 hour_sign = canvas.path("M"+start_x+" "+start_y+"L"+end_x+" "+end_y);
 }
 hour_hand = canvas.path("M100 100L100 50");
 hour_hand.attr({stroke: "#444444", "stroke-width": 6});
 minute_hand = canvas.path("M100 100L100 40");
 minute_hand.attr({stroke: "#444444", "stroke-width": 4});
 second_hand = canvas.path("M100 110L100 25");
 second_hand.attr({stroke: "#444444", "stroke-width": 2});
 var pin = canvas.circle(100, 100, 5);
 pin.attr("fill", "#000000");
 update_clock()
 setInterval("update_clock()",1000);
 }

 function update_clock(){
 var now = new Date();
 var hours = now.getHours();
 var minutes = now.getMinutes();
 var seconds = now.getSeconds();
 hour_hand.rotate(30*hours+(minutes/2.5), 100, 100);
 minute_hand.rotate(6*minutes, 100, 100);
 second_hand.rotate(6*seconds, 100, 100);

 }

 </script>
 <body>
 <div id="clock_id"></div>
 <script>draw_clock()</script>
 </body>

Visto en el blog de Emanuele Feronato

]]> http://www.brianur.info/crear-un-reloj-analogico-con-javascript/feed/ 4 ¿Offshore Hosting? http://www.brianur.info/offshore-hosting/ http://www.brianur.info/offshore-hosting/#comments Tue, 14 Dec 2010 17:07:21 +0000 Brian Urban http://www.brianur.info/?p=993 Hace algunos meses me salí un poco de lo habitual e hice una web para un programa de televisión que me gusta mucho, pero me surgió un

The Pirate Bay

The Pirate Bay

problema:  no podía alojarla con la empresa donde normalmente tengo mis webs, debido a que el servidor esta ubicado en Estados Unidos y en este país hay muchas restricciones con respecto a la publicación de contenido que infrinja el derecho de autor o mejor conocido como warez.

Después de buscar en la red alguna solución para mi problema, encontré  un Offshore Hosting.

¿Qué es el Offshore Hosting?

Wikipedia define a Offshore como: …”la actividad por parte de empresas con sede en un determinado país de trasladar centros de producción en otro país, donde por lo general enfrentarán menores costos en mano de obra, menor presión en leyes laborales, menor cantidad de normativas gubernamentales, reducción de otro tipo de costos, u otros beneficios cualesquiera desde el punto de vista del lucro.”

Comúnmente los servidores Offshore están situados en países/ciudades como Holanda, Panamá, Hong-Kong, Rusia, entre otros. Las notables ventajas son la menor presión  y leyes para publicar Warez,  por lo general las denuncias DMCA son ignoradas. En el caso del precio he podido ver que no es tan barato como un alojamiento normal, pero existen planes cómodos.

Recomendaciones

Tenga en cuenta que también hay algunas restricciones en este tipo de alojamiento web, como por ejemplo está permitido enlazar Warez de otros servidores pero no subirlos al propio servidor, no está permitida la pornografía infantil ni usar el servidor para enviar spam, ni alojar webs para realizar pishing. Cada empresa puede tener sus diferentes restricciones, antes de comprar el servicio es recomendado leer los términos de uso para saber si cumple con los requerimientos de sus necesidades.

Empresas proveedoras

En lo personal solo tengo experiencia con tres empresas:

HostingWarez: Nunca tuve problemas con el servicio, tiene buenos precios pero los planes en cuanto a características son algo bajos. Recomendado para webs pequeñas.  El soporte es en ingles.

HostMyWarez: Tiene planes económicos, uno de ellos es con todo ilimitado. En el poco tiempo que lo use el servidor murió varias veces. El soporte es en ingles.

DonkieHost: Lo estoy usando actualmente, tiene buenos planes y servidores en varios países dependiendo de las necesidades. El soporte es en español.

Otras empresas:

Warez-Host
Wiroos! el que usa Taringa.
WrzHost
UnderHost

¿Qué otros conoces?

]]> http://www.brianur.info/offshore-hosting/feed/ 2 Pedir permisos en una aplicación de Facebook http://www.brianur.info/pedir-permisos-en-una-aplicacion-de-facebook/ http://www.brianur.info/pedir-permisos-en-una-aplicacion-de-facebook/#comments Fri, 26 Nov 2010 22:36:26 +0000 Brian Urban http://www.brianur.info/?p=944 Este articulo hace parte de la vieja API de Facebook, para más información sobre la nueva API te recomiendo leer Funcionamiento de la Graph API de Facebook.

Facebook permite a las aplicaciones poder tomar datos concretos de los usuarios, como por ejemplo el nombre para dar un saludo, el ID, el sexo y entre otros. Por razones de privacidad hay datos que no se pueden obtener y para ello hay que pedir permisos al usuario. En este caso vamos a suponer que necesitamos el email y fecha de cumpleaños del usuario, al no tener los permisos veríamos algo como:

Hay varias formas de poder pedir permisos, en este caso veremos como hacerlo usando un tag FBML llamado fb:prompt-permission:

<fb:prompt-permission perms="email,user_birthday">Dar permisos a la aplicación</fb:prompt-permission>

Dentro del atributo perms se debe escribir los permisos que necesitamos separados por coma, en este caso email y user_birthday, adicionalmente hay otro atributo llamado next_fbjs con el que podemos redireccionar al usuario después de dar el permiso. Antes de cerrar el tag debemos escribir un texto, que se verá como un enlace que al ser clickeado mostrará una ventana pidiendo los permisos:

Al aceptar los permisos el enlace anterior no se volverá a mostrar y veremos los datos pedidos en la aplicación:

]]> http://www.brianur.info/pedir-permisos-en-una-aplicacion-de-facebook/feed/ 10 ¿Cómo maquetar y diseñar una web? http://www.brianur.info/%c2%bfcomo-maquetar-y-disenar-una-web/ http://www.brianur.info/%c2%bfcomo-maquetar-y-disenar-una-web/#comments Wed, 17 Nov 2010 16:40:07 +0000 Brian Urban http://www.brianur.info/?p=923 Cuando hablamos de hacer una web básicamente nos encontramos con dos partes importantes, una de ellas es el diseño “lo bonito”, lo que los usuarios pueden ver y la otra parte son “las entrañas” las cuales realizan diferentes tipos de acciones. Aquí no escribo mucho sobre maquetación y diseño ya que no es mi fuerte, pero para quienes les gusta el tema les comparto estos videotutoriales que me encontré en la web de César Cancino.

Introducción al diseño y maquetación web

En este primer vídeo se diseña la estructura del sitio web haciendo uso de Photoshop.

Pinche aquí para ver el vídeo

XHTML y CSS

Consultaremos nuestro diseño que previamente creamos en Photoshop e iremos marcando las etiquetas necesarias en XHTML para estructurar nuestro sitio.

Pinche aquí para ver el vídeo

Diseño y maquetación web 3

En este video veremos cómo trabajar la hoja de estilos CSS que dará la presentación definitiva a nuestro anterior trabajo de diseño y marcado de código HTML. Repasaremos entre otras cosas la manera de medir trozos de imágenes para luego llamarlas con CSS; veremos cómo crear menús de navegación cuando estilicemos tanto la barra de navegación principal (horizontal), como los items de menús de los widgets. Veremos también cómo ahorrar líneas de código al aplicar propiedades en conjunto (“propiedades shorthand”) para dos elementos en una sola definición CSS a los botones de “Ver más” y “Ver comentarios”, del post.

Pinche aquí para ver el vídeo

Aprovecho para agradecer a Domingo Uribe por realizar estos interesantes vídeos.

]]> http://www.brianur.info/%c2%bfcomo-maquetar-y-disenar-una-web/feed/ 0 Crear una aplicación de Frases para Facebook: Recuperar frases desde una base de datos http://www.brianur.info/crear-una-aplicacion-de-frases-para-facebook-recuperar-frases-desde-una-base-de-datos/ http://www.brianur.info/crear-una-aplicacion-de-frases-para-facebook-recuperar-frases-desde-una-base-de-datos/#comments Tue, 26 Oct 2010 22:09:17 +0000 Brian Urban http://www.brianur.info/?p=907 Este articulo hace parte de la vieja API de Facebook, para más información sobre la nueva API te recomiendo leer Funcionamiento de la Graph API de Facebook.

Anteriormente había explicado como mostrar aleatoriamente las frases desde un archivo de texto usando PHP, el problema de usar este método es que se puede volver muy fastidioso estar editando el archivo de texto para introducir una nueva frase; el uso de una base de datos convierte este proceso en algo más sencillo ademas nos de muchas más ventajas como la posibilidad de permitirle a los usuarios enviar sus propias frases, mostrar todas las frases en una tabla, etc.

Creando la base de datos en MySQL

Se debe crear una base de datos con el nombre que quieran, en este caso yo usare el nombre “app_quotes” y luego debemos crear una tabla con una estructura como la siguiente:

CREATE TABLE frases
 (
 id INT PRIMARY KEY AUTO_INCREMENT,
 frase VARCHAR(150)
 );

Después de crear la tabla deben insertar las frases para luego mostrarlas.

Recuperar las frases desde la base de datos

$conexion = mysql_connect("localhost", "usuario", "password");
mysql_select_db("app_quotes", $conexion);
$consulta = "SELECT frase FROM frases ORDER BY RAND() LIMIT 1";
$query = mysql_query($consulta, $conexion) or die(mysql_error());
$row = mysql_fetch_row($query);
$frase = $row[0];
echo "La frase del día es: ".$frase;

Publicar la frase en el muro

<script>
 function publicar(){
 var mensaje = "<?php echo $frase; ?>";
 var user_message_prompt = "¿Deseas comentar algo?";
 var user_message = "Que buena frase!";
 var attachment = {'media':
 [{'type':'image',
 'src':'http://tuweb.info/logo.png',
 'href':'http://apps.facebook.com/tuaplicacion/'}],
 'name': mensaje +'<br />',
 'description':'Frases Urban'};

 Facebook.streamPublish(user_message,attachment,'','',user_message_prompt);
 }
publicar();
</script>

Ver ejemplo

]]> http://www.brianur.info/crear-una-aplicacion-de-frases-para-facebook-recuperar-frases-desde-una-base-de-datos/feed/ 6 Crear una aplicación de Frases para Facebook: Invitar amigos a usar la aplicación http://www.brianur.info/crear-una-aplicacion-de-frases-para-facebook-invitar-amigos-a-usar-la-aplicacion/ http://www.brianur.info/crear-una-aplicacion-de-frases-para-facebook-invitar-amigos-a-usar-la-aplicacion/#comments Tue, 26 Oct 2010 18:46:26 +0000 Brian Urban http://www.brianur.info/?p=900 Este articulo hace parte de la vieja API de Facebook, para más información sobre la nueva API te recomiendo leer Funcionamiento de la Graph API de Facebook.

Continuando con el Tutorial para crear una aplicación de frases, veremos algo muy importante para hacer crecer nuestra aplicación: Invitar amigos.

Para hacer esto necesitamos hacer uso de las siguientes etiquetas FBML:

<fb:request-form
 action="index.php?accion=amigos"
 method="POST"
 invite="true"
 type="Tu aplicacion!"
 content="Hola! encontre esta aplicacion y pense que te podria gustar. Descripcion de la aplicacion
 <fb:req-choice url='http://www.facebook.com/login.php?api_key=<c:out value='${apiKey}' />'
 label='Ir a la aplicacion!' />">

 <fb:multi-friend-selector
 showborder="false"
 actiontext="Invita a tus amigos a usar esta aplicacion."
 exclude_ids="<c:out value='${appUserFriends}' />"
 max="20" />
</fb:request-form>

El resultado:

Pueden ver el ejemplo funcionando aquí.

]]> http://www.brianur.info/crear-una-aplicacion-de-frases-para-facebook-invitar-amigos-a-usar-la-aplicacion/feed/ 1 Charla: Introducción a AJAX y JavaScript http://www.brianur.info/charla-introduccion-a-ajax-y-javascript/ http://www.brianur.info/charla-introduccion-a-ajax-y-javascript/#comments Wed, 08 Sep 2010 21:37:38 +0000 Brian Urban http://www.brianur.info/?p=793 Charla por Ángel ‘Java’ López. En total 1:45 hs hablando de AJAX y varias tecnologías webs:

00:00 Introducción
05:30 AJAX
07:30 JavaScript y JSON
16:00 Objetos en JavaScript
19:00 Prototipos
23:50 Funciones
26:00 Clases
28:00 HTTP / HTML / XHTML / XML / CSS
32:20 DOM / DHTML
34:20 XMLHttpRequest
43:00 Ejemplos reales de AJAX
48:40 Asincónico
53:00 Lado del servidor
1:05:30 jQuery
1:10:00 Plugin: JQueryUI
1:21:00 JSON usado con AJAX
1:28:00 Plugin: JQuery Autocomplete
1:32:00 Plugin: Grilla
1:40:00 Resumen y por que usar JavaScript / AJAX

WP JW Player Plugin Powered by TubePress.NET

]]> http://www.brianur.info/charla-introduccion-a-ajax-y-javascript/feed/ 0