Vi copiando entre archivos

Extraido desde Juque.cl

VI es un editor muy poderoso. Supón que quieres copiar las líneas 1-10 y 23-77 del archivo A y copiarlas el archivo B al mismo tiempo, ¿cómo lo hacemos?. Aquí te daré el truco que hace esto:

• Pon el cursos en la línea número 1
• Presiona ESCAPE
• Presiona Shift " (Shift comillas dobles)
• Presiona a
• Presiona 10yy (el número de líneas que quieres copiar)

• Ahora pon el cursor en la línea 23
• Presiona ESCAPE
• Presiona Shift " (Shift comillas dobles)
• Presiona b
• Presiona 55yy (el número de líneas que quieres copiar)

Ahora las primeras 10 líneas han sido copiadas en el buffer "a" y las siguientes 55 líneas han sido copiadas al buffer "b"

• Ahora presiona " : " (DOS PUNTOS) para tener el prompt de vi.
• Tipea e "nombre del archivo de destino"

Una ves ingresado el nombre del archivo de destino anda a la línea que quieres copiar las primeras 10 líneas del buffer "a".

• Presiona ESCAPE
• Presiona Shift " (Shift comillas dobles)
• Presiona a.
• Presiona p.

Las primeras 10 líneas del buffer "a" fueron insertadas

Ahora anda a la línea donde el resto de las 55 líneas del buffer "b" serán insertadas

• Presiona ESCAPE
• Presiona Shift " (Shift comillas dobles)
• Presiona b.
• Presiona p.

Las restantes 55 líneas in el buffer "b" fueron insertadas.

Traducción del Tips del día hoy en Unix Guru Universe - For Unix Admins, By Unix Admins

Extensiones Firefox (II)

Articulo Original : melkorcete.com



Empezamos con la URL Params. Esta destinada a debuguear los $_POST y $_GET de cara a encontrar fallos durante la programación. Aunque también permite mostrar que datos se envían en otras webs tras pulsar un botón o acceder vía enlace. Muy útil de cara a optimizar la seguridad de la web o para simplemente ayudar en la elaboración de formularios.




De cara al diseño de la página, esta extensión se vuelve casi imprescindible. La IETab emula en una pestaña de Firefox el motor de Internet Explorer y su hoja de estilos. Así no tendrás que andar cambiando entre exploradores para diseñar. Puedes ver la página activa directamente pulsando en el botón, o abrir un vínculo en una pestaña nueva de IETab. Más cómodo imposible ¿verdad?



Capturar un color que nos haya gustado mientras navegábamos ya no será una lata. Ni capturas, ni software, ni mucho menos. Colorzilla permite usar la clásica herramienta de cuentagotas para seleccionar el color elegido. Después veremos los datos en la barra de estado, aunque tiene una opción para ahorrarnos más tiempo aun. Si ya tienes un color seleccionado y pulsas con el clic derecho en el icono de la extensión, te aparecerá un menú contextual con la opción de copiar el color al portapapeles con diferentes formatos (RGB, Hexadecimal, sin almohadilla...). Rápido y útil.

Descargar URL Params : enlace.
Descargar IETab : enlace.
Descargar Colorzilla : enlace.

Añade un botón de tu blog en la barra de Google

Via BlogMundi.com

Puedes ofrecer a tus lectores la posibilidad de añadir un botón de tu blog en la barra Google. Con él pueden ir directamente a tu sitio, realizar búsquedas en tu blog, o comprobar tus últimos posts añadiendo el feed al botón.

El proceso es bastante sencillo.

En primer lugar debes de tener la barra de Google instalada claro. Una vez que la tengas y si dispones de un cuadro de búsqueda de Google, debes hacer clic con el botón derecho en él y luego pinchar en “Generar búsqueda personalizada”.

Bien, lo siguiente es pinchar en Añadir y luego Aceptar. El botón se añadirá a tu barra, pero con un pequeño inconveniente, el icono será el de Google, por lo que debemos de crear uno propio.

Para ello deberás crear un icono para tu blog. Te vale, si tienes, el favicon de tu web. Si no, puedes crear uno con cualquier extensión, .jpg, .gif, .png. Una vez que lo tengas deberás codificarlo en texto ASCII mediante base64. No te asustes, eso lo puedes hacer aquí, simplemente cargas el archivo, pinchas en “Convert the source data” y lo convierte. El texto que te ofrece como resultado debes copiarlo.

Una vez que hemos hecho todo esto, debes pinchar en “Configuracion” de la barra de Google, luego en Opciones y después en la pestaña de Botones.

Marcas el botón de tu blog, pinchas en Editar y luego en “Usar editor avanzado”.

Se te abrirá una nueva página con un cuadro de texto. El código de tu icono debes pegarlo entre las etiquetas , eliminando lo que se encontraba antes entre ellas que era el código del icono de Google.

Ahora solo tienes que pinchar sobre “Guardar en la barra de Google” y comprobar como aparece el icono que has creado.

Pero, no vamos a dejarlo ahí, vamos a añadir también tu feed como opción en el botón, simplemente debes añadir esto después la etiqueta

http://feeds.feedburner.com/Blogmundi-ConsejosParaTuBlog

Sustituyendo ese feed por el tuyo. Volvemos a guardar como antes y podrás comprobar que ahora tu botón es despegable y que además muestra tus últimos posts.

Ahora sólo nos quedan dos cosas por hacer para poder ofrecer a los lectores la posibilidad de añadir tu botón a su barra de Google.

En primer lugar debes de guardar una archivo .xml con el código. Es decir, el código que hemos modificado antes para añadir el icono y el feed. Lo copias y creas un archivo xml que debes albergar bajo tu dominio del estilo :

http://www..com/miblog_boton.xml

En segundo lugar, crear un enlace para poder añadir el botón con tan sólo un clic:

http://toolbar.google.com/buttons/add?url=http://www..com/miblog_boton.xml

Ejemplo: éste sería el de BlogMundi: Añadir BlogMundi a la barra Google.

Debes saber también que los botones personalizados en la barra Google sólo son compatibles con Internet Explorer.

Eso es todo, por otra parte, quizá deseas añadir tu botón a la Galería de Botones de Google.

Las posibilidades de añadir funcionalidades a tu botón son variadas pero, eso te toca investigarlo a ti.

JavaScript Lint: Limpia de errores tus scripts

Via webmasterlibre.com

Con Javascript Lint podrás comprobar todo tu código Javascript en busca de errores comunes sin necesidad de abrir la página en un navegador.
El programa está basado en el motor de Javascript de Firefox, con lo que, además de buscar errores puede también mostrar advertencias sobre prácticas no recomendables.

Javascript Lint está disponible para Windows y Linux. Además, es muy versátil y te permite utilizarlo de diversas formas:

• Puedes integrarlo en tu IDE
• Ejecutarlo desde el explorador de windows
• Utilizar la línea de comandos
• Integrarlo en algún programa para Windows
• Hacerlo correr desde una página PHP

Javascript Lint: http://www.javascriptlint.com
Demo Online: http://www.javascriptlint.com/online_lint.php

Dynamic Drive al rescate

En el desarrollo de un sitio ocupé una rutina para desarrollar una botonera, la cual tiene la particularidad de que pinchas en el link padre y te abre los links hijos.

Está en inglés pero es bastante intuitivo, les dejo el link aca http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

Extensiones Firefox para programadores Web

via TuFuncion.com

Muy buen artículo, hay muchas extensiones que ni conocía, por supuesto, usa firefox y tendrás el poder, jajajajaja. muy interesante …

HTML Validator (http://users.skynet.be/mgueury/mozilla/) – Válida páginas webs con el estándar W3C con un simple checkbox en la esquina inferior derecha, podrás comprobar de una manera sencilla y visual si la página está validada, contienen warnings o no esta validada.

FireFTP (https://addons.mozilla.org/firefox/684/) – Está plataforma libre y segura proporciona acceso a sevidores FTP. No necesitaras un software externo a tu navegador para conectarte a tus cuentas FTP.

Professor X (https://addons.mozilla.org/firefox/2823/) – Permite ver el código fuente sin necesidad de tener que dirigirte al menu del navegador.

NikkelWHOIS (https://addons.mozilla.org/firefox/2646/) – Comprueba la información correspondiente al WHOIS de cualquier página haciendo click en un pequeño botón incrustado en tu barra de navegación.

IE Tab (http://ietab.mozdev.org) – Harto de comprobar una y otra vez la compatibilidad de tus páginas en los distintos navegadores… Esta es tu solución podrás testear tus páginas en diferentes pestañas dentro de tu Firefox.

FireBug (https://addons.mozilla.org/firefox/1843/) – Avanzada consola debugger que permite comprobar el estado de código JavaScript, CSS, HTML y Ajax.

Codetech (https://addons.mozilla.org/firefox/1002/) – Editor web con cierto parecido a Dreamweaver. Increible extensión para desarrolladores que no quieren desembolsar el precio de una licencia de Dreamweaver.

SEO for Firefox (http://tools.seobook.com/firefox/seo-for-firefox.html) – Resultados de búsquedas en Google y Yahoo, incluyendo pagerank, tiempo de página, ranking Alexa, WHOIS y algunas características más.
Añade tambien enlaces a servicios como Google Trends, Google Traffic Estimator, y Overture View Bid tool.

Yet Another Window Resizer (https://addons.mozilla.org/firefox/2498/) – Permite redimensionar la resolución de pantalla de tu navegador sin necesidad de configurar los valores de pantalla de Windows.

AdSense Preview (https://addons.mozilla.org/firefox/2132/) – Vista pervia de el estado de tu cuenta Adsense.

Screen grab (https://addons.mozilla.org/firefox/1146/) – Toma un pantallazo de una página y lo guarda como imagen, gran rendimiento acompañandolo con el uso de Photoshop.

Server Spy (https://addons.mozilla.org/firefox/2036/) – Indica el tipo de servidor de la página (Apache, IIS, etc.).

RIDE-ME un IDE para Ruby on Rails en Windows

RIDE-ME es un entorno de desarrollo de Rails para Windows. Enfocado principalmente a los desarrolladores en proceso de migración de una plataforma de programación de Microsoft.

RIDE-ME es software libre publicado bajo una licencia MIT

RIDE-ME: http://www.projectrideme.com/

Buen truco para debugear tus CSS

Via anieto2k.com

Muy buen truco para poder tener tus capas más o menos colocadas sin tener que darles colores a cada una de ellas. La verdad es que su facilidad me ha sorprendido y su funcionamiento es simplemente genial.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

Pega este código en cualquier parte de tu CSS o mejor aún crea un fichero CSS y lo agregas a tu proyecto, esto hará que todos tus elementos aparezcan delimitados por lineas de colores. Muy util para las últimas y primeras etapas de maquetación.

Layouts para tu web

Si no eres un Gran Diseñador, aca te dejo unos cuantos Layouts para que te “orientes”.

http://www.code-sucks.com/css%20layouts/

Una imagen (Frase Notable)

“En realidad mil palabras valen mucho más que una imagen. Y además cargan mucho más rápido.”

… tal y como entiende el mundo el programador web

Vía Microsiervos