La Postura Inadecuada

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
*/
$nf=5;
$nc=5;
echo '<table>';
for ($i = 0; $i <= $nf; $i++) {
echo '<tr>';
for ($c = 1; $c <= $nc; $c++) {
echo '<td>'.$c.' </td>';
$ft+=$c;
$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.

Tabs usando jQuery

2008-12-05T09:26:00.004-06:00

Ayer por la noche estuve pensando que sería bueno postear con relación a los Video tutoriales de jQuery, así que para darles un poco de práctica me puse a crear un pequeño TAB con jQuery y CSS.

Por donde empezar (XHTML):

La estructura de nuestro TAB, de manera que utilizaremos listas de HTML. De forma que la primera lista es el encabezado de nuestro TAB.

<ul>
<li><a href="#">BLOGS</a></li>
<li><a href="#">webs</a></li>
<li><a href="#">contenido</a></li>
</ul>

<ul>
<li><a href="#">Blog sobre Diseño Web</a></li>
<li><a href="#">Blog sobre PHP</a></li>
<li><a href="#">Blog sobre jQuery</a></li>
<li><a href="#">Blog sobre AJAX</a></li>
</ul>

<ul>
<li><a href="#">Web sobre PHP</a></li>
<li><a href="#">Web sobre jQuery</a></li>
<li><a href="#">Web sobre AJAX</a></li>
<li><a href="#">Web sobre Tecnlogía</a></li>
</ul>

<ul>
<li><a href="#">AJAX</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
</ul>

Resultado:
Dar Formato a nuestro Tab (CSS):

Ahora pasaremos a cambiarlo a formato TAB, añadiremos estilos en CSS. Agregaremos Selectores y DIVs a nuestro código XHTML.

<div id="contenedor">

<h1>jQuery Tab</h1>

<div id="tab_contenedor">

<ul class="titulos">
<li><a href="#" title="contenido_1" class="tab activo">BLOGS</a></li>
<li><a href="#" title="contenido_2" class="tab">webs</a></li>
<li><a href="#" title="contenido_3" class="tab">contenido</a></li>
</ul>

<div id="tab_contenido">
<div id="contenido_1" class="contenido">
<ul>
<li><a href="#">Blog sobre Diseño Web</a></li>
<li><a href="#">Blog sobre PHP</a></li>
<li><a href="#">Blog sobre jQuery</a></li>
<li><a href="#">Blog sobre AJAX</a></li></ul>
</div>

<div id="contenido_2" class="contenido">
<ul>
<li><a href="#">Web sobre PHP</a></li>
<li><a href="#">Web sobre jQuery</a></li>
<li><a href="#">Web sobre AJAX</a></li>
<li><a href="#">Web sobre Tecnlogía</a></li>
</ul>
</div>

<div id="contenido_3" class="contenido">
<ul>
<li><a href="#">AJAX</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>

</div>
</div>

¿Porqué he agrado etiquetas como contenedor, tab_contenedor,etc?.. aquí la respuesta ya en CSS.

body{font-family:Arial, Helvetica, sans-serif; background: #023c4b; color:#FFFFFF;}


ul,li{list-style:none;}

#contenedor{width:600px; margin:10px auto;}

#tab_contenedor{padding:8px 8px; width:300px; background:#097793; border:1px solid #000000;}
#tab_contenido{padding:5px; background:#FFFFFF; border:1px solid #04667f;}

ul.titulos{margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }
ul.titulos li{display:inline;}


ul.titulos li a{
color:#097793;
padding:5px 10px 6px 10px;
text-transform:uppercase;
border:1px solid #04667f;
background:#FFFFFF;}

ul.titulos li a:hover{border:1px solid #CCCCCC;}
ul.titulos li a.activo{color:#000000;
border-bottom: 1px solid #ffffff; background:#FFFFFF; }
a.tab{font: bold 15px Arial, Helvetica, sans-serif; text-decoration:none;}


.contenido ul{margin:10px 0px; padding:0 11px;}
.contenido ul li{ margin-bottom:3px; font-size:15px;}
.contenido ul li a{color:#3f4c4f;}
.contenido ul li a:hover{color:#899fa5;}

#contenido_2, #contenido_3 { display:none; }

Resultado:

Por ultimo la programación (jQuery):

Si recuerdan, los métodos show y hide, era para mostrar y ocultar contenido, pues esos mismos utilizaremos para este TAB, se puede usar también el SlideUp/SlideDown, o si te gusta para FadeIn o FadeOut, como gustos, a mi me parecio una mejor opción tomar el Show/Hide. Recuerda que debes incluir la librería de jQuery!, por ejemplo (usando la nueva versión 1.2.6):
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

Código para generar los Tabs:

<script type="text/javascript">
// Cuando cargue el documento
$(document).ready(function(){

// Cuando el enlace del encabezao sea clickeado
$("a.tab").click(function () {

// Apaga el Activo
$(".activo").removeClass("activo");

// Cambia Activo
$(this).addClass("activo");

// Despliega, escondiendo
$(".contenido").hide('slow');

// Muestra el contenido, obteniendo del atributo title del enlace (p.e. contenido_1), y muestra con 'show' el contenido
var muestra = $(this).attr("title");
$("#"+muestra).show('slow');

});

});
</script>

VER DEMO >>

Videotutoriales de jQuery para principiantes

2008-12-02T13:08:00.010-06:00

jQuery es uno de los frameworks más conocido y eficaz de JavaScript. Permitiendo manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web de forma muy simple. jQuery lleva en alto su bandera de ser una librería que ayuda al desarrollador a escribir menos código, y hacer más, de hecho su slogan: Write less... do more! (escribe menos, has más).

Los jóvenes de ThemeForest, han grabado una serie de videotutoriales, muy buena para los que van empezando a trabajar con jQuery o de hecho que ni si quiera lo conocen o lo han descargado del sitio web.

1. Descargar la Librería jQuery:

2. Métodos Fade, Slide, and Show:

3. Método Animate:

4. Selectores avanzados:

5. Creando y borrando elementos:

6. Métodos toggle() y toggleClass():

7. Método hover():

8. Request y Imagénes en diapositiva:

9. Cambiando tamaño al texto:

Mensajería instantánea, Corre electrónico, Redes Sociales en una sola aplicación

2008-12-01T11:54:00.011-06:00

Si eres de los que cuentan con cuentas de correo electrónico: Gmail, Hotmail, Yahoo, AOL, así como sus mensajerías: Gtalk, MSN Messenger, Yahoo Messenger, y que además eres un tipo muy social, y estas en las redes sociales como Facebook, Myspace, Twitter, LinkedIn. ¿No te lleva mucho tiempo revisar cada cuenta?, ¿estas cansado de hacerlo?, ¿quieres todo esto en una sola aplicación?.

Digsby, es lo que buscabas, algunas características:

Mensajería instantánea (Instant Messaging):

Una lista combinada de todos contactos de AIM, MSN Messenger, Yahoo! Messenger, ICQ, Google Talk, Jabber, y Facebook Chat. Múltiples conversaciones a la vez.

Correo Electrónico (Email):

Administra tus cuentas de correo: Hotmail, Gmail, Yahoo, AOL/AIM, o agregar de otras, ya que cuenta con POP y IMAP. Recibirás notificaciones al recibir un nuevo mensaje de cualquier cuenta registrada en tu Digsby.

Redes Sociales (Social Networks):

Te mantendrá siempre con todo lo que ocurra en tus cuentas de Facebook, Twitter, MySpace y LinkedIn. Así es, recibirás cualquier tipo de alerta como nuevas solicitudes de amigos, mensajes, nuevos Twist, etc.

La verdad, es que si se ahorra mucho tiempo, solo es cuestion de acostumbrarse a la aplicación, y como advertencia al uso de Digsby, es que volverán adictos al networking!.

El Primer Aniversario...

2008-11-29T06:23:00.010-06:00

El 29 de Noviembre de 2007, tuve la idea de abrir mi propio blog, con la idea de tener un espacio en internet donde publicaría contenido sobre temas que a mi en lo personal me gustan, lo que es: Desarrollo Web, Diseño Web, Software, Tecnología, etc. Pensando en que lo actualizaría continuamente, no sucedio. Tuve meses que no actualizaba, o que solo posteaba 1,2,3 a lo mucho 4 post al mes. Hasta en Septiembre de este año, decidi, un poco la expansión del blog con contenido que creia relevante que se diera a conocer (recursos, tutoriales, trucos, y demás.) Hoy en día hace que el blog tenga más visitantes desde esa fecha. No pretendo ganar dinero con el blog ni mucho menos, solamente tener ahí, como mi pequeño hobbie.

Algunas estadísticas del blog:

Visitas desde el 10 de Febrero 2008:
8,119 visitas

Crecimiento de visitas desde el 10 de Septiembre 2008 (en incremento):

Crecimiento de visitas díarias desde el 10 de Septiembre 2008 (en incremento):

Tráfico proveniente de (82.42% de Buscadores como Google):
Páginas vistas (en incremento):

Contenido Top:

1. Activar Windows Pirata como Original
2. La Postura Inadecuada
3. ¿Donde puedo ver Películas Online Gratis?
4. Cargar páginas con AJAX y PHP
5. ¿Cómo obtener contraseñas de redes inalámbricas?

Agradecimientos:

Les agradezco a todos ustedes visitantes, amigos, contribuyentes, todos ustedes que frecuentemente entran al blog, les doy las GRACIAS, y espero que sigan visitando este pequeño espacio...

La forma más sencilla de compartir y almacenar archivos en línea: DropBox

2008-11-28T18:23:00.013-06:00

Las nuevas tendencias en tecnologías como el Cloud Computing (computo de nube), que para aquellos que no tienen conocimiento de que es, es ofrecer servicios através de Internet, como almacenamiento de datos y proveer aplicaciones comunes.

Un ejemplo de ello es DropBox, un servicio que sincroniza los archivos entre las computadoras y la web. Una vez que hayas creado una cuenta en Dropbox, el software crea una carpeta en Mis documentos, cuyo contenido se sincronizan en todas las computadoras conectadas a su cuenta, así como la del servidor de Dropbox. Cuando se cambian los archivos, sólo la diferencia en el archivo se actualiza a través de la red, reduciendo al mínimo los requisitos de ancho de banda. Se puede compartir carpetas con otros usuarios y además carpetas con acceso público (fotos, documentos, etc).

Realmente recomiendo DropBox, ante cualquier otro servidor, por su accesibilidad, sincronización y almacenamiento.

Visiten: getDropBox.com, y creen una cuenta, es totalmente gratuita.

Congreso de Webmasters 2008, Madrid, España

2008-11-25T16:36:00.005-06:00

La ida…

El viernes 21 de Noviembre, me levante cercas de las 6am para tomar el autobús de las 7am que me llevaría a Madrid, por motivos del Congreso de Webmasters 2008. En la noche anterior había preparado todo, tanto lo que me iba a gastar como la ropa e incluso mapas del metro que tenia que tomar para llegar a cada destino. Obviamente, tenía planificado todo: albergue reservado (1 habitación durmiendo con 4 gentes, baño propio, desayuno y sabanas incluidas), Congreso pagado, etc. Pues por desgracia se me había olvidado reservar lugar en el autobús de las 7am. Llegue corriendo a la estación de autobuses, faltando 10 minutos para las 7am, y el taquillero con un tono burlesco me dice: “imposible jovencito, puede tomar uno hasta las 10am, no hay más, y si no lo compra ahorita, hay hasta las 12pm”. No me quedo de otra, que comprar el de las 10am.

La llegada…

Después de 5 horas de viaje, llegue a la estación de autobuses y me dirigí al Metro, y empecé hacer transbordos: Álvaro Méndez – Pacifico – Tribunal. Ya a las 4:30pm, estaba con mis sabanas limpias, y todo listo en el albergue. Comí algo, deje mi maleta, me lleve mi querida LapTop, y me fui nuevamente a viajar por el Metro de la ciudad. Que al principio recibí una mala impresión, ya que ciertas líneas cuentan con metros muy viejos, pero mejoran dependiendo la zona.

Algunas ponencias y talleres…

Llegue al Palacio de Congresos, el cual se encuentra justamente enfrente del Estadio Santiago Bernabeu, cercas de las 5pm, estaba Roberto Martín Díez, hablando sobre las Webs para dispositivos móviles. Nos cuenta sobre el crecimiento de cuentan de dispositivo móvil con conexión a Internet, y de las cuales se triplicará para el 2012, hay la importancia de tener en cuanta cuando se diseña y se desarrolla un sitio web en la actualidad.
Algunos sitios donde se puede encontrar recursos para crear páginas web para moviles:

Test para aplicaciones web http://www.ready.mobi/
Estadísticas para tu webs moviles: analytics.admob.com
Recursos para desarrollar webs moviles: http://www.mobiforge.com/

Después seguiría la ponencia de Fernando Macía y Javier Gosende acerca del Posicionamiento en Google (nivel básico, medio y avanzado), durante los 3 días del congreso, hubo ponencias de SEO (viernes – básico, sabado – medio y domingo – avanzado). Los puntos importantes que se trataron fueron:

Cómo saber las palabras claves que utilizan mis potenciales clientes en los buscadores
Las Herramientas de Webmasters de Google, para analizar nuestras estadísticas, palabras clave, ranking, etc.
Indexabilidad: URLs distintas, enlaces rastreables (rel), actualizaciones consecutivas en nuestro sitio web (garantiza que la araña de Google, indexe más rápido nuestro sitio web).
La estructura de una página web perfecta para ser posicionada.
Conseguir enlaces atravez de redes sociales (flickr, Facebook, Youtube, digg,etc)
Estrategias de contenido para mejorar el posicionamiento (incluir en el sitio: noticias, blog, foros, preguntas/respuestas, consejos, videos, tutoriales, guias, etc).

Otra ponencia del Viernes, que se me quedo grabada fue la de “Gestión publicitaria en las web: métodos rentables” por Angel Maria Herrera, el cual nos habla sobre los distintos formatos de anuncios:

Anuncios Intrusivos: anuncios a página completa, anuncios que requieren la interacción con el usuario.
Anuncios no Intrusivos: que son discretos, y asimilados por los usuarios, pero pueden llegar hacer ignorados.
Las diferentes formas de publicidad en Internet: patrocinios, afiliación, venta de enlaces, artículos patrocinados.

Siguiendo con un poco la temática de estadísticas y SEO, llego una dama, Silvia Velasco, en la ponencia “Analítica Web, el potencial de la medición Online”, ella nos menciono que para poder analizar correctamente el tráfico de usuarios, debemos tomar en cuenta las siguientes preguntas:

¿De donde proceden?
Cuantos, Como son, Nuevos/repiten, De que sites, Que anuncios. Cuando, Cada cuanto

¿Qué hacen?
Paginas vistas, Tiempo dedicado, Patrón de navegación. Cick, Registros, Ventas

¿Por qué se va?
Porque se va de nuestro sitio web. Salidad por pagina, Singletons, Exite rate, Exit URL

Herramientas utilizadas: Google Analytics, Web Trends, Obnitur, Xiti, entre otras.

No podria poner todas las ponencias en este post, se haria demasiado largo y cansado para ustedes como lectores, lo que si les puedo decir, es que estuvo Bernardo Hernández (vicepresidente de Google) y Eduardo Manchon (Panoramio), los cuales nos contaron sus casos de éxito, por un lado Bernardo, nos hablo de la GeoWeb, pero algo muy importante que dijo en una charla más personal, fue perder el miedo para emprender un proyecto, pese a que en el mercado que se encuentra sobresaturado de lo mismo, tratar de innovar cosas, a veces no es tanto crearlas nuevas, si no mejorarlas.

¿y los talleres qué?

Entre realmente a 3 talleres, uno de Herramientas de Google, que en realidad fue, entrar a la página de www.google.com/webmasters, utilizar las APIs, y listo, sin mucha novedad.

Taller de Tuenti, como su nombre lo dice, TUENTI.COM fue de lo que se hablo, como gestionan sus bases de datos, servidores, optimización de código, su plataforma, monitorio de la red, etc. Uno se da cuenta, que Tuenti.com, se basaron indiscutiblemente de Facebook. Cada palabra que decían, cada herramienta usada, es un Facebook solo que en Castellano. Eso no desacredita la gran labor que hacen, ya que es mucho trabajo estar manteniendo una red tan grande como Tuenti, pero como dijera Bernardo, “algo que ya existe, solo mejóralo”.

Taller de Programación, Qué!!, ¿voy a programar en el taller?.. Para anda. Enrique Aldaz (de tradedoubler.com), es un tallerista nato, su charla fue encaminado a: ¿sabes programar no?, bien, pues yo te voy a decir, que y que usar. Y si ya existe la rueda, solo úsala, no te compliques. Nos hablo sobre AJAX y sus distintas librerías como jQuery, Mootools, Prototype y donde usar cada una de ellas. Pensar en algunas APIs de Google para facilitarse la creación de aplicaciones ricas en multimedia, así como las distintas bases de datos, sus ventajas y desventajas.
Pero lo mejor que nos pudo decir Enrique, fue la creación de una red social completa con solo 12 scripts. Que por cierto los tengo XD!.

Conclusiones y el regreso…

Los 3 días del Congreso pasaron demasiado rápido, apenas había llagado cuando ya estaba preparando mi maleta para venirme a Granada.
En su magnitud fue menor al Open Source World Conference 2008 (Malaga, España) que asistí hace un mes, pero se sentía un ambiente más de compañerismo entre los presentes.

Pese a la pésima conexión a Internet, que en realidad solo tuve 30 minutos los 3 días, en general el evento estuvo bien organizado, cada ponencia a su hora, las ponencias llenas de contenido muy rico para nosotros, y con ponentes capaces. Uno aprende de cada ponencia, al igual del mismo público que asiste, haciendo un feedback a cada ponente, tal vez, me toco la suerte de estar sentado en los lugares correctos, ya que, después de una ponencia ellos añadían diferentes aspectos/puntos que no se trataron en la ponencia que concluía.

De eso y más, me llevo nuevas relaciones, amistades, contactos, como el de Enrique Aldaz (que le agradezco la invitación a comer) , Andres Karps, Andres Nieto, Juan Segui, etc, que sin lugar a dudas me hicieron grata la estancia en Madrid, puesto que me fui solo.

Hay muchas cosas que debo de analizar ahora después del evento para futuros proyectos, que próximamente los estaré anunciando en este blog, al igual que en la aplicación que estoy trabajando en estos momentos.

El mejor video de Youtube México

2008-11-11T19:18:00.003-06:00

No se si haya otro mejor, pero para mi este es el mejor video de Youtube México. y Cuando termine el video, les aseguro que lo volverán a ver 10 veces más.

Les presento al ser más vale m**dre del mundo, Felipe Ferra Gómez, Alias el Ferras!, disfrutenlo.

México Web 2.0 (2008), en Video!

2008-11-07T09:12:00.004-06:00

México Web 2.0, llevado acabo los días 3 y 4 de Noviembre 2008 en la paradisíaca ciudad de Cancún, México. Fue un evento que reunió a ponentes trascendentales en el área de tecnologías web, como Chris Hofmann (de Mozilla Corp.), Christian (de Maestros del Web), Freddie (de Cristalab), por decir algunos.
Con la consolidación de este evento, se pretende impulsar a México como fuente de nuevas aplicaciones Web, esto con lleva al surgimiento de grandes desarrolladores y diseñadores web. Por el motivo básico de que se ha elevado de nivel sorprendente en el número de internautas en México, y en todo Latinoamérica (compitiendo con España y países anglosajones), así como el uso de redes sociales, blogs, y demás aplicaciones en línea. Es cierto que hay un camino estrecho y que se debe pulir ciertas cosas, pero ya hay iniciativas de comienzo y muchas ganas de realizar proyectos de gran magnitud.

Si te perdiste el evento, como yo :( , aquí les dejo unos videos de algunas conferencias que se llevaron acabo en el evento:

Christian Van der Henst: Negocios 2.0 >

Juan Pablo Lanteri : Social Media Marketing >

Más Videos, todos muy interesantes::

Daniel Soto : Computo en la nube
Manolo Guerrero : La Gran Brecha
Manolo Guerrero : Teletrabajo
Leo Prieto : Mundo 2.0
Leo Prieto: Medios y Gobierno

Web 2.0 Summit 2008, ya en video!

2008-11-06T09:18:00.004-06:00

Web 2.0 Summit, es una de las conferencias de mayor trascendencia en el mundo. Hace ya 4 años, cuando Tim O’Reilly, anuncio el concepto que revolucionaría el diseño y desarrollo web, la Web 2.0.

Web 2.0 Summit 2008, del 5 al 7 de Noviembre, en San Francisco. Como ven, esta en pleno apogeo… pero, para todos aquellos que no pudimos viajar hasta San Francisco para asistir a este maravilloso evento, les tengo una solución.

¡TODAS LAS CONFERENCIAS SE ESTAN TOMANDO EN VIDEO!, ¡Y YA ESTAN EN LÍNEA!. Asi es, las pueden observar dando click en la siguiente imagen, ¡Disfrútenlas!.

Herramientas gratuitas para Diseñadores Web

2008-11-06T07:40:00.006-06:00

Navegando hoy por la red, me encontre con algo que sin duda, será muy bueno para todo aquel desarrollador web, que busca facilitarse las cosas, ya que lo suyo es la programación y no el diseño gráfico. Y ¿porqué no?, a todos aquellos diseñadores web, que buscan terminar rápidamente su trabajo.

Les comparto las 130 herramientas para lograr un buen diseño web... con la gran característica de que lo harán velozmente.

Web Design Toolbox

¿Cómo comprobar si Javascript esta activo o no?

2008-11-03T04:33:00.005-06:00

Un problema en que nos encontramos muchos de los desarrolladores web es el encontrarse con usuarios que su navegador no soporta o no tiene activado código de Javascript. Y es un grave problema si el sitio se encuentra lleno de AJAX, o por lo menos, algunas alertas en Javascript.

La mejor manera de detectar si el navegar tiene soporte de Javascript, es con las etiquetas de HTML, noscript.

¿Cómo usarlo?

Dentro de la etiqueta Body, se agregará lo siguiente:

<noscript>¡Su navegador no soporta Javascript!.. Se redireccionará a una versión sin Javascript o Active el uso de Javascript en su navegador.<br /> <meta equiv="refresh" content="3; RL=sinscripts.html"></noscript>

Lo que hará el código anterior, es mandar un mensaje de alerta sobre su Navegador, e informandole que tiene que hacer, si el usuario prefiere no usar Javascript, lo redireccionará a un sitio sin Scripts, en donde se podrá informar más al usuario/visitante.

Se puede usuar el código en una página principal, o en el HEADER del sitio, pero a su vez, se puede usuar incluyendola desde un página aparte con el INCLUDE de PHP, el cual, solo se incluiría en páginas que usen Javascript, un ejemplo:

<?php include('soporta_javascript.html'); ?><a href="noplace" onmouseover="alert('Hey!, si usas Javascript!')">Sobre el enlace, porfavor!</a>

En la página soporta_javascript.html se incluirá el código explicado anteriormente, el cual se incluira en las páginas que contienen código javascript, si no lo soporta, se redireccionará a una sin script.

¿Donde puedo ver Películas Online Gratis?

2008-10-24T04:26:00.006-05:00

Muchos nos preguntamos, ¿habra sitios web donde se pueda ver de manera online (sin descargas) una pelicula completa, sin cortes, ni nada?.

Pues si que las hay!, aquí les añado una lista de las mejores páginas web para ver películas online (en linea).

Última actualización: 07/01/2009

Libros Gratuitos sobre Desarrollo y Diseño Web

2008-10-17T04:59:00.006-05:00

Para todos aquellos que deseen un recurso, bien estructurado, bien explicado y con ejemplos sencillos, aquí les comparto una serie de libros gratuitos muy buenos sobre AJAX, JavaScript, CSS, XHTML.

Diseño Web:

Desarrollo Web:

Todos los libros se encuentran en línea en: http://www.librosweb.es/

Cómo enviar todos los datos de un Formulario con AJAX

2008-10-16T10:09:00.011-05:00

En las pasadas entradas (véase AJAX), comentábamos cómo cargar datos de manera asíncrona con AJAX.

Pero no hemos trabajado en el envío de datos con formularios, que es en si, algo muy básico. Generaremos un script genérico para no cambiarlo cada vez que necesitemos usarlo para otro formulario, además haremos que los datos que se envían en otra página, se reciban en una sección especifica.

1. Crearemos nuestro formulario, por ejemplo agregar una noticia:

Una breve explicación:

El formulario debe tener name y id, con el mismo nombre, a su vez cada campo.
Se añade el evento ONCLICK en el boton, el cual EnviarForm (el nombre de la función creada en AJAX) envía 4 parametros: noticiasa.php (en donde se enviarán los datos, y en dicha página se recibirán con POST o REQUEST). c=3 (es la sección de la página a donde se enviarán los datos, para una explicación más profunda en Enviar valores con AJAX). noticias (id, nombre del formulario). contenido (nombre del DIV, ver en Cargar páginas con AJAX).

2. Creación del Script de AJAX

Recuerden que para que funcione nuestro script, debemos crear primero el Objeto de AJAX, de esta manera:

function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); return xmlHttp; } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); return xmlHttp; } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); return xmlHttp; } catch (e) { alert("Tu navegador no soporta AJAX!"); return false; }}}}

Ya creado, podremos añadir nuestra función para el envío de todos los campos del formulario:

function EnviarForm(_pagina,seccion,formid,capa) {
var ajax;
var
Formulario = document.getElementById(formid);
var longitudFormulario =
Formulario.elements.length;
var cadenaFormulario = "";
var
sepCampos;
sepCampos = "";
for (var i=0; i <= Formulario.elements.length-1;i++) { cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value); sepCampos="&"; } ajax = ajaxFunction(); ajax.open("POST", _pagina, true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.onreadystatechange = function() { if (ajax.readyState==1){ document.getElementById(capa).innerHTML = " Aguarde por favor...";
}
if (ajax.readyState == 4) {
document.getElementById(capa).innerHTML = ajax.responseText;
}
}

ajax.send(cadenaFormulario+"&"+seccion);
}

Una breve explicación:

EnviarForm(_pagina,seccion,formid,capa): Se reciben los valores que enviamos con el formulario.
Enviamos todos los campos en cadenaFormulario, además concatenamos en que sección de la página los recibiremos (seccion).

3. Recibiendo los valores de los campos

En nuestra página (noticiasa.php), agregaremos lo siguiente:

if($_REQUEST["c"]==3){
if(!empty($_REQUEST["titulo"]) or
!empty($_REQUEST["tags"]) )
{
echo $_REQUEST["titulo"]; //Titulo de la Noticia
}

Una breve explicación:

Con el IF, pregunto si el valor de la variable C, es de 3, que es el caso.
Después veo si las variables no están vacías con la función EMPTY.
Por ultimo, imprimo el titulo de la noticia.

Búsquedas dentro de un sitio Web con Google

2008-10-09T05:25:00.012-05:00

Un buen truco que descubrí hace poco, fue: Cómo buscar información dentro de un sitio Web en especifíco con la ayuda de Google.

Ejemplo 1: Si quiero buscar información sobre CISCO dentro de este blog exclusivamente, debemos teclear lo siguiente en el formulario de Google:

cisco site:guedea.blogspot.com

Resultado:

Ejemplo 2: Si quiero buscar, una Maestría de Desarrollo de Software, en el sitio de la Universidad de Granada, tecleo

Master en desarrollo de software site:ugr.es

Resultado:

Este truco, también puede usarse para cualquier Desarrollador Web que desee construir de forma rápida un Buscador interno para su sitio web.

Crack FIFA 2008 (EA SPORTS FIFA 08)

2008-10-07T05:23:00.005-05:00

Compraste el FIFA 2008, pero, ¿te pide el Serial?
Aquí te doy la solución....

Descarga el CRACK (Crack_FIFA08)
Descomprímelo. Encontrarás un archivo llamado FIFA08.EXE
Cópialo, y pégalo en el directorio: C:\Archivos de programa\EA Sports\FIFA 08 (Acepta, si te pide remplazar el archivo)
Listo!, Ahora podrás jugar.

Enviar valores con AJAX y recibirlos con REQUEST o POST (PHP)

2008-10-03T04:17:00.011-05:00

En el post anterior (Cargar páginas con PHP y AJAX), comentábamos como sería la forma básica para comenzar con AJAX con las llamadas a otras páginas de manera asíncrona.

Ahora bien, vamos a suponer, que en la página que vamos a cargar, tiene secciones dentro de esta, y solo queremos mostrar una de ellas. Para ello podemos pensar de la manera que lo haríamos con PHP, por ejemplo: Vamos crear un vínculo a la página TARIFAS, lo cual seria asi:

Pero, nosotros queremos mostrar la tarifa para la renta de un Coche, entonces nuestro enlace se le añadirá lo siguiente:

Si tenemos un poco de experiencia con PHP, sabremos que llamamos la pàgina “Tarifas.php” y en la cual mandamos el valor “coches” en la variable “tarifa”.
Recibiremos el valor de la variable “tarifa” con el método POST o REQUEST, de la siguiente forma:

¿Pero como se puede realizar lo anterior con AJAX?

1. Creamos el objeto de AJAX (véase antes: Cargar páginas con PHP y AJAX y Cómo añadir ‘Cargando’ (loading) a AJAX).

2. Agregamos la siguiente función:

La cual recibe la página, el valor, y la capa en donde se cargaran los datos, y lo que envía es el valor recibo.

3. Ya por ultimo, la creación de nuestro enlace, del ejemplo de Tarifas, pero ahora en versión para AJAX:

Y listo!, ahí se tiene una llamada asíncrona con envío de valores.

Una manera fácil de publicar lo que haces

2008-10-01T02:53:00.007-05:00

No basto con los E-Mails, Blogs, Messenger, Facebook como medio para compartir información y tu vida misma. Aun así, la gente pide más y más. Vivir en la red, se hace cada vez más real. Un grupo de Estadounidenses, no hartos de tantas aplicaciones, creo un MicroBlogging, basado en Mini-Entradas, llamado Twitter. El cual trabaja de la siguiente forma:

-Yo: Estoy haciendo tarea sobre X cosa.

Entonces quiero que mis amistades, sepan Que estoy haciendo en ese momento. Entro a mi cuenta de Twitter, y publico en un espacio de 140 caracteres máximo (ya que se basa en mini-entradas).

-Yo publicando en Twitter: Haciendo Tarea de Administración… La odio!.

En ese momento, cualquiera que visite mi Twitter (aunque lo puede consultar por medio de RSS, ya que envía cualquier actualización de la cuenta), sabrá de manera general lo que hago. Si se dan cuenta solamente se publicará el titulo de lo que estoy haciendo, sin profundizar nada.

Twitter es una manera fácil y rápida, de tener al tanto a la gente que te rodea, es otra manera de tener tu vida en línea.

¿Cómo obtener contraseñas de redes inalámbricas?

2008-09-30T09:20:00.011-05:00

Después de unos días sin actividad en el blog, por motivos, de que me vine a estudiar a Granada, España; que pufff! les tengo unas anécdotas muy buenas y algunos consejillos de viajero, pero bueno, antes de hablar de eso, lo importante.

Llegue a mi piso, el Sábado 27 de septiembre, y me tope con la mala noticia, de que no tendría Internet, y ni siquiera una línea telefónica. Yo creo que tanto para mi, como a todos los de mi edad, no tener un medio como el Internet, nos molesta bastante, ya que lo usamos como entretenimiento, búsqueda de información, comunicación y demás. Principalmente yo, lo utilizaría aquí, para comunicación con mi familia en México y buscar información referente a mis tareas en la facultad.

No tarde mucho, cuando, recordé que mi amigo Beto (de cariño, y solo de cariño apodado, Betuyo!), lo había visto trabajar en un un software llamado “WIFIWAY”. El cual le ayudaba a conocer las contraseñas/claves de las redes inalámbricas cercanas.

Pero, ¿Qué es el WifiWay?
Wifiway es un live CD que, basado en el sistema operativo Linux, puede ser ejecutado sin necesidad de instalación directamente desde el CDROM o también desde el disco duro como LiveHD, además de poderse instalar en memorias USB o en disco duro.

¿Dónde lo puedo descargar?
Se puede descargar desde la página principal del fabricante (Seguridad Wireless), en la dirección: http://download.wifislax.com:8080/wifiway-1-final.iso

¿Cómo utilizo el WifiWay para obtener Internet Inalámbrico Gratis?

1. Descargue el WifiWay, el cual es un .ISO, y grábelo en un CD-ROOM. Después reinicie su computadora, e inicie desde el CD-ROOM, apretando F12 para el menu booteable.

2. Teclee STARTX, ya que cargue todo el entorno visual, abra la Terminal.

3. Lanzamos airoway: poner airoway.sh en la terminal

4. Vemos que es más interactivo y que no vamos a tener que escribir ningún comando ni nada de eso. Con las teclas de dirección vamos pasando los canales.En el que queramos pulsamos intro y seleccionamos el punto de acceso pulsando su número correspondiente.

5. Ahora asociamos Pulsando 2 y esperar.. saldrá "Asociation sucesfully :-))"

6. Luego Pulsamos 5, aparecen dos ventanitas de las cuales la de abajo la cerramos pulsando ctrl+c, ya que solo vamos a utilizar la de arriba (la de fragmentación).

7. Para que funcione tenemos que esperar a un #data cuando lo tenga nos preguntará si lo queremos usar, entonces ponemos YES + INTRO. Y se cerrará dicha ventana.[[Debo decir que tiene q haber actividad en el punto de acceso en el que estemos llevando acabo esto o no conseguirá ningún #data y no podremos usar este ataque, entonces lo deberíamos intentar en vez de con este ataque con la inyección ipw3945 (pulsando el nº 3 y a esperar.......]]

8. Pulsamos 6. nos saldrá una frase que ignoramos, si sale hasta aquí todo va bien.

9. Luego Pulsamos 7 y empezara la inyección y a subir los "ARP".

10. Cuado tengamos suficientes #data, lanzamos el aircrack “pulsándoos el 8".

11. Ya está, en un par de segundos tendrás tu "llavecita" tal cual..

Consejos y dudas de este método:

-- Podemos cambiar nuestra mac pulsando 1 y poniendo la que queramos.
-- Si no se asocia a el punto de acceso "paso 3" lo más probable es que no sigamos y
probemos con otro (a veces suele pasar que no se autentifica y por lo tanto no
se asocia, esto pasa con algunos routers)
-- Si en el "paso 5" cuando tengamos un #data, lo usemos (pulsando yes) y tras una serie de operaciones no se cierre la pantalla y aparezca algo de "intentándolo con otro paquete.." y con el próximo pase lo mismo.. no sigamos porque a veces suele pasar, aunque también podemos dejarlo haber si hay suerte y con alguno cuela.

Mi experiencia con el WIFIWAY

Y si tienen duda que sirve, vean mis fotos:

(El WifiWay, mostrandome la contraseña/clave de una red inalámbrica cercana)

Lo mejor de La Hora Chanante

2008-09-22T00:41:00.000-05:00

La Hora Chanante era un programa de Comedia que se emitía mensualmente en España. Se componía de sketches llenos de irreverencia y humor negro. Personajes descabellados con vidas absurdas, así se caracterizaba la Hora Chanante.

He recopilado uno de los mejores episodios del programa, que siendo sinceros, me matan de risa. No tienen un orden especifico, pero para mi, el mejor es: El Juego de Vicentin, Siempre a tope!.

Vicentin y su videojuego

Vicentin en el Show de Marlo

Marlo, Hijo de p*** hay que decirlo más

El Payaso, Vivo con tu madre (RAP)

Claudio visita a Marlo (buenisimo!)

Cocinando con Marlo

Bocaseca man

El Gañan - Los Emigrantes (si, Emigrantes, jaja!)

Niki Lauda y Vicentin

Marlo presentando su libro

Windows XP vence en 30 días

2008-09-21T12:13:00.000-05:00

Continuando con algunos problemas que nos ocasiona no instalar Windows XP Original en nuestra computadora como el de “activar actualizaciones para Windows XP pirata”, les tengo otro truco muy bueno.

Activar Windows XP pirata antes de los 30 días, así es, es muy oído comentarios como:

“Mi Windows XP vencerá en 30 días, ¿Qué hago?, ¡no lo puedo activar!.
“No quiero comprar Windows XP original, ¿hay una manera de activarlo sin costo?”.

Instrucciones para la activación:

Descarga el XP Activator, que he subido en rapidshare, y deja el instalador en el escritorio.
Reinicia tu computadora, y entra como Modo Seguro o a Prueba de Fallos (presiona F8, antes de ver el logotipo de Windows y selecciona en el menú esta modalidad).
Instala el XP Activator.
Reinicie la computadora, y entre de manera normal a Windows.
¡Listo!, ya tendrá activado su Windows XP pirata.

Entrada dedicada al Betuyo, Gracias por el tip bro!

Como añadir 'Cargando' (loading) a AJAX

2008-09-20T04:16:00.001-05:00

Retomando el post anterior "Cargar páginas con AJAX y PHP", haremos que al momento de darle mandar llamar la página a cargar dentro del DIV, aparezca una imagen de "Cargando (loading)" como indicador que esta próximo en mostrar el contenido de la página que se mando llamar.

Pasos a seguir:

A la función Enviar, compararemos los estados del ReadyState, estos son:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = completese
Si se encuentra en loading enviará como HTML, un mensaje de "Aguarde por favor.." y además una GIF animado.

function Enviar(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();

ajax.open("POST", _pagina, true);

ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{

if (ajax.readyState==1){
document.getElementById(capa).innerHTML = " Aguarde por favor...";
}
if (ajax.readyState == 4)
{
document.getElementById(capa).innerHTML =
ajax.responseText;
}}
ajax.send(null);
}
Si notan, en el textarea, estoy enviando un GIF, llamado loading, es el clasico GIF animado de AJAX, el cual lo pueden bajar en AJAXLOAD, una página dedicada a la creación de imagenes para AJAX. Lo copian y lo pegan en el directorio que pongan en la función Enviar, en mi caso fue en /img, pero pueden cambiarlo.
Por último, añadiran el siguiente código, debajo del DIV en donde se esta cargando las páginas con AJAX.
<span id="loading"></span>

Transparencias PNG en Internet Explorer (IE) 5.5 y 6

2008-09-19T16:26:00.000-05:00

Del GIF al PNG, ¿porqué?

En los 90´s con el boom de las páginas web, se hizo muy común utilizar el formato GIF, para el uso de imágenes y animaciones cortas. Este formato, hace que un archivo de imagen sea pequeño, y tenga la posibilidad de añadir la propiedad de transparencia. Pese a su mala calidad y no ser libre de uso (Unisys, dueños de la patente del algoritmo de comprensión LZW), fue muy aceptado en esa época.

A finales de los 90`s, se publica oficialmente por el WWC (World Wide Web Consortium) la especificación de un nuevo formato, el PNG. Bautizado con licencia libre de uso. Adopta características muy sobresalientes encontra del GIF, el cual quedaría rezagado en los últimos años.

Algunas ventajas del PNG contra el GIF

Comprensión sin pérdida de calidad.
Transparencia inferior, soporta hasta 16,7 millones de colores.
Posee 2 modos de conversión (estándar y progresivo)
Inclusión de metadatos

Desventajas del PNG

No permite crear animaciones
Por motivos de calidad, el archivo puede llegar hacer demasiado grande para una web

Problema de transparencia con los PNG`s en el IE 5.5 y 6

Para algunos de nosotros que nos gusta el diseño y desarrollo web, tenemos que estar pensando en todo. Tanto si el usuario tiene los requerimientos básicos del sistema, validaciones, navegadores, etc. Pues bien, si utilizas solo IE 7 o Mozilla Firefox o Opera o cualquier otro navegador moderno, no te abras dado cuenta de que las transparencias de las imágenes con PNG, no sirven en Internet Explorer 5.5 y 6, y a los usuarios con estos navegadores viejos, no pueden ver dichas transparencias, si no todo lo contrario, la imagen aparece con un odioso contorno/cuadro gris.

La solución….

Hay diversos metodos, pero les presento el que se me hizo más facil a mi parecer:

1. Descarga el archivo IEPNGFIX, que TwinHelix desarrollo.
2. Copia los archivos iepngfix.htc y blank.gif dentro de la carpeta de tu sitio web.
3. En tu Hoja de estilo (CSS), pega el siguiente codigo:

img, div, a, input { behavior: url(/AquíValaDirección/iepngfix.htc) }

4. Abre el archivo iepngfix.htc, y en la línea de BlankImg, pon correctamente la dirección al archivo blank.gif:

var blankImg = '/AquíValaDireccionalaImagen/blank.gif';

5. Listo!, ya tienes arreglado el problema de transparencia con PNG para IE 5.5 y 6

Menú activo con CSS y PHP (en 2 diferentes formas)

2008-09-18T00:08:00.000-05:00

Por su dinamismo, el menú interactivo da mucha vida a una página web. El usuario de manera visual se da cuenta en que sección esta del sitio, sin necesidad de remarcar el titulo de dicha sección.

¿Cómo ocurre?

En enlace del menu se queda selecionando al momento que se le da click, indicando la página actual que se esta mostrando en pantalla.

Ejemplo: Aquí muestro un sistema de reporte de prácticas que estoy haciendo en PHP, AJAX, CSS, etc., el cual, si notan, esta seleccionado "Usuarios", y se esta mostrando la página de dicho titulo. Dentro de esta tengo un TAB, el cual al igual que el menú horizontal princiapl, esta haciendo lo mismo, pero de manera embebida.

¿Cómo hacer un menú activo (current / active) ?

Existen muchas maneras, pero yo las he hecho en 2 formas diferentes, en mi parecer una es más funcional que la otra, pero cada quien a su criterio las usará, que al final, se trata de hacer lo mismo.

Crearemos nuestro archivo CSS, donde personalizaremos nuestro menú. (OJO no se necesita conocer mucho de CSS para hacer este tipo de menús, la verdad!!. No les explicaré el código por su simpleza, pero si, tienen dudas, no duden en preguntar).

/* Horizontal menu */



#menu{

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 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 a:hover{

background-color: #535353; /*Menu hover bgcolor*/

}



#menu #current a{ /*TAB seleccionado, Página Actual*/

background-color: #80931D;

border-color: #80931D;

}

Ya teniendo nuestra hoja de estilo pasaremos a programar nuestro menú, para ello, explicaré la primera forma:

1. Menú activo con función:
Crearemos una función que nos indiqué si estamos en la página actual

function Menu($sitio) {

$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];

if(ereg($sitio,$url)) {echo 'id="current"'; }

}

y el código de nuestro menú

Lo explico, la función llamada Menu, se manda ejecutar, recibiendo, la dirección del enlace, este se compara con la página actual que se este visuelizando en pantalla (por medio de HTTP_HOST y PHP SELF), si concuerdan estos dos (EREG), imprimirá/agregará el current (del CSS, quedando asi seleccionado.

Para mí esta es la mejor opción, porque trabaja con EREG (busca coincidencias), y no importa si nuestra página actual tiene envio de datos por GET, ejemplo: usuarios.php?id=3&cuenta=2, de todos modos servirá.

2. Menú activo con Array (vector)

Otra de las formas que conozco, es usar un array con las páginas que tenemos en nuestro sitio web.

$url=$_SERVER['REQUEST_URI']; //Obtengo la página actual

Después creo el Array:

$current = Array(

"index.php" => "Inicio",

"cuenta.php" => "Cuenta",

"usuarios.php" => "Usuarios");

Obtengo el valor:

$title=$current[$url];

Despues de esto, comparare lo que me esta devolviendo title, en cada enlace de nuestro menu:

Esta forma no es muy conveniente por lo que les comentaba anteriormente, pero funciona también!.

Dreamweaver no me guarda las cuentas de FTP (Solución)

2008-09-16T02:51:00.000-05:00

Un problema que tiene Dreamweaver 8.0, es que no guarda las cuentas configuradas para FTP, al momento que uno las guarda, y cierra el programa, estas desaparecen y se tiene que volver a configurar y guardar para poderse conectar.

Lo que tienes que hacer es actualizarlo, bajando la version 8.0.2, que además de solucionar este problema, genera un código para activar contenido con FLASH, y ya no aparezca el molesto recuadro alrededor de este.

Baja e instala la actualización en el lenguaje que tienes tu dreamweaver 8.0, aquí te agrego todos los disponibles:

English: Windows (9.33 MB) Macintosh (18.351 MB)
Deutsch: Windows (8.49 MB) Macintosh (18.39 MB)
Français: Windows (8.49 MB) Macintosh (18.39 MB)
日本語: Windows (8.46 MB) Macintosh (18.37 MB)
Italiano: Windows (8.47 MB) Macintosh (18.38 MB)
Español: Windows (8.48 MB) Macintosh (18.38 MB)
한국어: Windows (8.46 MB)
繁體中文: Windows (8.44 MB)
简体中文: Windows (8.44 MB)

Activar Photoshop CS3 Extended

2008-09-16T02:25:00.001-05:00

Ayer, me topé con un problema bastante grande, no podia abrir mi PhotoShop CS3, que había bajado anteriormente y que tanto uso. Lo peor era, de que el KeyGen que incluía el Adobe Design Premium CS3, ya no le servia, entonces buscando por la red, me encontré una forma sencilla y maravillosa para activar mi PhotoShop, sin que me pida el código de activación, ni nada de eso.

Los pasos son los siguientes:

Baja el crack, Crack_Photoshop_CS3 Extender
Descomprime el archivo ZIP, contiene un archivo llamado Photoshop.exe, cópialo!
Pégalo en C:\Archivos de programa\Adobe\Adobe Photoshop CS3. Te preguntará si lo deseas remplazar, dile que SI.
Listo!, ya tienes activo el Adobe PhotoShop CS3 Extender!.

Cargar páginas con PHP y AJAX

2008-09-15T17:20:00.007-05:00

Se han preguntado ¿Cómo cargar una página dentro de un DIV sin recargar todo el sitio?

Por ejemplo:
Tienen un menu vertical y otro horizontal, y entre ellos se encuentra el contenido del sitio, y es en donde quieres cargar nuevo contenido con los enlaces de los menus.

1. Ya sea que el código de AJAX, lo guardes en un archivo .JS, o lo pongas en el HEAD de tu sitio, es lo mismo, a mi gusto, prefiero guardarlo en un archivo .js, y mandarlo llamar desde mi head, por ejemplo, el nombre de mi archivo se llama AJAX.JS, y esta dentro de la carpeta JS:

2. Crearemos el objeto AJAX (XMLHttpRequest) de multi-navegador, para que tanto pueda trabajar con FireFox Mozilla, Safari, Internet Explorer, etc. nuestra llamada asíncrona.

function ajaxFunction() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}

3. Ya creado el objeto de AJAX, vamos a crear una función para mandar llamar nuestra página de manera asíncrona:

function Enviar(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();

ajax.open("POST", _pagina, true);

ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{

if (ajax.readyState == 4)
{
document.getElementById(capa).innerHTML =
ajax.responseText;

}}
ajax.send(null);
}

4. Si notan, el enlace debe contener los parametros de PAGINA y CAPA, me refiero a la página que se va abrir en el DIV, y la CAPA es el DIV en donde se va cargar la página del enlace, en nuestro caso se llama "contenido". Quedando de esta manera cualquiera de los menus:

Las páginas a cargar dentro del div, no deben de llemar etiquetas HTML, HEAD, TITLE. por ejemplo (esta página se llamaria pagina-a-cargar.php):

Un punto importante es, que en nuestra página principal (donde se encuentren los links, ejemplo Index.php, de la figura que he puesto al principio) tengamos nuestro DIV llamado contenido dentro de las etiquetas BODY:

<br /><div id="contenido"></div><br />

Y listo!, ya tienen como llamar de manera asíncrona una página!...

ACTUALIZACIÓN 26/junio/2009: Quite el status==200, por alguna razón firefox, no toma el valor de status, y simplemente trabaja con readyState.

ACTUALIZACIÓN 02/febrero/2011: Ahora ya pueden cargar archivos PDF con AJAX. Antes recuerden que AJAX solo lee XML, por lo que se realizó lo siguiente:

- Se creó un archivo llamado pdf.html, el cual contiene lo siguiente:

<object data="twitter.pdf" type="application/pdf" width="750" height="600">
alt : <a href="twitter.pdf">twitter.pdf</a>
</object>

De tal forma que, se agrega el object junto con el nombre del archivo.

- Se agregó el botón PDF en el menú, con el código exactamente igual que las opciones anteriores, lo único es que se cambia el nombre de la página.

Lamentablemente tengo los archivos en un servidor donde no acepta PHP, pero pueden cambiar el valor del nombre del archivo PDF. Lean mi post Enviar valores con AJAX y recibirlos con REQUEST o POST (PHP) . Después de la explicación, verán que es posible agregar variables y recibir sus valores con AJAX.

VER EJEMPLO / DEMO >>>

DESCARGAR ARCHIVOS >>>

Certificación oficial en PHP

2008-09-15T15:59:00.000-05:00

¿En que me puede ayudar una certificación en PHP?

Currículum
Aumentar el valor correspondiente de su sueldo anual
Ser más competitivo en la búsqueda de empleo
Obtener el titulo de “Profesional en PHP”

¿Quién me puede ofrecer una certificación oficial en PHP?

Zend, una compañía encargada en el desarrollo de productos relacionados con el desarrollo, despliegue y gestión de negocios basado en PHP (aplicaciones web).
Además tiene como servicio, la certificación de PHP de manera oficial.

¿Qué obtengo al certificarme con ZEND PHP Company?

Zend (http://www.zend.com/), es la empresa más conocida en el área de desarrollo en PHP, sacando provecho a esto, ZEND lanza “Zend`s Yellow Pages”, una sección amarilla para los profesionales en PHP, certificados en su empresa. La gran mayoría de las empresas buscan sus trabajadores en estas páginas amarrillas, así que estamos hablando de un alto porcentaje de encontrar empleo en tu área cercana.
LinkeIn, una red social exclusiva para profesionales de PHP, es otro de los servicios que te ofrece ZEND.

¿Dónde puedo realizar el examen de certificación con ZEND PHP Company?

El examen lo puedes hacer atravez de la certificadora Pearson VUE (http://www.vue.com/)

¿Cuánto cuesta el examen?

El examen cuesta $125 dolares

¿Dónde puedo encontrar material de estudio gratis para pasar mi examen de certificación?

En Internet hay muchos recursos, guías, videos para pasar este examen. Uno de manera oficial y más actual es:

Zend PHP 5 Certification Package
Es el paquete con todo el contenido para pasar el examen de certificación de PHP con ZEND Company, incluye:

- Intro to PHP (video!)
- PHP Language Basics
- PHP and Forms
- PHP Web Features
- Strings and Regular expressions
- Working with Arrays
- Working with Databases
- PHP Functions
- Object-Oriented PHP
- Handling Exceptions
- Managing Files
- Streams and Sockets
- XML
- Web Services
- PHP Security

Descargar:

http://rapidshare.com/files/114438129/CNtsZndPHP5P.part1.rar
http://rapidshare.com/files/114518946/CNtsZndPHP5P.part2.rar

El blog se expande...

2008-09-15T15:31:00.000-05:00

Con la intención de crear más contenido para este blog, he decidido: ronovar imagen, brindar herramientas y recursos para tus aplicaciones web, y traerles lo último en información tecnologica.

También, con la novedad, de que me voy Granada, España este 22 de septiembre, ha estudiar un semestre, y como manera de entretenimiento, posteare algunas aventuras que me ocurran alla, además y muy importante, para tener un diario y mi querida novia Mayra, lo pueda ver semana tras semana mientras estoy aca, jijiji!.

La Postura Inadecuada (version 2.0) ready!... GO!

Inyección SQL - Hackeando páginas web

2008-08-22T08:38:00.000-05:00

Las típicas preguntas que nos hacemos:
¿Cómo puedo hackear una página web?
¿Cuál es la manera más fácil de hacerlo?
Soy inexperto en Hacking, ¿podré hacerlo?

Pues bien, la manera más fácil es buscar una vulnerabilidad en el nivel de validación de las entradas a la base de datos, como por ejemplo el área de administración (Login/Password) del sitio.

Una inyección SQL sucede cuando se inserta o "inyecta" un código SQL "invasor" dentro de otro código SQL para alterar su funcionamiento normal, y hacer que se ejecute maliciosamente el código "invasor" en la base de datos.

Fuente: Wikipedia

Con el auge de los sitios/plataformas web desarrollados en PHP y ASP, conforme a eso también se han visto las distintas vulnerabilidades en estos. Ya que el máximo problema que existe es la Inyección SQL.

Pero, ¿Cómo se hace?

Comúnmente los desarrolladores novatos hacen su sistema de validación de usuarios de esta forma:

$usuario=$_POST['usuario'];
$pass=$_POST['pass'];
$sql="SELECT * FROM
usuarios WHERE usuario= '$usuario' AND contrasena='$pass'";

Al ejecutar el mismo, si coincide en la base de datos, entrara ya sea a crear la sesión o actualizar el estado del campo.

Obviamente para entrar debemos conocer el usuario y contraseña correcta, pero nosotros inyectaremos un código malicioso para que nos devuelva un TRUE en la consulta.

Colocaremos lo siguiente, en el formulario de administración:

Usuario: admin
Contraseña: ' or''='

A la hora que se ejecute la sentencia, permitirá a entrar al sitio web! y listo!

Si eres desarrollador, te interesara como evitar todas las vulnerabilidades de inyecciones.

PHP
En php se utiliza la función mysql_real_escape_string, la cual escapa caracteres especiales de una cadena para su uso en una sentencia SQL.

Entonces tu consulta agregando esta función quedaría:

$sql="SELECT * FROM usuarios WHERE usuario=
\"".mysql_real_escape_string($usuario). "\"" AND
contrasena=\"".mysql_real_escape_string($pass). "\""";

ASP
Para asp se utiliza de la siguiente manera:

Dim Usuario, Password, RS, SSQL Usuario = Request.Form("txtUsuario")
Password = Request.Form("txtPassword") SSQL = "SELECT count(*) FROM
Usuarios WHERE Usuario = '" & Usuario & "' AND password='" &
Password & "'" Set RS = Server.CreateObject("ADODB.Recordset")
RS.Open SSQL, "Cadena de conexion" If (RS.EOF)
Then Response.Write "Acceso denegado."
Else Response.Write "Te has identificado como " &
RS("Usuario") End IfSet RS = Nothing

Donde txtUsuario y txtPassword vienen del formulario donde pedimos el Usuario y Contraseña.

Nuevo sitio web: Encuentro Colima

2008-08-05T11:26:00.000-05:00

El pasado mes de Julio, tras un mes de trabajo, se lanzo Encuentro Colima, un nuevo servicio de publicidad en línea y desarrollo web.

¿Cómo trabaja Encuentro Colima?
Si eres dueño de una pequeña/mediana empresa, y tienes deseos de entrar en el mundo del Internet, pero no tienes el capital para gastar en hospedaje / dominio / diseño web, en Encuentro Colima podrás tenerlos a muy bajo costo.
Te brinda las herramientas necesarias para tu sitio web, y a si tener una mayor competencia empresarial.

Información:
CSS, PHP, MySQL, AJAX, JavaScript, Photoshop

Sistemas incorporados al sitio:
- Administrador:
Sistema de administración de usuarios

- Administrables exclusivamente por los usuarios (membresía estándar y Premium)
Modificación de su sitio web (diseño, información, etc)
Sistema de promociones
Sistema de productos en línea

visita: http://www.encuentrocolima.com

Examenes para Certificación de Cisco CCNA y CCNP

2008-07-21T10:04:00.000-05:00

Para llegar hacer un certificado en Cisco CCNA o CCNP, se necesita una ardua preparación, la cual conlleva a estudiar mucho y a la ayuda de unos cuantos simuladores.
He estado subiendo material de estudio, (que espero a muchos les este ayudando), pero hay algo más.

Les presento, los simuladores de examenes para certifiación, destinado para:

- Técnicos de redes noveles en productos y servicios Cisco.

- Administradores de red responsables de implementar y administrar las redes de empresas medianas y pequeñas.

- Personal de soporte de red que llevará a cabo la función de ayuda de escritorio en una compañía de tamaño mediano que tiene un personal de soporte de red interno.

- Personal de soporte de red que actuarán como instaladores de dispositivos de red y como soporte de primera línea en un entorno de red pequeña.

- Candidatos CCNA

- Candidatos CCNP

Interactive Testing Engine Cisco 640-811 (Testking)
> Descargar <

640-811 Practice Exam Package
> Descargar <

Activar Windows XP Pirata como Original

2008-05-15T13:10:00.000-05:00

No conozco a más de 10 personas, que tengan en su computadora Windows Xp Original, y para que tenerlo?, si aparte de costoso no es un sistema operativo confiable.

Lo malo de tener Windows XP pirata es que no podemos descargar los componentes nuevos ni actualizaciones, ya que se instala en nuestra computadora un programa ActiveX llamado WGA (Windows Genuine Advantage), este detecta si el sistema operativo Windows que se ejecuta en esa computadora fue comprado a Microsoft o no. Esta comprobación se lleva a cabo cuando se ingresa al Centro de Downloads de Windows en internet y se intenta actualizar el S.O..

Se preguntaran, como es posible engañar al WGA, y activar nuestro windows XP como Original. Es bastante sencillo, lo que debes de hacer es:

1. Bajar el archivo Activar Windows Xp, que he subido a RapidShare.

2. Descomprimir el archivo, y ejecutar RemoveWGA, esta herramienta sirve para borrar por completo el WGA.

3. Ejecuta Licencia.reg, lo que hara este archivo es validar los registros como originales.

4. Reinicia tu PC

5. Listo!, ingresa a Windows Update, y verás que ya es posible Actualizar tu Windows XP.

Nuevo sitio web: Colima IN

2008-05-10T17:32:00.000-05:00

Tras el auge de redes sociales en internet, y la creciente demanda de revistas en línea , surge COLIMA IN. Un nuevo portal que me encargaron unos chavos emprendedores del Tec de Colima.

Para COLIMA IN, priorice en diseño, ya que quería que el visitante tuviera un impacto visualmente pero que a su vez, fuera un sitio fácil de explorar. Ya que el error de muchos cuando trabajamos con FLASH, es la falta de accesibilidad.

Espero que le vaya muy bien al equipo de Colima In…

Información:
CSS, Flash, PHP, MySQL, AJAX, JavaScript, Photoshop

Sistemas incorporados al sitio:
- Completamente administrables:
Galería de fotos
Libro de Visitas
Directorio Comercial
Publicidad en Random

Visita: http://www.colimain.com.mx/

Buscador para RapidShare

2008-05-09T07:26:00.000-05:00

RapidShare es uno de los servidores más famosos para almacenaje y distribución de archivos a través de internet. Aunque contiene 2 tipos de usuarios, Gratuito y Premium. Obviamente el usuario gratuito sufre de muchas limitaciones, un ejemplo de ellos, es no poder descargar en cadena archivos, y a su vez sufrir de menor ancho de banda. Los usuarios premium tienen los privilegios de descargar archivos en cadena y velocidad máxima de descarga.

Pero algo que no tiene RapidShare y para muchos usuarios es escencial es: Un buscador de archivos.

Asi es, ni si quiera los usuarios premium tienen esta herramienta para archivos. y deberas que es una lata andar buscando por internet algún archivo de tu interes que se encuentre en rapidshare siendo un usuario premium, que tienes pagado el servicio.

Uno de los sitios que nos brinda un servicio de búsqueda para RapidShare es el RS FIND (el mejor!), el cual funciona como Google.com, pero obviamente por sus siglas RS (RapidShare) - FIND (encontrar), es exclusivo para este servidor.

Enlace: http://www.rsfind.com/

Convertir QuickTime Player a QuickTime Pro

2008-04-24T10:40:00.000-05:00

QuickTime Player es solamente un reproductor de video, el cual es estándar de Apple (.MOV).
Permite ver videos a resoluciones que antes sólo podíamos soñar, ya que sus contenidos son muy nítidos superiores al estándar de DVD, DivX y otros formatos de alta calidad.

QuickTime está definiéndose, poco a poco, como el futuro estándar para visualización de videos, con calidades muy superiores al MPEG y menor espacio en disco.

[QuickTime Player NO permite guardar videos]

QuickTime Pro permite:

*Crea vídeo utilizando el códec más importante de Internet: H.264
*Graba audio para producir podcasts
*Crea películas para el iPod
*Nuevos controles a toda pantalla
*Convierte contenido multimedia a más de una docena de formatos

El costo del QuickTime Pro es de aproximadamente $515.00 pesos

Pero, les mostrare una manera facil y sencilla, para ahorrarse ese dinero. Para ello tienen que realizar los siguientes pasos:

1. INICIO > Panel de Control
2. Localizen el icono de QuickTime, doble click.
3. Les abrira un cuadro de dialogo llamado: Preferencias de Quicktime
4. En los campos de Registro para y código de registro, agregar:
Para: Dawn M Fredette
Código: 4UJ2-5NLF-HFFA-9JW3-X2KV
5. Click en Aplicar y Aceptar
6. LISTO! Ahora cuentan con QuickTime Pro Gratis!

Nuevo sitio web: SHARP Colima

2008-04-22T16:07:00.000-05:00

El Sr. Alberto Delgadillo (Gerente de la Distribuidora SHARP en Colima) estaba fastidiado de su sitio Web, ¿las razones?, Un Diseño malo (toda la interfaz del sitio), funcionalidad, accesibilidad y actualización.
Así, que con estos parámetros partí para el desarrollo del sitio, revisando los colores empresariales de SHARP, y a su vez diseño del mismo.

El resultado fue: http://www.sharpcolima.com.mx

Más información:
CSS, Flash, HTML

Decodificador de archivos CSV

2008-04-21T17:42:00.000-05:00

Los ficheros CSV (del inglés comma-separated values) son un tipo de documento sencillo para representar datos en forma de tabla, en las que las columnas se separan por comas (o punto y coma en donde la coma es el separador decimal: España, Francia, Italia...) y las filas por saltos de línea. Los campos que contengan una coma, un salto de línea o una comilla doble deben ser encerrados entre comillas dobles. (Wikipedia)

Son muy utilizados para importar / exportar el contenido de la base de datos, para una mejor manipulación.

Hace unas semanas desarrolle un herramienta / programa en PHP, que permite:

* Decodificar archivos de texto plano en formato CSV
* Interpretar y cuenta su contenido
* Generar un archivo de salida en CSV que contenga los datos de una selección de filas.

El archivo .RAR, contiene:

- Index.php
-Archivo fuente CSV, llamado EdKEL.csv

Para poder descodificar otro archivo en vez de (EdKEL.csv), basta con modificar el Index.php, en la linea de código:

$handle = fopen("EdKEL.csv", "r");

cambiarlo por $handle=fopen("Ruta/NombredelArchivo.csv","r");

Descargar Decodificador de archivos CSV

CCNA 3.1 (Resumen)

2008-03-15T13:46:00.000-06:00

¿Existe un resumen de todos los semestres de CCNA 3.1.?, la respuesta es SI.

En algun momento me habia preguntado si existia un resumen completo de los 4 semestres que son impartidos por la Academia de Networking de CISCO, y por fin, tengo en mis manos este material, aquí se los adjunto.

Recordando que los temas principales de los cuatro semestres son:

Primer semestre: Introducción a las redes. (Este semestre es el semestre más teórico).

Segundo semestre: Introducción al enrutamiento (routers).

Tercer semestre: Enrutamiento intermedio / conmutación (switching).

Cuarto semestre: Teoría de WANs.

CCNA 3.1 Resumen

¿Quieres aprender a programar?

2008-03-11T19:16:00.000-06:00

Programación, Algoritmos, Web, Internet, PHP, C++, Visual Basic, Visual .NET, Aprender a programar, Delphi, Base de datos, Aprendiendo a programar.

¿Qué?, ¿Qué significa esto?

Google dice: No se pueden utilizar flechas u otros trucos publicitarios para dirigir la atención de los usuarios hacia los anuncios.

¿Estaré llamando la atención para generar ganancias a mi Google Adsense?, Tal vez!

Esta entrada es para ofrecerles uno de los grandes trucos que hay en Internet hoy en día, aprovechen el mensaje.

Nuevo sitio web: DGES

2008-03-07T18:08:00.000-06:00

Hace unas semanas desarrolle la nueva página web de la Dirección General de Educación Superior de la Universidad de Colima.

Los invito a visitarla: www.ucol.mx/dges

Información:
Diseño Web 2.0, CSS, Flash, PHP, CMS.

Sistemas incorporados al sitio:
Boletín de Educación Superior, Avisos para Directivos, Atención Online, Biblioteca Digital, Sistema de reporte de prácticas de talleres y laboratorios (en prueba).

Me gustaría recibir sus comentarios respecto al proyecto.

Microsoft Surface : La computadora multitáctil

2008-02-17T14:47:00.000-06:00

Microsoft presento hace ya casi un año Microsoft Surface, ¿Qué es Microsoft surface?, imagina que tienes una computadora multitouch e interactiva de 30 pulgadas en forma de una mesa de café, aunque la tecnología multitouch no es algo muy novedoso que digamos (tienen el mejor ejemplo los iPhones), Surface ofrece una nueva versión de interacción hardware/software muy completa.

Surface, que llevo alrededor de 5 años en desarrollarlo, cuenta con una tecnología llamada Milan, una interfaz intuitiva la cual no necesita de ningún periférico tradicional (mouse y teclado), puede reconocer objetos como cámaras fotográficas, pinceles, teléfonos celulares y claro tus propias manos, permitiendo así controlar fotos, música, mapas mediante el tacto.

"Con Surface estamos rediseñando el modo de interactuar con la tecnología," dijo Steve Ballmer, consejero delegado de Microsoft. Indicando que Microsoft pretende romper las barreras entre la gente y la tecnología.

El precio elevado de este producto responde a la decisión de Microsoft de colocar primeramente a Surface en casinos, hoteles y tiendas comerciales. Cotizado en 5 a 10 mil dólares, no estará disponible una versión más económica hasta dentro de 3 años. Microsoft ya anunció la venta de dispositivos a los hoteles como el Sheraton, los casinos Harrah's, las tiendas T-Mobile y grandes restaurantes.

Microsoft ha recalcado en cuatro puntos principales, las funcionalidades destacadas de Surface:

• Interacción directa: los usuarios podrán manejar información directamente con sus manos y voz.

• Multitoque: el dispositivo reconoce múltiples puntos de contacto por lo que se puede manipular por más de un usuario a la vez.

• Multiuso: el diseño horizontal de Surface permite un uso colaborativo, fomentando las relaciones cara a cara.

• Reconocimiento de objetos: los usuarios podrán colocar objetos físicos sobre la superficie para obtener respuestas digitales.

Dado que el proyecto aun no ha finalizado, no se conocen todas las características, aunque si bastantes detalles como:

- Mesa de 55.88x53.34 centímetros y 1 metro aproximadamente de altura.

- Pantalla multitáctil de 30 pulgadas (76 cm) protegido por un cuadro acrílico y su marco interior está recubierto de polvo de acero.

- 5 cámaras infrarrojas.
- Sistema Operativo: Windows Vista.
- Conexión de red Ethernet 10/100, red inalámbrica 802.11 b/g y Bluetooth 2.0.
- Requiere un enchufe Americano Estándar de 100-120V.

El mejor ejercicio cardiovascular

2008-02-14T19:45:00.000-06:00

A lo largo de estas semanas de renovación física, he comprobado que el mejor ejercicio cardiovascular, es CORRER, no sin antes haber probado por la bicicleta estática y la elíptica, que son muy buenos, pero los que me han dado mejores resultados es trotar ya sea en caminadora o al aire libre, he notado la rápida disminución de grasa en áreas difíciles de perder, y además he ganado tonificación. Claro, también ganas agilidad y resistencia.

Aquí les dejo, lo que encontré en una revista "Health & Fitness", algunas cosas me dan risa, ya lo verán:

Correr al aire libre:

Ventajas: Es más barato, no hay equipó que ocupe espacio en tu casa, respiras aire fresco, con un escenario que se renueva y puedes controlar tu velocidad, sin peligro a caerte del piso artificial en movimiento.

Desventajas: Que te pierdas, se te llenen los zapatos de lodo, seas arrollado por un coche/trailer o el clima sea extremo. Y si no practicas tu fuerza de voluntad y te distraes, terminaras por irte al cine que ir a correr.

Correr en caminadora:

Ventajas: Es más fácil ajustar el grado de esfuerzo y el nivel de inclinación para crear la ilusión de estar subiendo cuesta arriba, mientras permaneces con tu esposa y niños.

Desventajas: La principal consiste en motivarte para comenzar, pues en lugar de correr, puedes preferir ver la televisión mientras te comes una bolsa entera de papas fritas.

Microsoft Silverlight : cambiando el monopolio

2008-02-10T15:23:00.000-06:00

Hace unos meses Microsoft lanzo Silverlight, una aplicación multimedia similar a Adobe Flash, (que hasta el momento tiene el dominio de este campo) y que compite directamente con Adobe Flex, Nexaweb, etc.

Microsoft Silverlight es un subconjunto de XAML (eXtensible Application Markup Language) optimizado para describir gráficamente interfaces de usuarios visuales ricas desde el punto de vista gráfico, y agrega algunas funciones de Windows Presentation Foundation como la reproducción de videos, entre otras cosas más.

Es compatible con la mayoría de los navegadores de internet, como Firefox, Safari, Internet Explorer, pero al igual que el Adobe Flash, requiere la instalación de un plugin para su reproducción, que mide alrededor de 2MB.

Jesse Ezell, un experto en flash escribió: "Flash nació para crear animaciones basadas en frames y a este modelo se le ha querido agregar facilidades de programación convencional, Silverlight en cambio es un ambiente de programación con buenas facilidades de animación".

Yo no soy experto en flash, pero puedo decir, que me da gusto que haya llegado otra plataforma de desarrollo de aplicaciones web, me agrada el hecho de una variedad, claro va ser difícil que Silverlight consiga un verdadero mercado a corto plazo, ya que todos los desarrolladores de animaciones para web están acostumbrados al monopolio que he generado Adobe Flash.

Renueva tu físico en 9 semanas (semana 3 y 4)

2008-02-01T12:18:00.000-06:00

Espero que lo continúen realizando esta guia de transformación fisica, y además, muy importante, motivados; recuerden, semana santa esta muy próxima, así que a darle!.

Continuaremos con el mismo plan alimenticio que la semana 1 y 2, solamente cambiaremos la rutina de ejercicios.

Entrenamiento:

DÍA 1: Sets x Repeticiones

Pecho:
Press con mancuernas (inclinado), 3 x 10-12
Apertura con mancuernas (inclinado), 3 x 10-12
Press con mancuernas (plano) , 3 x 10-12
Apertura con mancuernas (plano), 3 x 10-12

Tricep:
Extensión vertical alternada con mancuernas , 3 x 10-12
Patada atrás con mancuerna, 3 x 10-12
Extensiones de tríceps en polea alta (alreves) , 3 x 10-12

Abdominales:
Crunch inclinado

DÍA 2:
1 hora de ejercicio cardiovascular (ejemplo: correr 20 minutos, 20 minutos escaladora, 20 minutos de elíptica).

DÍA 3: Set x Repeticiones

Espalda:
Dominadas con agarre estrecho, 3 x fallo
Remo en barra T, 3 x 10-12
Remo al cuello con manos juntas, 3 x 10-12
Hiperextensiones, 3 x 10-12

Biceps:
Curl de biceps en brazo scott, 3 x 10-12
Curl de biceps alternado, 3 x 10-12
Curl de bicep alreves, 3 x 10-12

Pantorrilla:
Elevación de talones en maquina, 3 x 10-12

DÍA 4:
1 hora de ejercicio cardiovascular

DÍA 5:

Pierna:
Sentadilla, 3 x 10-15
Flexión del tronco al frente, 3 x 10-15
Prensa de piernas inclinada, 3 x 10-15
Zancadas o Lunges, 3 x 10-15
Curl de pierna sentado, 3 x 10-15

Hombro:
Press militar con barra, 3 x 10-12
Encogimiento de hombros, 3 x 10-12
Elevaciones laterales, 3 x 10-12

Abdominales (parte baja):

Levantamiento de piernas en banco plano, 3 x 15-20

---------------------------------------------------------

Consejos: Cuiden mucho su alimentación, y es importante que hagan su ejercicio cardiovascular, los días establecidos, pueden hacer un poco de cardio después de hacer pesas, no más de 20 minutos.

MANTENGANSE MOTIVADOS !!

Certificación de Cisco CCNA 3.1

2008-01-18T08:53:00.000-06:00

Para las personas que estan proximas a realizar el examen de certificación de Cisco CCNA 3.1, les dejo un muy buen material de estudio:

GUÍA DE CERTIFICACIÓN CCNA 3.1

Nuevo sitio web: Rogelio Guedea

2008-01-15T16:40:00.000-06:00

Mi hermano Rogelio de nuevo en casa!; después de haber estado trabajando duro y tupido (según dice el) en Nueva Zelanda, llego a Colima el pasado 19 de Noviembre 2007, para vacacionar un poco.

Como siempre (por ser el menor), me ponen a trabajar, como transcribir entrevistas (que me desesperan!), que ve a tal lado, que ponte hacer tal cosa, etc etc etc. Pero algo que si me gusta hacer, son páginas web.

El día que llegó me dijo:
RG: "hay que mejorar mi página vale".
HG: "Okey, ya para que no me pidas que modifique cada sección, lo haré administrable por ti".
RG: "si no se hacer páginas web".
HG: "jajaja no se ocupa, todo es a base de formularios, y clicks, ya veras".

Así que desarrolle un Sistema de gestión de contenido (CMS) para todo el sitio, además de un diseño agradable (trate de hacer un patrón de diseño como el WEB 2.0).
Incorpore las siguientes tecnologías: PHP, MySQL, Flash , CSS.

El resultado: http://www.rogelioguedea.com/

Nota: Algunas secciones se encuentran vacías por falta de tiempo del administrador (Rogelio Guedea) pronto subirá información.

Renueva tu físico en 9 semanas (semana 1 y 2)

2008-01-13T12:21:00.000-06:00

Después de unas merecidas vacaciones, en donde no la pasamos comiendo todo el día, perdiendo los hábitos alimenticios que ya habíamos desarrollado, y si llegaste ir al gimnasio en días pasados, pero por ser mismas vacaciones dejaste de ir, ahora bien, ¿cómo te sientes?. Yo sé, siempre me ha pasado, empezamos la agonía con exclamaciones como: ¡me siento bien gordo(a)!, ¡mendiga lonjita!, ¡hay el pantalón me aprieta!, ¿no es así?.

En este momento no estas preocupado, ya que las camisetas o playeras holgadas te cubren esa lonjita, pero ¿que pasara a días de llegar Semana Santa?, donde quieres irte a la playa pero te da pena mostrar tu cuerpo.

Es hora de comenzar con un plan que nos garantice quitar esas lonjitas, y llegar a transformar nuestro cuerpo en algo mejor , ya empezó la cuenta regresiva!.

EMPECEMOS ESTA GUIA CON MUCHA MOTIVACIÓN Y CON MUCHA DISCIPLINA!, ya que al igual que tu, estaré realizándola paso a paso.

SEMANA 1 Y 2 (el comienzo!!)

Motivación y disciplina: La base del éxito de esta guía de transformación, es que te mantengas motivado y a su vez con mucha disciplina, para ello, debes tomarte medidas (abdomen, piernas, bicep, etc) y pesarte cada semana para que lleves un seguimiento de tu progreso, no lo dudo que habrá semanas que bajes más peso que otras, esto es normal, no te desanimes.

Realiza ejercicio cardiovascular: Realiza ejercicio cardiovascular como correr, andar en bicicleta, elíptica, 4 veces por semana, por las mañanas con estomago vacio o después de realizar tus ejercicios de pesas. Es muy importante para la perdida de grasa, en otro post hablare más afondo sobre los beneficios del ejercicio cardiovascular, asi como el mejor ejercicio.

Nutrición: Recuerda que dejar de comer, es lo peor que puedes hacer para perder grasa, al contrario debes hacer más comidas con porciones pequeñas, para que tu metabolismo este más activo y no le demos permiso de generar esa grasita, si no al contrario quemarla:

Desayuno:

Opción 1 - ½ taza de avena con agua, mesclado con 35 gramos de protein en polvo
Opción 2 - 6-10 Claras de huevo en dos revanadas de pan integral (consigan el multigrano con linaza, es bueno!).
2 vasos de agua.

Merienda:

Opción 1 – 2 sandwiches de pechuga de pavo.
Opción 2 – 2 sandwiches de atun con lechuga.

Comida:

Opción 1 – 200 gramos de pescado con ½ taza de arroz rojo con vegetales (broccoli).
Opción 2 - 200 gramos de carne de res con una porción de pasta.
Opción 3 – 215 gramos de pechuga de pollo con 2 papas cocidas al vapor.
2 vasos de agua.

Comida (antes de entrenar)

Opción 1 – Un pedazo de carne de grande como la palma de tu mano con ensalada y una papa.
Opción 2 - 6-10 omelet de claras de huevo con arroz rojo.
Option 3 – Algo sensillo, compra barras de proteína, y comete una!.
3 vasos de agua.

Comida (Despues de entrenar)

Opción 1 – 35 gramos de Whey Protein (suero de leche, que hablare en otro post sobre este suplemento).
Option 2 – 1 sandwich de pechuga de pavo combinado con 2 claras de huevo.
Option 3 – Pechuga de pollo con brocolli.
3 vasos de agua.

4. Entrenamiento:

Día 1 – Sets × Repeticiones

Pecho:

Bench Horizontal, 3×12-15
Bench Inclinado, 2×12-15
Crossover, 2×12-15

Triceps:

Cable Pushdowns, 3×12-15
Fondos, 3×12-15

Abdominales (parte alta):

Crunches, 3×12-15

Día 2 – Sets × Repeticiones

Espalda:

Lateral (Pull Down) , 3×12-15
Remo Sentado, 3×12-15
HIperextensiones, 3×12-15

Biceps:

Cable Curls, 2×12-15
Mancuernas alternadas, 2×12-15

Pantorrilla:

Parado, 3×12-15

Día 3 – Sets × Repeticiones

Pierna:

Extensiones, 2×15-20
Femoral Curl, 2×15-20
Press, 2×15-20

Hombro:

Laterales, 3×12-15
Lateral con cable, 3×12-15
Press, 2×12-15

Abdominales (parte baja):

Elevación de piernas tumbado, 3×12-15

5. Suplementación: Es también muy importante tener buena suplementación, al igual que comer bien. Para esta guía, no me gustaría que gastaran mucho, les recomiendo 100% Whey Protein de la marca ON (Optimum Nutrition) como su proteína esencial. Como no creo que compren más cosas, pero se las recomendare, un Multivitaminico el Animal Pak de Universal, además de Glutamina de la marca ON también. El multivitaminico se consume después del desayuno, y la glutamina 5 gramos antes de hacer cardio (cuando este es en estomago vacio), antes de entrenar (con pesas) y después de entrenar. Hablare más sobre suplementación en otro post.

MANTÉNGANSE MOTIVADOS estas 2 semanas!: Proximamente Semana 3 y 4!.

Una manera fácil de ganar dinero en Internet

2007-12-02T02:27:00.000-06:00

Muchos de ustedes se preguntaran, ¿cómo puedo ganar dinero fácilmente vía internet?.
Hay muchas formas de ganar dinero vía internet, desde vender productos en algún sitio web como Mercado Libre, afiliarse a un programa, escribir reseñas hasta por publicidad, este último es del que me interesa hablarles.

Existen una gran variedad de sistemas de publicidad para tu sitio web, por ejemplo Google AdSense, el cual genera ingresos por cada click que el visitante da sobre los anuncios de google. Google utiliza tecnología inteligente, ya que los anuncios que se publican son de contenido casi idéntico al de la página, por ejemplo si tu página es de nutrición, en la publicidad, tendrá título como "Las Mejores Dietas del 2007", que en realidad es un gancho para que el visitante dé click sobre el anuncio y a si genere unos pequeños pesitos, OJO: Uno como dueño de la página donde se tiene el sistema, no puede estar dándole click a los anuncios para que genere dinero, ya que google encuentra la localización geográfica (ip), duración de sesión, etc; Si hace esta trampa, google te quitara la cuenta.

Yo como ven, ya estoy utilizando este sistema, si quieren generar cierto dinerito que a nadie le cae mal, abre un sitio web y agrega esta forma de ganerar dinero, sin necesidad estar pegado a la computadora todo el día.

Si desean una explicación sobre cómo ser crear una cuenta o ser "trabajador" de Google Adsense, no lo duden en decírmelo.

Visiten: www.google.com/adsense

Wordpress vs Blogger

2007-12-01T18:59:00.000-06:00

Hace unas semanas un amigo mío abrió un blog, el me empezó a platicar sobre la gran experiencia de tener uno, ya que para el, sentarse a escribir sobre cualquier tema relevante o no, era una catarsis.

Yo siempre había tenido el gusanito de abrir un blog, pero por muchas razones, (obviamente, no tenía el suficiente tiempo de abrir uno). El gusanito que tenia hace tiempo se convirtió en interés, por supuesto influenciado por aquella conversación con mi amigo.

A la hora de que decidí abrir dicho blog personal, encuentre dos sistemas de creación de contenido (CMS) dirigidos al desarrollo de blogs, estoy hablando de los más fuertes en esta area: Wordpress y Blogger.
Encuentre una serie de páginas que me mencionaban una y otra vez, rollos técnicos de porque usar Wordpress sobre el blogger, y las facilidades de uso de uno con el otro, yo ya había tenido experiencia con el wordpress, ya que necesitaba un CMS de urgencia, y sin duda me ayudo, pero en realidad, aunque ya lo había usado, no sabía cuál de los dos cubría mis necesidades, entonces dije ¿que necesito en mi blog?, como resultado salió esto:

1. ¿A dónde va chente?, pues a dónde va la gente, no?, Obviamente!, entonces me pregunte ¿cuántas personas tiene blogger en comparación al wordpress, no se imaginan la gran diferencia, es tremenda, por su gran facilidad y publicidad, Blogger gano!.

2. Al momento de crear un blog en blogger, te pregunta que diseño quiera en tu web, poniéndote alrededor de 5 a 8 plantillas, y YA!, en cambio, cuando trabaje con wordpress, había cientos de plantillas en internet, de mismos usuarios que crean sus plantillas, eso le dio una palomita al wordpress.

3. Una de las modificaciones que observe en blogger (antes de unirme como usuario), era que uno podía agregar su propio código CSS, Javascript y HTML, en cambio con wordpress no!, y para mí era importante, por aquellos que nos gusta cambiar cositas en diseño y funciones!.

4. Cuando utilice wordpress, quería poner un video WMV, que no se encontraba en youtube, ya que videos de youtube si se puede agregar en los post de wordpress, esa fue una limitante, en cambio con blogger puedes agregar los videos de donde sea, además de publicidad como Google Adsense (que hablare de ello en otro post).

5. Los dos cuentan con estadísticas del sitio, o puedes agregar uno externo, como el que yo agregue.

6. Los dos son muy fáciles de usar, pero les soy sinceros, en blogger se me hizo todo muy a la vista y sencillo de usar, en comparación al wordpress, que tiene más funciones, pero muy escondidas!!.

Con una postura inadecuada

2007-11-29T01:13:00.000-06:00

Estando hoy por la madrugada acostado en la cama con mi dolor de espalda y a mi laptop calentando el colchón, estoy escribiéndoles mi primer post (termino que muchos bloggers tienen totalmente adoptado, aunque no sepan ni una pisca de ingles).

Tras haber visitado más de 200,000,000 blogs (blogger vs wordpress), decidí que quería tener una presencia en la red de redes (si amigos, el Internet) con un pequeño blog, en donde lo aprovechare para mis ratos libres, y dejando a un lado tanta "Programación en MSN Messenger" (donde muchos de ustedes, desarrollan líneas... pero líneas de código), para este "post", simplemente cabe decir, que será mejor que lo visiten seguido, ya que contendrá temas diversos, un adelanto:

Programación Web
Tecnología
Ocio
Fisicoculturismo / Bodybuilding
Nutrición
Internet
Música
y más...