viernes, 2 de noviembre de 2012

Cristalab

Cristalab

Instala Themes y Plugins en Notepad++

Posted: 02 Nov 2012 08:36 AM PDT

Notepad++ es un buen editor de código pero si le instalamos los plugins adecuados puede ser aún mejor. En este tutorial te mostraré cómo cambiar el fondo de color mediante un template en XML y qué plugins de Notepad++ debes tener instalados para trabajar lo más cómodo posible.

Antes que nada descarga la ultima versión desde el sitio oficial



Cambiar idioma de Notepad++


Si tu notepad++ está en Inglés y lo quieres en español, puedes cambiar el idioma dirigiéndote a Settings->Preferences en la pestaña "General" veras el recuadro de "Location" donde deberás seleccionar Español y hacer clic en cerrar.


Cambiar color de fondo


Al iniciar el programa se ve un simple editor de fondo blanco y letras oscuras. Eso cansa la vista, así que acá te dejo un Theme para Notepad++ modificado por mí con un fondo oscuro y letras bien definidas

Para activarlo debes pegar el archivo en C:\Archivos de programas\Notepad++\themes y seguir los siguientes pasos:





Ahora a mirar el cambio:

Antes


Después


Plugins recomendados para Notepad++


Bien, ahora vamos a Instalar un par de Plugins para desarrollar mas rápido. Nos dirigimos a Plugins->Plugin Manager->Show plugin Manager y esperamos a que cargue la lista de plugins y vamos a buscar y marcar a "Explorer" y "Zend Coding - Python" que lo verán casi al final de la lista y le dan a Install.

Una vez hecho eso, se instalarán los plugins y pedirá reiniciar Notepad++. Lo cierran y luego lo abren...

Activar los plugins instalados

Explorer

Presionamos Ctrl+Alt+Shift+E y podrán visualizar un explorador de archivos al lado izquierdo de la pantalla... eso nos facilitará mucho la vida y explorar nuestros proyectos directamente desde ahí sin necesidad de una ventana extra del Sistema Operativo.



Zen Coding

Ahora vemos lo que hace el Zend Coding.

Si sabes HTML, esto te gustará. En algún archivo del tipo HTML, ingresa esto .caja y presiona Ctrl+Alt+Enter y mira la magia. Zen Coding completa la estructura de las etiquetas HTML, y eso no es todo, muchos dirán que Sublime Text ya tiene eso... pero que yo sepa en Sublime Text sólo puede usar Zend Coding en archivos de tipo HTML. En cambio con Notepad++ puedes hacerlo en un archivo con cualquier extensión.

También podrías probar esto, y presionar Ctrl+Alt+Enter y ver la magia.

Codigo :

html[lang=es]>(head>title+meta[charset=utf-8]+meta[name=robots content=all])+body


o lo siguiente:

Codigo :

ul>li*4


Pueden ver mas aquí.

Otros trucos de Notepad++


Vieron que en PHP si usas DIV's en los echo no se marcan las etiquetas en comienzo y fin, muchos se ponen a contar DIVS para saber si los cerraron bien o les falta uno. Eso se soluciona facil.

Se dirigen a Configuración->Preferencias luego a la pestaña "Otros Ajustes" y en el Recuadro "Marcar etiquetas coincidentes" marcan las 3 opciones y le dan a Cerrar.

Ahora si revisan en sus PHP's, los divs se marcarán donde comienzan y terminan.

Si no recuerdas cómo escribir algo, presiona Ctrl+Barra espaciadora y te muestra un cuadro con Coincidencias a lo que estas escribiendo.


Espero les sea útil. Saludos...

Enviar comentario

Cómo escalar y redimensionar con proporción un Paper SVG de Raphael.js

Posted: 29 Oct 2012 02:32 AM PDT

Ayer mismo culminó el curso de HTML5 de mejorando.la impartido por @freddier y @cvander en Madrid. Entre los muchos contenidos que se impartieron, se enseñaron los principios básicos de cómo utilizar la útil librería de Javascript Raphaël de la cual ya se ha comentado anteriormente por acá.

Con esta librería podemos dibujar y manipular elementos vectoriales en el navegador utilizando para ello SVG, con la asombrosa característica de que si se está utilizando Internet Explorer 6+ (que no cuenta con soporte para SVG hasta la versión 9) entonces los gráficos se representarán utilizando VML.

En el curso surgió la duda de cómo lograr escalar un Paper de Raphaël de manera correcta. Aunque existe una solución para lograr esto, a mí en particular me ha dado problemas de no escalar bien los elementos en algunas aplicaciones web. Como lo prometido es deuda y les prometí a los participantes del curso que iba a publicar un pequeño tutorial de cómo lograr esto, aquí cumplo mi promesa.

En realidad no se necesita una función muy compleja para lograr nuestro objetivo, sólo con utilizar el atributo viewBox del SVG se puede lograr de manera sencilla. Este atributo se utiliza para hacer un recorte en los gráficos SVG utilizando para ello unas coordenadas iniciales del recorte y el ancho y el alto del mismo.

Utilizar el atributo viewBox directamente en un SVG


La manera de hacerlo directamente en el código del encabezado del SVG es la siguiente:

Código :

  <svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">  ...  ...  ...  </svg>
En este caso, al tener el documento un viewBox con su mismo tamaño, se escalará proporcionalmente cuando se varíen sus dimensiones sin ocultar ninguna parte del gráfico. Esto mismo es lo que vamos a utilizar en el Paper utilizando un método propio de Raphaël: setViewBox.

Asignar el atributo viewBox al SVG usando Raphaël


La forma de utilizar el método setViewBox es la siguiente:

Código :

  Paper.setViewBox(x, y, w, h, fit);
Donde x, y, w, h corresponden respectivamente a las coordenadas x e y de inicio y al ancho y alto del recorte. El parámetro fit determinará si se desea que al gráfico se muestre completamente dentro del borde del recorte (en caso de ser true). Utilizando este método ya nuestro SVG se escalará manteniendo sus proporciones cuando se varíe de tamaño el objeto Paper mediante el método setSize.

Utilización opcional del atributo preserveAspectRatio


También existe un atributo que permite que el gráfico SVG se escale comportándose de manera diferente, nos referimos a preserveAspectRatio. Este atributo puede utilizarse para que el gráfico mantenga sus proporciones o se escale sin mantener su relación de aspecto.

Si este atributo tiene valor none el gráfico no mantendrá su relación de aspecto, los demás valores mantendrán su proporción pero variarán la posición del mismo con respecto al borde definido por el tamaño del SVG. Ponemos algunos ejemplos de valores que puede tomar preserveAspectRatio:


1 - xMidYMin. 2 - xMinYMax. 3 - xMaxYMin

Notar que estos valores están compuestos por la posición que deben ocupar las x y las y del gráfico, los cuales pueden ser Min (Mínimo), Mid (Medio) y Max (Máximo).

Para poder añadir este atributo al SVG debemos acceder al objeto SVGSVGElement directamente, para hacerlo accederemos a la propiedad canvas del Paper.

Código :

  paper.canvas.setAttribute("preserveAspectRatio", "xMaxYMin");

[nota:42e4aa27bb]Cada vez que se llame al método setSize del objeto Paper, el atributo preserveAspectRatio tomará su valor por defecto: xMinYMin meet o xMinYMin dependiendo de si el parámetro fit del método setViewBox se sitúa en true o false respectivamente, por lo tanto cada vez que se llame a dicho método, se debe volver a añadir el atributo preserveAspectRatio en el valor deseado.[/nota:42e4aa27bb]

Ejemplo práctico


El poder variar las dimensiones del Paper a nuestra conveniencia variando el tamaño de todos los elementos dibujados en él, nos será muy útil si se desea implementar Responsive Design utilizando gráficos vectoriales. Vamos a ver un pequeño ejemplo donde se le dará a un Paper de Raphaël las dimensiones de un div contenedor y los gráficos contenidos en el mismo se ajustarán a las dimensiones de dicho div.

Fichero CSS

[css:1:42e4aa27bb]body, html{
height: 100%;
width: 100%;
}

body{
margin: 0;
padding: 0;
}

#raphaelContainer {
height: 100%;
width: 100%;
}[/css:1:42e4aa27bb]

Fichero HTML

Código :

<!DOCTYPE HTML>  <html>  <head>  <meta charset="UTF-8">  <title>Responsive Raphael Example</title>  <link href="styles/styles.css" rel="stylesheet" type="text/css">  <script type="text/javascript" src="scripts/leaves.js"></script>  <script type="text/javascript" src="scripts/raphael-min.js"></script>  <script type="text/javascript">          var drawWidth = 100;     var drawHeight = 100;     var paper;          //---Al estar listo el DOM     window.addEventListener("load", init);          //---Inicizalizar la aplicación     function init(){                //---Crear el canvas de Rapahel        paper = Raphael("raphaelContainer", drawWidth, drawHeight);                //---Aplicar el viewBox (esta línea es la que hace que el gráfico se escale proporcionalmente)        if(Raphael.svg) paper.setViewBox(0, 0, drawWidth, drawHeight, true);                //---Dibujar todos los elementos        paper.add(leaves);                //---Al iniciar variar el tamaño        setSize();             }          //---Cambiar las dimensiones del canvas al máximo tamaño     function setSize(){                //---Dimensiones del container        var width = document.getElementById("raphaelContainer").offsetWidth;        var height = document.getElementById("raphaelContainer").offsetHeight;                paper.setSize(width, height);                //---Esta línea es la que varía la propiedad preserveAspectRatio        //paper.canvas.setAttribute("preserveAspectRatio", "xMedYMin");             }          //---Al variar el tamaño de la ventana     window.addEventListener("resize", setSize);    </script>  </head>    <body>       <div id="raphaelContainer">         </div>    </body>  </html>
Descargar los ficheros usados en el tutorial

Un saludo y ojalá les sirva de ayuda este pequeño tutorial.

Enviar comentario

Edición no destructiva en Photoshop

Posted: 02 Oct 2012 03:37 AM PDT

Aprenderemos una de las características más interesantes que nos ofrece Photoshop, cuando hablamos de retoque y que nos permitirá aplicar correcciones sobre nuestras imágenes, sin perder la posibilidad de deshacer estados de edición anteriores, además de ofrecernos herramientas para ajustar procesos que ya habíamos completado, sin que afecten a la pérdida de los posteriores que hayamos aplicado, usando para ello el trabajo con las capas de ajuste y los objetos inteligentes en Photoshop.



Saludos.

Enviar comentario

Coloreado de dibujos en Flash

Posted: 09 Aug 2009 05:00 PM PDT

En este tutorial de coloreado digital, veremos el proceso de entintado de personajes y dibujos usando Adobe Flash como herramienta.
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)