Escribir de forma rapida con las abreviaturas de emmet

Hoy veremos como escribir nuestro código de forma rápida utilizando las abreviaturas que nos permite utilizar el plugin emmet.

Si eres de las personas que trabajan utilizando HTML o CSS sabrás que crear estructuras como un titulo o un cuerpo es monótono pues las estructuras son casi siempre parecidas, entonces para evitar estar reescribiendo lo mismo emmet viene a nuestra ayuda, no alargarmos mas este tutorial  empezamos.

Escribir de forma rápida con las abreviaturas de emmet

Primero debes tener instalado el plugin emmet, si aun no lo tienes instalado te recomiendo que revises cualquiera de los siguientes links, te prometo que son cortos y directo al grano

1.- Como instalar emmet (zend coding)
2.- Como instalar plugin en sublime text

NOTA IMPORTANTE:
Antes de empezar quiero aclarar que los nuevo no pueden usar emmet porque cometen un error y es que para que funciones primero debes guardar tu archivo con su respectiva extensión por ejemplo prueba.html luego de eso puedes utilizarla.

html5
Para escribir una estructura de html solo basta con escribir html5 y luego presionas la tecla tab otra variante es escribiendo html:5 + tab puedes hacer tus pruebas.

 article>h2+p  

Ahora vamos suponer que necesitamos utilizar la etiqueta <article> y dentro necesitamos insertar la etiqueta <h2> y <p> para realizar esta acción usaremos article>h2+p   luego seleccionamos tab

El símbolo >, quiere decir dentro de esta etiqueta y el símbolo + es una separación.

nav>a*6
Ahora supongamos que necesitamos crear un menú de navegación, si recuerdan el menú de navegación tiene varias referencia ya sea para llamar imagenes u elementos entonces haremos lo siguiente:

Ahora supongamos que vamos a trabajar con un archivo css y necesitamos usar las abreviaturas, para ello recuerda guardar tu primero tu extensión como css por ejemplo prueba.css

Recuerda que luego escribir tu abreviatura, debes presionar la tecla TAB, para que te salga el resultado.

Y si deseas saber más sobre Emmet, te invito a que ingreses a la página oficial de Emmet, también revisar el cheat-sheet, para que aprendas más abreviaturas de esta genial herramienta.

Read More

Como instalar emmet (zend coding)

Hola amigos hoy veremos como instalar el plugin emmet, o zend coding  como se le conocía antes, se que solo quieres ver el tutorial e instalarlo rápidamente, pero seria bueno que leas un poco el tutorial para evitar errores, prometo hacer estas lineas cortas.

Primero si no sabes para que sirve emmet déjame decirte que es uno de los plugin mas útiles que podrás instalar te ahorra el tiempo a la hora de programar, digamos que con solo escribir algunas palabras como abreviatura puedes obtener toda una estructura de código así ahorrarte tiempo, sin alargar mas esto empezamos con lo que necesitas para instalar emmet.

Como instalar emmet (zend coding)

Para poder instalar cualquier plugin primero debes instalar su gestor de descarga el cual vendria ser el package control, si aun no lo tienes configurado te recomiendo que revises este link: como instalar package control.

Una vez instalado debes hacer lo siguiente:

Paso 1: 

En el menú de tu sublime text selecciona Preferences--> Package Control

Paso 2

Se abrirá una pequeña ventana en ella debes eligir Install Packages

Paso 3

Se abrirá una nueva ventana, en ella debemos buscar emmet y luego seleccionar para que se instale, si todo lo isiste bien ya se habrá instalado emmet.

Read More

navegar entre pestañas del sublime text

Hoy veremos como cambiar de pestaña de forma rápida, te preguntaras y para que me sirve esto, bueno si eres novato aun tal vez no te importe seleccionar tus pestañas con el mouse, pero cuando ya tengas un proyecto de envergadura galácticas tendrás que trabajas con muchas pestañas y ocurre que hay veces donde tendrás que tener abierto unas diez o veinte pestañas y ahí es donde radica el problema imagínate tener que buscar la pestaña con el  mouse "total perdida de tiempo" entonces es mejor conocer atajos para facilitar el trabajo y reducir el tiempo..... esto se catalizara también en menos strees.

En esta guía te voy enseñar dos pasos así que atento, cualquier duda dejas algún comentario.

PASO I

Con este atajo pasaremos de una pestaña a otra y para logra eso debemos presionar las teclas 

Ctrl + Tab

 

PASO II

Para poder regresar o pasar por varias pestañas debes seleccionar  las siguientes teclas varias veces:

Ctrl + Tab + varias veces

 

Eso es todo espero les aya servido este pequeña guía, si tienen alguna duda pueden escribir en la caja de comentarios.

Read More

Ordenar - alinear css en sublime text

Hoy veremos como ordenar o alinear las lineas de código de  nuestro archivo css. Solemos programar sin importarnos este tipo de detalles, pero es de suma importancia tener un orden y legibilidad para que otros programadores puedan entender nuestro código, sobre todo si estamos trabajando e una empresa desarrolladora de software habrá mas de un colega o supervisor que necesitara revisar nuestros avances y sino tenemos la cultura de escribir un código ordenado tendremos muchos problemas, sin mas que decir empezamos con este pequeño tutorial.

Como ordenar - alinear css en sublime text

Empezaremos por ver como ordenar nuestro código, la idea de este ejercicio es que ordenemos el código de orden alfabético como te muestro a continuación.

Primero debemos seleccionar un pedazo del código y luego presionar F9 esto hará que toda la parte seleccionada se ordene de forma alfabéticamente.

Ahora veremos como alinear nuestro código css. para este ejemplo trataremos de alinear el código hacia la derecha o hacia la izquierda dependiendo a donde nosotros necesitemos mover las lineas de nuestro código.

Para alinear a la derecha debemos seleccionar la parte de código a mover y luego presionamos la tecla tabulador.

Para Alinear a a izquierda debemos seleccionar la parte de código a mover y luego la tecla Shift + tabulador

                      

Con esto tendremos mejor ordenado nuestro código, hasta aquí acabamos esta pequeña guía si necesitas saber mas formas de como alinear tu código te recomiendo que revises el siguiente enlace.

como organizar (alinear) codigo en sublime text

Read More

Seleccionar varias lineas en sublime text

Hola amigos hoy veremos como trabajar con las selecciones en sublime text, deben poner un poco de atención al tutorial, pero antes de empezar si estas en esta guía sol me queda felicitarte hay muchas personas que usan distintos tipos de IDE para programar, en este caso a mi me gusta usar sublime text por varias razones que no voy explicar aquí, el detalle es que solo es cuestión de configurar algunas cosas para que sea mas cómodo y nos ahorre tiempo, sin mas que decir empezamos con esta guía.

  Seleccionar lineas en sublime text

Como programadores web, muy a menudo tenemos que editar-modificar código. A continuación se presentan algunos atajos de teclado útiles que permiten hacer diferentes tipos de selecciones en SublimeText.

Ctrl + D

Seleccionar palabra(s)

Seleccionar palabra

Ctrl + L

Seleccionar línea(s)

Seleccionar linea

Ctrl + A

Seleccionar todo el contenido dentro del documento

Seleccionar todo el contenido

Ctrl + Shift + M

Seleccione todo dentro de las llaves ({ } es muy bueno cuando se trabaja con CSS o JavaScript)

Seleccionar contenido dentro de las llaves 

Estos han sido alguno de los trucos para seleccionar en sublime text espero les haya servido de algo, hasta la próxima amigos.

Read More

como organizar (alinear) codigo en sublime text

Bien muchas veces los programadores tienden a copiar código y pegar dentro de sublime, pero en esas ocasiones que al pegar se ve todo desordenado y no sabes como ordenarlo, porque simplemente te da flojera estar ordenando linea por linea, o en el peor de los caso si tienes la voluntad de alinear, pero son demasiadas lineas de código, que te tomaría un buen tiempo y veas por donde lo veas es perdida de tiempo.

Nos hacemos la pregunta entonces Como alinear u organizar código en sublime?

Bien la respuesta es fácil existe dos formas, vamos por la primera.

OPCIÓN 1

seleccionamos todo el código desordenado que queremos alinear al lugar deseado, luego en la pestaña "Edit---Line" ahí vemos varias opciones, les explico

Indent ---- alinea a la izquierda

unindent --- alinea a la derecha

OPCIÓN 2

desde el paquete de instalación instalamos Alignment

Read More

Get y Set automáticos en sublime text

Hola de nuevo, hoy aprenderemos como crear get y set automáticos de nuestras clases en sublime text.

hace una semanas escuche que muchos programadores novatos usan netbeans para trabajar con php. Y otros lenguajes, porque dicen que no se puede crear get y set automáticos como lo hace el ide de netbeans, y que sublime es muy complicado, pues déjame decirte que sublime no es complicado, es mas bien para programadores un poco mas expertos a diferencia de los ide que te dan todo, aclarado todo esto vamos manos a la obra.

Abrimos sublime y vamos y nos vamos a la pestaña en Tools -- New Snippet
se nos abrirá una nueva venta con un código, como muestra la siguiente imagen.

Entonces reemplazamos ese código por el siguiente código que les daré y lo guardamos con el nombre  getSet sin extensión.

CÓDIGO:

<snippet>
    <content><![CDATA[public function get${1/(.*)/\u$1/}()
{
    return \$this->${1:$SELECTION};
}

public function set${1/(.*)/\u$1/}(\$$1)
{
    \$this->$1 = \$$1;
    return \$this;
}
]]></content>
    <!-- Optional: Tab trigger to activate the snippet -->
    <tabTrigger>getset</tabTrigger>
    <!-- Optional: Scope the tab trigger will be active in -->
    <scope>source.php</scope>
    <!-- Optional: Description to show in the menu -->
    <description>Create getter and setter methods</description>
</snippet>

Ahora es momento de probar nuestra snippet.

tenemos que tener un nuevo documento con extensión php y tener definidos nuestros atributos, entonces escribimos getset + tabulador, luego escribiremos cada uno de los atributos y creara automáticamente los gets sets como muestra la siguiente imagen.

y eso es todo amigos, si tienen algún problema pueden escribirme o dejarme un comentario y tratare de ayudarles de las formas breve posible. Suerte.

Read More