Category: Programación

Novedades en HTML5

comments Comments (0)
By , 19/04/2012 11:49

Tras varios días recopilando información y haciendo pruebas sobre lo que está por venir en HTML5 solo puedo decir que ¡Me gusta!, me gusta mucho el rumbo que va tomando, me gusta que vaya encaminada a hacer la web mucho más semántica y que permita a los buscadores indexar la información mucho mejor, me gusta mucho la integración de vídeo y audio y sobre todo todas las mejoras que se meten con CSS3. En esta entrada y sucesivas trataré de hacer un resumen de las mejoras que se han añadido.

Nuevas etiquetas

Se han añadido nuevas etiquetas que pretenden ayudar a mejorar la estructuración del código HTML.

  • <!DOCTYPE HTML>. La nueva declaración del tipo de documento, mucho más simple, mucho más clara y actualmente ya soportada por los navegadores más usados.
  • <section>. Representa una sección genérica, Puede ser usada junto a <h1>-<h6> para indicar la estructura del documento.
  • <article>. Representa un fragmento de contenido, como una entrada de blog o un artículo de periódico.
  • <header>. Representa la cabecera de la página. La parte típica donde colocamos un logotipo, un banner…
  • <footer>. Igualmente han creado una etiqueta para la parte inferior de la página donde se suelen mostrar, créditos, copyright, el about, los enlaces a redes sociales…
  • <nav>. Sección de la página en la que se integra la navegación.
  • <dialog>. Puede ser usada para marcar la existencia de un diálogo.
  • <video>. ¡Podemos insertar vídeos!. Permite añadir un elemento de vídeo con su barra básica de navegación.
  • <audio>. Igual que el vídeo pero para elementos de audio.
  • <canvas>. Crea un elemento mediante el cual por medio de javascript podremos dibujar sobre el documento. Por ahora solo en 2d.
  • <wbr>. Marca el lugar en el que una palabra puede ser cortada o dividida en caso de que el navegador lo crea necesario.
  • <section contenteditable=”true”>. Permite que un contenido sea editable directamente por el usuario.
  • <svg>. Inserta un elemento svg, para integrar imágenes de tipo vectoriales con código svg (xml).
  • <time>. Indicará a cualquier indexador que el contenido de la etiqueta es una fecha.
  • <time datetime=”2012-04-18″>. Indicará al indexador que el contenido de la etiqueta corresponde a la fecha indicada en el atributo. podemos escribir algo así… <time datetime=”2012-04-18″>Hoy</time> es mi cumpleaños.
  • <### itemscope itemtype=”*”>. Permite integrar tipos de datos reconocibles por indexadores. Podremos por tanto indicar que estamos tratando con un tipo de dato “persona” y marcar en cada uno de los textos varios valores como <span itemprop=”name”>Eduardo</span>, <span itemprop=”nickname”>Ikito</span>
  • <input type=”text” required/>. Marca un input como requerido en un formulario. Podremos darle un estilo y que por ejemplo se remarque en rojo.
  • <input type=”***”>. Se crean nutos tipos, tales como “email”, “date”, “number”, “url”, “range”. Son validados en el cliente sin necesidad de javascript y en muchos casos el elemento input tiene un diseño especial, por ejemplo, el “date” despliega un calendario.
  • <**** draggable>. Marca un elemento como “arrastrable”, una nueva API que tendremos que estudiar.
Hay mucho, mucho más y la explicación de cada uno de los elementos podría ser mucho mas extensa. Por ahora lo dejo aquí, dando paso a una nueva serie de entradas en las que iré tratando cada uno de los elementos por separado si alguno resulta interesante.
Enlaces de interés:
Diferencias entre HTML4 y HTML5

categories HTML5, Programación, Tecnología | tags ,

Sumar días a una fecha en PHP

comments Comments (0)
By , 13/04/2012 11:27

Las fechas… ese gran problema. El último problema consistía en sumar días a una fecha dada… Seguramente tengamos veinte maneras de conseguirlo de una forma más o menos cómoda. Para mi esta es la mejor:

$fecha_final= date("Y-m-d", strtotime("$fecha_inicio + 1 days"));

Tenemos la fecha de inicio, la pasamos a formato Año/mes/día y le sumamos un día. Simple y rápido.

categories Programación | tags , ,

Fechas en texto con PHP y primera letra en mayúscula.

comments Comments (0)
By , 07/03/2012 12:37

Puede parecer una tontería pero PHP no ofrece a primera vista (al menos) una forma cómoda de obtener fechas en modo texto.

Este código devuelve el formato de fecha en texto:

echo (strftime('%B de %Y')) 

Devolvería:  marzo de 2012

Poner la primera letra en mayúscula es muy simple

echo (ucfirst(strftime('%B de %Y'))) 

Recordaremos que en Español los días de la semana y los meses van en minúscula… No como en otros idiomas, de ahí que a veces tengamos confusiones. En este caso concreto el mes inicia la frase, de ahí que la “capitalicemos”. Si tuvieramos el mismo problema en inglés, donde si que se capitalizan los días de la semana y los meses podría hacerse algo así:

echo (ucfirst(date('l')) . ucfirst(date(' F \of Y'))) 

Devolviendo algo como esto: Wednesday March of 2012

categories Programación | tags ,

Montar un servidor de Minecraft en casa Parte 1

comments Comments (2)
By , 06/03/2012 10:36

Este post y los que le siguen nacen del profundo vicio en el que se ha convertido para mi y algunos amigos el puñetero juego Minecraft. (¿No sabes que es?… Rápido… ¡Sal de aquí!. ). Después de jugar mucho en partidas locales pensamos que sería algo interesante tratar de montar un servidor en el que pudiéramos jugar en conjunto, esto añadiría un plus de diversión seguro. Así que me puse manos a la obra. Iremos por partes:

- En primer lugar necesitamos un ordenador... Lo ideal es un PC que no estemos usando, ya que el servidor de Minecraft en versión java exige bastante y no queremos que la partida se vea ralentizada o entorpecida por factores externos. En mi caso se trata de un Pc de sobremesa fruto de la unión de todas las piezas que han ido sobrando de anteriores PC’s. Un AMD 3100+, 2 Gb de Ram, Tarjeta gráfica Ati de 128 Mb, 160 Gb de disco y tarjeta Wifi. En principio pienso que será más que suficiente.

- Evidentemente necesitamos una conexión a internet, en mi caso JAZZTEL de 6 Mb. Y unos pequeños ajustes en nuestro router para redirigir y permitir ciertas entradas/salidas a algunos puertos. – Sistema operativo… Linux sin dudar (It’s free!). Más complejo, más complicado, pero mucho más eficiente en todos los aspectos que cualquier Windows que pueda meterle a esta máquina. Con windows Xp en todo caso… No he probado, pero dudo que se acerque al rendimiento de una máquina Linux dedicada. En mi caso por facilitar un poco la tarea me he decantado por una Debian de 64Bits, aunque lo realmente ideal hubiera sido una versión server… Pero como no me manejo a nivel experto en este tema he optado por una versión de escritorio que facilita mucho ciertas tareas y además permite que en un momento dado pueda darle algún otro uso a la máquina.

- Extras… Para que nos vamos a engañar, a uno le gusta liarse por naturaleza así que pretendo complicarlo todo lo posible y más allá.

  1. Pretendo añadirle algún servicio tipo dyndns, para no tener que andar avisando a todo el mundo cada vez que me cambien la IP. Por lo que optaremos por crear algo del estilo nombre.dyndns-home.com que redirija a la IP que mi router tenga en cada momento. Dyndns tiene un cliente que actualiza la IP continuamente por lo que haciendo referencia a este Hostname iremos siempre a nuestro Router.
  2. Añadiremos algún tipo de extra a Minecraft, por sencillez hemos pensado en Bukkit, que genera un entorno sencillo y una enorme comunidad que ofrece cientos de plugins para mil y una chorradas en el juego.
  3. Una web ligera. En la misma máquina que permita obtener información detallada del estado del servidor de Minecraft y si fuera posible que permita algo de administración remota.
  4. Acceso al servidor por SSH que mediante el uso de SCREEN permita administración remota del servidor y del juego. En nuestro caso somos más de un informático por lo que puede ser necesario que varias personas puedan andar trasteando en la máquina.
  5. Una base de datos MYSQL. No es imprescindible pero creo recordar que algunos de los plugins de Bukkit se pueden apoyar en una BBDD.

Esto es todo por ahora. Iré actualizando mis avances.

categories Linux, Minecraft, Programación, Tecnología | tags , , , , ,

función iif en PHP

comments Comments (1)
By , 01/03/2012 11:58

Desde mis tiempos mozos en Visual Basic hay una función que siempre me ha sido de extrema utilidad, le función iif() que en visual Basic venía a ser algo así:

Function checkIt(ByVal testMe As Integer) As String
    Return CStr(IIf(testMe > 1000, "Large", "Small"))
End Function</pre>
)

En PHP es posible hacer lo mismo siguiendo el siguiente formato:

$valor = ($numero>10 ? "afirmativo" : "negativo");

categories Programación | tags ,

Publicar en twitter desde e-mail

comments Comments (0)
By , 25/11/2011 10:47

No me preguntéis los motivos, pero llevaba un tiempo pensando en buscar alguna aplicación que permitiera publicar en twitter mandando un e-mail a una dirección de correo electrónico. Encontré más de un servicio pero en su mayoría habían desaparecido o el funcionamiento no era exactamente lo que yo esperaba. El proceso es simple, necesitamos:

  1. Hosting propio. Con cuenta de e-mail y opciones de Cron (optativo).
  2. Cuenta en twitter como developer. (Para crear una App).
  3. PHP en nuestro hosting (1 solo archivo + librería Oauth).
  • Comenzaremos creando una cuenta de correo. Por ejemplo: publicatwitter@hosting.com.
  • Un directorio con un archivo PHP en nuestro hosting. Por ejemplo:  /mail2tweet/publica.php.
  • Creamos una aplicación en twitter en la que indicaremos la url completa al archivo PHP, indicaremos que es una aplicación de lectura y escritura (READ/WRITE) y obtendremos los datos: Consumer_key, Consumer_secret, Access_token y Access_token_secret, estos últimos hay que generarlos desde una de las opciones de configuración de la aplicación. Utilizaremos la librería tOAuth.class.php la podeís encontrar aquí.
  • Ahora vamos con el php. Podéis descargar el ejemplo aquí. 
  • Finalmente si tenemos opción a Cron en nuestro hosting programamos una tarea sobre este archivo PHP cada hora por ejemplo. Si no tenemos Cron sería suficiente con visitar la URL anterior para ejecutar todo el proceso.
Hay un par de detalles que debo comentar. El primero es que para poder identificar claramente los correos que deben ser publicados en twitter en el archivo PHP incluimos una clave para que solo nosotros podamos publicar cosas en nuestro twitter… ¿No queremos spam de viagra verdad?. Lo segundo… No me he querido complicar demasiado con la gestión de IMAP y las partes del correo por lo que he introducido en el texto de los correos unas cadenas de inicio y de fin de mensaje para poder identificarlo facilmente. Un ejemplo de envío sería:
To: publicatwitter@hosting.com
Subject: clavesupersecreta
texto: ***Publica esto***
Ni que decir tiene que no he querido profundizar más en el tema, funciona, que es lo que yo quería. Espero que esto pueda serviros como base a cosas mayores ya que creo ofrece muchas posibilidades.

categories Programación, Redes sociales | tags , , , , ,

Trasteando la nueva Api de google+ (google plus) con PHP

comments Comments (0)
By , 16/09/2011 12:37

Hoy por fin google ha sacado algo relativo a la tan esperada api para la red social de google. Google +. Por desgracia parece que se han quedado en una especie de versión demo de lo que realmente todos esperábamos. Mirando la documentación actual no me ha llevado más de 15 minutos montar un ejemplo. Para empezar debemos seguir los siguientes pasos:

  1. Acudir a https://code.google.com/apis/console donde dentremos que activar la api de google+ y generar nuestra “Api access”. Para ello tendremos que crear un nuevo “Client id for web aplications” y obteniendo Client id, Client secret, Redirect URIs y API key.
  2. Una vez tengamos todos los datos tendremos que seguir los pasos claramente descritos en esta página. En ella nos indican que tenemos que descargar la librería php  google-api-php-client y dos archivos, un PHP y una hoja de estilos.
  3. Finalmente retocamos index.php añadiendo los datos que obtuvimos de la creación de nuestra aplicación. Recordad… Client id, Client secret, Redirect URIs y API key.
  4. Lo metemos todo en nuestro sitio web y probamos.
Por lo poco que he podido mirar de la API creo que solo permite ver perfiles públicos y sus feeds. Os dejo aquí el mismo ejemplo que han propuesto desde Google.

categories Programación, Redes sociales, Tecnología | tags , , , ,

Error en twitter “Read-only application cannot POST”

comments Comments (0)
By , 13/09/2011 09:59

Trabajando con aplicaciones de Twitter me encontré con este error al tratar de publicar algo en twitter desde mi aplicación:

Array
(
[error] => Read-only application cannot POST
[request] => /statuses/update.json
)

Error en escribe_tweet: Read-only application cannot POST

Puedes pasar horas cambiando cosas y no vas a conseguir nada, la solución es tan sencilla como cambiar desde las settings de la aplicación la propiedad application type de “read only” a “read and write”. Si, tontaco que es uno.

categories Programación, Redes sociales, Tecnología | tags ,

Mi primera aplicación de Facebook

comments Comments (0)
By , 11/08/2010 12:20

Tras haber estado trasteando con Twitter decidí lanzarme a investigar un poco como funcionan las aplicaciones de facebook, que aunque en teoría utiliza también Oauth tiene bastantes particularidades. En general me ha resultado mucho más complejo, hay mucha información pero aparece bastante dispersa y se centra muy poco en la práctica. Pocos ejemplos de código. Para colmo Facebook tiene su propia API, extensa y con numerosas versiones… Para empezar recomiendo leer su documentación (solo en inglés) para hacernos una idea general.

Facebook incorpora dos lenguajes propios, Facebook Markup Language (FBML) y Facebook Query Language (FQL)… En resumidas cuentas FBML son pequeños módulos que puedes reutilizar del estilo de formularios, listas, botones… con las funcionalidades típicas de facebook. Por ejemplo:

<fb:photo pid="12345" />

Mientras que FQL viene a ser una especie de SQL con el que obtener datos realizando consultas directamente a “tablas” internas de Facebook. Por ejemplo:

SELECT name FROM user WHERE uid = me()

El primer paso como siempre es registrar nuestra aplicación en Facebook, para ello deberemos unirnos al grupo de developers y desde ahí acceder a la creación de una nueva aplicación. El funcionamiento es similar a twitter, obtenemos un id de aplicación y un par de claves para nuestra aplicación. a partir de aquí nos toca partirnos los cuernos empezando por tener un dominio propio en el cual subiremos todos los archivos de nuestra aplicación (No he visto que facebook ofrezca espacio dedicado).

A nivel de programación aunque aparentemente es bastante simple la documentación es mínima y los ejemplos son pocos y en muchos casos desfasados (versiones anteriores de la API), dado que mi intención no era hacer una aplicación seria por ahora me he limitado a tratar de hacer una aplicación que obtenga permisos de escritura en el muro, permita dejar comentarios y permita invitar a los amigos. Para ello me decanté por un framework casero (Gracias a Alvaroveliz, un poco de info en su blog), al que comencé añadiendo los datos de mi aplicación (/config/facebook.php).

$fb_apikey        = '****************************'; // API KEY
$fb_secret        = '****************************'; // Secret Key
$app_callbackurl  = 'http://********/moo/'; // APP Canvas URL
$canvas_url       = 'http://apps.facebook.com/dothemoo/'; // Canvas URL

Posteriormente cree varias vistas para generar un conjunto de “tabs” o pestañas con los 3 apartados que necesitaba, un index, otro para comentarios, un tercero para invitar amigos y uno oculto para lanzar el evento de escritura en el muro. Os pongo algunos fragmentos de código:

<fb:tabs>
  <fb:tab-item href='http://apps.facebook.com/dothemoo/index.php' title='Inicio' selected='true'/>
  <fb:tab-item href='http://apps.facebook.com/dothemoo/index.php?section=comments' title='Comentarios' />
  <fb:tab-item href='http://apps.facebook.com/dothemoo/index.php?section=invite' title='Invitar' />
 </fb:tabs>
$friends = $facebook->api_client->fql_query('SELECT uid FROM user WHERE is_app_user = 1 AND uid IN (SELECT uid2 FROM friend WHERE uid1 = '.$user.')');
	$excludedFriends = array();
	if (is_array($friends) && count($friends) > 0)
	{
	  foreach($friends as $friend){
	    $excludedFriends[] = $friend['uid'];
	  }
	}
	$excludedFriends = implode(',', $excludedFriends);
}
$contentBox = "<fb:name uid=\"$user\" firstnameonly=\"true\" /> quiere que uses la aplicación do the Moo <fb:req-choice url=\"http://apps.facebook.com/dothemoo\" label=\"Confirmar\" />";
?>

<fb:request-form type="Do the Moo" action="index.php?section=invite" content="<?= htmlentities($contentBox,ENT_COMPAT,'UTF-8'); ?>" method="post">
<fb:multi-friend-selector actiontext="Invita a tus amigos para que usen nuestra primera aplicación" showborder="true" exclude_ids="<? echo $excludedFriends; ?>" />
$facebook->api_client->stream_publish($message, $attachment, $action_links);

Resumiendo. Mucha dificultad para tan poca cosa que pretendía, pero si que es cierto que una vez que sacas lo básico se convierte en algo muy potente por las posibilidades que da el acceder a millones de usuarios con relativo poco esfuerzo.

Por cierto… Mi aplicación “chorra” escribe en el muro del usuario un numero de “mugidos” aleatorios, podéis acceder a ella desde aquí. El algoritmo de generar mugidos aleatorios lo he patentado :P .

categories Linux, Programación, Redes sociales, Tecnología | tags , , ,

Mi primera aplicación Twitter

comments Comments (2)
By , 09/08/2010 13:32

Twitter es una red de información de tiempo real motorizada por gente alrededor del mundo que permite compartir y descubrir lo que está pasando en este momento. Twitter pregunta “Qué pasa?” y hace que la respuesta se propague a través del mundo a millones, inmediatamente. Esto dice Twitter… en resumen no es más que un sitio en el que cada usuario puede escribir algo y esperar que sus seguidores puedan leerlo.

Oauth es un protocolo abierto que mediante una API con sistema simple y estándar nos otorga una autorización segura para tratar con datos protegidos. El esquema de funcionamiento de una aplicación con Oauth puede verse facilmente resumido en esta imagen.

El primer paso para poder crear cualquier tipo de aplicación que implemente Oauth es entender claramente su funcionamiento, básicamente consiste en una aplicación que pide al usuario autorización para acceder a ciertos datos privados de alguna de sus aplicaciones en internet, el usuario acepta dicha petición logándose en la red (Twitter, facebook, Picasa, flickr …). Desde entonces nuestra aplicación obtiene un Token mediante el cual podremos acceder de nuevo a dichos datos privados sin la necesidad de que el usuario deba volver a permitirnos el acceso. Un ejemplo muy claro: “Eduardo tiene las fotos de su último viaje subidas a Facebook, entra en contacto con la web www.Imprimetodaslasfotos.com en la que quiere ordenar la impresión de sus últimas fotos de las vacaciones, mediante un sencillo proceso (Oauth) da acceso a www.Imprimetodaslasfotos.com a sus fotografías en Facebook. Pasados unos minutos Imprimetodaslasfotos.com accede a las fotos de Eduardo en facebook, las imprime y se las manda por mensajería a Eduardo”

Registrar una aplicación en Twiter es muy sencillo, accederemos a http://twitter.com/oauth_clients/ , donde deberemos dar todos los datos necesarios para registrar nuestra aplicación. Obtendremos nuestros datos privados necesarios para la aplicación (Consumer Key y Consumer Secret). Deberíamos descargar los archivos necesarios de la API de Twitter, en mi caso he decidido decantarme por esta Clase de PHP de la que podemos obtener más información en este blog, también podemos mirar un poco la documentación de Twitter.

Tras hacer unos leves cambios en la clase de PHP, insertar los datos de mi aplicación y subirlas a mi propio dominio he realizado mi primera aplicación de Twitter, simple pero muy instructiva. Publica en el Twitter del usuario una tirada aleatoria de un dado de 100 caras (1-100). (Mi pasado rolero me puede jeje)

Y aquí mi aplicación: http://www.ikito.net/d100/

Actualización… Fracaso absoluto. El proyecto que tenía la clase PHP ha muerto y el blog que daba información ha muerto igualmente.
Pongo aquí un  zip con TODO el código de mi aplicación. Espero que sea de alguna utilidad.

categories Programación, Redes sociales, Tecnología | tags , , , ,

Panorama Theme by Themocracy