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.

jueves, 30 de agosto de 2012

Eliminar barra administradora de Wordpress


Trabajando en una nueva plantilla para Wordpress me encontre con que la nueva versión de Wordpress contiene una barra funcional bastante funcional pero que interfiere en nuestra plantilla, por lo que investigando un poco lo unico que hay que hacer es abrir el header.php dentro de wp-content/template y en la primer linea de codigo agregar lo siguiente.

<?php
add_filter( 'show_admin_bar', '__return_false' ); ?>

Convertir archivo PSD a HTML

Esta vez vo a mostrar como convertir un archivo de photoshop a una plantilla html.

Por lo regular se usa Photoshop pero con esta tecnica podemos ir exportando las imagenes optimizadas para la web lo que nos permite ahorrarnos tiempo de optimización de gráficos.

En unos dias presentare el tercera parte del video.

Parte 3

Pendiente

Parte 2

Parte 1



lunes, 16 de julio de 2012

Aclarador de plasticos amarillentos [Retr0bright]


Retr0bright es una formula para aclarar lo amarillento de los plasticos que van acumulando durante el tiempo, es bastante util si quieres restaurar esos viejos gadgets y darles un mejor aspecto.

La formula es
  • 300ml de Peroxido de 40 Volumenes en Farmacias o tiendas de belleza. 
  • Oxy Clean o Vanish de venta en centros comerciales.
  • Glicerina de venta en farmacias.
  • Goma de Xanthan o Xataka de venta en tiendas especializadas de reposteria.
  • 1 dia de Sol completo o una lampara de rays UV.
En si existen 3 variantes de la formula puedes revisar en el siguiente wiki.

El metodo para su elaboración y como mesclar los ingredientes lo puedes ver en el siguiente video.


 

miércoles, 4 de julio de 2012

Montar un blog anticensura y antiataques DDOS


La tecnologia siempre va estar de nuestro lado cuando el autoritarismo y la censura se vuelven parte del sistema.

Para este tipo de acontecimientos es necesario montar un blog aprovechando las redes P2P que permitirán el libre flujo de la información evitando los ataques de denegación de servicio DDOS, la censura de los ISP y muchos otros beneficios al utilizar este gestor de contenido.

La aplicacion que se utiliza es Osiris SPS el cual es completamente anonimo y que puede ser configurando junto con TOR o cualquier VPN que permitira el completo anonimato y la libre circulación de la información.

Osiris SPS se puede instalarse en todos los sistemas operativos por lo que es la mejor para compartir información en internet de manera segura.

Nosotros lo hemos instalado en menos de 5 minutos en Backtrack 5 rc2.


Indígenas mexicanos inspirando hackers en el mundo




El ciberactivismo en Mexico podría parecer nuevo para los recién llegados a la www, mucha creerían que Anonymous es pionero en el ciberactivismo y la verdad es que no tanto, antes de existir anonymous, México ya inspiraba a muchos ciberactivistas y hackers en todo el mundo.

El 1º de Enero de 1994 nace el EZLN contra el Tratado de Libre Comercio.  Un ejercito de indigenas en México empieza a utilizar el internet para dar a conocer el mundo sus denuncias, empiezan a utilizar el correo electrónico creando un movimiento mundial zapatista contra el imperialismo, empiezan a utilizar la tecnología a su favor no importando el tamaño del enemigo y eso es lo que empieza a inspirar cientos de ciberactivistas en todo el mundo que utilizan las nuevas tecnologias en contra de los regímenes autoritarios y que muchos creerían intocables. En tiempos actuales me atreveria a comparar a Julian Assange con los indigenas mexicanos que lucharon contra los grandes capitales utilizando una computadora.

Después de la masacre de Acteal un grupo de hackers en Italia llamado Anonymous Digital Coalition deciden hackear las primeras paginas web en señal de rechazo al gobierno mexicano, como en aquellos tiempo no existian las paginas web del gobiernos, decidieron hackear los bancos  como la Bolsa Mexicana de Valores, el extinto Banco Bital, Bancomer, el Banco de México y Banamex. aun podemos leer esos correos en los que coordinar sus ataques. El ciberactivismo en México lleva mas de 18 años y aun se siguen difundiendo el mensaje de los hermanos indígenas.

En 1848 Henry David Thoreau, escritor estadunidense, publica un ensayo de desobediencia civil por que se negaba a pagar mas impuestos y se nego debido a que esos impuestos servían para financiar la guerra que Texas contra México. El ensayo de desobediencia civil es parte del ciberactivismo y como uno puede darse cuenta México esta muy cerca de todo el movimiento Hacktivista. 

Si te interesa la historia completa te recomiendo. Ensayo: Internet y Zapatismo

martes, 3 de julio de 2012

Tutorial Basico Cain & Abel

Esta vez vamos a configurar el Cain & Abel para hacer ARP Spoffing y empezar a captar las contraseñas que viajan en la red (Ethernet). 
Lo primero que hay que hacer es descargar WinPcap e instalarlo, una vez instalado hay que ejecutarlo y desactivar el firewall de Windows.




Ahora abrimos Cain & Abel y hacer clic en el icono de Star Sniffing    y nos posicionamos en la pestaña hosts es aqui donde hay que escanear la red para ver los equipos conectados, una vez escaneada empezar a aparecer las ips de los equipos conectados, si hacemos clic derecho sobre esas IPs y seleccionamos Resolve Host Name podemos ver el nombre del equipo que deseamos sniffear.


Algo si debería de verse despues de haber terminado el escaneo, como podemos ver en la imagen aparecen 2 IPs de equipos conectados 192.168.1.102 y 192.168.1.109 y 2 módem conectados 192.168.1.253 y 192.168.1.254. nuestro objetivo va centrarse sobre el Host Name CITY-PC con la ip 192.168.1.102.


Ahora vamos a hacer el ataque ARP Spoofing,  seleccionamos la pestaña inferior que dice ARP, hacemos clic en el icono de Add y se abrirá una ventana secundaria New ARP Poison Routing aquí seleccionamos como primera opción el módem 192.168.1.253 y en la siguiente opcion  CITY-PC con la ip 192.168.1.102.



Ya que tenemos listo esto hacemos clic en el icono Start APR    y empieza la captura de contraseñas, para mostrarlas vamos a la pestaña de passwords aquí irán apareciendo todas las contraseñas capturadas algunas podrán estar encriptadas pero estos se tratara en otro tutorial