El e-commerce, (ya casi) pan nuestro de cada día…

Home Page // Archive by category "Programación Web"

Archive for the ‘Programación Web’ Category

posted by | on Programación Web | No comments

Las ventas online sigue creciendo: en lo que llevamos de 2013 ya se ha experimentado un incremento del 13% respecto al mismo periodo de 2012. Cada vez encontramos más motivos de peso para fundamentar la importancia que tiene a día de hoy contar con presencia en Internet, tanto con paginas web originales como abriéndonos a la Red como canal de ventas.  Si lo primero ya se va consiguiendo, y una gran parte del tejido empresarial de nuestro país tiene su propio site, el segundo aspecto sigue aún sin terminar de convencer a muchos empresarios.

tiendas online

A los datos nos remitimos: en España se ha alcanzado en el primer trimestre de 2013 un volumen de negocio de 2.882 millones de euros. Es decir, ¡un 15,1% más que en el mismo periodo de 2012! Son datos del informe de la Comisión de Mercado de Telecomunicaciones, CMT, que apuntan al sector de viajes y turismo, seguido del textil y la venta de entradas, como los que más partido están sacando al e-commerce. El primero factura hasta el 14% del volumen total del negocio digital, seguido del textil con un 3,4% y la venta de entradas con un 3,7%.

Si bien en su mayoría las transacciones comerciales se realizan dentro del país, destaca cómo está aumentando el número de operaciones con el extranjero: las compras al exterior con destino España han crecido un 34,1%. Esto demuestra que se le está perdiendo totalmente el miedo a hacer operaciones en Internet, ya que no solo estamos comprando más, sino que además nos ‘atrevemos’ a comprar a empresas radicadas fuera del país.
Leer más…

posted by | on Programación Web | 1 comment

DIGITAL CAMERAEste post está indicado para todos aquellos diseñadores ” de toda la vida” que se van adentrando poco a poco en este infernal mundo de la programación web. Todos al principio nos aventuramos en el html simple y llano, dominamos los estilos css, los divs, el posicionamiento, bla, bla, bla… pero llega siempre un momento en el que el cliente te dice “pues mira, en la página de contacto ¿porque no me pones un formulario para que me manden a mi mail los comentarios o sugerencias de mis visitantes?” Y es entonces cuando dices (ag! con lo fácil que es poner un textito con el mail y que la gente lo mande desde su programa de correo..!). Pues nada, no preocuparse que aquí os dejo una solución perfecta y fácil en php. En primer lugar, claro está, vuestro alojamiento tiene que estar configurado y preparado para soportar php, no vale un hosting simple y barato que soporte html sólo. Dicho esto os curráis el documento en vuestro editor web, o sea, la página de contacto y esta se llamará “contacto.php” (luego explico el porqué) aquí va el código en php con la función POST VARS de envío:

<?

if (!$HTTP_POST_VARS){

?>

</p>

</p>

<div id=”subForm”>

<form action=”contacto.php” method=post>

<p>

<label for=”name” class=”label”>Nombre</label>

<input type=text name=”nombre” size=25 />

 

<p>

<label for=”name” class=”label”>E-Mail</label>

<input type=text name=”email” size=25 />

 

<p>

<label for=”name” class=”label”>Confirma e-mail</label>

<input type=text name=”confirmaemail” size=25>

<br>

<p>

<label for=”name”>Escribe tu mensaje</label>

<textarea name=”coment” cols=32 rows=6></textarea>

<br>

<div id=”form_button”><input type=submit value=”Enviar”></div>

</form>

</div>

<?

}else{

//Estoy recibiendo el formulario, compongo el cuerpo

$cuerpo = “Formulario enviado\n”;

$cuerpo .= “Nombre: ” . $HTTP_POST_VARS["nombre"] . “\n”;

$cuerpo .= “Email: ” . $HTTP_POST_VARS["email"] . “\n”;

$cuerpo .= “Empresa: ” . $HTTP_POST_VARS["confirmaemail"] . “\n”;

$cuerpo .= “Comentarios: ” . $HTTP_POST_VARS["coment"] . “\n”;

 

//mando el correo…

mail(“aqui_ponemos_el_mail_que_queramos.es”,”Formulario recibido desde web”,$cuerpo);

 

//aqui aparece la respuesta agraceciendo el envio

echo “<p>Gracias por rellenar el formulario. Nos pondremos en contacto con Usted en muy breve espacio de tiempo.</p>”;

}

?>

Para el formulario que está en un div ID llamado “subform” le aplico el siguiente CSS (cada uno que le ponga el que quiera, pero aqui dejo el más simple, para salir del tajo)

#subForm {

font-size:0.8em;

color:#333333;

border-top-width: 1px;

border-top-style: double;

border-top-color: #967C6E;

width: 600px;

margin-left: 100px;

margin-bottom: 50px;

float: left;

}

 

#subForm .label {

float:left;

width:220px;

}

#form_button {

width: 70px;

margin-left: 225px;

}

 

#subForm p {

font-size:1.2em;

color:#000000;

}

¿y como va esto?, pues bien, colocáis el código php allí donde corresponda en vuestro diseño y ya está, así de sencillo. ¿ Y porqué se llama el archivo “contacto.php”? Pues porque está programado así

<form action=”contacto.php” method=post>

La acción del formulario llama al archivo “contacto.php”. Si por cualquier cosa vuestro archivo se llama de otra forma por ejemplo “contactar.php” pues el se cambia al principio tal que así.

<form action=”contactar.php” method=post>

Muy sencillito y efectivo. Aquí podéis verlo en funcionamiento.

 

posted by | on Programación Web | No comments

Entre las muchas páginas que existen sobre recursos web, me encontré con una muy útil, HTMLDRIVE (www.htmldrive.net). En esta página encontraréis un mogollón de recursos, como menús, slideshows, efectos de imagen, acordeones, formularios, etc. Todos ellos muy útiles para vuestros proyectos y trabajos. Vienen muy bien explicados, con su código en la misma página y con enlaces de descarga de los archivos de ejemplo. Pero vayamos al grano, a lo que realmente nos interesa: Aquí os muestro un fantástico menú con animación JQuery y CSS3. Puedes verlo en acción en el siguiente enlace: clicka aquí.

post jesus personalizar web

Como veréis, este menú funciona de manera horizontal y su código de javaScript está programado así para ello. Pero… ¿ y si lo queremos usar en vertical? Pues, muy sencillo ¡VOILÁ! Aquí os dejo el código necesario para ello. Es una adaptación que hemos hecho en uno de nuestros proyectos web y, como tal, algunos items han sido modificados -es el caso del tamaño de las imágenes, que nos parecían muy grandes- y en CSS hemos quitado también el tercer submenú. En definiva, el mismo menú pero en vertical. Por cierto, -y si no se hace, no se ve en vertical- en el CSS, a la etiqueta “li” hay que quitarle el “float:left;” y dejarlo así, o borrar el float:

ul.sdt_menu li{

float:none     ;

width:170px;

height:85px;

position:relative;

cursor:pointer;

}

Aqui va el JavaScript :

<!– The JavaScript –>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

<script type=”text/javascript” src=”jquery.easing.1.3.js”></script>

<script type=”text/javascript”>

$(function() {

/**

* for each menu element, on mouseenter,

* we enlarge the image, and show both sdt_active span and

* sdt_wrap span. If the element has a sub menu (sdt_box),

* then we slide it – if the element is the last one in the menu

* we slide it to the left, otherwise to the right

*/

$(‘#sdt_menu > li’).bind(‘mouseenter’,function(){

var $elem = $(this);

$elem.find(‘img’)

.stop(true)

.animate({

‘width’:’150px’,

‘height’:’110px’,

‘left’:’170px’

},400,’easeOutBack’)

.andSelf()

.find(‘.sdt_wrap’)

.stop(true)

.animate({‘top’:’8px’},500,’easeOutBack’)

.andSelf()

.find(‘.sdt_active’)

.stop(true)

.animate({‘height’:’0px’},300,function(){

var $sub_menu = $elem.find(‘.sdt_box’);

if($sub_menu.length){

var left = ’170px’;

if($elem.parent().children().length == $elem.index()+1)

left = ’170px’;

$sub_menu.show().animate({‘left’:left},200);

}

});

}).bind(‘mouseleave’,function(){

var $elem = $(this);

var $sub_menu = $elem.find(‘.sdt_box’);

if($sub_menu.length)

$sub_menu.hide().css(‘left’,’0px’);

 

$elem.find(‘.sdt_active’)

.stop(true)

.animate({‘height’:’0px’},300)

.andSelf().find(‘img’)

.stop(true)

.animate({

‘width’:’0px’,

‘height’:’0px’,

‘left’:’170px’},400)

.andSelf()

.find(‘.sdt_wrap’)

.stop(true)

.animate({‘top’:’3px’},500);

});

});

</script>

Esperamos que os sirva de ayuda y que lo disfrutéis.

 

posted by | on Programación Web | No comments

Pues sí, Twitter hasta en la sopa. Si tenemos website propia o nos lo pide un cliente podemos añadir más Twitter todavía, por si alguien no se ha enterado aún de los que decimos en apenas 140 caracteres (por cierto característica genial si eres futbolista). Implementar un gadget de Twitter en nuestra web es relativamente fácil si accedemos a los extras de la red social, y en la que tenemos varios gadgets a elegir.

El problema surge cuando ves que el resultado no pega mucho con tu estilizado diseño, de repente se muestra tu avatar ahí, con la cara de huevo o el que sea, seguido de los tweets y un cierre con el logo. Es ahí cuando dices ¡horror!, quiero quitar todo y que sólo me muestre los tweets!! No hay problem, aquí os dejo un muy interesante enlace en el que os explica como hacerlo con jQuery y Php. Nosotros para nuestro cliente Babiano Abogados hemos utilizado la opción en jQuery que está muy bien y tiene unos niveles de personalización muy interesantes tales como el color de los enlaces, quitar el avatar , diferenciar los tweets por columnas, etc… de esta forma y dándole diseño al DivClass “tweet”, podemos hacer que este pajarillo se camufle a nuestro gusto y no de un sonoro “cante” en nuestro genial diseño.

Pincha aquí para ver como quedan los tweets sin avatar, sin logo y con un diseño acorde a la web.