3 Pasos Para Instalar Plugins al Sublime Text 2 de Ubuntu

En estos últimos tiempos Sublime Text 2 se a catapultado como uno de los mejores editores de código, tanto por su versatilidad y su rapidez al momento de crear códigos en diferentes lenguajes web. Además de las tantas cualidades que presenta este editor, también es posible configurarlo a nuestros gustos y necesidades todo a través de la instalación de plugins.

Los plugins para Sublime Text 2 son pequeños módulos que pueden ser instalados para ayudarnos a simplificar nuestro código y nuestras actividades dentro el editor. Por lo tanto hoy aprenderemos a instalar los Plugins a Sublime Text 2.

Pero antes de poder instalar los plugins, debemos instalar primeramente el Package Control, el cual nos permite gestionar e instalar los innumerables plugins que existen en la actualidad, para ello existen dos métodos, el sencillo y el manual, la forma sencilla por lo general se aplica a entornos Windows y Mac, mientras el modo manual está enfocado a usuarios de entornos Linux y como nosotros usamos Ubuntu utilizaremos este modo.

Paso 1.

Nos dirigimos al sitio oficial de Sublime para conseguir el paquete de instalación, el link es: https://sublime.wbond.net/installation.

En este sitio podemos ver que existen dos secciones, simple y manual, nosotros nos dirigimos al modo manual que está en la parte derecha de la web, luego descargamos el package control.

Paso 2.

Abrimos nuestro Sublime Text 2, nos dirigimos a:
- Preferences
-- Browse Packages

Nos mostrará diferentes paquetes, pero retrocedemos un nivel superior y nos dirigimos a la carpeta Installed Packages. Y dentro ella copiamos el zip que descargamos.

Y por último reiniciamos el Sublime Text 2.

Paso 3.

Después de reiniciar el editor nos dirigimos a:
- Preferences
-- Package Control

Ahora sí podemos instalar los plugins que queramos, como ejemplo instalaremos el plugin emmet (nos permite simplificar html5).

Dentro Package Control escribimos:
Install Package

Luego buscamos el plugin emmet para instalarlo.

Después de la instalación, debemos reiniciar sublime text 2.

Y podemos ver que ahora funciona el plugin de emmet, como ejemplo podemos crear un archivo html, donde escribimos:
html:5 ->(tab)

Y nos mostrará una estructura básica de html5.

 

Seguir leyendo»

Animación de Movimiento Con Html5 y Javascript

Esta animación de movimiento con HTML5 y JavaScript nos presenta a una esfera en movimiento tanto en sus ejes "X" y "Y". Esta animación es una pequeña alteración del código obtenido del vídeo tutorial de CodigoFacilito sobre animaciones básicas con HTML5 y JavaScript. Para mayor detalle se recomienda ver el vídeo original aquí.

Si se ha visto el vídeo completo se puede notar que la animación tiene un movimiento en el eje Y. Sin embargo en UrlGeek modificamos los movimientos para que sean en el eje X y Y. El resultado final lo podemos ver a continuación:

Tu navegador no soporta canvas

Código Fuente.
El código no está nada difícil de entender, para cualquier consulta no duden en comentar.
<html>
    <head>
        <title>Animacion</title>
        <meta charset="utf-8">
        <style>
            canvas{
                border:solid;
            }
        </style>
        <script>
            var velocidad=5;
            var direccionx=velocidad;
            var direcciony=velocidad;
            var iniciar=false;
            var x=50;
            var y=20;
            var r=15;
            var intervalo;
            var dirx=true;
            var diry=false;
            window.addEventListener('load',init);
            function init(){
                var canvas=document.getElementById('micanvas');
                var ctx=canvas.getContext('2d');

                ctx.fillStyle='rgb(200,0,0)';
                ctx.arc(x,y,r,0,7);
                ctx.fill();
                document.getElementById('boton').addEventListener('click',control);
                function control(){
                    if(iniciar){
                        this.value='Iniciar';
                        window.clearInterval(intervalo);
                        iniciar=false;
                    }else{
                        this.value='Detener';
                        intervalo=window.setInterval(function(){moveAndDraw(canvas,ctx);},32);
                        iniciar=true;
                    }
                }
            }
            function draw(canvas,ctx,x,y){
                canvas.width=canvas.width;
                ctx.fillStyle='rgb(200,0,0)';
                ctx.arc(x,y,r,0,7);
                ctx.fill();
            }
            function moveAndDraw(canvas,ctx){
                if(dirx){
                    x+=direccionx;
                    if(x>(canvas.width-20)){
                        direccionx=-velocidad;
                        dirx=false;
                        diry=true;   
                    }
                    if(x<20) {
                        direccionx=velocidad;
                        dirx=false;
                        diry=true;
                    }   
                }
                if(diry){
                    y+=direcciony;
                    if(y>(canvas.height-20)){
                        direcciony=-velocidad;
                        diry=false;
                        dirx=true;   
                    }
                    if(y<20) {
                        direcciony=velocidad;
                        diry=false;
                        dirx=true;
                    }                   
                }
                draw(canvas,ctx,x,y);
            }
        </script>
    </head>
    <body>
        <canvas id="micanvas">
            Tu navegador no soporta canvas
        </canvas>
        <input type="button" value="Iniciar" id="boton">
    </body>
</html>

Seguir leyendo»