HTC Group

HTC Networks

Archive for June, 2007

SIP, MUY ACTIVIDAD

hedgehog

No comments

Trucos Firefox

Firefox es el navegador Open-Source favorito de todos nosotros, por sí mismo ya es muy bueno. Y añadiéndole alguna de las sorprendentes extensiones disponibles por ahí, el navegador se va haciendo mejor y mejor.Pero existen opciones que no están a simple vista, hay un montón de trucos y ajustes disponibles que aumentarán y mejoraran las posibilidades de tu navegador. Lo harán más rápido, más Cool y más eficiente. Con los siguientes trucos para Firefox, serás un Jedi, te lo prometo.

1) Más espacio en pantalla: Haz tus iconos más pequeños. Ir a Ver - Barras de herramientas - Personalizar y marca la casilla “Usar iconos Pequeños.”

Más espacio en la pantalla!

2) Uso inteligente de palabras clave: Puedes hacer tus búsquedas más rápidas personalizando la barra de Búsquedas de Firefox, por ejemplo si vas a Youtube o Wikipedia en el campo de búsqueda de alguno de estos, clic derecho y selecciona “Añadir una palabra clave a esta búsqueda”, dale un nombre, palabra clave, y un atajo fácil de escribir y recordar (por ejemplo “Videos” o “Wiki” ) y sálvalo. Ahora, cuando hagas una búsqueda de alguno de esos términos, ve a la barra de direcciones de Firefox, escribe “Videos” o “Wiki” y el nombre del “Video” o “Wiki” que quieras y pulsa Enter. ¡Búsqueda instantánea!, ¿vez la productividad?

3) Atajos del teclado: Aquí es donde te conviertes en un verdadero Jedi. En poco tiempo vas a aprenderlos, y cuando lo hagas, tu navegación será muy rápida y fluida. Aquí algunas de las más comunes (Y que uso diariamente)

Navega cómodamente con el teclado

  • Barra espaciadora (El scroll la página actual baja)
  • Shift+Barra espaciadora(El scroll la página actual sube)
  • Ctrl+F (busca palabras en la página actual)
  • Alt-N (busca una siguiente palabra)
  • Ctrl+D (añadir a Favoritos o Marcadores)
  • Ctrl+T (abre una nueva pestaña)
  • Ctrl+K (enfoca la caja de búsqueda)
  • Ctrl+L (enfoca la barra de direcciones)
  • Ctrl++ (incrementa el tamaño texto)
  • Ctrl+- (reduce el tamaño texto)
  • Ctrl-W (cierra la pestaña actual)
  • F5 (Actualiza o recarga la pagina actual)
  • Alt+Inicio (te dirige a tu pagina de inicio)

4) Autocompletar: Otro atajo de teclado, te juro que es muy útil. Ve a la barra de direcciones (Control-L) y escribe el nombre de un sitio sin el “www” o el “.com”. Por ejemplo “google”. Luego pulsa Control+Enter, y automáticamente añadirá el “www” y el “.com” y te llevará ahí como por arte de magia. Para direcciones .net, pulsa Shift+Enter, y para direcciones .org, pulsa Control+Shift+Enter.

5) Navegación en pestañas: En lugar de usar el ratón para seleccionar diferentes pestañas que tengas abiertas, si te gusta usar el teclado, estos son los atajos:

  • Ctrl+Tab (va a la siguiente pestaña) –>
  • Ctrl+Shift+Tab (va a la anterior pestaña) <–
  • Ctrl+1-9 (va al numero de pestaña que elijas)

6) Atajos de ratón: A veces ya estás usando el ratón y es más fácil usar un atajo de ratón que volver al teclado. estos te interesaran:

Atajos de ratón

  • Clic con el botón central en un enlace (abre una nueva pestaña)
  • Shift+Rueda hacia abajo (página anterior)
  • Shift+Rueda hacia arriba (siguiente página)
  • Ctrl+Rueda hacia arriba (reduce el tamaño texto)
  • Ctrl+Rueda hacia abajo (aumenta el tamaño texto)
  • Clic con el botón central en una pestaña (cierra la pestaña)

7) Borrar elementos del historial de la barra de direcciones: En la barra de direcciones selecciona la página que quieras borrar y pulsar el botón Supr.

8) User chrome: Si quieres personalizar tu Firefox más a fondo, tienes que crear un archivo UserChrome.css. No es muy fácil que digamos, pero hay un tutorial en ingles el tutorial.

9) Crear un archivo user.js: Tendrás más velocidad en el navegador si creas el archivo user.js, por ejemplo, como este que podrás modificar con estos pasos.

10) about:config: Es la configuración interna de Firefox, si sabes manejarlo harás de Firefox un navegador muy potente. ¿Quieres saber más sobre about:config?

11) Añadir una palabra clave a los Favoritos/Marcadores: Clic derecho en el marcador / Propiedades / Pon una palabra clave corta / Guarda. Ya puedes escribir esa palabra clave en la barra de direcciones e irá directamente a la página del marcador.

12) Acelera Firefox: Si tienes una conexión de banda ancha (dime a mi), puedes usar pipelining o segmentación para acelerar la carga de tus páginas, los pasos:

  • Escribe “about:config” dentro de la barra de direcciones y pulsa Enter. Escribe “network.http” en el campo del filtro, y cambia las siguientes configuraciones (doble clic en ellas para cambiarlas):
  • Configura “network.http.pipelining” a “true
  • Configura“network.http.proxy.pipelining” a “true
  • Configura“network.http.pipelining.maxrequests” a un número de aproximadamente 30. Esto te permitirá hacer 30 peticiones a la vez.
  • También, botón derecho en cualquier sitio y selecciona Nuevo->Entero. Llámale “nglayout.initialpaint.delay” y configura si valor a “0“. Este valor es la cantidad de tiempo que el navegador espera antes de actuar sobre la información recibida.

Acelera Firefox a la velocidad de la luz

13) Limita el uso de RAM: Si Firefox ocupa usa mucha memoria, puedes limitar la cantidad de RAM que usara. De nuevo, ve a about:config, filtro “browser.cache” y selecciona “browser.cache.disk.capacity”. Está configurado a 50000, pero puedes reducirlo, dependiendo de la memoria que tengas. Prueba con 15000 si tienes entre 512 y 1 GB de ram.

14) Reduce el uso de RAM cuando Firefox está minimizado: Quizá este sea el mejor truco de todos. Vamos a crear una entrada en about:config para que cuando minimicemos Firefox reduzca el uso de RAM.
Entramos en about:config / Clic derecho / Nuevo / Lógico / “config.trim_on_minimize” / Valor “true

Memoria RAM

15) Quitar o mover el botón cerrar de las pestañas: ¿Pulsas accidentalmente en el botón de cierre de la pestaña de Firefox? Puedes moverlos o eliminarlos, de nuevo a través de about:config. Edita la opción “browser.tabs.closeButtons”. Aquí está el significado de cada valor:

  • 0: Muestra un botón de cerrar sólo en la pestaña activa
  • 1: (Por defecto) Muestra el botón de cerrar en todas las pestañas.
  • 2: Quita el botón cerrar.
  • 3: (Para los usuarios de Firefox 1.x), muestra el botón cerrar al final de la barra de pestañas.

Nota: Espero que les halla gustado o servido este artículo, me he tardado mucho, pero creo que será de ayuda para todos, si conocen más trucos los comentan y agrego a la lista.

Actualización: Algunos lectores Jedi, que han respondido en Menéame y en este post nos dan más atajos de teclado y trucos:

  1. Presiona F11 y veras todo en pantalla completa. (merks - Menéame)
  2. F3 en Windows XP, busca en la pagina actual. (jaz1 - De la casa)
  3. Alt izquierda/derecha -> Funcionan como atrás/adelante del navegador.
  4. Ctrl+F5 -> Actualizar borrando la caché. (la 3 y 4 por jAume)
  5. Ctrl+Re Pag va a la siguiente pestaña.
  6. Ctrl+Av Pag va a la anterior pestaña (la 5 y 6 por xkod ]
  7. Ctrl+Shift+T abre la ultima pestaña cerrada, como un ctrl+z por si lo cerraste de casualidad, muy importante. (Gracias Loki)

Añadir Youtube (por ejemplo) como búsqueda:
Al lado de la barra de direcciones está la barra de búsquedas rápidas, entra a www.youtube.com, ahora presiona el botón al lado de la barra de búsquedas, veras que sale casi al final del menú desplegable, la opción “Añadir Youtube Video Search“, clic en esa opción y ya puedes buscar desde la barra en Youtube directamente. (Gracias xkod)

Agrega Youtube Video Search

Curiosidades:
Para evitar que salgan las ranas de ImagesShack en algunos foros:
1. Escribes en la barra de direcciones “about:config“.
2. Luego en el filtro escribes: “header
3. Salen pocos resultados, haces doble clic en “network.http.sendRefererHeader
4. En la ventana pones: “0“, aceptas y ya, adiós ranas y demás. (Gracias Rush)

Fuente

1 comment

Herramientas adecuadas para el diseño y desarrollo de un sitio web

Por Javier Perez
Las fases de un desarrollo web, así como los lenguajes de programación usados, son muy extensas y variadas, y por ello necesitamos herramientas específicas para cada una de ellas. Conoceremos a continuación las principales herramientas existentes para poder desarrollar fácilmente un proyecto web.

En el desarrollo web tenemos unas herramientas para el diseño, otras para la maquetación, otras para la programación, y para la depuración. Todas las herramientas que usemos son muy importantes, desde el Sistema Operativo hasta el comando más insignificante, y por ello debemos elegir la más adecuada a nuestras necesidades y capacidades.

Sistema Operativo

web_sistemasoperativos.jpgPara desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que dispone el Sistema Operativo y sus costes.

Por ejemplo, tenemos Microsoft Windows, cuyas aplicaciones son muy caras, como Photoshop, Dreamweaver, Fireworks, ASP .NET… Y por otro lado tenemos GNU/Linux, con GIMP, Inkscape, Amaya, Aptana, PHP (aunque todos ellos también están disponibles en Windows).

Otra característica a tener en cuenta es las facilidades que el Sistema Operativo aporta al desarrollador, y en este sentido GNU/Linux se lleva de calle a Windows. Y esto es porque Windows no fue diseñado para los desarrolladores, sino para personas que no tienen muchos conocimientos sobre informática.

Y por el contrario GNU/Linux fue creado por desarrolladores, y para desarrolladores; y por lo tanto en GNU/Linux podemos encontrar infinidad de herramientas que nos harán la vida mucho más fácil, que además son libres.

Fases de desarrollo de una web

Para elegir las herramientas a utilizar, antes debemos identificar las fases del proceso que forman el ciclo de vida de un desarrollo web.

  • Diseño:

    el diseño consiste en crear esbozos de la web final mediante una herramienta gráfica, como Photoshop, GIMP o Inkscape.

  • Maquetación HTML/CSS:

    la maquetación consiste en convertir los esbozos creados en la fase anterior en plantillas HTML, su respectiva hoja de estilos, y las imágenes usadas. Es posible saltarse la fase anterior para comenzar directamente con esta fase, dependiendo de si dominamos herramientas como Photoshop o no.

  • Programación cliente:

    la programación cliente consiste básicamente en Javascript. Una web puede no tener necesidad de hacer programación cliente, como puede ser una pequeña web corporativa con poca información estática, o puede que requiera enormes esfuerzos en esta fase, como ocurre con los proyectos Web 2.0.

  • Programación servidor:

    en esta fase, que se desarrolla junto con la anterior, crearemos la aplicación web en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.

  • Depuración:

    esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias, aserciones, trazas, etc.

  • Pruebas en local:

    en nuestro servidor local haremos todas las pruebas posibles.

  • Subir ficheros al hosting:

    una vez nuestra web esté completada y bien testeada en nuestro servidor local (desarrollo), la subiremos al servidor del hosting elegido (producción). Dependiendo del hosting, podremos usar FTP, SFTP (SSH), WebDAV, o incluso Subversion. Yo aconsejo usar Subversion si así lo permite el servidor, por su comodidad y rapidez, además de por su principal utilidad, que es la de control de versiones.

  • Pruebas en hosting:

    realizaremos las últimas pruebas en el servidor del hosting para comprobar que el cambio de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor local debe tener exactamente la misma configuración que el servidor del hosting.

Herramientas: desarrollo en PHP

A continuación enumeraré las herramientas básicas para el desarrollo de una web en PHP, en sus diferentes fases de diseño e implementación.

Fases: diseño y maquetación

  • Adobe Photoshop:Esta aplicación sólo está disponible en Windows, y es el más caro, aunque es el más usado y gracias a ello dispone de una gran comunidad de usuarios con los que poder contar ante cualquier problema. Con él crearemos el diseño, así como las imágenes que usemos en la maquetación.
  • GIMP: Es el equivalente de software libre más próximo a Photoshop. Al ser libre es posible conseguirlo gratuitamente, y de hecho cualquier distribución GNU/Linux lo incluye. Al igual que en Photoshop, con él podremos crear el diseño y las imágenes de la maquetación HTML. También disponible en Windows

Fase: maquetación

  • Inkscape: El equivalente en Windows es Adobe Fireworks. Es un excelente editor gráfico vectorial con el que poder crear iconos, banners, y demás dibujos de forma muy fácil y sencilla, incluso para aquellos que no tengan demasiados conocimientos en edición gráfica digital.
  • Adobe Fireworks: El editor de gráficos vectoriales más fácil de usar que he tenido la oportunidad de usar, aunque no lo eché de menos cuando descubrí Inkscape. Al igual que su compañero Photoshop es muy caro, y más aún si tenemos una gran alternativa gratuita como es Inkscape.

Fases: maquetación, programación cliente

  • Dreamweaver, Aptana, Amaya: Estas herramientas las describí en mi anterior artículo sobre los principales editores web del mercado, así que os remito a él para más información. Con ellos crearemos el código HTML/CSS (maquetación), siendo Aptana la opción más profesional para la programación cliente (Javascript).

Fase: programación servidor

  • Zend Studio: Sin duda el mejor IDE existente en el mercado para desarrollo web con PHP. Es comercial, aunque no demasiado caro teniendo en cuenta la excelente herramienta que es. Además es posible descargarlo desde la web de Zend para probarlo durante 30 días.Con él crearemos fácilmente la aplicación web en PHP. Aunque podremos usar igualmente cualquier editor. Una muy buena alternativa es Eclipse con el plugin PHP.

    Otra aplicación muy útil que está muy ligada a Zend Studio es Zend Platform, un módulo para Apache que permite depurar una web directamente en el navegador (Internet Explorer o Firefox), además de otras funciones más complejas, como alertas configurables para que nos envíe un email por cada error ocurrido en la web, o cuando un script sobrepase un tiempo determinado de ejecución, por ejemplo.

Fase: prueba local

  • Apache Instalar un servidor web Apache en la máquina donde desarrollamos es fundamental. De esta manera haremos pruebas rápidamente: editamos un fichero PHP, vamos al navegador, actualizamos, y vemos los cambios.

Fases: pruebas en local, depuración

  • Firefox / Firebug / Web Developer Extension: Firefox es sin duda la mejor herramienta creada en los últimos tiempos para los desarrolladores web, y con Firefox sus dos extensiones más útiles para nuestra profesión: Firebug y Web Developer.Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma página para ver los cambios en tiempo real, consultar los tiempos de carga de la página en conjunto, de las imágenes, javascripts, hojas de estilo, etc, así como sus tamaños, etc. Y Web Developer nos ofrece herramientas muy útiles como ver las cookies de la web, ocultar imágenes, cambiar el tamaño del navegador a resoluciones estándar, etc.

Subir ficheros al servidor del hosting

Una vez hayamos concluido todas las fases anteriores, y nuestro proyecto esté listo, deberemos subirlo al servidor del hosting.

La herramienta a utilizar dependerá de las opciones que nos ofrezca el hosting, que desgraciadamente en la mayoría de los casos es solamente el antiguo FTP. En Dreamweaver y Zend Studio tenemos un cliente FTP y SFTP (SSH), y la tarea consistirá simplemente en configurar el FTP y copiar y pegar los directorios que queramos subir.

Confío en que esta guía sirva de ayuda a la hora de afrontar un desarrollo web. Hay que tener muy en cuenta las fases de desarrollo y usar las herramientas adecuadas: la que nos resulte más fácil de usar, la más económica, la que mejor conozcamos, etc.

No comments

BeatBox Guy

Se presentó en un programa similar a american idol pero en francia, nice.

1 comment