xploit29 - Tecnología al alcance de tus manos » Web

Integración entre Twitter y Evernote

pinwin0 — Wed, 15 Apr 2009 02:30:15 +0000

Dos de los servicios que más utilizo, Twitter y Evernote han anunciado que ahora trabajaran conjuntamente para ofrecer la creación de notas mediante tweets. Cómo funciona?

1.- Una vez que tengas una cuenta en ambos servicios, tendrás que seguir al usuario @myEN en Twitter.
2.- @myEN te seguirá y te mandará un mensaje directo a tu cuenta de Twitter.
3.- Sigue el enlace, e inicia sesión en tu cuenta de Evernote.

Para guardar notas, manda ya sea un mensaje directo a myEN o inclúyelo en un twitt en cualquier parte del mensaje. La interacción se mantendrá incluso si cambias tu username en Twitter.

Via | Blog Evernote

Entradas relacionadas:

Escribe lo que quieras usando íconos de la Web 2.0

ikcam — Sat, 07 Feb 2009 03:41:17 +0000

Web 2.0 Write es un sitio en el cual ingresamos una cadena de texto cualquiera la cuál más adelante se convertirá en una cadena conformada por muchos íconos de la Web 2.0 como por ejemplo “T” se reemplaza por el ícono de Twitter o Tumblr. Lastimosamente la imagen obtenida tras el proceso respectivo no es muy grande pero puede servir de todas maneras.

El servicio también cuenta con su respectivo API el cual es muy sencillo de usar: http://web2.0write.com/api.php?t=lo-que-deseamos y obtendremos la URL de la imagen respectiva.

Como verán en la imagen anterior únicamente el sistema trabaja con letras mas no con números. Los resultados no siempre son los mismos, ya que como mencioné anteriormente una letra puede tener dos o más opciones de ícono lo cual nos dice que no se obtendrá dos veces seguidas la misma imagen.

Enlace | Web 2.0 Write
Vía | Incuba Web

Entradas relacionadas:

Hackosis, que tan buena es tu contraseña

ikcam — Tue, 11 Nov 2008 23:41:24 +0000

Hackosis es un sitio en el cuál mediante algoritmos puede descifrar en cuanto tiempo tu contraseña puede obtenida a través de “brute force” o fuerza bruta, éste método principalmente consiste en que ordenadores programados empiecen a realizar millones de combinaciones entre números, letras y caracteres especiales hasta lograr obtener tu contraseña y así aprovecharse de tu información ya sea para robártela, eliminártela o cualquier otra opción que puede afectarnos.

La información que nos muestra como resultado es en cuántas horas nuestra contraseña puede ser obtenida, en cuantos días y cuántas contraseñas se probarían hasta lograr obtener la correcta. Estos resultados son calculados usando como modelo un ordenador típico del 2008 a un 10% de su carga de procesamiento total. Por supuesto que estas son estimaciones de tiempo.

El sitio usa un script gratuito que puede ser descargado por cualquier persona y subirlo a su sitio (claro que ellos son los desarrolladores de este script).

Enlace | Hackosis
Vía | Incuba Web

Entradas relacionadas:

Crear tabs para cualquier sitio con jQuery (Parte I)

ikcam — Mon, 13 Oct 2008 06:02:34 +0000

jQuery es una tecnología que simplifica muchas cosas a la hora de realizar el trabajo de estructura de un sitio web, como verán, anteriormente en el desarrollo de esta plantilla, los “TABS” del Sidebar se establecían a través del script de DOMTAB, sin embargo estos me presentaron problemas al incorporarlos a WordPress, así que decidí usar jQuery y en realidad ha sido muy sencillo el insertarlo a la plantilla.

Para iniciar el proceso, entre las etiquetas y debemos añadir las siguientes líneas:

  <script src="http://code.jquery.com/jquery-latest.js">
  	 
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
     
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
     
  </script>
  <script type="text/javascript">
     
  </script>

A continuación, insertaremos entre las etiquetas y el contenido del recuadro, más adelante, veremos como agregar más recuadros también.

    <div id="EJEMPLO" class="estilo">
    <ul>
        <li><a href="#tab-1">Título 1</a></li>
        <li><a href="#tab-2">Título 2</a></li>
    </ul>
    <div id="tab-1">
            Aquí el contenido</div>
    <div id="tab-2">
            Aquí el contenido</div>
    </div>

Podemos agregar tantas pestañas como deseemos sin ningún problema, pero hay que intentar mantener el órden así que es mejor no recargar de pestañas un recuadro. El siguiente paso será la hoja de estilos (el mismo al que uso para esta plantilla) para poder asignarle un diseño al recuadro que contiene la pestañas:

.estilo{
			margin:0 0 15px 0;
			padding:0;
			width:310px;
		}
		.ui-tabs-nav{
			margin:0;
			padding:0;
			list-style:none;
		}
		.ui-tabs-nav li {
			margin:0 2px 0 0;
			padding:0 5px 0 5px;
			float:left;
			height:30px;
			border-top:1px #3399FF solid;
			border-right:1px #3399FF solid;
			border-left:1px #3399FF solid;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			line-height:30px;
			text-transform:uppercase;
		}
		.ui-tabs-nav li:hover {
			background:#EBEBEB;
			color:#333333;
		}
			.ui-tabs-nav li:hover a {
				color:#333333;
			}
		.ui-tabs-nav li {
			background:#FFFFFF;
		}
			.ui-tabs-nav li a {
				color:#336699;
				text-decoration:none;
			}
		.ui-tabs-panel {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-panel ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-panel ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-panel a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-panel a:hover {
				color:#3399FF;
				text-decoration:underline;
			}
		.ui-tabs-hide {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			display:none;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-hide ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-hide ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-hide a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-hide a:hover {
				color:#3399FF;
				text-decoration:underline;
			}

El significado de cada una de las etiquetas de estilo CSS:

estilo: Es el estilo de todo el recuadro con el cual trabajaremos
ui-tabs-nav: Es la lista que alojará a los títulos de las pestañas
ui-tabs-panel: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro visible
ui-tabs-hide: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro oculto que más adelante al pulsar sobre el título del recuadro se verá y convertirá en ui-tabs-panel

El agregar otro recuadro con contenido no es difícil, simplemente duplicamos el anterior recuadro y realizamos lo siguiente:

id: modificamos este atributo del primer div para asignarle un identificador al recuadro
href: modificamos este atributo por otro que identifique a otro título (manteniendo el símbolo de numeral)
Añadimos entre las etiquetas que usamos en el primer paso lo siguiente:
```
	$(document).ready(function(){
    $("#EJEMPLO2 > ul").tabs();
  });
```
En donde editamos la palabra EJEMPLO por el nombre que le asignamos al segundo recuadro (el atributo id)

Definitivamente, este es un uso básico de esta herramienta y existen uso m´ñas complejos que se le pueden asignar, tal y como se puede observar en el sitio de jQuery.

Actualización: Si tienes un blog en WordPress, puede seguir el siguiente manual para integrarlo.

Entradas relacionadas:

ColorZilla, analiza los colores de cualquier sitio

ikcam — Sat, 04 Oct 2008 02:14:50 +0000

ColorZilla es una extensión muy útil para Firefox, la cual no únicamente está enfocada para el uso de diseñadores sino también para quienes desees optimizar sus ganancias con AdSense. Por ejemplo, si hacemos que los colores de un anuncio sean muy similares a los naturales del sitio, esto llama la atención de las visitas y podrías ganar más clics en un anuncio de AdSense.

Además, este herramienta analiza un sitio web aprovechando el DOM de Firefox (Document Object Model o Modelo de maqueteo de sitio web)podemos identificar los colores de zonas específicas de las cuales desea escoger el punto de color (píxel).

Y eso no es todo, podemos hacerle un zoom a la página que deseemos analizar para así tener mayor claridad del punto que deseamos escoger para obtener su código de color. Esto se configura haciendo clic derecho sobre el ícono del cuenta gotas en la zona inferior izquierda de la ventana de Firefox.

ColorZilla es una herramienta muy útil, quizás existan algunos problemas para lograrla hacerla funcionar en Ubuntu (de hecho nunca logré hacer que funcione correctamente) aunque en un sitio oficial se menciona que si funciona en Ubuntu.

Enlace | ColorZilla Firefox Add-ons

Entradas relacionadas:

Comparar gestores de contenido con CMS Matrix

ikcam — Tue, 16 Sep 2008 16:07:51 +0000

CMS (Content Management System) o Gestor de Contenidos como su nombre lo dice hace más sencillo el trabajo de la administración de un sitio web tanto interna como externamente. Un ejemplo de un CMS es WordPress que es más usado para blogs. En caso de algo más grande es recomendable usar Joomla o Drupal pero claro existen cientos de opciones. En fin un CMS facilita mucho el trabajo web de muchos y debido a esto es que nació CMS Matrix.

CMS Matrix es un sitio en que es posible comparar una gran cantidad de aspectos entre 2 o más CMS para poder saber cual de ellos es el que más se acomoda a nuestras necesidades. La comparación toma en cuanta los siguientes aspectos:

Requerimientos del sistema
Seguridad
Soporte
Facilidad de uso
Performance
Manejo
Flexibilidad
Interoperatividad
Aplicaciones adicionales o plugins
Comercio

Con una base de datos de aproximadamente 959 CMS (y la lista seguirá aumentado) es una excelente herramienta para sacarle el jugo a nuestro CMS.

Enlace | CMS Matrix
Vía | Carrero