Si todavía no saben que es Google instant se puede decir que definitivamente no están a la última en Internet. Google instant es la nueva forma de buscar que acaba de lanzar Google donde los resultados aparecen antes de escribir nuestra búsqueda.

Uno se pregunta como es eso posible? Pues bien , con los algoritmos de predicción que utiliza Google Instant ,a medida que uno escribe palabras  se van mostrando resultados relacionados con lo que buscamos. Por ejemplo si escribimos “como enviar un formulario via” el primer resultado que muestra (al menos a mi) es Como enviar un formulario via AJAX con JQuery | Timersys , pero antes de mostrar esto ya me ha tirado un montón de resultados posibles más a mi búsqueda. Aunque en este caso ahorramos escribir la palabra AJAX , la gente de Google asegura que se ahorra un promedio de 2-5 segundos por búsqueda. Creo que es cuestión de ir probando a ver como nos funciona a cada uno de nosotros y si los resultados que “predice” son los que realmente buscamos.

Otra cosa que me llamo la atención es la velocidad con que tira resultados, da la impresión de que estas buscando en un servidor local

Como les va a ustedes? Prefieren el nuevo método de búsqueda? Ahhh me olvidaba, para que les funcione tan solo tienen que loguearse con su cuenta de Google. Saludos!

Hoy les presento con todo mi orgullo mi proyecto más ambicioso. Nautiic es un directorio náutico donde uno puede desde vender barcos usados, hasta alquilar una tabla de surf o anunciar su empresa de pesca. Es un directorio donde anunciar es gratis y se puede encontrar de todo.

La idea nació cuando un amigo me preguntó donde podía buscar en Internet para comprarse una tabla de surf y no supe contestarle. La verdad es que existen miles de directorios , pero son directorios globales donde se anuncia de todo y nada a la vez. Pocos son los directorios o listados específicos como Nautiic donde si queremos comprar un yate de segunda mando (ya me gustaría a mi) o vender la caña de pescar que no usamos más o simplemente anunciar los productos y servicios de nuestra empresa sabremos adonde acudir y adonde va a acudir la gente.

Actualmente Nautiic esta disponible en los siguientes países:

• Nautiic Argentina
• Nautiic USA
• Nautiic España
• Nautiic Italia
• Nautiic UK
• Nautiic France
• Nautiic México

Al día de la fecha aún no he empezado a promocionar Nautiic y aún quedan algunas traducciones por terminar. Este es el primer lugar donde lo menciono así que les pido a todos los que me leen que si tienen la posibilidad me ayuden a difundirlo ya sea con un pequeño artículo o simplemente un tweet

Ayer termine de subir Nautiic Argentina y hace unos 20 que subí Nautiic USA y a día de hoy Google ya indexo más de 24000 páginas y espero que siga creciendo a medida que se empiece a generar el tráfico web. Así que ya saben , empiecen a correr la voz

Hoy diseñando la web de un cliente basada en WordPress me encontre con un pequeño problema a la hora de integrarla a Twitter ya que la web es multilenguaje y utiliza el plugin qTranslate para añadir dicha función en el blog. En mi opinión este plugin es el más fácil de manipular para integrarlo en un proyecto y es el que vengo usando hace tiempo en mis diseños pero nunca antes había usado los dos plugins juntos.

El problema es que qTranslate utiliza etiquetas del estilo <!–:es–>Titulo del post <!–:–><!–:en–>Post title<!–:–> para los diferentes idiomas y guarda todo en la base de datos de forma que el título contiene los 2(o más) idiomas, el contenido del post lo mismo, etc

Por lo que a la hora de publicar un Tweet a traves de Twitters Tools queda de la siguiente manera: [Nuevo Post] <!–:es–>Titulo del post <!–:–><!–:en–>Post title<!–:–> http://bit.ly/bSenEv

Para corregir esto debemos busca la siguiente linea dentro de twitter-tools.php

490

$tweet->tw_text = sprintf(__($this->tweet_format, 'twitter-tools'), @html_entity_decode($post->post_title, ENT_COMPAT, 'UTF-8'), $url);

Y cambiarla por:

490

$tweet->tw_text = sprintf(__($this->tweet_format, 'twitter-tools'), @html_entity_decode(__($post->post_title), ENT_COMPAT, 'UTF-8'), $url);

Usando la funcion GetText que en wordpress es __() obtendremos el título en el idioma que esta activo actualmente.Eso es todo, así ya nuestros tweets se van a ver de forma correcta.

Despues de mi dos últimos posts acerca de HTML5 voy a terminar esta serie hablando del nuevo elemento <canvas> uno de los más revolucionarios de HTML5 por la cantidad de opciones que brinda y por la cantidad de cosas que uno puedo hacer con el. Básicamente es un lienzo que nos permite dibujar gráficos o renderizar imágenes en la web mediante scripts (principalmente Javascript), permitiéndonos así realizar cosas que hasta ahora solo podíamos hacer con flash o con plugins externos.

21.Introducción a <canvas> de HTML5

Para crear un elementos canvas tan solo debemos especificar su largo y ancho de la siguiente manera. En caso que el navegador no lo soporte se mostrara el mensaje de su interior.

1
2
3

<canvas id="myCanvas" width="200" height="100">
Tu navegador no soporta canvas
</canvas>

Como ven crear el objeto canvas es muy sencillo la parte dificil viene a la hora de “dibujar” en el. Para ellos nos ayudamos de Javascript

1
2
3
4
5
6

<script type="text/javascript">
var c=document.getElementById("myCanvas");//Accedemos al elementos camvas
var cxt=c.getContext("2d");//creamos el objeto a dibujar
cxt.fillStyle="#FF0000";//escogemos color rojo
cxt.fillRect(0,0,150,75);// le damos forma
</script>

Tu navegador no soporta canvas

Entendiendo como funciona fillRect

El método fillRect tiene los siguientes parámetros (0,0,150,75).
Esto quiere decir que dibuje un rectángulo de 150 x 75 empezando en las coordenadas 0,0 (esquina superior izq) . Canvas utiliza las coordenadas x y para dibujar en el lienzo. Podes ver a continuación como funciona.

Tambien podemos dibujar círculos por ejemplo:

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,28,20,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
 
</script>

Tu navegador no soporta canvas

O se pueden realizar verdaderas obras de arte como las realizadas por Mark Ferrari

Dibujar imágenes en canvas

Podemos dibujar una imagen en canvas con la siguiente función

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
 
var c=document.getElementById("myCanvas3");
var cxt=c.getContext("2d");
var img = new Image();
//indico la URL de la imagen
img.src = 'imagen.gif';
//defino el evento onload del objeto imagen
 img.onload = function(){
         //incluyo la imagen en el canvas
         cxt.drawImage(img, 10, 10);
}
</script>

Tu navegador no soporta canvas

Para aprender más de canvas pueden visitar este excelente manual echo para desarolloweb.com

Y con esto doy por concluida esta introducción a las nuevas técnicas y características de HTML5, espero que lo hayan disfrutado. Un saludo!!

Siguiendo con mi post anterior vamos a seguir numerando algunas nuevas técnicas y características de HTML5 que nos van a ayudar a escribir códigos más cortos, validar formularios, reproducir música y videos, crear aplicaciones locales y muchas cosas más.

11. Soporte para audio

Aunque aun queda mucho camino por recorrer los navegadores más actuales soportan este nuevo elemento evitando así el uso de plugins y librerías externas. Aunque eso sí, como siempre con diferencias entre unos y otros, mientras firefox se decanto por soportar archivos .ogg, webkit funciona con .mp3, internet explorer para variar no soporta ningún formato y opera de momento solo .wav

1
2
3
4
5

<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" />
	<source src="file.mp3" />
	<a href="file.mp3">Download this file.</a>
</audio>

De este modo por ejemplo Safari se saltaría el archivo .ogg y reproduciría el .mp3

12. Soporte para video

Al igual que en el elemento Audio los navegadores están divididos sobre que formato de video apoyar en un futuro. Mientras Firefox y Opera apoyan los formatos abiertos de Theora y Vorbis , Safari e Internet Explorer soportan H.264, formato no abierto que es soportado por los reproductores flash actuales.
Por lo que a la hora de ofertar videos en nuestras web debemos ofrecer ambas alternativas al igual que hicimos con el audio

1
2
3
4
5

<video controls preload>
	<source src="video-gracioso.ogv" type="video/ogg; codecs='vorbis, theora'" />
	<source src="video-gracioso.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
	<p> Tu navegador no lo soporta. <a href="video-gracioso.mp4">Puedes descargar el video.</a> </p>
</video>

Aunque por norma no es necesario especificar el atributo type haciéndolo ahorramos un poco de trabajo al navegador ya que sino lo tendría que averiguar por si solo.
Por otro lado si tu navegador no soporta HTML5 video podes optar por un link de descarga del video o simplemente colocar el video en formato flash como alternativa.

13. Atributos “preload” y “controls”

Estos dos nuevos atributos vistos en los elementos HTML5 audio y HTML5 video se describen por si solos.
El atributo controls añade los controles (play, pause,etc) para controlar los videos y audios.

1

<video controls>

Y el atributo preload hace una precarga del video para ahorrar algo de tiempo en la experiencia del usuario. Si la página esta diseñada para mostrar un video deberíamos activarlo en cambio si no estamos seguro que el usuario desee verlo ya que es algo secundario dentro del contenido, no lo incluiremos.

1

<video controls preload>

14. Expresiones regulares con el nuevo atributo pattern

Otro nuevo atributo que hará más fácil la validación de formularios sin el uso de Javascript. En el siguiente ejemplo un usario deberá crear un username que conste de letras mayúsculas o minúsculas con más de 4 caracteres y menos de 10.

1
2
3
4
5
6
7
8
9
10

<form action="" method="post">
	<label for="username">Crear un Username: </label>
   	<input type="text"
	   name="username"
	   id="username"
	   pattern="[A-Za-z]{4,10}"
	   autofocus
	   required>
	<button type="submit">Crear </button>
</form>

Para más información sobre expresiones regulares visitar este completo manual

15. Nuevo elemento <mark>

Este nuevo elemento es parecido a <em> o <strong> pero a diferencias de estos que sirven para darle valor o poder a una palabra <mark> esta pensado como un resaltador. Algo muy utilizado en buscadores para resaltar las palabras mas relevantes y que un poco de javascript podríamos implementar.

1
2

<h3>Resultados de avion </h3>
<p>El aeropuerto Pablo Picasso esta lleno de <mark style="background-color:#FFFF88;">avion</mark>es

15. Atributo data para atributos personalizados

Este “nuevo” atributo es muy útil cuando se quiere pasar valores a javascript por ejemplo. Antes podíamos utilizar cualquier atributo inventado por nosotros y nuestros scripts funcionaban , pero la validación fallaba. Ahora agregando data al atributo podremos usarlo sin problema como muestra el siguiente ejemplo.

1

<div id="myDiv" data-valorCualquiera="Mi valor"> Bla Bla </div>

Y para obtener dicho valor con JS

var theDiv = document.getElementById(‘myDiv’);
var attr = theDiv.getAttribute(‘data-valorCualquiera’);
alert(attr); // Mi valor

Incluso se puede usar con CSS para hacer un cambio de texto con la propiedad hover

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
 
<html lang="es">
<head>
   <meta charset="utf-8">
   <title>Texto cambiante</title>
<style>
 
h1 { position: relative; }
h1:hover { color: transparent; }
 
h1:hover:after {
	content: attr(data-hover-response);
	color: black;
	position: absolute;
	left: 0;
 
}
</style>
</head>
<body>
 
<h1 data-hover-response="Que no me toques!!!"> No tocar  </h1>
 
</body>
</html>

Podes ver un ejemplo funcionando aca.

16. Listado con todos los nuevos elementos de HTML5 (ingles)

• <article>
• <aside>
• <audio>
• <canvas>
• <command>
• <datalist>
• <details>
• <embed>
• <figcaption>
• <figure>
• <footer>
• <header>
• <hgroup>
• <keygen>
• <mark>
• <meter>
• <nav>
• <output>
• <progress>
• <rp>
• <rt>
• <ruby>
• <section>
• <source>
• <summary>
• <time>
• <video>

17. Los nuevos atributos de HTML5 (ingles)

• Atributos standards
• Atributos de eventos

18. Cuando debemos usar DIV’S ?

Habiendo tantos elementos nuevos en HTML5 nos preguntamos si debemos seguir usando los div para organizar nuestra web. La respuesta es si, siempre y cuando no haya un elemento que lo defina mejor semánticamente. Esto quiere decir que por ejemplo si escribimos un artículo usariamos <article> para agrupar el código,  en cambio si nuestro propósito es simplemente posicionar dicha porción de código un div sería la elección perfecta.

19. Guardando datos de forma local (localStorage y sessionStorage)

Esto aunque en un día fue considerado HTML5 ha pasado a ser una especificación independiente.

HTML5 ofrece dos posibilidades para almacenar datos en el lado del cliente:

• localStorage Almacena datos sin tiempo limite
• sessionStorage Almacena datos por lo que dure la sesión

Estas opciones vienen a ser el reemplazo de las famosas COOKIES . A diferencias de estas los datos en HTML5 no son pasados en cada request ,sino solamente cuando se solicita, permitiendo así  almacenar grandes cantidades de datos mejorando el rendimiento general.

HTML5 utiliza javascript para acceder y grabar datos locales

1
2
3
4
5
6

<script type="text/javascript">
 
localStorage.nombre="Juan";
document.write("Tu nombre: " + localStorage.nombre);
 
</script>

Contador de visitar con localStorage

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visitas "+ localStorage.pagecount + "veces.");
</script>

20. Otras especificaciones independientes de HTML5

Existen otras especificaciones que un principio formaron parte de HTML5 pero bien por ser muy complejas o extensas pasaron a ser especificaciones independientes. Entre ellas se encuentran:

• WebSocket API
• WebSocket protocol
• Server-Sent Events
• Web Storage (localStorage y sessionStorage)
• Web SQL Database

Con esto doy concluido esta segunda parte acerca de las nuevas características de HTML5. En el próximo y ultimo artículo voy a hablarles de <canvas> y como utilizarlo. Un saludo a tod@s!!

Via | Nettuts+ W3schools W3.org

Hace un tiempo por twitter me llego un link de Nettuts+ con algunas nuevas técnicas y características de HTML5

A continuación les dejo las que me parecieron más interesantes y útiles ,incluso había alguna que ni yo conocía. Estan ordenadas por mi sin ningún criterio y también agregue o junte alguna que otra característica.

1. Nuevo DOCTYPE

Hasta ahora se venía usando el engorroso DOCTYPE de toda la vida que yo si mi editor HTML no lo pusiera cada vez que abro una nueva página me sería imposible recordar.

1
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bueno a partir de ahora creo que va a ser un poco más fácil no?

1

<!DOCTYPE html>

2. No más TYPE para scripts y links

Reconozco que al día de la fecha sigo usando type para mis links y scripts tags como siempre se uso.

1
2

<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>

Pero a partir de ahora voy a cambiar el modo de enlazar mis scripts y hojas de estilo.

1
2

<link rel="stylesheet" href="stylesheet.css" />
<script src="script.js"></script>

3. No más comillas ni cerrar elementos

A diferencia de XHTML en HTML5 ya no es necesario usar comillas para los atributos, y ni siquiera es necesario cerrar los elementos. En esta coincido con el autor original de este artículo, no se si por costumbre o prolijidad me siento mejor haciéndolo al viejo estilo.

1

<p id=cualquierID> Hola que tal.

4. <figure> , nuevo elemento de HTML5

Con <figure> podemos ordenar semánticamente mejor una imagen a un pie de imagen uniendo ambos elementos dentro de uno mismo.

Por lo que una imagen como esta

1
2

<img src="images/marte.jpg" alt="Imagen de Marte" />
<p>Imagen de Marte. </p>

Quedaría de la siguiente forma:

1
2
3
4
5
6

<figure>
<img src="images/marte.jpg" alt="Imagen de Marte" />
<figcaption>
<p>Imagen de Marte. </p>
</figcaption>
</figure>

5. Text inputs para emails

Dentro de poco la mayoría de navegadores va a venir con validación de formularios incorporado por lo que agregando el nuevo type de email , crearemos input texts que solo permitan direcciones de email válidas

1

<input id="email" name="email" type="email" />

6. Los nuevos atributos “required” y “autofocus”

Además de la validación si añadimos el atributo “required” no podremos enviar un formulario hasta no añadir la dirección de email en dicho campo.

1

<input id="email" name="email" type="email" required>

O se puede usar :

1

<input id="email" name="email" type="email" required="required"/>

Por otro lado el atributo “autofocus” es otra solución más que nos evita usar javascript en nuestros formularios y al igual que el atributo anterior se usa de la siguiente forma.

1

<input id="email" name="email" type="email" required autofocus>

7. Placeholders o marcas de agua

Los placeholders o marcas de agua son el texto que aparece en las cajas de búsqueda que al escribir o hacer focus desaparece. De momento esto se podía hacer con javascript , pero ahora simplemente añadiendo este nuevo atributo conseguimos el mismo resultado.

1

<input name="email" type="email" placeholder="info@tuweb.com" />

8. Nueva semántica de <header> <nav> y <footer>

A la hora de ordenar la web yo utilizo DIVs y les asigno atributos tales como:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="header">
<div id="nav">
 
<ul>
 
<li></li>
 
<li></li>
 
</ul>
 
</div>
</div>
 
<div id="footer">
...
</div>

A partir de ahora HTML5 incorpora nueva semántica para estas partes de la página quedando de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<header>
<nav>
 
<ul>
 
<li></li>
 
<li></li>
 
</ul>
 
</nav>
</header>
 
<footer>
...
</footer>

9. Internet Explorer y HTML5

Para variar internet explorer es un mundo aparte en respecto a todos los navegadores , y la única forma que reconozca los elementos de HTML5 es haciéndoselo saber. Para ello Remy Sharp creo un script que inicializa todos los elementos en IE

1
2
3

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

10. Contenido editable

Los nuevos navegadores soportan un nuevo atributo que puede ser aplicado a los elementos para permitir editar el texto en ellos. Como bien dicen en nettuts esto sumado a por ejemplo la posibilidad de guardas datos localmente te permite crear simples programas como por ejemplo una lista de Tareas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
 
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
	<h2> To-Do List </h2>
     <ul contenteditable="true">
		<li> Break mechanical cab driver. </li>
		<li> Drive to abandoned factory
		<li> Watch video of self </li>
	 </ul>
</body>
</html>

imagen de nettuts

Mañana si me queda algo de tiempo cuelgo la segunda parte. Un saludo y comenten cual les parece más interesante.

Hasta hace poco Twitter permitía la actualización de status a través de un método sencillo mandando usuario , contraseña y mensaje de una sola vez a través de una sencilla función. Hoy en día esto ya no es así y el único modo de interactuar con la API de Twitter es usando OAuth

El método antiguo:

function postToTwitter($mensaje){
 
    $host = "http://twitter.com/statuses/update.xml?status=".urlencode($mensaje);
 
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $host);
    curl_setopt($ch, CURLOPT_VERBOSE, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_USERPWD, "Usuario:password");
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_POST, 1);
 
    $result = curl_exec($ch);
    // Look at the returned header
    $resultArray = curl_getinfo($ch);
 
    curl_close($ch);
 
    if($resultArray['http_code'] == "200"){
         $twitter_status='Tu mensaje se envio!';
    } else {
         $twitter_status="Error ";
    }
	return $twitter_status;
}

A partir de ahora tenemos que usar OAuth para que nuestros usuarios se autentifiquen de forma segura en Twitter o mejor dicho en nuestra aplicación de Twitter.
Pero que pasa cuando no necesitamos que usuarios interactuen con Twitter sino más bien lo único que queremos es actualizar nuestro propio Twitter por ejemplo con los nuevos artículos de nuestro blog. En este caso OAuth resultaría muy tedioso ya que no necesitamos autentificarnos cada vez que queremos publicar un nuevo twitter, si no más bien obtener un ACCESS_TOKEN que no expire y nos sirva para siempre.

Usar Twitter OAuth + PHP para actualizar tu status

Lo primero que necesitamos es crear una aplicación en Twitter Apps . Al crear la aplicación debemos asegurarnos de elegir Client y de dar permisos Read & Write (lectura y escritura). Los demás campos no son importantes ya que no usaremos esta aplicación con usuarios. Una vez creada la aplicación obtendremos el Consumer Key y Consumer Secret .El access token (oauth_token) lo podemos ver si hacemos click en My Access Token

Lo segundo es bajar la librería twitteroauth de Abraham y subir a tu servidor los archivos OAuth.php y twitteroauth.php

Por último en tu archivo PHP debes incluir las siguientes funciones:

require('twitteroauth.php'); //incluir la librería
define('_CONSUMER_KEY','tuConsumerKey'); //La obtenes en el paso 1
define('_CONSUMER_SECRET','tuConsumerSecret'); //La obtenes en el paso 1
define('_OAUTH_TOKEN','tuOAuthToken'); //La obtenes en el paso 1
define('_OAUTH_TOKEN_SECRET','tuOAuthTokenSecret'); //La obtenes en el paso 1
 
		$bit=tinyurl($link); //reducimos el link con la api de bit.ly
		$quedan=(140-strlen($bit))-4; // calculo los caracteres restantes que me quedan para publicar
                                                                     restando los puntos suspensivo
		$mensaje=substr($mensaje,0,$quedan).' ...'.$bit; // corto el mensaje en caso de que sea muy largo
 
//declaramos la función que realiza la conexión a tu aplicación de twitter
		function getConnectionWithAccessToken($oauth_token, $oauth_token_secret) {
                     $connection = new TwitterOAuth('_CONSUMER_KEY', '_CONSUMER_SECRET',$oauth_token, $oauth_token_secret );
                   return $connection;
                }
//Realizamos la conexión
$connection = getConnectionWithAccessToken(_OAUTH_TOKEN, _OAUTH_TOKEN_SECRET);
//Publicamos el mensaje en twitter
$twitter=$connection->post('statuses/update', array('status' =>$mensaje));
 
//Función para acortar URL con bit.ly . Primero debemos registrarnos en http://bit.ly para obtener clave api y usuario
 function tinyurl($url_larga){
$tiny = "http://api.bit.ly/v3/shorten?login=TuUsuario&apiKey=tuClaveApi&format=txt&longUrl=".$url_larga;
$sesion = curl_init();
curl_setopt ( $sesion, CURLOPT_URL, $tiny );
curl_setopt ( $sesion, CURLOPT_RETURNTRANSFER, 1 );
$url_tiny = curl_exec ( $sesion );
curl_close( $sesion );
return($url_tiny);
}

Resumiendo:

• Creamos aplicación en Twitter Apps
• Elegimos Client como Application type y le damos permisos de Read & Write
• Obtenemos Consumer Key , Consumer Secret , Access Token(OAuth access token) y Access Token Secret(Oauth token secret)
• Descargamos la librería twitteroauth.php y oauth.php desde aquí y los subimos al server
• Por último creamos el mensaje y la url corta para actualizar nuestro estado.

Espero que hayan entendido bien el tutorial porque la verdad lo hice corriendo y con la comida en el horno xD . Cualquier duda dejen sus comentarios. Saludos!!

Ando metido en un proyecto nuevo  que contiene muchas páginas generadas dinámicamente como para realizar un sitemap de forma manual , así que me puse a buscar algún generador de sitemap que utilize el protocolo establecido para sitemaps tal y como indica en sitemaps.org.

Después de buscar por un buen rato me encontré con un listado muy completo de generadores de sitemap que comparto con ustedes a continuación.

Programas para instalar en el server

• Enarion phpSitemapsNG (PHP)
• Google Sitemap Generator (Linux/Windows, 32/64bit, open-source)
• Outil en PHP (French, PHP)
• Perl Sitemap Generator (Perl)
• Python Sitemap Generator (Python)
• Simple Sitemaps (PHP)
• SiteMap XML Dynamic Sitemap Generator (PHP) $
• XML Sitemap Generator (PHP) $

Sitemaps generators/plugins para CMS

• ASP.NET – Sitemaps.Net
• DotClear (Spanish)
• DotClear (2)
• Drupal
• ECommerce Templates (PHP) $
• Ecommerce Templates (PHP or ASP) $
• LifeType
• MediaWiki Sitemap generator
• mnoGoSearch
• OS Commerce
• phpWebSite
• Plone
• RapidWeaver
• Textpattern
• vBulletin
• Wikka Wiki (PHP)
• WordPress

Herramientas descargables

• Expression Web Sitemap Builder (Windows) $
• GSiteCrawler (Windows)
• GWebCrawler & Sitemap Creator (Windows)
• G-Mapper (Windows)
• Inspyder Sitemap Creator (Windows) $
• IntelliMapper (Windows) $
• KeyLimeTie Sitemap Generator (Windows) $
• Microsys A1 Sitemap Generator (Windows) $
• Rage Google Sitemap Automator $ (OS-X)
• Site Map Pro (Windows) $
• Sitemap Writer (Windows) $
• Sitemap Generator by DevIntelligence (Windows)
• Sitemapper by CoffeeCup (Windows) $
• Sorrowmans Sitemap Tools (Windows)
• TheSiteMapper (Windows) $
• Vigos Gsitemap (Windows)
• WebDesignPros Sitemap Generator (Java Webstart Application)
• WonderWebWare Sitemap Generator (Windows)

Generadores online

• AuditMyPc.com Sitemap Generator
• AutoMapIt
• Autositemap $
• Enarion phpSitemapsNG
• Free Sitemap Generator
• Neuroticweb.com Sitemap Generator
• ResourceSEO Online Sitemap Generator
• ROR Sitemap Generator
• ScriptSocket Sitemap Generator
• SeoUtility Sitemap Generator (Italian)
• SitemapDoc
• Sitemapspal
• SitemapSubmit
• Smart-IT-Consulting Google Sitemaps XML Validator
• XML-Sitemaps Generator
• Attracta SEO Tools

CMS con generador de sitemap integrado

• Concrete5

Generador de sitemaps de Google News

• WordPress Google News plugin

Códigos fuentes y librerías

• ASP script
• Emacs Lisp script
• Java library
• Perl script
• PHP class
• PHP generator script

Hay bastantes ofertas como para mantenerse ocupado un tiempo. Yo estoy probando de momento Attracta SEO Tools que es un servicio online que viene integrado en mi cPanel y de momento funciona muy bién. Aunque tengo ganas de instalar alguno que otro en mi server para ver como funcionan. Si alguien tiene algún otro que no aparezca en la lista deje el comentario y lo iremos agregando. Saludos!!!

Hoy cuando me levante se me ocurrió hacer una lista con los mejores blogs  o webs sobre diseño web , programación , maquetación css, javascript  y frameworks, etc .  Como esto de “los mejores blogs” es muy amplio y según  el parecer de cada uno la lista va a ser totalmente diferente me parece mejor hacer directamente una lista abierta donde cada uno pueda agregar la web que le parezca. Así que si conoces alguna web interesante o querés presentar la tuya deja un comentario con el link .

Otra cosa que pensé es dividirlos en categorías pero como la mayoría  ocupan varias categorías es mejor que cada uno ponga al lado los principales temas  que se tratan y simplemente los dividimos en 2 grandes grupos. Páginas en Ingles y en Español

Español

Timersys <—- JQuery ,PHP , tutoriales , recursos y mucho más @Damian Logghe

Anieto2K <—- Desarollo web, wordpress, fotografía ,etc @Andres Nieto

CSSBlog Es <—- CSS 100% y monton de recursos @Pedro Corchero Murga

Foros del web <—- Impresionante comunidad con miles de miembros activos dispuestos a ayudarte @Forosdelweb

LibrosWeb <—- Manuales completamente gratis de programación y diseño web.

Todo Tutoriales Web <—- Recursos y trucos para foroactivo, diseño, etc @Carlos

Ingles

WoorkUp <—- Recursos , tutoriales y artículos muy buenos @Antonio Lupetti

Smashing Magazine <—- Excelente web con miles de recursos gráficos @Smashing Mag

Nettuts+ <—- Página super completa con tutoriales y ejemplos de todos @nettuts

Ahora por favor colaboren que entre todos podemos hacer una buena lista. Saludos!!

Hoy en día los buscadores están empezando a puntuar la velocidad de carga de las páginas webs para mostrar los diferentes resultados ( engrosando así sus algoritmos para mejorar la experiencia de los usuarios). Hay diversidad de formas de acelerar la carga de una página web pero podemos resumirlas en unas cuantas.

1. Buen diseño de código.

2. Buen diseño de base de datos.

En estos dos primeros puntos no les puedo ayudar más que ofreciendo tutoriales y recursos en mi blog.

Pero además de esto existen varios factores importantes que podemos mejorar. Una de las herramientas que más me gusta es YSlow, un complemento de Yahoo para el archiconocido addon de Firefox llamada Firebug.

Esta herramienta nos va a mostrar los “puntos flacos” que tiene nuestra web y la forma de mejorarlos.

El más importante en mi punto de vista es la compresión de todos los archivos. Con esto podemos reducir el tamaño de la web ( archivos php, css, js, etc) en un 75%-90% reduciendo la velocidad de descarga de la misma en el mismo porcentaje.

3.El método más comúnmente usado y eficaz es Gzip.

A continuación les voy a explicar como habilitarlo para php aunque también se puede habilitar desde apache si tienen privilegios.

Existen 3 métodos para habilitar zlib :

1. Añadir en el .htaccess :
   php_flag zlib.output_compression On
2. Añadir en php.ini:
   zlib.output_compression = On
3. Añadir en cada script PHP antes de cualquier ouput:
   ini_set(‘zlib_output_compression’,’On’);

Una vez realizado cualquier de estos métodos todo archivo PHP pasara comprimido o Gzipped al usuario.

Que pasa si queremos comprimir otros archivos como javascript o css con Gzip?

Para ellos tenemos que cambiar la extensión de los archivos por php. Por ejemplo a script.js lo llamaríamos script.js.php y al principio del archivo añadiríamos la siguiente cabezera:

<php header("Content-type: text/js"); ?>

Luego lo incluiríamos en nuestros script de forma habitual:

Lo mismo sería para archivos CSS.

Ahora bien hay hosting que no soportan este método. Por ejemplo en mi hosting compartido de HostGator no puedo utilizar ninguna de estas opciones sin embargo desde el Cpanel del mismo existe una opción que se llama Optimize Web que se encuentra en la parte de servicios. Al habilitar dicha opción todos los archivos serán comprimidos antes de su descarga mejorando así la experiencia del usuario.

4.Añadir expires headers / cabezeras que expiren

Nuestros navegadores guardan en cache absolutamente todos(imágenes, archivos css, js, etc). Por lo que si no ponemos una fecha de caducidad en las cabezeras cada vez que el usuario descargue nuestra web estará descargando todo una y otra vez.

Podemos hacerlo de forma sencilla modificando el .htaccess para que añada un expire header a los archivos solicitados:

5.Cantidad de requests HTTP

Cada archivo, cada imagen que se carga es una descarga paralela o request http que hacemos al servidor. Por eso es conveniente juntar por ejemplo todos nuestros scripts js en un solo archivo y comprimirlos con minified, o juntar cada imagen y utilizar CSS Sprites que aunque el tamaño de la imagen resultante puede ser igual , la cantidad de requests al servidor se verá reducida.

6.Colocar las hojas de estilo al principio y los scripts de javascript al final.

Esta comprobado que al colocar las hojas de estilo al principio de la página entre las estiquetas hace que las páginas carguen más progresivamente dando una sensación de velocidad.

Igualmente cargas los archivos javascript al final de la página (siempre que sea posible) facilita que se descargue primero la parte visual de la web.