Mostrando entradas con la etiqueta Programación. Mostrar todas las entradas
Mostrando entradas con la etiqueta Programación. Mostrar todas las entradas

miércoles, 10 de agosto de 2011

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

Ayer, un amigo me preguntó:
¿Cómo puedo obtener la sumatoria de los valores de una fila? y además,
¿Cómo puedo obtener la sumatoria de los valores de la columna?

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

<?php

/* VARIABLES
$nf = número de filas
$nc = número de columnas
$ct= total de columna
$ft= total de fila
$cf = total de columna sumatoria de fila
*/
$cf='';
$ft='';
$c='';
$ct[]=''; 
echo '<table>';
for ($i = 0; $i <= $nf; $i++) {
echo '<tr>';
for ($c = 1; $c <= $nc; $c++) {
echo '<td>'.$c.' </td>';
$ft+=$c;
     if ( ! isset($ct[$c])) {
      $ct[$c]= null;
     }
$ct[$c]+=$c;
}

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

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

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

El resultado:


martes, 29 de septiembre de 2009

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

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

Nota: ¿Desean el código fuente?

martes, 21 de julio de 2009

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

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

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

¿Cómo se hace esto?

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

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

}

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

}

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

}

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

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

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

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

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

}
.clean {clear:both;}

HTML

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

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


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

PHP

function Menu ($direccion,$subdireccion) {

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

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

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


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

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

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

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

Ejemplo funcionando:




miércoles, 24 de junio de 2009

Simple jQuery plugin: Enlaces con mensajes de 'Cargando'

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

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

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

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

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

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

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

martes, 19 de mayo de 2009

Los errores más comunes de un programador PHP

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

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

1) Configuración básica de seguridad

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

martes, 12 de mayo de 2009

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

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

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

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

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

ErrorDocument 403 /actualizando.html

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

3) Renombrar o Redirigir páginas

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

martes, 3 de febrero de 2009

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

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

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

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

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

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

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

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

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

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

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

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

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

jueves, 15 de enero de 2009

JavaScript Frameworks

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


viernes, 5 de diciembre de 2008

Tabs usando jQuery

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.

<!--Color de la página, color de letra y tipo de letra-->
body{font-family:Arial, Helvetica, sans-serif; background: #023c4b; color:#FFFFFF;}

<!--Quitaremos el estilo a las Listas, para que dejen de tener esas bolitas a los lados jiji XD-->
ul,li{list-style:none;}

<!--Contenedor de todo el sitio, le asignamos un tamaño al igual lo Centramos con margin:10px auto-->
#contenedor{width:600px; margin:10px auto;}

<!-- TabContenedor es donde se encontrara el TAP, no el Cuerpo si no el TODO, en cambio TabContenido es el contendor del Contenido mostrado por cada encabezado-->
#tab_contenedor{padding:8px 8px; width:300px; background:#097793; border:1px solid #000000;}
#tab_contenido{padding:5px; background:#FFFFFF; border:1px solid #04667f;}

<!--El Encabezado del TAB, se mostrara en Linea (display:inline)-->
ul.titulos{margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }
ul.titulos li{display:inline;}

<!--Cada enlace del encabezado, se convertirá en Mayusculas, importante darle un Borde, para que se note que no esta activo, al igual que el Padding-->

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

<!--Aquí los Enlaces del Encabezado, lo que le da la gracia a que parezca TAB, es el border cambia a blanco en su parte de abajo, asi le da la perspectiva de que esta unido al contenido-->

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;}

<!--Un poco de estilo a las listas del contenido.-->
.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;}

<!--SUPER IMPORTANTE que el contenido_2 y 3 se encuentren en NO display, ya que con el jQuery, haremos que aparezcan al dar click sobre cada enlace relacionado.-->

#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 >>

martes, 2 de diciembre de 2008

Videotutoriales de jQuery para principiantes

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:


viernes, 22 de agosto de 2008

Inyección SQL - Hackeando páginas web

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.

lunes, 21 de abril de 2008

Decodificador de archivos CSV

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