jueves 9 de julio de 2009

Un fácil botón para Retweets


retweet

John Resig, EL gurú del Javascript creador de JQuery nos cuenta:
"Desde que vi el JavaScript API de Bit.ly quise construir un script simple para conocer el número de personas que visitan un post desde Twitter. La semana pasada desarrollé un script para hacer eso y de una manera no obtrusiva"

El script es standalone (no depende ni de JQuery) y puede ser colocado en cualquier lugar. Adicionalmente es solamnete HTML - CSS - Javascript, se puede customizar y demás cosas.
Para colocarlo basta utilizar el script de John

<script src="http://ejohn.org/files/retweet.js"></script>

Y colocar este tag donde querramos que aparezca:

<a class="retweet self"></a>

Tiene varias opciones para customizar, recuerden que cuenta el número de visitas vía Twitter o mejor dicho vía bit.ly.

Para Blogger

Basta con colocar esto debajo del <div class="post hentry">

<b:if cond='data:blog.pageType != "item"'>
<b:else/>
<div id="retweet_div" style="float: right;">
<a class='retweet self'/>
</div>
</b:if>

Algo así:
post
Ya que colocamos un IF para que solamente aparezca en los posts y no en la página principal. NOTA: Estoy buscando como poder colocarlo dentro ya que no se puede colocar como atributo href el <data:post.url/> que nos genera el URL del post.


Leer más...

lunes 6 de julio de 2009

XAMPP y Dreamweaver CS3/CS4


Dreamweaver una de las herramientas más conocidas, nos ofrece varias características con las que se puede comparar con cualquier IDE (Aptana, Zend Studio, Netbeans, etc.) y es conocídisimo por su editor WYSIWYG (What you see is what you get, lo que ves es lo que obtienes). Para utilizarlo con XAMPP (o cualquier otra solución WAMP) debemos crear un sitio dentro de Dreamweaver. Este video resume como configuré XAMPP y Dreamweaver (es aplicable a cualquier otra solución si no se cambiaron los puertos). En este caso utilicé una carpeta llamada "new_project" y todo con "New Project", para ver como se cambia el Document Root pueden verlo acá.



(Acerca del Video: Utilicé Dreamweaver CS4 en inglés, véanlo con la opción FullScreen y por alguna rara razón se para en el segundo 27, asi que adelanten esa parte :S)


Estos son los pasos (con la carpeta y nombre de proyecto "Nuevo Proyecto"). Tenemos nuestros proyectos en un lugar separado. Creamos la carpeta de nuestro proyecto, en este caso será llamada "nuevo_proyecto" (eviten utilizar caracteres como espacios, tildes, etc).

Crear el sitio

Iniciamos DreamWeaver, Entramos a la opción Sitio -> Nuevo Sitio (Site -> New Site) y llenamos los datos de nuestro nuevo sitio en la pestaña "Avanzadas" (Advanced). Llenamos los campos:

  • Datos locales
    • Nombre del Sitio: Nuevo Proyecto
    • Carpeta raíz local: c:\www\nuevo_proyecto
    • Dirección HTTP: http://localhost/nuevo_proyecto
  • Servidor de Prueba
    • Modelo del servidor: PHP MySQL
    • Acceso: Local/red
    • Carpeta de servidor: c:\www\nuevo_proyecto
    • Prefijo de URL: http://localhost/nuevo_proyecto

1

Creamos un nuevo script llamado "index.php", en el que colocamos lo siguiente

<?php
phpinfo();

Hacemos F12 (shortcut para hacer un preview en el browser). Desplegará la información del servidor Apache de XAMPP. Entonces tenemos la siguiente estructura de carpetas (imagen de DreamWeaver CS3):


2


Configurando MySQL


Primero debemos crear un nuevo Usuario (por seguridad) en MySQL. Ingresamos a http://localhost/phpmyadmin, si no cambiamos nada previamente en el nombre de usuario debemos colocar "root" y dejar vacío el campo de password. Una vez dentro de PHPMyAdmin vamos al campo Privilegios(se encuentra como opción debajo de Server: localhost) que es el lugar desde donde podemos crear un nuevo Usuario en MySQL. Dentro de privilegios se encuentra la opción:


6


Hacemos click y nos presentará un formulario el cual llenamos de la forma en que se muestra en la imagen. Abajo en "Privilegios Globales" (Global Privilegies), selecciona las opciones que podrá realizar el nuevo usuario en la base de datos, en este caso marca todas las opciones del primer y segundo bloque (Datos y Estructura (Data, Structure)).


14


Ahora crearemos una Base de Datos, volvemos a http://localhost/phpmyadmin y en la página inicial nos da la opción de crear una nueva base de datos, en este caso nuestra base de datos se llamará "nuevo_proyecto".


4


Una vez creada, esta base de datos será seleccionada, ahora debemos crear al menos una tabla, la creamos con la opción que nos da debajo de "No se han encontrado tablas …", colocamos un nombre, en este caso "coches" y creamos los campos de esta nueva tabla.


5


Después podemos llenar con algunos datos esa tabla.


Conexión de MySQL y DreamWeaver


Volvemos a DreamWeaver y creamos una nueva página, "nuevo_proyecto.php" y colocamos la vista de Diseño (Design). Para crear la conexión vamos a Ventana -> Bases de Datos (Window->Databases), lo cual nos abrirá un nuevo panel, junto con otros (Vinculaciones (Bindings),Bases de Datos (Databases), etc.), esos paneles nos ayudan a tener una perspectiva acerca de las conexiones, bases de datos utilizadas,etc, necesarias para desarrollar aplicaciones web.


3


En el panel de Bases de Datos(Databases) hacemos click en el +, lo cual nos abrirá una nueva opción para crear una nueva conexión MySQL. Hacemos click y nos desplegará una pantalla como la siguiente.


7


Creando un nuevo RecordSet


Nos dirigimos a Vinculaciones, y creamos un Juego de Registros (recordset)


9


Nos pedirá que escojamos una conexión.


10


Una vez configurada hacemos la prueba (click en el botón Prueba).


8


Probando la conexión


Antes que nada debemos aumentar una línea de código a la conexión, dado que PHPmyAdmin tiene por defectolas bases de datos con UTF8. Para solucionar este problema colocamos esta línea de código (acerca de conexión mysql_pconnect)


mysql_query("SET SESSION character_set_results = 'UTF8'");

Para hacer la prueba colocaremos una Tabla dinámica, la puedes encontrar en Insertar->Objetos de Datos -> Datos Dinámicos -> Tabla Dinámica:


11


La colocamos:


12


Y mediante el LiveView vemos los datos guardados:


13



Leer más...

sábado 4 de julio de 2009

Cómo @GuyKawasaki usa Twitter

@guykawasaki
Guy Kawasaki es un rockstar en el Twitterverse, en su blog publica un FAQ (Frequently asked Questions, Preguntas Frecuentes) acerca de su cómo utiliza Twitter.

Es obvio que no lee todo (sigue a muucha gente *cough* autofollow *cough*). Con esa cantidad de seguidores sus updates son generalmente opiniones o links, no son replies ya que no todos quieren oir esos replies, y por eso utiliza otra cuenta, @Guysreplies, para este trabajo. Usa Tweetdeck (como los machos, jaja) en su Mac(él es un fanático de Mac) y Twitflip en su iPhone. Además usa un servicio llamado Objective Marketer, para hacer el seguimiento de los links que comparte en Twitter.

También nos cuenta cómo 4 personas también hacen updates desde su cuenta (estos updates tienen 2 iniciales al final), él nunca lo oculto. Al final nos habla de como maneja el proyecto AllTop.

Link: How I Tweet: Just the FAQs
Leer más...

viernes 3 de julio de 2009

Las 30 personas más influyentes en Diseño Web



Esta es una lista hecha por Web Design Dev en la que se encuentran personas con blogs/sitios/etc muy influyentes en la comunidad del diseño web, sus sitios generalmente tienen toneladas de muy buena información.
Acá mis favoritos de la lista:

img

Collis Ta’eed

Fundador de la compañía Envato, tiene una red de blogs llamada Tutsplus en la que se encuentran PSDTuts y NetTuts.

img

Vitaly Friedman

Uno de los fundadores de Smashing Magazine, un sitio genial con demasiada buena información.


img

Matt Mickiewicz

Fundador y creador de SitePoint, como indica en su descripción, SitePoint es el sitio más grande para diseñadores y desarrolladores web.

img

David Leggett

Una persona muy joven pero con un blog genial, Tutorial9

img

Jeffrey Zeldman

Zeldman señores, nada más.

img

Fabio Sasso

(aka Abduzeedo), uno de los mejores diseñadores que pude encontrar en la Internet

img

Jacob Cass

Creador de "Just Creative Design", con solamente 21 años ya tiene una vasta experiencia en el mundo del diseño web.

img

Adelle Charles

Antes que todo muy buena persona(en Twitter), creadora de la Fuel Brand Group.

Link 30 Most Influential People In Web Design


Leer más...

Acerca del Password Masking (enmascaramiento de passwords)

pass3

Se está generando una discusión bastante interesante acerca del enmascaramiento de los passwords, o más conocido como Password Masking. El "buzz" fue originado por un artículo escrito por Jakob Nielsen (experimentado desarrollador web), dicho artículo alentaba a las personas a dejar de utilizar el tipo de campos.

¿Qué es el enmascaramiento de passwords?

El enmascaramiento de passwords es una acción que realizan los browsers cuando se coloca el tag "input" con el tipo "password". Esto para evitar que "mirones" vean lo que ponemos en ese campo. Por ejemplo acá esta un campo sin el tipo password:

pass1

Y acá uno con el tipo "password"

pass2

Cómo se coloca?

El tag input tiene por defecto la propiedad "type" en "text". Para enmascarar un campo se debe colocar la propiedad "type" en "password"

<input value="pass" type="password">

Seguridad del enmascaramiento de passwords

No existe más seguridad de un campo con enmascaramiento de passwords que uno sin esa característica. Estos datos son enviados como texto, cualquiera que este haciendo sniffing a tu red puede verlos si la conexión con la página no esta hecha mediante HTTPS.


Tampoco se confien, existen mil y un maneras de obtener passwords, desde asaltar a una persona y pedirle su password (algo extremo no creen?) hasta robárselo mediante algun software que grabe los caracteres insertados mediante el teclado (keyboard logging)

Usabilidad

Entonces, si no es tan seguro porque seguir usándolo? Jakob dice:

La usabilidad de un sitio es lapidada cuando los usuarios colocan los passwords y lo único que puede ver es una fila de * (asteriscos). El enmascaramiento de passwords no aumenta la seguridad pero le puede costar a tu negocio por los intentos de iniciar sesión.

Y las respuestas van desde un "estoy de acuerdo" hasta de "solo porque pases tus días en un cuarto encerrado donde no hay nadie que pueda verte colocar tu password no significa que esté mal enmascarar los passwords".

Acá las respuestas:

En mi opinión la mayoría de los usuarios son demasiado descuidados. Obviamente enmascarar los passwords no incrementa la seguridad de manera drástica pero si ayuda en muchos casos (demostraciones públicas de algo, exposiciones, algún lugar donde todos vean lo que haces, etc.)


Otro problema son las políticas de seguridad de la entidad (empresa,etc.) en la que se encuentran los usuarios, por ejemplo tener passwords de 20 caracteres no repetidos y menos de 3 vocales. Los usuarios copiarán su password en cualquier lugar (quién puede memorizar semejante cosa?) lo que lo hace aún más vulnerable. Ni imaginar el tiempo perdido en tratar de iniciar sesión con semejante password. No culpo a las políticas de seguridad sino a las que las personas que las imponen, tal vez no piensan como un usuario.


Existen soluciones diferentes por ejemplo la del a Iphone (que muestra el último caracter por un momento).


De lo que no hay duda es que la discusión se está poniendo interesante.




Leer más...