domingo, 7 de agosto de 2016

Integrar Mailchimp con Paypal

La idea es suscribir al cliente en nuestra base de datos despues de haber realizado la compra.


Lo primero que hay que hacer es acceder a mailchimp y crear una nueva lista, lo siguiente es acceder a  Usuario > Account  y en la pestaña de Integrations


Buscamos la opcion Paypal y seleccionamos la lista donde guardaremos los datos de los clientes, copiamos la URL Notification para integrarla a paypal.

Lo siguiente es acceder a la cuenta de Paypal y hacer clic en Perfil > Perfil y Configuración, Seguido seleccionamos Mis Herramientas de venta, buscamos la opción Notificación de Pago Instantánea (IPN) actualizar > Editar configuración y pegamos la URL Notification de mailchimp.





lunes, 16 de junio de 2014

Aplicaciones de productividad

He estado probando varias aplicaciones para mejorar mi productividad y ahora quiero compartir mi experiencia con este software.

Alfred App 

Esta es la mejor herramienta que he probado me permite hacer búsquedas dentro de mi equipo como el finder o buscar en google, youtube o en cualquier web, tambien cuenta con un clipboard que con un par de teclas me permiten agregar información muy rapido. Otro detalle que lo hace especial es la creación de workflows y eso me permite crear proyectos muy facilmente, con un workflow puedo crear un directorio con varios archivos necesarios para iniciar un nuevo projecto y prácticamente iniciar en pocos segundos lo que antes podría tardar varios minutos o hasta horas. Ya en otra post recomendare algunos workflows para usar con Alfred App.

Sublime Text 2 + Emmet 

Maquetar un sitio puede ser tardado pero gracias a Sublime Text 2 y Emmet reduces el tiempo de producción. Sublime tiene muchas ventajas sobre otros IDs lo cual ayuda a programar o maquetar en muy poco tiempo la integración de emmet hace que con solo escribir algunas instrucciones podemos crear toda la estructura de una web en segundos.

HAML & SASS
Preprocesadores de HTML y CSS, maqueta cualquier PSD en tiempo record

domingo, 27 de enero de 2013

Generar Credenciales con TCPDF

Administrador Escolar DWP v2.0
Estoy trabajando en un administrador escolar el cual permitira generar credenciales automaticamente para ello utilice la libreria TCPDF de PHP con el cual despues de varias horas de estar haciendo pruebas por fin encontramos la mejor forma de hacerlo.

El codigo seria

//P = Horizontal L = Vertical
$pdf = new TCPDF('P', 'mm', array(51.5,83));
//Ocultar Cabecera y Pie
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);

//Generar Pagina
$pdf->AddPage();


El array array(51.5,83) contiene la medida de impresión de una tarjeta PVC para credenciales

martes, 4 de diciembre de 2012

Configuración Adobe Tutorial Player

Adobe Tutorial Player Requiere Aplicacion para IOS y Photoshop CS5 12.0.4
Lo primero que hay que saber es que version de Photoshop estamos usando pra eso nos vamos a Photoshop / About Photoshop si tienes la versión 12.0 es necesario actualizar a 12.0.4 para eso descargamos la actualization en la pagina de adobe.



Lo siguiente es habilitar las conexiones remotas en Photoshop, para eso abrimos Photoshop y seleccionamos el menu Edit/Remote Connections. En el siguiente panel ponemos una contraseña y activamos el checkbox Enable Remote Connections.


En este mismo panel muestra la direccion IP del Hostname que es la que introduciremos en Adobe Tutorial Player.
Abrimos Adobe Tutorial Player y hacemo clic en el Icono de Photoshop y clic en New. Ponemos la IP del hostname asi como la contraseña.



Si todo salio bien debe de iluminarse el icono de Photoshop



Lo siguiente es abrir el tutorial que se quiere realizar y en el paso 1 hacer clic en el boton Show Me  esto abrira en Photoshop los archivos para realizar el tutorial. y en cada paso que realices, Tutorial Player saltara al siguiente paso o realizara los pasos por ti.

Lo mejor de todos los tutoriales es que te ayudan a crear imagenes no destructivas en Photoshop que  por lo regular es mucho mas dificil acostubrarse a estos nuevos metodos pero ayudan mucho a la hora de editar la imagen en cualquier momento sin miedo a perder el archivo original.


miércoles, 10 de octubre de 2012

Snippets Zen-Codding & Bootstrap

No deja de sorprenderme SublimeText pero al integrarlo al framework de twitter  Bootstrap puedes armar todo el html en segundos, aqui les dejo algunas lineas para crear estas estructuras.

Menu Navegación

div.navbar>div.navbar-inner>div.container>div.nav-collapse>ul.nav>li*8>a{links $}[href="#"]

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <div class="nav-collapse">
        <ul class="nav">
          <li><a href="">links 1</a></li>
          <li><a href="">links 2</a></li>
          <li><a href="">links 3</a></li>
          <li><a href="">links 4</a></li>
          <li><a href="">links 5</a></li>
          <li><a href="">links 6</a></li>
          <li><a href="">links 7</a></li>
          <li><a href="">links 8</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Contenedor

div#container>div.row-fluid>div.span8+div.span4

<div id="container">
  <div class="row-fluid">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
</div>

Carrusel

div#myCarousel.carousel.slide>div.carousel-inner>div.item.active+div.item*2(a.carousel-control.left[href=#myCarousel][data-slide=prev]{&lsaquo;}+a.carousel-control.right[href=#myCarousel][data-slide=next]{&rsaquo;})

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active"></div>
    <div class="item"></div>
    <div class="item"></div>
    <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lsaquo;</a>
    <a href="#myCarousel" class="carousel-control right" data-slide="next">&rsaquo;</a>
  </div>
</div>

sábado, 1 de septiembre de 2012

Una Brujeria llamada Sublime Text



Para un mortal como yo, ver trabajar a Sublime Text 2 y darse cuenta de lo maravilloso que puede ser escribir varias lineas de codigo  con solo una linea de texto yo lo calificaria como brujeria =).

Jugando un poco pude generar un esquelo de una pagina web con esta simple linea de texto
html:5>div.row-fluid>h1#logo{titulo}+div.row>h2{titulo 2}+ul#menu_principal>li*5>a[href="link.html"]{seccion $}
a lo que sublime text me lo convirtio en

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<title>Titulo Pagina</title>
</head>
<body>
<div class="row-fluid">
<h1 id="logo">titulo</h1>
<div class="row">
<h2>titulo 2</h2>
<ul id="menu_principal">
<li><a href="link.html">seccion 1</a></li>
<li><a href="link.html">seccion 2</a></li>
<li><a href="link.html">seccion 3</a></li>
<li><a href="link.html">seccion 4</a></li>
<li><a href="link.html">seccion 5</a></li>
</ul>
</div>
</div>
</body>

</html>

Cualquiera que escribe codigo sabe que esto es lo mejor que pueda existir,  pero realmente quien hace la magia es Zen Coding por que tambien es posible llevar esas funcionalidades a casi cualquier editor de codigo HTML, por ejemplo yo instale una extension para Dreamweaver que uno se puede descargar desde la sección de descargas de Zen Coding, al instalarlo en Dreamweaver es perfectamente igual hacerlo funcionar pero no existe una edición multiple como en Sublime Text 2.

Otra de las cosas mas maravillosas que encuentro en sublime text son los snippets que podemos integrar   , pero la cosa no para ahi si por ejemplo combinas Sublime Text 2 + Snippets + Bootstrap puedes armar un sitio web practicamente en minutos que por lo regular te tomaria un par de horas. para eso hay que descargar Sublime-twitter-bootstrap-snippets que son varios (no todos) los componentes de bootstrap.

Para quien no esta familiarizado con Bootstrap tendria que armar un sitio utilizando toda la documentacion, pero con Sublime text con solo escribir tbgrid:4 obtendriamos una grilla de 4 columnas

<div class="row">
<div class="span3">Column 1</div>
<div class="span3">Column 2</div>
<div class="span3">Column 3</div>
</div>
Otro ejemplo es utilizando el widget de acordion de bootstap bastaria escribir tbaccordion para generar el siguiente codigo

 <div class="accordion" id="accordion"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> Collapsible Group Item #3 </a> </div> <div id="collapseThree" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>
 Esto es apenas de un dia de uso de Sublime Text 2 espero seguir encontrando nuevas funcionalidades de esta maravillosa aplicación y en unos dias hare un screencast esperando sea de utilidad.


viernes, 31 de agosto de 2012

URLs Amigables



Las URLs bien pensadas hacen que un sitio web sea funcional, útil y amigable. A la hora de desarrollar una pagina web, hacer paginas web requiere pensar en el mas minimo detalle cuando hacemos una pagina web con 4 enlaces puede que no exista ningún dificultad a la hora de pensar como organizar los contenidos.

Supongamos que administramos un sitio web de algun municipio donde es importante llevar un control de los bandos municipales o el ultimo reglamento de transito. Por lo regular un administrador del sitio pensara que con hacer una simple liga al ultimo bando municipal bastara con escribir
www.paginaweb.com/bandomunicipal.html a simple vista parece ser una URL amigable pero al mismo tiempo puede generar dificultades. como por ejemplo si yo quiero buscar el bando municipal de hace 4 años me sera casi imposible por que no guarda un orden logico y se pierde la información, supongamos que este desarrollador web se le ocurre crear una carpeta dentro del sitio que se llame /Bando-Municipal/ y ahi ir agregando los últimos bandos de entrada parece no haber ningún problema pero el buscador tiene almacenado que quien contiene los datos del bando municipal es el archivo. bandomunicipal.html y si el archivo ya no existe empezaran los errores 404 devolviendo errores de búsqueda.

Es por eso, que es muy importante desde el principio del desarrollo de una web tener presente como organizar los contenidos para hacerlos mas accesibles tanto para los usuarios como para los motores de búsqueda.

Desde el principio es importante como ir almacenando la información para que no se pierda y pueda ser aun mas facil su edición si así se requiriera.
www/
-- /Bando-Municipal/ index.html
-- -- /2012/ index.html
                  articulo15.html
                  articulo12-html
                  bando2012.pdf
-- -- /2006/ index.html
                  articulo01.html
                  articulo02.html
                  bando2013.pdf
-- -- /2002/ index.html

La URL ahora es amigable para el usuario para compartirlo si asi lo require o para acceder a el de una manera entendible y facil de recordar. pasa a ser amigable para los buscadores ya que el buscador sabra lo que cada carpeta contiene por lo que hacer una mapa del sitio sera mucho mas facil, aparte de que ayuda al administrador del sitio para encontrar la información mas rapido para su edición o revision.

Si sus urls son
www.municipio.com/index.php?cat=1232323&titulo=bandoMuniciapal&año=2012 es una URL que no ayuda y que puede ser poco accesible. Con Apache y htaccess se pueden crear URL amigables.
Si su sitio web esta en flash y algún usuario desea compartir algun enlace dentro del sitio, se encontrara que solo existe la URL del dominio. [Flash sigue sin funcionar, aunque hay técnicas para evitar esto prefiero el modo natural que el modo forzado lleno de hacks que terminan por hacer trabajar de mas al desarrollador] el ejemplo mas claro es www.tlalnepantla.gob.mx.
Si tus URLs están dentro de un frame o iframe tambien esta mal por que conoce la URL real para poder compartirlo via correo, via redes sociales.

La mejor forma de organizar la información es creando un sistema card sorting con lo que podrás mejorar tus contenidos de una manera mas facil y le haras la vida mas facil a los usuarios de tu sitio como a los robots de búsqueda.

Si te interesa te recomiendo leer. Las URI guay no cambian.