martes, 29 de septiembre de 2009

Video tutorial: Integrar fotos de Flickr en sitios Web o Blogs (jQuery, API Flickr, PHP)

Preparé un video tutorial para el blog llamado Nettuts, el cual muestro en 5 minutos como integrar fotos desde Flickr a nuestro sitio web o blog utilizando el API de Flickr, PHP y jQuery, este último para mostrar las fotos estilo diapositivas con un efecto FadeIn / FadeOut. ¡Disfrútenlo!

Nota: ¿Desean el código fuente?

martes, 21 de julio de 2009

Menú dinámico / activo con categorías y sub-categorías en PHP y CSS

Después del post (Menú activo con CSS y PHP), me llego una pregunta sobre cómo mantener seleccionada la categoría, tras haber dado click en una sub-categoría, es decir:

Tengo un menú horizontal, el cual tengo las categorías principales: Inicio - Servicios - Portafolio, a su vez tengo un menú vertical con las sub-categorías, ejemplo: Servicios -> Desarrollo web, quiero mantener activo el item de la categoría y además el item de la sub-categoría al entrar a ella.

¿Cómo se hace esto?

Tomaremos como ejemplo el CSS del post anterior para dar diseño a nuestros menus, de tal forma que quedará lo siguiente:

#menu, #menu-vertical{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;

}

#menu ul{
font: bold 11px Arial;
margin:0;
margin-left: 20px;
padding: 0;
list-style: none;

}

#menu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;

}

#menu-vertical li{
display:block;
margin: 15px 0 0 0;
padding: 0;
text-transform:uppercase;
}

#menu a {
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margenes entre el menu*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Color por Default*/
border-bottom: 1px solid white;
}

#menu-vertical a {
color: white;
margin-left:0px;
padding:5px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Color por Default*/
border-bottom: 1px solid white;
}

#menu a:hover{
background-color: #535353; /*Menu hover bgcolor*/
}

#menu #current a, #menu-vertical #current a{ /*TAB seleccionado, Página Actual*/
background-color: #80931D;
border-color: #80931D;

}
.clean {clear:both;}

HTML

<div id="menu">
<ul>
<li <?php Menu("/lab/menuactive/active-menu.php","");?> ><a href="active-menu.php" title="Inicio" class="active">INICIO</a></li>
<li <?php Menu("/lab/menuactive/active-menu2.php",""); ?> ><a href="active-menu2.php" title="segundo" class="active">SEGUNDO</a></li>
</ul></div>
<div class="clean"></div>
<div id="menu-vertical">
<ul>
<li <?php Menu("/lab/menuactive/active-menu.php","/lab/menuactive/active-menu-principal.php"); ?> ><a href="active-menu-principal.php" title="Inicio" class="active">Principal</a></li>
<li <?php Menu("/lab/menuactive/active-menu.php","/lab/menuactive/active-menu-principal2.php"); ?> ><a href="active-menu-principal2.php" title="segundo" class="active">Secundario</a></li>

<li <?php Menu("/lab/menuactive/active-menu2.php","/lab/menuactive/active-menu-principal3.php"); ?> ><a href="active-menu-principal3.php" title="Inicio" class="active">Principal de Segundo</a></li>
</ul></div>


- La función de Menu trabaja con 2 parametros, el 1. es la categoría, 2. la sub-categoría. Se incluye entre las listas, porque imprimirá el id=current, el cual indica que esta el item activado. En las categoría se deja en blanco el parametro de sub-categoría por obvias razones, pero para la subcategoría es importante agregar la categoría y el enlace a la sub-categoría misma del item.

PHP

function Menu ($direccion,$subdireccion) {

/* El array $secciones, mantiene los enlaces de las categorías y sub-categorías,
active-menu.php es la categoría que tiene como sub-categorías a active-menu-principal.php
y active-menu-principal2.php, es ahí donde debes agregar las sub-categorías, para que
funcione el script. */

$secciones = array(
"/lab/menuactive/active-menu.php" => array (
"/lab/menuactive/active-menu-principal.php",
"/lab/menuactive/active-menu-principal2.php"
),

"/lab/menuactive/active-menu2.php" => array (
"/lab/menuactive/active-menu-principal3.php"
)
);


//Obtiene el URL actual
$url = $_SERVER['PHP_SELF'];

//Aquí es donde se hace la magía
foreach ($secciones as $llave=>&$valor)
{

if($direccion==$llave && $subdireccion==$url){
echo 'id="current"';
}

if($direccion==$llave && $subdireccion==""){
foreach ($valor as $valores){
if($url==$valores or ereg($direccion,$url))
echo 'id="current"';
}
}
}
}
DESCARGAR ARCHIVOS
Ojo: Debes cambiar la dirección URL (ruta) de tus enlaces (ejemplo: /lab/menuactive por la ruta en donde coloques tus archivos)

Ejemplo funcionando:




miércoles, 24 de junio de 2009

Soy Blogger y Soy Viejo

La historia del blog (bitácora) se remonta hace aproximadamente 15 años cuando Justin Hall, siendo estudiante de la Universidad de Swarthmore, escribió en lo que fue el primer blog personal.
A lo largo de la historia ha habido distintas generaciones web, desde la web 1.0 donde el usuario de internet era meramente observador, donde los sitios casi nunca se actualizaban, y si lo eran gracias al famoso webmaster. Los tiempos han cambiado, la manera de crear y compartir información también, tras la llegada de la web 2.0, el usuario se volvió más participativo y colaborativo, el boom de los blogs como herramienta de creación y difusión de contenido, que en base al sistema de gestion (CMS) puede ser actualizados por cualquier persona sin conocimientos de programación. Tras 5 años de estar conviviendo con la web 2.0, empiezan a despuntar otras herramientas / servicios que plenamente pueden llegar a convertirse iconos de una nueva generación web, por ejemplo con Google Wave o la revolución que se esta viviendo con Twitter y la búsquedas en tiempo real.

Desde que estoy en Twitter he disminuido notablemente mis actualizaciones en el blog, esto porque comparto información de forma más rápida y con mayor impacto por sus características de ser una plataforma de comunicación. Los blogs han sido usados para distintos fines como sitios web de corporaciones, organizaciones y personales, más sin embargo no han salido de lo mismo crear y compartir contenido en la red. Por otro lado, el microblogging esta siendo utilizado como herramienta para otros objetivos desde educativos (e-learning), empresariales, y hasta político (e-government).

Conclusión:
Las nuevas aplicaciones ya no están centradas en el creación de contenido, sino en la moderación/administración y la comunicación entre usuarios. Hay que tener muy claro esto, cuando se quiere emprender en la web.

Simple jQuery plugin: Enlaces con mensajes de 'Cargando'

LoadingMessage, es un pequeño plugin que hice en jQuery para brindar una retroalimentación al usuario que haya dado click sobre un enlace en la aplicación, este regresa un mensaje de cargando, el cual puede ser personalizado.
El objetivo de este plugin es evitar la repetición de código, naturalmente el plugin se puede extender aún más, ya que no funciona para formularios, solo para enlaces <a href=''> funciona con formularios agregando un id y title al botón (los datos no se envian de forma asíncrona, pero mostrará el mensaje de cargando).

jQuery Plugin:
$.fn.LoadingMessage = function (a){
var attr, loading,href;
$(this).click(function(event){
var href=$(this).attr('href');
if(a.attr=='text'){ if($(this).attr('title')!=''){ attr=$(this).attr('title'); } else { attr=$(this).text();}}
else if (a.attr=='url'){attr=href;}
loading = '<div id="'+a.css+'">'+a.text+' '+attr+'<\/div>';
$('body').prepend(loading);
if(a.type=='asyn'){
event.preventDefault();
$(a.loadhere).load(href, function() {
$('#'+a.css).remove();
});} });
return false; };

Cómo funciona:
$('#enlaces a').LoadingMessage({
text:'Cargando',
attr:'text',
css:'loading'
});
Aquí estoy diciendo que especificamente los enlaces dentro del #enlaces mostrarán el mensaje de cargando, claro puedo decir que todos los enlaces en mi aplicación muestren el mensaje con: $('a').

LoadingMessage
funciona con los parametros:
  1. text: es el mensaje que se enviará, en el caso del ejemplo dira Cargando.
  2. attr: significa el atributo de el enlace, puede enviarse 2: url o text. Text significa que mostrará el título del enlace. Nota: Si <a title="'enlace'"> se mostrará lo que contenga el atributo title, si no lo tiene, toma el texto del enlace.
  3. css: se envía el nombre del id del CSS, nuestro ejemplo se llamo a #loading. OJO no hay necesidad de escribir #.
Actualización (21/07/2009): se incluyó ejemplo con formulario.

Actualización (06/01/2011): agregue la función de cargas asíncronas / AJAX:

  1. type: utilizado para hacer llamadas asíncronas / AJAX. Si se incluye con type:asyn, el contenido cargará en el div indicado sin refrescar el sitio.
  2. loadhere: el div donde se cargará el contenido de manera asíncrona. Puede ser class o id.

Cómo funciona:
$('#enlaces a.asyn').LoadingMessage({
text:'Cargando',
attr:'text',
css:'loading',
type:'asyn',
loadhere:'#contenido'
});

martes, 19 de mayo de 2009

Los errores más comunes de un programador PHP

Uno de los lenguajes más usados para el desarrollo web es, sin duda, PHP, y no solo por ser fácil de aprender, si no porque hay mucha información disponible en la red desde tutoriales hasta foros donde la misma comunidad te brinda de su ayuda.
PHP es uno de los pocos que no existe declaración de variables, volviendo más flexible el desarrollo, pero este beneficio, trae consigo problemas en seguridad y errores en la sintaxis.

Los errores más comunes que se cometen al usar PHP como lenguaje para creación de sitios web son:

1) Configuración básica de seguridad

Las nuevas versiones de PHP contienen en su instalación una configuración básica de seguridad (la cual es la indispensable), pero en ocaciones nuestro servidor tiene habilitado o deshabilitado opciones que podrán beneficiar o perjudicar la seguridad de nuestras aplicaciones, para conocer esta configuración, se necesita saber que opciones tiene habilitadas PHP, para ello se utiliza la función phpinfo(), la cual mostrará las configuraciones que contiene el archivo php.ini. Para ello debes realizar lo siguiente:
  1. Imprime la función phpinfo(); en un archivo blanco de PHP.
  2. Las siguientes opciones deben estar en los siguientes estados, si no es así cambialos:
    1. register_globals: desactivadas off.
    2. safe_mode: activado on
NOTA: register_globals y safe_mode han sido eliminados en la versión 6.0.0. de PHP.
Más información en PHP Seguridad

2) Usar una versión vieja de PHP (como PHP4)

¿Sigues usando la versión PHP4?, sabias que PHP4 tiene niveles de seguridad muy bajos y que además no cuenta con muchas funcionalidades necesarias para desarrollo de una aplicación potente que se puede lograr con PHP5. Por ejemplo, PHP4 aun no es posible la programación orientada a objetos (que en el siguiente punto, lo explico).

3) No convertir caracteres a su entidad HTML
No hay que confiar en los usuario!!. Algunos datos que los usuarios envian a nuestra aplicación es posible que se encuentre infectada. Infectada me refiero a que quieran realizar ciertas acciones o sentencias que pueden modificar el contenido de nuestro sitio, es por ello que debemos limpiar esos datos, para ello se realiza lo siguiente:
htmlspecialchars($_GET['comentarios'], ENT_QUOTES);

4) Inyección SQL
Puedes consultar este punto, en mi blog: "Inyección SQL: Hackeando páginas web".

5) Comillas simples o dobles
Si en algunas ocaciones has visto estos signos entre palabra \' o \", hay un problema de magic_quotes. Es porque se tiene habilitado la opción magic_quotes_gpc dentro del archivo php.ini, y realizar lo siguiente:

$variable="¿te apellidas O\'reilly?";

//Imprimira ¿te apellidas O'reilly? , sin \
echo stripslashes($variable);


6) Mal empleo de HTTP-headers
Cuando usamos: session_start(); , header(); , setcookie(); , en ocaciones recibimos el warning siguiente:
warning: Cannot add header information - headers already sent....
Si recibe este warning, es posible que no los estas usando en la parte cabecera del sitio, para su solición realiza lo siguiente:
  1. output_buffering = off en php.ini.
  2. Agrega ob_start(); al principio de tu página, y ob_end_flush(); al final de tu página para liberar el buffer.

7) No proteger ID session
El ID es un dato muy sensible dentro de una aplicación. Por ejemplo, la contraseña de un usuario.

Si el dato no cuenta con encriptación:
if ($_SESSION['contrasena'] == $contrasena) {
//Area protegida
}
Si el dato tiene encriptación:
if ($_SESSION['contrasena'] == sha1($contrasena)) {
//Area protegida
}
8) No usar OOP (Programación Orientada a Objetos) para creación de aplicaciones web

Las ventajas de usar este paradigma de programación son:
  1. Fomenta la reutilización y extensión del código.
  2. Facilita el mantenimiento del software.
  3. Permite crear sistemas más complejos.
  4. Agiliza el desarrollo de software.
  5. Facilita la creación de programas visuales.
  6. Facilita el trabajo en equipo.
  7. Relacionar el sistema al mundo real.
Fuente: Programación Orientada a Objetos

9) No incluir otros lenguajes como JavaScript
¡No todo realiza de manera eficiente PHP!. Un ejemplo simple es la validación de formularios. PHP es un lenguaje que se ejecuta en el servidor, por ende, tiene que enviar los datos al servidor, y desde ahi verificarlos. Al usar JavaScript para realizar esta acción se evita el refrescado del sitio, acelerando la velocidad de respuesta de la aplicación web, ya que se ejecuta en el navegador y no en el servidor. Por esa y otras razones nace JavaScript.

10) No conocer Frameworks
Los frameworks o marco de trabajo, se utilizan para facilitar el desarrollo, ya que proveen de una estructura para la implementación en la aplicación (más información).
En pocas palabras te facilitará la creación de la aplicación web por su caracteristica MVC (Modal View Controller), pero claro no todo es oro, si usas un framework dependerás de el.

Los 10 Top frameworks de PHP son:
  1. Yii
  2. CodeIgniter
  3. PHPDevShell
  4. CakePHP
  5. Akelos
  6. Prado
  7. Symfony
  8. Zend
  9. Zoop
  10. QPHP
Fuente: Top 10 PHP Frameworks

martes, 12 de mayo de 2009

¿Cómo utilizar .htaccess en nuestro sitio web?, en 5 trucos básicos

El .htaccess es un archivo de texto, el cual contiene ciertas reglas sobre archivos y directorios del servidor web (Apache). Es normalmente usado por los desarrolladores para la optimización de sus sitios web, creando URLs amigables para ser mejor posicionadas en buscadores (como Google). Ha esta optimización se le denomina SEO (Search Engine Optimization).

Antes de hablar sobre los 5 trucos básicos, para aquellos que no conocían, ni han usado el .htaccess les daré una guía rápida sobre como crearla.
  1. Abre notepad (bloc de notas)
  2. Dentro de este archivo, es donde teclearas los códigos que aquí te proporcionare.
  3. Guarda el archivo con la extensión .txt en la carpeta raiz del servidor donde tienes tu sitio web.
  4. Ya que lo tengas ahí, cambia su nombre y extensión (en conjunto) a: .htaccess (si lo tienes en carpeta en tu PC, ve a Opciones de Carpeta, y selecciona, que muestra las extensiones, para que así puedas remplazar el nombre/extensión del archivo.)
Los 5 trucos básicos que debes saber sobre como usar .htaccess son los siguientes:
1) Mostrar mensaje de error 404
Tu servidor debe estar preparado para mostrar mensajes de error si el usuario/visitante trata de accesar a una página web que no existe. Entonces, podrás direccionarlo a una página donde explique el porque del error (error número 404).
ErrorDocument 404 /404.html
Donde:

404.html
: nombre de la página a donde se re-direccionará.

2) Prohibir / Bloquear archivos re direccionando visitas a otra página.
Muchas veces por mantenimiento estamos trabajando con algunos archivos dentro de nuestro sitio web, si estamos modificando en línea esto podía repercutir si alguien visita nuestro sitio y se encuentra con errores, para prevenir esto, se realiza lo siguiente (error número 403 es Forbidden, prohibido):
order deny,allow
deny from all
allow from 000.000.000.000

ErrorDocument 403 /actualizando.html

<Files actualizando.html>
allow from all
</Files>
Donde:
orden deny,allow: se empieza el encabezado de bloqueo.
deny from all: Negar todos los visitantes.
allow from 000.000.000.000: permitir solo la siguiente IP (000.00…) que para este caso, pon la tuya, ya que solo a ti te interesa ver tu sitio web en totalidad.
actualizando.html: Es el archivo a donde se redireccionará.
La siguientes líneas, dicen que el archivo actualizando.html, se podrá ver por todos.

3) Renombrar o Redirigir páginas

Otra buena función del .htaccess es renombrar páginas web, esto es útil cuando se tiene una página antigua y se quiere cambiar a una nueva (error número 301).
Redirect 301 /vieja.html http://tuya.com/nueva.html
Donde:
vieja.html: archivo que se quiere renombrar.
nueva.html: archivo nuevo
4) Impedir navegar en directorios
Cuando no tenemos el archivo index.html o index.php, podemos ver todos los archivos que se tienen en el servidor y carpeta, para prevenir que el visitante pueda navegar entre nuestros archivos como imagenes, javascript, css, etc. pondremos lo siguiente:
Options All -Indexes
5) Crear URLs amigables
El último truco, pero uno de los más usados, es la creación de URLs amigables para los buscadores y visitantes, ya que es más fácil para Google encontrarla vea:
www.tuya.com/blog/programacion/apache.html www.tuya.com/blog.php?cat=programacion&nombre=apache
Eso se puede realizar gracias al mod_rewrite, aquí un ejemplo básico:
RewriteEngine On
RewriteRule ^blog/([a-zA-Z]+)/([a-zA-Z]+).htm$ blog.php?cat=$1&nombre=$2

jueves, 30 de abril de 2009

¿Cómo instalar IIS en Windows 7?

Hace ya tiempo que uso Windows 7 en su versión Beta como sistema operativo principal, lo descargue justo el mismo día que Microsoft anunciará su lanzamiento. No me he podido quejar de el, es bastante eficiente y rápido (y eso que uso 1GB en RAM), por el momento no me ha dado ningún problema de instalación de algún programa o incompatibilidad de hardware.

Siempre he usado Apache como servidor para correr mis sitios web, instalado desde paquetes como XAMPP o APPSERVER. Por motivo de mi Tesis (Mashup para los Servicios del SIABUC), tengo que tener instalado el IIS (Internet Information Services) para comunicarme a los servicios del SIABUC con SOAP / Web services. El problema es que no sabia que versión de IIS era la apropiada para Windows 7, ya que entraba al sitio oficial del IIS , y no me daba una versión especifica (como es el caso de Win XP).

Los pasos para instalar IIS en Windows 7 son los siguientes:
  1. INICIO > CONTROL PANEL > Programs and Features
  2. Dentro del cuadro de dialogo de Programs and Features, en la esquina superior izquierda, aparece Turn Windows features on or off.
  3. Click en Turn Windows features on or off, se abrirá otro cuadro de dialogo, dentro de este, aparecerá un listado de servicios.
  4. Selecciona (checkbox) Internet Information Services, y preciona OK.
  5. Se instalará el IIS, listo!

Para verificar si se ha instalado de forma correcta:

  1. Dentro de CONTROL PANEL, entramos a Administrative Tools.
  2. Aparecerá un cuadro de dialogo con los servicios del Win7, dentro de este se debe encontrar IIS Manager, si esta, pasamos al siguiente paso.
  3. Teclea en tu navegador (http://localhost/), si esta se abre, es la página por default de que esta corriendo de manera correcta el IIS.
OJO: Para todos aquellos que anteriormente tenian el APACHE, deben desactivarlo!, si no es asi, el IIS fallará en su inicio.

martes, 24 de marzo de 2009

¿Cómo quitar contraseñas a archivos PDF?

En ocasiones nos encontramos con archivos PDF protegidos por sus autores, lo cual, deshabilita acciones como la impresión del documento, copiar y pegar texto, y en algunos casos hasta la visibilidad de ciertas secciones, las cuales solo se podrán accesar introduciendo la contraseña del archivo.

Es molesto cuando protegen un archivo, que te es de utilidad y necesitas imprimirlo, o requieres de ciertas secciones, y no puedes copiar nada, y recurres a transcribir todo.

La solución a este problema, es obviamente removiendo / eliminando / quitando la contraseña, los pasos son los siguientes:

1. Descarga PDF Password Remover 3.0 (Quitar Claves PDF)

Es un archivo totalmente confiable, yo precisamente lo he subido al servidor de RapidShare, así que no le tengan miedo, NO CONTIENE VIRUS.

2. Abra (ejecute) con doble click el programa (Portable Password Remover 3.0.exe).

3. Teniendo abierto el programa, de click en el icono de Open PDF.., se abrirá una ventana de selección, busque el archivo PDF que desea eliminar la contraseña, y de click en Abrir.

4. Después de unos instantes el programa le indicará que se ha eliminado la contraseña correctamente, le pedirá un nuevo nombre de archivo, lo añade y guarda.

5. Listo!, ya podrás copiar y pegar texto, imprimir y todo las acciones de un archivo normal.

miércoles, 18 de marzo de 2009

Distintas formas de usar Twitter

Twitter ha sido una de las aplicaciones web más usadas en estos últimos años (lanzado en 2006 por Obvious Corp., boom en el 2007 y sigue en aumento de usuarios). El triunfo de Twitter, no es solo por su idea de compartir a tus conocidos que es lo que estas haciendo o que es lo que estas viendo, eso en realidad lo considero superficial, porque si observamos las diferentes redes sociales como Facebook (que esta incursionando fuertemente en el microblogging despues de su renovado diseño), HI5, etc., puedes realizar esa misma función.

Entonces ¿cuál es el verdadero triunfo del Twitter?

Sabemos de antemano que Twitter es un servicio de microblogging, el cual tiene como característica principal: "micro-entradas (tweets) de no más de 140 caracteres". Pero lo que hizo atractivo a Twitter fue su rápida creación de dichas entradas (que en comparación a los blogs tradicionales, donde es más laborioso el proceso de creación) , la liberación del API y la aparición de cientos de RIA`s (aplicaciones ricas en internet) para "twittear" sin necesidad de entrar al sitio web o a la cuenta misma. Hace que twitter se convierta en el rey de las aplicaciones (según TIME Magazines).

Ahora bien, teniendo esta poderosa aplicación, muchos de los usuarios, como tu y yo, nos hemos vuelto adictos al twitter, y no pasamos más de 2 días sin que actualicemos la cuenta, hasta pensar en comprar un celular con internet 3G para no estar desconectados de nuestro twitter.

Pero ¿cómo utilizar correctamente twitter y cómo sacarle provecho?

Hace ya unos meses, cuando me registre en Twitter, empecé a observar como los usuarios/empresas lo utilizaban y como yo lo iba a utilizar, se los diré en los siguientes puntos:
  • Twittear en Inglés: Hace un tiempo empecé a twittear en inglés, netamente para practicarlo, ya que no iba clases particulares ni mucho menos tenia a una persona para hacerlo, los "followers" me han ayudado a corregir sentencias. Un beneficio al escribir en inglés es que me empezaron agregar muchos desarrolladores web anglosajones, lo cual es interesante.
  • Crear grupos/comunidades: Una de las iniciativas que he observado últimamente es concentrar personas hablando de algo en común, simplemente añadiendo al final de su micro-entrada la cuenta en donde se quiere añadir dicho tweet . Por ejemplo ThinkVitamin no lo explica. Ejemplo de comunidad TequilaValley.
  • Lector de Noticias o RSS: Estamos acostumbrados a que nos susbcribimos al RSS de un blog o portal noticias para recibirlas desde nuestro lector RSS (ejemplo: Google Reader), puedes vincular twitter tu rss a través de TwitterFeed, el cual usa por ejemplo el importante blog de noticias de tecnología FayerWayer, el cual prefiero seguir a través de twitter que en mi RSS, ya que actualizan constantemente el sitio, así estoy leyendo continuamente, y no se me junta todo en una mañana que revise mi Google Reader.
  • Publicidad: Otra tactica es utilizarlo para postear publicidad pagada por terceros y a si tus "followers" den el favulozo "click" al enlace. Claro, mientras màs "followers" se tengan mayor será la ganancia.
  • Promoción de blogs, web o proyectos: Sin duda una de las que más nos interesa. Al momento de lanzar un proyecto de internet, lo que necesitamos es que la gente lo visite y que lo conozcan, entonces he ahi cuando Twitter sale ayudarte. Ya que si tu proyecto es relacionado a "desarrollo web", puedes buscar usuarios a a trevés de Twitter Search, encontrar perfiles, seguirlos (following) o no, y enviarles un reply, agregando tu sitio web/proyecto. Por ejemplo: @h_guedea Te presento mi sitio web, llamado "Taltal" www.taltal.com
En general Twitter es una aplicación multi-uso, simplemente hay que ver la forma de sacarle todo el jugo, para todos aquellos que aun no tengan cuenta y tienen un proyecto, vayan pensando seriamente en crearla.

Siganme en Twitter @h_guedea

jueves, 5 de febrero de 2009

Galerías de inspiración para diseñadores web

En ocasiones no tenemos ni idea de como comenzar un diseño web para algún cliente, y necesitamos ver algunas tendencias, y animarnos con las buenas creaciones de otros diseñadores web, para ello y como excelente recurso, existen las Galerías CSS donde se publican cientos de sitios web con interesantes diseños, aquí la lista:



Favourite Website Awards



CSSDrive



Most Inspired



Best Web Gallery



We Love WP



y si, quieres reirte de las aberraciones en cuanto a diseño web
CSSCrap


martes, 3 de febrero de 2009

Los 10 (+plus) mejores blogs de desarrollo y diseño web

Muchos de los desarrolladores web importantes cuentan con un blog, en cual cual comentan sobre sus investigaciones o descubrimientos, muchos de ellos publican noticias sobre el tema o simplemente redactan inquietudes propias. Las cuales a todos los que nos gusta el diseño y desarrollo web nos beneficia bastante, pero ¿cuales son los blogs que debo seguir?, ¿cuales me benefician a mi como desarrollador web?, ¿donde puedo encontrar recursos para mi aplicación?.
Aquí mi lista:
  1. NETTUTS: Es un blog anglosajón, que para mi es uno de los mejores. Con cientos de tutoriales, vídeos, ejemplos y artículos referente al mundo del diseño y desarrollo web. Tecnologías: HTML, CSS, JavaScript, CMS`s, PHP, RUBY, PYTHON y JavaScript Frameworks como jQuery y demás.

  2. Ajaxian: Es el blog lider en temas refente a RIA`s, JavaScript, Ajax, JavaScript Frameworks. Es un blog con contenido muy técnico, escrito por profesionales en el area (gente de Mozilla Corp. , Yahoo!, Pathfinder Associates, etc).

  3. CSS-Tricks: Como en su nombre lo lleva, es referente a los trucos, tutoriales, sobre CSS, pero no solo eso, Chris Coyier, principal blogger, esta enamorado de jQuery por eso motivo podemos encontrar distintos tutoriales referente a jQuery. Una cosa que me gusta de este blog, en especial son los screencasts donde Chris, graba desde diseñar desde cero un página en Wordpress hasta como usar el Google Analytics.

  4. A List Apart: Es uno de esos blogs "old school", sus inicios fueron como Magazine, pasando por a la Web. Su slogan conocido por todos: "For People Who Makes Websites", establece sin lugar a dudas de forma directa para que esta ese blog. Más que un blog de códigos es un blog de "como hacer las cosas bien hechas y cumplir los estandares". Puesto que nuestro trabajo además de hacer código a lo loco es saber si funcionará en los diferentes navegadores, etc. A su vez, A Lista Apart, cuenta con el evento anual llamado: "An Event Apart".

  5. WebMonkey: es un side-blog para el desarrollador web de la conocida revista Wired. Se pueden encontrar muchos tutoriales de diseño y desarrollo web, y noticias de interes para el desarrollador.

  6. Woork: Hace poco poste su libro "The Woork Handbook". Antonio es uno de los pocos pro-bloggers que estan en la plataforma Blogger.com, y no parece, su blog es espectacularmente bien diseñado y administrado. La perfecta personalización que le dio, y al no mudarse a Wordpress u/o otro CMS, le da mucho puntaje. Al entrar a su blog, te darás cuenta de que Antonio, le gusta compartir a los demás desarrolladores sus nuevos descubrimientos del día a día como Freelance.

  7. aNieto2k: Andrés Nieto, es un enamorado del desarrollo web, en especial lo que le apasiona es el JavaScript (framework > jQuery) y Wordpress. Algunas de sus publicaciones vienen de Ajaxian.com, la cual el las traduce al español y además le añade de sus conocimientos. Tuve la suerte de conocerlo en el Congreso de Webmasters 2008, en Madrid, y es un tipo muy accesible, por si tienen dudas pueden contactarlo para cualquier ayuda sobre algún script.

  8. Maestros del Web: ¿quién no conoce a Maestros del Web?, ¿quién no ha caido por algun motivo a Forosdelweb.com?, basta en decir, que sin duda ha sido uno de los blogs que me ha ayudado bastante en mis inicios como desarrollador web, y aun me siguen apoyando.

  9. Xyberneticos: Nikko, un Freelance Argentino, como lo dice en su About: Xyberneticos es un weblog enfocado al mundo del diseño y los recursos gratuitos, que puedan llegar a servirte a mejorar tus diseños o simplemente de los cuales puedas sacar provecho. Aquí podrás encontrar recursos de todo tipo, temas avanzados como básicos para aquellos que deseen aprender cada día un poquito mas.

  10. Design Shack: Inspiración, Noticias, Tutoriales y ofertas de Trabajo, eso encontrarás en este blog. ¿Inspiración?, Design Shack cuenta con una CSS Gallery, de cientos de sitios web con diseños muy buenos, al igual que malos, es por ello que crearon un sistema de votaciones para cada sitio web. Al igual que ello, las secciones de Tutoriales y Noticias nos proveen de recursos y herramientas para el diseñador y desarrollador web.
+Plus:
  • Wwwhat´s new?: Es el blog más activo de todos, día con día provee de aplicaciones web gratuitas sobre TODO, desde crear una postal hasta calcular el valor de nuestro sitio web. La verdad que lo recomiendo, y yo lo utilizo no solo para ver las nuevas aplicaciones que van saliendo, si no la tendencias en las aplicaciones, por ejemplo esta muy de moda el Spotify, pues ya empiezan a salir aplicaciones para compartir los playlist del mismo.

  • FreelanceSwitch: de la familia Envato, de los creadores de Nettuts, Psdtuts, etc. FreelanceSwitch presenta tips, consejos, ofertas de trabajos y demás para la gente Freelancer, como por ejemplo: "calcular el valor de tu trabajo". La verdad lo recomiendo si se va empezando por el trabajo de Freelancer.

  • +TUTS FAMILY: Como lo dije en el pasado, la familia Envato, arraza con sus TUTS, les recomiendo también PSDTUTS (tutoriales para Photoshop), VECTORTUTS (tutoriales para Illustrator), AETUTS (tutoriales para Adobe After Effects), AUDIOTUTS (tutoriales para Musicos).

jueves, 15 de enero de 2009

JavaScript Frameworks

Hoy por la tarde, en la asignatura de Diseño de Aplicaciones para Internet, expuse sobre "JavaScript Frameworks". Antes de hablar sobre los FrameWorks como tales, hable sobre la breve historia del javascript, sus inicios, el porque fue creado, por que su nombre, y el resurgimiento que le dio la tecnología AJAX a JavaScript. Lamentablemente, mucha información no fue agregada a las diapositivas, por cuestiones de tiempo, a manera de sintexis se dijo:
  • JavaScript fue creado por Brendan Eich en 1995.
  • Surge por lo lento del Internet de los años 90`s, creando asi un lenguaje que se ejecutará en el navegador y no en el servidor.
  • Llamado al principio LiveScript, pero Sun Microsystems, lo compraria y le pondria JavaScript por cuestiones de Marketing.
  • Revive JavaScript gracias a la nueva tecnología llamada AJAX (Asynchronous JavaScript And XML), tras el boom de la Web 2.0 (redes sociales, blogs, wikis, etc).
  • y más.


martes, 13 de enero de 2009

"The Woork Handbook" - libro gratis sobre desarrollo y diseño web

Soy seguidor desde hace un tiempo del blog Woork de Antonio Lupetti. Un blog con temas diversos en diseño y desarrollo web, así como códigos propios del autor. Hace unos días publico un interesante libro, llamado "The Woork HandBook", el cual contiene un copy-paste de todos los post sobresalientes. Los artículos contienen además del código, ilustraciones, enlaces a los post donde se publicaron dichos artículos, imagenes, etc. Lo que les puedo decir, es que, no es un libro común y corriente, es más bien, "querido diario", "el recuento" del trabajo de Antonio, es muy entretenido, ya que se deja aun lado mucha teoría, y es más bien "manos a la obra". Lo recomiendo bastante!.

lunes, 12 de enero de 2009

Llaves validas para Kaspersky Internet Security y Anti-Virus

Desde que estoy en el sector informático, y también desde que estoy trabajando en la DGES, he tratado de tener el mejor anti-virus, por seguridad tanto mía como la de mis usuarios. El que me ha dado mejores resultados (por experiencia) fue el Kaspersky, es tanto ligero, rápido, como confiable. En cambio anti-virus como McAfee, Norton, que son buenos (en cierto sentido), pero muy pesados, hacen que maquinas con 256 o 512 mb volverlas lentas, así que recurrí al Kaspersky como anti-virus personal y para los de la Dirección. Claro, con LICENCIAS COMPRADAS!. ¿Pero que pasa con la demás gente que solo lo quiere para uso personal, y no desea hacer el gasto?.

La opción es bajarlo y crackearlo!, (obviamente), el problema es que Kaspersky es muy listo, y al poco tiempo de agregar una Llave valida, esta o caduca o se agrega a la lista negra. Entonces nuevamente tenemos que buscar una llave valida, que siempre es complicado, y se pierde mucho tiempo.

La solución para encontrar llaves validas es él siguiente sitio web: KavKisKey.com


NOTAS:
  1. Para entrar al sitio debes DESACTIVAR cualquier anti-virus.
  2. Las llaves para Kaspersky Anti-Virus se caracterizan por empezar con KAV, y las de Kaspersky Internet Security con KIS.
  3. Todas las llaves son validas, ya que se actualiza la página continuamente.
  4. Descarga la llave, elimina la que tenias anteriormente en el kaspersky, agrega la nueva, y listo!.