La Postura Inadecuada

¿Cómo activar Office 2010?

2013-12-03T20:14:00.001-06:00

Te preguntarás: ¿Cómo puedo activar mi Office 2010?, me aparece que no está activo... Tengo la solución para ti.

1. Descarga el Office Toolkit 2010 en https://hotfile.com/dl/175893366/195063e/Activate_Office.rar.html
2. Extrae los archivos
3. Ejecuta el .exe como administrador
4. Clic en la opción del menú "EZ Activator" , espera por unos minutos...
5. Listo!, tu Office 2010 estará activo de por vida

¿Dudas?

Ve el siguiente video...

¿Cómo eliminar mi Facebook?

2013-11-29T14:59:00.004-06:00

Es muy sencillo eliminar la cuenta de Facebook, sigue los sencillos pasos que te presento. Recuerda, tus datos no se borrarán, pero sí tu cuenta desaparecerá y nadie podrá consultar nuevamente tu Facebook.

1. Entra a tu cuenta y haz clic en la cejilla de herramientas (parte superior derecha):

2. Del menú que desglosa la cejilla de herramientas, selecciona "Configuración de cuenta" y después la opción "Seguridad":

3. Por último, haz clic en el enlace "Desactivar tu cuenta", que aparece justo debajo de todas las opciones de "Seguridad". 4. Listo!, tu cuenta aparecerá como eliminada.

Nota: Si posteriormente vuelves a entrar a tu Facebook, con tu correo electrónico y contraseña, se volverá a reactivar.

Sumar los valores de filas y columnas de una tabla en PHP

2011-08-10T10:13:00.009-05:00

Ayer, un amigo me preguntó:

¿Cómo puedo obtener la sumatoria de los valores de una fila? y además,

¿Cómo puedo obtener la sumatoria de los valores de la columna?

También me comentó que no había encontrado una solución después de realizar varias búsquedas en Google, no tuve más que crearla y compartirla, aquí el código de PHP:

<?php

/* VARIABLES
$nf = número de filas
$nc = número de columnas
$ct= total de columna
$ft= total de fila
$cf = total de columna sumatoria de fila
*/
$cf='';
$ft='';
$c='';
$ct[]='';

echo '<table>';
for ($i = 0; $i <= $nf; $i++) {
echo '<tr>';
for ($c = 1; $c <= $nc; $c++) {
echo '<td>'.$c.' </td>';
$ft+=$c;

if ( ! isset($ct[$c])) {
$ct[$c]= null;
}

$ct[$c]+=$c;
}

echo '<td style="background:yellow">'.$ft.' </td>';
$cf+=$ft;
$ft=0;
echo '</tr>';

}
echo '<tr>';
for ($c = 1; $c <= $nc; $c++) {
echo '<td style="background:lime">'.$ct[$c].'</td>';
}
echo '<td style="background:lime">'.$cf.'</td>';
echo '</tr></table>';
?>

Breve explicación:

Los valores de la tabla se toman del contador del FOR, pero puede ser aleatorio o extraídos de una base de datos.
La tabla es flexible, sólo basta con cambiar el número de filas (variable $nf) y el número de columnas (variable $nc) para crecer o decrecer el tamaño de la tabla.
Coloqué un color representativo para las sumatorias: amarillo para la suma de los valores de la fila, verde para la suma de los valores de las columnas.

El resultado:

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

2009-09-29T17:04:00.002-05:00

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?

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

2009-07-21T14:28:00.015-05:00

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:

Soy Blogger y Soy Viejo

2009-06-24T19:05:00.002-05:00

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'

2009-06-24T16:38:00.012-05:00

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:

text: es el mensaje que se enviará, en el caso del ejemplo dira Cargando.
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.
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:

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.
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'
});

VER EJEMPLOS >>

DESCARGAR ARCHIVOS >>

Los errores más comunes de un programador PHP

2009-05-19T17:30:00.005-05:00

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:

Imprime la función phpinfo(); en un archivo blanco de PHP.
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:

output_buffering = off en php.ini.
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:

Fomenta la reutilización y extensión del código.
Facilita el mantenimiento del software.
Permite crear sistemas más complejos.
Agiliza el desarrollo de software.
Facilita la creación de programas visuales.
Facilita el trabajo en equipo.
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:

Fuente: Top 10 PHP Frameworks

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

2009-05-12T00:51:00.007-05:00

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.

Abre notepad (bloc de notas)
Dentro de este archivo, es donde teclearas los códigos que aquí te proporcionare.
Guarda el archivo con la extensión .txt en la carpeta raiz del servidor donde tienes tu sitio web.
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

¿Cómo instalar IIS en Windows 7?

2009-04-30T13:01:00.005-05:00

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:

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

Para verificar si se ha instalado de forma correcta:

Dentro de CONTROL PANEL, entramos a Administrative Tools.
Aparecerá un cuadro de dialogo con los servicios del Win7, dentro de este se debe encontrar IIS Manager, si esta, pasamos al siguiente paso.
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.

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

2009-03-24T13:05:00.002-06:00

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.

Distintas formas de usar Twitter

2009-03-18T19:18:00.001-06:00

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

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

2009-02-05T06:58:00.023-06:00

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:

CSSBeauty

CSSElite

CSSMania

Design Shack Gallery

Pattern Tap

Design Snips

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

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

2009-02-03T19:51:00.001-06:00

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:

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.
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).
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.
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".
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.
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.
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.
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.
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.
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).

JavaScript Frameworks

2009-01-15T13:15:00.006-06:00

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.

JavaScript FrameWorks (presentación):

VER EJEMPLOS EN ACCIÓN >>

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

2009-01-13T05:34:00.007-06:00

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!.

Llaves validas para Kaspersky Internet Security y Anti-Virus

2009-01-12T04:21:00.006-06:00

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:

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

Feliz Navidad y próspero Año Nuevo 2009!

2008-12-20T03:40:00.005-06:00

A todos ustedes, les deseo una FELIZ NAVIDAD y un PRÓSPERO AÑO NUEVO!!.
Espero que la pasen fantástico en estas fiestas, mis mejores deseos!.

PD. Me voy de vacaciones desde el día de Hoy hasta el 8 de Enero 2009!. Hasta pronto!.

Crear Tooltips con CSS

2008-12-19T09:02:00.011-06:00

Los tooltips son herramientas de ayuda visual las cuales funcionan al situar o pulsar con el mouse sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
por ejemplo:
Si deseamos hacerlo sobre Web, un ejemplo seria el alt en imágenes o el title en enlaces , pero si queremos personalizar Tooltips, podemos hacerlo através de JavaScript o CSS, la cual dependerá el gusto de cada quien, para mi, se me hizo más sencillo crear tooltips por medio de CSS.

Los pasos para crear tu propio tooltip con CSS + HTML son:

Hoja de Estilo:

Definir los colores de los enlaces por default:

a{font:15px Geneva, Arial, Helvetica, sans-serif; color:#CCCCCC; text-decoration:none;}
a:hover{border-bottom: 1px dashed #CCCCCC;}

Nuesto tooltip tiene el siguiente diseño:

a.tooltip:hover {text-decoration:none;}
a.tooltip span {display:none; margin:0 0 0 10px; padding:5px 5px; }
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#666666;}

HTML

Para que funcione nuestro tooltip, nuestros enlaces deben lucir de esta forma:

<a href="#" class="tooltip">EJEMPLO<span>Esto se mostrará al pasar el mouse sobre EJEMPLO</span></a>

¿Cual es el truco?

El truco es en que en la clase tooltip, declaramos el span como no visible, hasta que el mouse se posicione arriba, este se mostrará en línea, además le asignamos el diseño del dicho tooltip en el hover de la clase tooltip, no antes. Para poder posicionar en donde quieran el tooltip, lo hacen por medio del tooltip span el cual yo le asigne un margin y padding a mi gusto, ustedes pueden personalizar más este tooltip.

VER DEMO EN ACCIÓN >>

Acordiones (Cheat Sheets) para Desarrolladores Web

2008-12-17T09:13:00.012-06:00

No cabe duda que es complicado acordarse de todas las sintaxis, elementos, y demás en cada lenguaje de programación web, ahora acordarse para todos es aun más complicado, es por eso que tuve la tarea de buscar algunos acordiones (cheat sheets) que nos simplificarán el trabajo a la hora de desarrollar.

HTML

CSS

MYSQL

Microsoft
SQL SERVER

PHP

ASP

RUBY
ON RAILS

JAVASCRIPT

JQUERY

MOD_REWRITE

¿Quieres ver tu sitio web en diferentes navegadores?

2008-12-16T02:56:00.008-06:00

En la entrada pasada (Cambiar la hoja de estilo (CSS) dependiendo el navegador) comentaba sobre como en distintos navegadores se ve diferente nuestro sitio web. ¿Pero cómo cambia mi diseño en los diferentes navegadores, si no los tengo instalados en mi computadora?. Esa pregunta me llego por un seguidor del blog a mi correo electrónico, y tiene razón.

Existen 2 maravillosas aplicaciones en línea para verificar la compatibilidad de cualquier sitio web en diferentes navegadores, las cuales yo uso.

1. BrowserShots: de fácil uso, múltiples navegadores en sus diferentes versiones, así como en distintos Sistemas Operativos, muy recomendado. Lo único, que no te desesperes, tarda un poco en mostrarte los screenshots del sitio.

2. BrowserCam: funcionalidades parecidas al BrowserShots, solo que este verifica JavaScripts, HTML dinámico, etc. Lo malo, es que no lo tienes tan a la mano, tienes que inscribirte, y hacer una serie de pasos para llegar a ver tus screenshots.

Cambiar la hoja de estilo (CSS) dependiendo el navegador

2008-12-11T10:20:00.009-06:00

La precupación y el terror de muchos desarrolladores y diseñadores web (que debemos tener todos!), es el navegador del visitante. Que si el viejo Internet Explorer 6, que si con el Internet Explorer 7, Opera, Chrome, Mozilla Firefox, y en cada uno de ellos sucede de que nuestro sitio se ve diferente. Por ejemplo, las transparencias de PNG no son soportadas por Internet Explorer 6, entonces da como resultado, una imagen con bordes blancos bastante feos. A su vez, el acomodo de los elementos suelen moverse, unos más arriba, abajo, lado izquierdo, etc.

Internet Explorer no respeta estándares, en comparación con Firefox, supuestamente para la versión 8, Internet Explorer va orientado hacia el desarrollador web , pero antes de que todos nuestros visitantes se muden a Firefox, Internet Explorer 8 u otro, tenemos que solucionar los problemas que ocurren para distintos navegadores.

La solución es: Crear diferentes hojas de estilo (CSS) para nuestra página web. Estas deben de proporcionar diferentes medidas, márgenes, etc., claro dependiendo el navegador. ¿Pero como se que navegador esta usando el visitante?, y cuando ya lo se, ¿como cambiar la hoja de estilo (css)?.

CSS proporciona comentarios condicionales, los cuales nos ayudarán a conocer los distintos navegadores y sus versiones:

Internet Explorer:

Compruebo si es Internet Explorer:

Compruebo con gte si tiene la version 6 de Internet Explorer, es lo mismo, si cambio el 6 por el 7:

Compruebo si el usuario usa versiones anteriores con lt :

Otros condicionales: lte: anteriores o iguales a el. gte: igual o versiones arriba de el. gt: arriba de la version establecida (p.e. 6, sería arriba de esa versión).

Para los demás navegadores:

FIREFOX


OPERA


SAFARI



iCAB


FLOCK
>

Steve Ballmer también nos quiere

2008-12-09T09:37:00.003-06:00

Recuerdan aquel video donde Steve Ballmer (CEO de Microsoft) grita aforicamente "Developers, Developers, Developers..". Se le ve muy entusiasmado, se ve que quiere mucho a sus desarrolladores XD!, si no lo viste:

Pues si pensaste que solo quiere a los desarrolladores de software estas equivocado, también ama a los desarrolladores web, aquí la prueba:

Solo falta que diga: "Bitches, Bitches, Bitches" XD jaja!

Evitar SPAM en emails

2008-12-08T09:11:00.013-06:00

En ocaciones dejamos nuestro email (correo electrónico) publicado en alguna página web propia o en cualquier otro foro, y a veces eso llega a tener repercusiones. Por ejemplo, ¿cuantos de ustedes despues de hacer eso, les ha llegado docenas de correos basura (SPAM)?. Esto ocurre gracias a los ROBOTS SPAMERS, que toman nuestro email y lo añaden a su lista de correos, la cual, nos estarán enviando su dichosa publicidad (SPAM).

Hay distintas formas de solucionar esto, desde crear un Formulario con Captcha hasta convertir un email en imagen para que este no sea tomado por los Robots.

1. Formulario con Captcha: Si tienes un formulario en el cual te esta llegando mucho SPAM, incluye un Captcha (Prueba de Turing pública y automática para diferenciar a máquinas y humanos), lo cual a través de captcha.net, se puede incluir un plugin a nuestro sitio web de manera rápida y eficiente (esta disponible para Wordpress, PHP, Python, MediaWiki, entre otros).

2. Transformar email a imagen: Otra forma de evitar el spam en nuestro sitio web, es incluir solamente una imagen con nuestro correo electrónico, por ejemplo:

y para ello, no ocupas realmente hacer gran cosa. Ya que existen sitios webs generan estas imagen dependiendo la cuenta y servidor de tu correo electrónico, por nombrar algunos:

E-Mail Icon Generator
G-Mail Signature
Need a Sig
Spam Proof E-Mail Generator

3. La protección de tu email a través de otras apliaciones: hay sitios web que te proporcionan una especie de protección, gerando ya sea un email encriptado o una dirección corta (no completa), la cual al dar click sobre esta, te pedirá una serie de requerimientos para poder ver el email completo. por ejemplo:

Tiny Email.me proporciona esta clase de ayuda, dandote la posibilidad de crear un email corto con enlace, al dar click sobre el, te abrirá una página con captcha, tecleas el captcha, y verás completo el email. Este mismo incluye una API para aquellos desarrolladores que desean agregarlo en su sitio web.

Crear bocetos a computadora en instantes

2008-12-06T13:18:00.014-06:00

Algunas veces necesitamos crear bocetos para cierto proyecto, lo recomendable es hacerlo a mano, hojas blancas, lápiz, borrador.. pero NO TENEMOS EL GRAN CTRL+Z, que tanto estamos acostumbrados todos. Es por ello que les presento algunos programas que les facilitarán la creación de bocetos.

Aunque se pueda instalar como programa aparte, Pencil Project es una extensión de FireFox, en la cual se cuenta con las herramientas, formas, anotaciones útiles para crear un boceto, simplemente arrastrar lo que se desea al área de trabajo, cambiar color o tipo de letra, con solo 2 clicks. Puedes crear infinidad de páginas nuevas y exportarlas en conjunto o por separado en formato PNG. Por ser ligero, gratuito y de fácil uso, lo pongo en primer lugar. Aunque desearía más realismo en el diseño de los bocetos (que parezca que se hizo a mano, como los programas que a continuación comentaré), pero cumple en gran parte con las expectativas de una extensión.

Balsamiq Mackups. lo primero que les dire: NO ES GRATUITO, y me diran, ¿y para que lo pones?,¡yo quiero gratis!, vaya que sí, pero bueno, lo comento porque se puede descagar gratuitamente, utilizarlo, más no guardar lo que hayas creado (jaja imprime pantalla y ya esta!), asi que si lo he utilizado. Al igual que el "Pencil Project", su interfaz es muy intuitiva, pero este llega a pecar de intuitiva, me encanto la forma de desplegar los elementos, de como relacionar uno con otro, del realismo que le dan al diseño, por ejemplo, el área de trabajo es una libreta!, además de que cada elemento parece hecho a lápiz.

Video Introductorio

Denim es un sistema desarrollado por la Universidad de Washington, como proyecto del departamento de Human-Computer Interaction and Design. ¿y que con esto?, bueno pues estos mismos crean una colección de aplicaciones llamado WebInSight, el cual fue diseñado para convertir una web más accesible para los usuarios discapacitados visuales. Y así más proyectos, les recomiendo visiten su página del departamento (dub University of Washington).
Denim esta desarrollado totalmente en JAVA, cuenta con 5 niveles de visualización de tus bocetos (página completa, storyboard, etc). Este no cuenta con elementos prediseñados, si no uno mismo con el elemento Lápiz uno va dibujando la estructura del boceto. Lo malo, es cuando se comete un error, se tiene que utilizar a fuerzas el elemento borrador , y había ocasiones que me equivocaba, trataba de borrar una línea, y el borrador me borraba otra cosa. Además de que trataba de guardar, según guardaba bien todo el documento, trataba de abrirlo y me marcaba errores. Es bueno porque te da diferentes perspectivas del diseño así como unir las páginas para formar el storyboard rápidamente.