lunes, 28 de febrero de 2011

Bigmouth tipografía para diseñar

domingo, 27 de febrero de 2011

3D con CSS

En html5rocks nos enseñan como pasar del CSS 2D al 3D con un sencillo truco basándose en las nuevas posibilidades que nos da el CSS3. Claro está, que esto es solo compatible en los nuevos navegadores.

Un ejemplo para ganar perspectiva en una capa que contendrá una serie de elementos:
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

podemos añadir un iframe con su correspondiente efecto:
<iframe src="http://www.google.com/" style="-webkit-transform: rotate3d(0,1,1, 45deg)"></iframe>
quedando como resultado:
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 100px 50px">
    <iframe src="http://www.google.com/" style="-webkit-transform: rotate3d(0,1,1, 45deg); transform: rotate3d(0,1,1, 45deg);"></iframe>
</div>
También para que el efecto quede mas visible podemos crear una animación solo con estilos:
<style>
    #anim1 {
        -webkit-perspective: 800;
        perspective: 800;
        margin: 100px 0 100px 50px;
    }
    #anim1 iframe {
        -webkit-transition: -webkit-transform 1s ease-in-out;
        -webkit-transform: rotate3d(0,1,1, 45deg);
        transition: transform 1s ease-in-out;
        transform: rotate3d(0,1,1, 45deg);
    }
    #anim1 iframe:hover {
        -webkit-transform: rotate3d(0,0,1, 45deg);
        transform: rotate3d(0,0,1, 45deg);
    }
</style>
Repito esto solo se podrá visualizar en los nuevos navegadores. Podeis ver como funciona en 3D and CSS

viernes, 18 de febrero de 2011

Los mejores horarios para publicar en las redes sociales

Una buena estrategia es publicar en las redes sociales, para captar el mayor numero de audiencia... Y como sabemos que no todo el mundo se conecta a la misma hora, ni se encuentra pendiente de lo que publicamos en todo momento. Es por ello que Cual es la mejor hora para publicar en Twitter y lograr que más personas difundan mi idea de negocios.

  • En Twitter: entre las 2:00 pm y las 4:00 pm.
  • En Facebook: La mejor hora es a las 9:00 am y el segundo mejor momento a las 6:00 pm.

jueves, 17 de febrero de 2011

Formas con CSS

Shapes una forma interesante de hacer formas con CSS a partir de un único elemento HTML. Por supuesto son las nuevas posibilidades que da CSS3 y por tanto es necesario un navegador "moderno". Os muestro unos ejemplos de su uso.


Circulo
#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

Triangulo
#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

un saludo.

miércoles, 16 de febrero de 2011

Visitas desde los buscadores de imagenes

La idea es redirigir automáticamente las páginas de resultados del buscador de imágenes hacia la página donde se encuentre la imagen. De esta forma generaría una visita real. El código sería el siguiente:

<script type=”text/javascript”>
<!– if (top.location!= self.location){
             top.location = self.location.href
} //–>
 </script>

Lo alojaríamos en el <head> y listo. Con este sencillo truco aumentará considerablemente el CTR de la página pero queda una duda "¿Google permite este tipo de redirecciones?" aun no lo tengo muy claro.

martes, 15 de febrero de 2011

Google y el contenido oculto


Las nuevas mejoras que se han introducido en las páginas web, han hecho común el mostrar a los visitantes solo una parte del texto que contiene una página web.
Esto mantiene simplicidad y una capa mas clara, en la que se muestra inicialmente un trozo del articulo o comentarios y debajo se coloca el botón de "Leer más..." que al hacer clic en este, se despliega el texto completo.
Se trata de usar contenidos ocultos. Pero cuidado: En realidad todo el texto se encuentra en el archivo HTML que es rastreado por los bots de los motores de búsqueda. Los algoritmos de los buscadores no saben cuales son los textos que finalmente aparecen en el navegador y son visualizados por los visitantes.
Por este motivo, esta es una técnica que bordea los limites de lo permitido por los buscadores, ya que para evitar el SPAM y el keyword stuffing Google no permite usar texto oculto y esto puede ser penalizado.
En el siguiente vídeo de Google Wemaster Central, finalmente se ha aclarado un poco este tema
En resumen Google no penaliza este tipo de técnicas si los botones o enlaces que contienen estos textos ocultos.
También el tamaño de estos textos es muy importante: Si estos textos desplegables son muy largos, pueden ser considerados SPAM y corren el riesgo de ser penalizados.
No es malo usar esta técnica pero con cierta precaución.

visto en : Dr. Max Glaser

lunes, 14 de febrero de 2011

Psicología del color

Curiosa tabla sobre la psicología del color, encontrado en TechKing, echarle un vistazo. La imagen es muy grande y redimensionandola no queda bien así que os recomiendo que visiteis la web.

sábado, 12 de febrero de 2011

Google penaliza!!!

Últimamente es muy habitual encontrarse algo como esto.
Es posible que este sitio esté cometiendo una infracción de las directrices de calidad de Google.
Suerte ;)

viernes, 11 de febrero de 2011

Crear una Cookie y que no desaparezca

Puede llegar a ser interesante conocer quie visita nuestra página sí o sí. Normalmente se usan las cookies del navegador, con opciones de sesión, dándoles fecha de fin... estas son fáciles de eliminar.
Si en algún caso se necesitaría poner una cookie que no desaparezca ni aun vación todas las opciones de configuración. Necesitaríamos aplicar evercookie.
El objetivo es crear una cookie prácticamente indestructible, y para ello se utiliza cosas como:
- Standard HTTP Cookies
- Local Shared Objects (Flash Cookies)
- Silverlight Isolated Storage
- Storing cookies in RGB values of auto-generated, force-cached 
- PNGs using HTML5 Canvas tag to read pixels (cookies) back out
- Storing cookies in Web History
- Storing cookies in HTTP ETags
- Storing cookies in Web cache
- window.name caching
- Internet Explorer userData storage
- HTML5 Session Storage
- HTML5 Local Storage
- HTML5 Global Storage
- HTML5 Database Storage via SQLite
Está escrito en JavaScript, y de momento el único navegador que es capaz de no cargar este sistema es Safari en modo privado. Podéis visitar la web oficial donde podréis descargaros la ultima versión.
Su uso es tan simple como esto:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="swfobject-2.2.min.js"></script>
<script type="text/javascript" src="evercookie.js"></script>
<script>
var ec = new evercookie();
// set a cookie "id" to "12345"
// usage: ec.set(key, value)
ec.set("id", "12345");
// retrieve a cookie called "id" (simply)
ec.get("id", function(value) { alert("Cookie value is " + value) });
// or use a more advanced callback function for getting our cookie
// the cookie value is the first param
// an object containing the different storage methods
// and returned cookie values is the second parameter
function getCookie(best_candidate, all_candidates)
{
alert("The retrieved cookie is: " + best_candidate + "\n" +
"You can see what each storage mechanism returned " +
"by looping through the all_candidates object.");
for (var item in all_candidates)
document.write("Storage mechanism " + item +
" returned: " + all_candidates[item] + "<br>");
}
ec.get("id", getCookie);
// we look for "candidates" based off the number of "cookies" that
// come back matching since it's possible for mismatching cookies.
// the best candidate is most likely the correct one
</script>

jueves, 10 de febrero de 2011

Android - Como crear menús contextuales

Debemos implementar dos métodos. El primero de todos es crear un menú contextual, de la siguiente forma.

@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {
    super.onCreateContextMenu(menu, v, menuInfo);
        menu.setHeaderTitle("Choose an option");
        menu.add(0, v.getId(), 0, "Add to favorites");
        menu.add(0, v.getId(), 0, "See details");
}

Si disponemos en nuestra aplicación de una ListView lo ejecutaremos de la siguiente forma.

registerForContextMenu(myListView);

Por ultimo tenemos que implementar la acción que se ejecutará al seleccionar cada una de las opciones.

public boolean onContextItemSelected(MenuItem item) {
    AdapterView.AdapterContextMenuInfo info =(AdapterView.AdapterContextMenuInfo) item.getMenuInfo();
    if (item.getTitle() == "Add to favorites") {
        // Acciones a ejecutar
    }else if (item.getTitle() == "See details") {
        // mas instrucciones
    } else {
    return false;}
return true;}

miércoles, 9 de febrero de 2011

La solución para entregar los trabajos a tiempo

File Destructor 2.0 ideal para tener la escusa perfecta en caso de que tengas que entregar un trabajo y no dispongas del tiempo suficiente para terminarlo.

En este sitio podemos generar un documento corrupto de cualquier extensión dándole un tamaño, así gana realismo.

EL siguiente paso seria entregar el archivo generado el cual no podrá abrirlo por que esta corrupto. Y con eso la escusa perfecta para ganar mas tiempo.
Suerte ;)

martes, 8 de febrero de 2011

Ajax con el nuevo jQuery

Mirando nuevas mejoras de esta librería he descubierto una muy interesante. A pesar de estar muy mejorada anteriormente, esta vez están que bordan la simplicidad. jQuery hace honor a su lema “La librería JavaScript para escribir menos y hacer más” comenzaremos con unos ejemplos.



Es tan sencillo como ejecutar lo siguiente.
$("#login").load("logearse.html");
De esta forma cargaríamos toda la página logearse.html en la capa #login. También podemos hacer cosas como:
$("#login").load("logearse.html p");
cargar solo los elementos con la etiqueta <p>
$("#login").load("logearse.html #formulario");
cargar la capa con el id formulario.

En el caso de que necesitemos enviarle parametros podemos hacer cosas como
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Cargadas las ultimas 25 entradas"); 
});
Me a parecido una buena mejora comparandola con el antiguo método. Aunque a decir verdad ambos son muy buenos.
$.ajax({
    url: 'test.html',
    success: function(datos){
    $('#resultado').html(datos);
        alert('Cargado');
}});


lunes, 7 de febrero de 2011

JavaScript en 3D

Hasta hace bien poco era impensable el incluir una figura modelada en 3D en cualquier sitio web con solo un JS y nada mas. Si se quería lograr ese efecto partíamos de la necesidad de incluir un SWF o para los mas simples una animación GIF. Pues de la mano del sitio github y su autor Tony Buser, nos presenta Thingiview podemos ver una serie de ejemplos en esta web. La implementación es vastante sencilla, un ejemplo:

<script src="/javascripts/Three.js"></script>
<script src="/javascripts/plane.js"></script>
<script src="/javascripts/thingiview.js"></script>
<script> 
    window.onload = function() { 
        thingiurlbase = "/javascripts"; 
        thingiview = new Thingiview("viewer"); 
        thingiview.setObjectColor('#C0D8F0'); 
        thingiview.initScene(); 
        thingiview.loadSTL("/objects/cube.stl"); 
    } 
</script> 
<div id="viewer" style="width:300px;height:300px"></div>
Espero que os haya gustado, hasta la próxima.

domingo, 6 de febrero de 2011

Consejos de Google para mejorar la visibilidad de tu sitio

Hace tiempo Google nos dejo un buen articulo donde nos explicaba en 10 pasos como mejorar la visibilidad de nuestro sitio web. Os dejo el articulo para que le echéis un ojo.


1. Accede a las Herramientas para webmasters. Las Herramientas para webmasters de Google es un conjunto de herramientas gratuitas que te ofrece informes detallados sobre la visibilidad de tus páginas en Google. Para empezar, sólo tienes que añadir y verificar tu sitio, y empezarás a ver información inmediatamente. Otros recursos, como nuestro blog para webmasters en español o nuestro foro para webmasters en español, contienen información para optimizar tu sitio para la búsqueda orgánica.


2. Intenta ponerte en el lugar de alguien que visita tu sitio. Asegúrate de que tu página incluya los términos que con toda seguridad buscarán los usuarios y de que éstos aparezcan integrados en el texto de manera natural, no en forma de lista ni como palabras sueltas.

3. Utiliza títulos adecuados y relevantes en función del contenido de cada página, ya que los usuarios podrán verlos directamente en los resultados de búsqueda. Asimismo, procura que los encabezados sean útiles y se correspondan con la información del sitio.

4. Proporciona metaetiquetas lo suficientemente descriptivas. Estas descripciones pueden aparecer en los resultados de búsqueda de Google en forma de fragmentos (los extractos de páginas que solemos mostrar en los resultados de búsqueda) e influir de manera decisiva en la calidad del tráfico y el número de visitas. Para saber más sobre este tema, puedes consultar nuestro artículo, Cambio del sitio y de la descripción del sitio en los resultados de búsqueda.

5. Ayuda a los usuarios a entender mejor el contenido de tus páginas mediante URL más sencillas y atractivas: ejemplo.com/productos/widget.html; y no ejemplo.com/asdasd/rewiruewr?asd=2131209840392. Puedes leer más información sobre laorganización de parámetros aquí.

6. Asegúrate de que las páginas principales o especialmente importantes de tu sitio incluyan un enlace que redirija a los usuarios desde otra página del sitio que ya esté indexada en Google. Así pues, puedes crear un enlace a la página de "Nuevas ofertas" desde la página de inicio de tu sitio. La creación y el envío de un Sitemap ayuda a que Google conozca las páginas de tu sitio, incluyendo URL que puede que no fueran detectadas en el proceso habitual de rastreo de Google.

7. Asegúrate de que el contenido principal y la navegación de tu sitio sean en texto, usando optativamente Flash y Javascript para complementar o mejorar tu sitio. Puedes leer más en nuestro artículo Usos recomendados de Flash.

8. Utiliza atributos ALT para las imágenes. El robot de Google no puede interpretar las imágenes, por eso te pedimos que nos ayudes a clasificarlas correctamente. Los atributos ALT son metaetiquetas de imágenes que proporcionan información adicional directamente en la etiqueta y aparecen cuando un usuario no puede ver una imagen determinada. Además, Googlebot las utiliza para interpretar mejor de qué tipo de imagen se trata. Por ejemplo, en lugar de nombrar "picnic" cada una de tus fotos familiares, puedes usar un atributo que describa cada foto. Por ejemplo, "Pepito y Pepita juegan con su nueva mascota en Central Park".

9. Si quieres asegurarte de que hasta un niño pueda acceder a la información, te recomendamos que explores tu sitio con un teléfono móvil o un navegador de texto si dispones de los conocimientos técnicos necesarios. Si no cuentas con estos medios, inténtalo con el navegador web Lynx (podrás encontrarlo en la siguiente dirección:http://lynx.isc.org/).

10. Recuerda en todo momento que es fundamental garantizar a tus usuarios una experiencia óptima. Aunque Google y otros motores de búsqueda permiten un sinfín de opciones, el hecho de que los usuarios marquen tu sitio como favorito, lo compartan y realicen comentarios positivos sobre tus páginas puede aportarte un gran número de ventajas. Prueba y mide los cambios relativos al diseño y a la facilidad de uso del sitio mediante herramientas como Google Analytics o el Optimizador de sitios web de Google.

En caso de duda, puedes consultar nuestros recursos:

sábado, 5 de febrero de 2011

Kill CSS o apagado CSS

Entre tantas cosas graciosas que te puedes encontrar por la red esta me ha parecido muy buena.
Supongo que vendrá de algún colectivo de diseñadores "frustrados" sin ofender. Aunque he de reconocer que es muy buena la idea.
La función o uso de esto viene partiendo de que un "cliente" (amigo de amigo que conoce a un primo que es muy amigo....) creo que lo entendéis ;) os pide que le realicéis una Web. Muy bonita, vamos la envidia del negocio. Y llegáis a un acuerdo económico. Hay es donde entra esto como "asegurarse" que te pagan por tu trabajo. Pues muy bien, aquí entra en acción el Killswitch. Simplemente es una hoja de estilo CSS que está alojado en un servidor de tu control. De esta forma si no llegas a recibir el pago solo tienes que cargar lo siguiente:
body.demo { background: black !important; }
body.demo * { display: none !important; }
Y su web se "apagará". Método casero pero muy curioso. Yo preferiría crear un panel de administración para que el usuario tenga acceso a sus modificaciones cotidianas y yo pueda realizar un mantenimiento mas profundo en el caso de necesitarlo.

viernes, 4 de febrero de 2011

Periodos de Inactividad en los sitios Web

Se realizan una serie de modificaciones (un mantenimiento) en la web, o a sufrido un apagón, una desconexión. Factores que dañan la reputación, y son perjudiciales para cualquier indexación, rastreo o posicionamiento que se esté llevando a cabo por cualquier buscador.
Hay formas de tratar estos periodos de inactividad ya planeados para que no afecten a los resultados de búsqueda o a la visibilidad de la web en lo buscadores.

En lugar de devolver un error del tipo 404 (no encontrado) o mostrar la web con un error 200 (OK). Sería mejor que devolviese un error HTTP 503 (Servicio no disponible). De esta forma se le puede decir a los rastreadores o motores de búsqueda que el tiempo de inactividad  es temporal. También favorece al usuario que la visita por que le informan de cuando estará de nuevo disponible.

Si se conoce la fecha, hora o segundos que va a durar este periodo se podrá especificar con el encabezado "Retry-After header" De esta forma los rastreadores sabrán cuando pueden rastrearlo de nuevo.
header('HTTP/1.1 503 Service Temporarily Unavailable');
header('Retry-After: Sat, 27 Oct 2011 18:27:00 GMT');
Es un buen método de uso para este tipo de situaciones planeadas. Atención situaciones planeadas de corto plazo. De lo contrario puede dar lugar a que se eliminen las URL de los indices de los buscadores.

jueves, 3 de febrero de 2011

Cómo cargar el JavaScript

Como ya tenemos entendido, el javascript bloquea los contenidos a la carga de la web. Para evitar esto podemos hacerlo con otros código de javascript (ya mostrados en otras entradas). Hoy os voy a mostrar dos, luego el uso de uno u otro cada uno con su criterio. Como un pequeño dato otra buena utilidad de estos códigos es que también tienen la posibilidad de cargar CSS sin ningún problema.


function loadScript(url, callback){
  var script = document.createElement("script")
  script.type = "text/javascript";
  if (script.readyState){ // Internet Explorer
    script.onreadystatechange = function(){
      if (script.readyState == "loaded" || script.readyState == "complete") {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else { // Otros navegadores
    script.onload = function(){
    callback();
  };
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}



Con está función ya podríamos cargar los elementos js en la cabecera head de la siguiente forma
<script type="text/javascript" src="js/funcionAnterior.js"></script>
<script type="text/javascript">
     loadScript("jst/fichero1.js", function(){ });
     loadScript("js/fichero2.js", function(){ });
</script>



jQuery también tiene una función que realiza el mismo trabajo, se ejecuta de la siguiente manera.
$.getScript("test.js");
De está también tenemos la posibilidad de que ejecute un código cuando termine su carga.
$.getScript("test.js", function(){
    alert("Script está cargado y ejecutado.");
});
un saludo ;)

miércoles, 2 de febrero de 2011

Crea tus paletas de Color

Color Scheme Designer, es una aplicación web muy completa que trata el color.
Con ella se puede crear paletas de color a medida y en diferentes espacios de trabajo (RGB, Pantone o RAL). Como cualquier herramienta de este tipo, permite ajustar brillo, saturación y el contraste entre otras cosas mas. También permite exportar las paletas a diferentes formatos de aplicación (HTML, Photoshop) es muy sencillo de usar y muy cómodo.

HTML 5 para cualquier navegador

Llega HTML5 y con ello se nos presenta un problema... en IE8 no funciona :O
Existen Script´s para hacer que funcione, pero hay una solución mas sencilla. Sin incluir Script ni excesivo código alternativo que cuando se de el caso de que todos los navegadores lo soporten no tengamos que reestructurar el sitio por completo. De está forma solo realizaremos un pequeño "remplace" en el código y listo.
El método para solucionarlo consiste en cargar HTML5 como si fuerá XML en el código HTML.
Aquí tenemos un ejemplo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml">
     <head>
          <meta charset="utf-8"/>
          <title>Demo HTML5</title>
          <style>
               html5\:section {
                   display: block;
               }
          </style>
     </head>
     <body>
          <h1>Demo HTML5</h1>
          <html5:section>Este <strong>&lt;html5:section&gt;</strong> funciona incluso en Internet Explorer.</html5:section>
     </body>
</html>
Cuando llegue el momento en el que HTML5 sea compatible con todos los navegadores solo tenemos que ejecutar un "remplace" en el código, sustitullendo:
<html5: por < y </html5: por </
Y listo!!

martes, 1 de febrero de 2011

404 no será un error?

xD

¿Que color Hexadecimal es?

What the hex? es un juego con diferentes niveles de dificultad donde tu misión es adivinar que color que corresponde con el código hexadecimal que te preguntan.

Os dejo que enredéis un rato, parece estúpido pero creo que ya tengo pillado el truco.

PDF noindex please

Es muy normal limitar el acceso de los robots de búsqueda a ciertos contenidos. Nos referimos a robots.txt y del meta-robots.
Con esto podemos controlar elementos generales de un sitio o carpetas. También páginas o tipos de ficheros.
El problema está cuando surge la situación en la que no deseamos indexar los PDF por que todos los demás elementos se pueden noindex por el método particular.
Es por ello que existe la directiva HTTP X-Robots-Tag la cual en un simple encabezado permite enviar información como la del meta-robots pero vía servidor web.

Un pequeño ejemplo de encabezado sería:
X-Robots-Tag: noindex
De esta forma diremos al robot que haya solicitado el fichero que no lo indexe.
Tambien cabe la posibilidad de hacer cosas como:
X-Robots-Tag: noarchive, nosnippet

En este caso no mostrará el enlace a la caché y ningún tipo de resumen (snippet) en los resultados de búsqueda.