«Teclas Calientes» o atajos del teclado en NetBeans

Desde hace años, cuando me inicie en el desarrollo web,  el entorno (IDE)  que utilizaba por excelencia era Dreamweaver, sin embargo desde hace más de un año utilizo NetBeans.

NetBeans tiene muchas ventajas, sobre todo a la hora de escribir código, es por eso que he recopilado algunas “teclas calientes” o atajos del teclado que son de mucha utilidad en este entorno de desarrollo.

TECLA CALIENTE DESCRIPCION
Control + K Autocompletar
Control + Espacio Sugerencias
Control + B Ir a la declaración de la función / método / clase
Shift + Suprimir Cortar línea actual
Control + E Borrar línea actual
Control + Shift + Flecha Arriba/Abajo Copiar línea actual Arriba/Abajo
Control + P Muestra los parámetros que la función o método
Control + Shift + C Comentar líneas
Alt + Insert Generar código

 

Como grabar transmisiones en vivo desde USTREAM

En este pequeño artículo se describe como grabar en el disco duro un show que esta siendo transmitido en vivo por USTREAM.

Al enterarme que TV Peru iba a transmitir el concierto de un grupo musical de mi agrado, pensé en grabarlo, es así que buscando información encontré como lograrlo, y de hecho el siguiente tutorial sirve para grabar cualquier show de cualquier canal del conocido servicio gratuito de transmisión de audio/video en vivo (USTREAM).

Pues bien,  el único software que se necesita se denomina RTMPDump, que por defecto sirve para grabar cualquier medio que este siendo transmitido bajo el protocolo RTMP y además es software libre (Descargar).

Lo primero es obtener la URL del show que queremos grabar y que tiene la siguiente forma  http://www.ustream.tv/channel/[nombre-del-show]

Para el ejemplo es: http://www.ustream.tv/channel/tvperu_analogico

Nota: Si el show se muestra a través de otro Sitio Web, hacer click sobre el logo de USTREAM, dicha acción abrirá la página con la URL indicada.

Seguidamente debemos obtener el “codigo-del-show”, esto lo podemos hacer buscando la opción “embed”, que nos muestra un código HTML, dentro de éste, está el “codigo-del-show”.

<iframe src="http://www.ustream.tv/embed/[codigo-del-show]" width="608" height="368" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>

En el ejemplo:

<iframe src="http://www.ustream.tv/embed/7903307" width="608" height="368" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>

Luego debemos descargar un archivo, el cual contiene la URL con el protocolo RTMP, para ello vamos a: http://cdngw.ustream.tv/Viewer/getStream/1/[codigo-del-show].amf

En el ejemplo: http://cdngw.ustream.tv/Viewer/getStream/1/7903307.amf

Descargamos el archivo, lo abrimos, por ejemplo con el Notepad++, buscamos la palabra “rtmp” y encotraremos una URL como esta: rtmp://flashxx.ustream.tv/ustreamVideo/[codigo-del-show]

Ejemplo: rtmp://flash64.ustream.tv/ustreamVideo/7903307

Finalmente con los datos obtenidos ejecutamos RTMPDump de la siguiente forma:

rtmpdump -r «rtmp://flashxx.ustream.tv:1935/ustreamVideo/[codigo-del-show]/streams/live» -f «LNX 10,1,85,3» -p «http://www.ustream.tv/channel/[nombre-del-show]» -t «rtmp://flashxx.ustream.tv:1935/ustreamVideo/[codigo-del-show]/streams/live» -v -o [archivo].flv

Y para el ejemplo:

rtmpdump -r «rtmp://flash64.ustream.tv:1935/ustreamVideo/7903307/streams/live» -f «LNX 10,1,85,3» -p «http://www.ustream.tv/channel/tvperu_analogico» -t «rtmp://flash64.ustream.tv:1935/ustreamVideo/7903307/streams/live» -v -o concierto.flv

Esto va mostrando el tiempo grabado en segundos, para terminar la grabación solo se presiona “Ctrl+C” (en Windows), el archivo se guarda en el formato FLV en el directorio desde donde se ejecuta RTMPDump.

Perfiles Profesionales en el Desarrollo Web

Hoy en día la información es de vital importancia para las organizaciones y es requerida a cada instante, esto hace que la gran mayoría de sistemas de información tengan que funcionar a través de Internet o mínimamente en una red local, y es así que la mayor parte de los esfuerzos en el desarrollo de software han migrado hacia la Web  y a hacia lo “móvil” (celulares).

La empresa donde laboro, no es la excepción y es que la mayor parte de sistemas para nuestros clientes las desarrollamos con tecnologías Web.

Sin embargo, el Desarrollo Web abarca mucho, y es que un Desarrollador Web no podría dominar todo al 100%, por lo tanto eso me llevó a definir roles o perfiles con los cuales podemos distinguirnos entre los miembros de un equipo de desarrollo y así llevar a cabo mejor interacción y mejores resultados.

Los perfiles identificados son los que siguen:

Diseñador Web

  • Dominio de Photoshop (Opcionalmente de Corel Draw y Fireworks)
  • Dominio de Flash
  • Conocimientos en HTML y CSS

Maquetador

  • Dominio de Photoshop
  • Dominio de HTML y CSS (Opcionalmente HTML5 y CSS3)
  • Conocimientos en Javascript y PHP

Programador  Front -End

  • Dominio de HTML/CSS
  • Dominio de Javascript (jQuery, JSON, AJAX)
  • Conocimientos en PHP y MySQL

Programador Back-End

  • Conocimientos de HTML/CSS
  • Dominio de Javascript y jQuery
  • Dominio de PHP y MySQL

Sysadmin

  • Dominio de Linux
  • Domino de Servidores (Web, FTP, SSH, Mail, DNS)
  • Conocimientos en Redes

Las tecnologías, sobre todo las del lado del servidor, pueden variar, por ejemplo, de acuerdo al programador en lugar de usar PHP podría usar Python.

Aplicaciones Web en Google Chrome

En la actualidad la mayor parte de sistemas de información están basados en Web, por lo que para el desarrollo de software muchas veces se hace necesario tecnología cliente / servidor y por ende tecnología Web, incluso para que funcione tan solo en una red local.

Entonces para utilizar este tipo de sistemas es necesario un navegador Web, sin embargo no se utiliza como tal, para tal efecto existen opciones para desactivar todas las funciones visibles del navegador, las cuales no son necesarias para utilizar el software.

La opción más práctica se encuentra en el navegador de Google, Chrome; pues este incluye una herramienta para crear un acceso directo a aplicaciones (software), es más podemos elegir un icono o ponerlo por defecto en el código HTML.


Lamentablemente no todo es perfecto; muchas veces se utiliza el formato PDF para imprimir reportes del software, sin embargo en Chrome hay un pequeño detalle, es que existe alguna diferencia entre su visor nativo de PDF y el visor de Adobe que es el que viene por defecto en otros navegadores, lo cual no favorece mucho a la portabilidad del software.

La solución es simple, tan solo hay que desactivar este visor nativo del Chrome y activar el visor de Adobe; para ello se ingresa a about:plugins en el campo de dirección del Chrome y allí inhabilitamos el Chrome PDF Viewer y habilitamos el Adobe Acrobat, y listo problema resuelto.

 

En la actualidad la mayor parte de sistemas de información están basados en Web, por lo que para el desarrollo de software muchas veces se hace necesario tecnología cliente / servidor y por ende tecnología Web, incluso para que funcione tan solo en una red local.

Entonces para utilizar este tipo de sistemas es necesario un navegador Web, sin embargo no se utiliza como tal, para tal efecto existen opciones para desactivar todas las funciones visibles del navegador, las cuales no son necesarias para utilizar el software.

La opción más práctica se encuentra en el navegador de Google, Chrome; pues este incluye una herramienta para crear un acceso directo a aplicaciones (software), es más podemos elegir un icono o ponerlo por defecto en el código HTML.

Lamentablemente no todo es perfecto; muchas veces se utiliza el formato PDF para imprimir reportes del software, sin embargo en Chrome hay un pequeño detalle, es que existe alguna diferencia entre su visor nativo de PDF y el visor de Adobe que es el que viene por defecto en otros navegadores, lo cual no favorece mucho a la portabilidad del software.

La solución es simple, tan solo hay que desactivar este visor nativo del Chrome y activar el visor de Adobe; para ello se ingresa a about:plugins en el campo de dirección del Chrome y allí inhabilitamos el “Chrome PDF Viewer” y habilitamos el “Adobe Acrobat”, y listo problema resuelto.

Live Video Streaming, Caso: VirgenCandelaria.com

La ciudad de Puno, ubicada al sur oeste del Peru, año a año es testigo de un evento sin igual, la Festividad Virgen de la Candelaria, un evento cultural y religioso que convoca a miles de personas de la zona y de otros lugares del país y el extranjero.

Pues bien, las tecnologías de la información no pudieron ser ajenas a tal magno evento, es así que, desde el año 2010, Grupo Sistemas viene haciendo uso del Live Video Streaming para la transmisión de video en vivo de sus principales actividades.

En el presente artículo se menciona la tecnología utilizada y algunos problemillas que tuvimos que superar para dicho fin.

La Tecnología

–    Un sitio Web: VirgenCandelaria.com
–    La plataforma de live video streaming: UStream.tv
–    Una PC desde donde transmitir con sintonizador de TV.
–    El programa Flash Media Live Encoder.

La Señal de TV

Lo primero es tener una buena señal de TV, hubiera sido mejor contar con TV por cable, pero en nuestro caso tuvimos que usar antenas, no hubo mayor problema, solo había que colocarlas bien, el primer año usamos una antena aérea (outdoor), para el segundo año solo fue necesario una antena interna (indoor).

En lo anterior también hay que lidiar con algunos detalles como la señal del canal elegido, la ubicación geográfica, la interferencia que pueda causar la PC y la calidad del sintonizador de TV.

Durante los dos años de transmisión elegimos el canal 15, su señal era la que mejor llegaba a nuestro “bunker”, aunque alguna vez tuvimos que movilizarnos a un lugar céntrico de la ciudad para obtener mejor señal y también mejor ancho de banda (lo cual se explica mas adelante).

La interferencia de la PC siempre causó algunas imperfecciones en la señal pero muy mínimas y no considerables; también probamos tres sintonizadores de TV, uno tipo USB y dos tarjetas PCI (Genius y Encore), las tarjetas PCI dieron mejor resultado.

La Velocidad de Internet (Ancho de banda)

El gran detalle en el Perú, en la actualidad, nuestros Proveedores de Internet (ISP) lamentablemente no brindan velocidades necesarias para realizar este tipo de labores, tuvimos que ajustarnos a los 256kbps de ancho de subida, que fue lo máximo que pudimos encontrar.

Así, con esos datos ejecutamos el programa Flash Media Live Encoder (FMLE), es cierto que tal vez no hubiera sido necesario ya que UStream y otros servicios similares tienen su propio software de broadcasting, sin embargo el FMLE te permite configurar muchos detalles como la codificación del audio / video y sobre todo calcular lo que se puede emitir en base a la velocidad de subida que se posee, para nuestro caso los 256kbps que en realidad al final solo eran efectivos 190kbps, así que la transmisión se hizo de la siguiente forma:

170kbps para video
20kbps para audio

Con esto nuestro público internauta tenía una calidad de video y audio, quizá en lo mínimo aceptable.

Conclusión

Finalmente se logró hacer una transmisión de video en vivo para todo el mundo, claro que hubieron muchos otros detalles que superar, pero que sirvieron sobre todo para aprender y así podamos mejorar para los años siguientes. De la misma manera esperamos que este artículo te pueda servir para ideas similares y por que no para unírtenos, como alguien dijo por ahí… la unión hace la fuerza.

Crea tu Fan Page en Facebook

El propósito de crear un Fan Page es dar un “perfil” en Facebook para nuestra organización, empresa, marca, etc. Sin embargo, muchos aun siguen creando perfiles personales para ello (error garrafal).

En el presente artículo se describen los pasos para crear una Fan Page en Facebook y las ventajas que se trae consigo.

Los Pasos

  • Una vez dentro del Facebook con tu perfil personal, dirigirse a: http://www.facebook.com/pages/create.php
  • Rellenar el formulario de Pagina Oficial y crear la página.
  • Enseguida personaliza tu página como si fuera un perfil personal.


Las Ventajas

  • La primera ventaja es que esto funciona como un perfil personal, pero en lugar de poner tu foto pones el logo de tu organización; también puedes publicar estado, enlaces, fotos, videos, etc.
  • Dispones de un botón “Me gusta” y ya no el “Agregar a mis amigos”.
  • Puedes sugerir tu Fan Page a tus amigos/as de Facebook.
  • Puedes crear tu Like Box (caja de fans) que luego puedes colocar en tu Sitio Web o Blog.
  • Dispones de muchas aplicaciones útiles, una de ellas son las “notas”, que funcionan como un blog y que incluso estas notas pueden ser importadas automáticamente desde un feed RSS o Atom.
  • La Fan Page puede ser administrada entre varios, los amigos/as que tú elijas.

Para que la URL de tu Fan Page sea de la forma: facebook.com/tumarca debes tener al menos 25 fans.

Maquetar para Internet Explorer 6

El siguiente artículo es escrito gracias al siguiente caso:

En el año 2010 cuando los sitios Web mas populares dejaron de dar soporte a Internet Explorer 6, uno también se olvida fácilmente de darle soporte, aun cuando se trata de algún cliente, pero para la mala suerte este se da cuenta y por mas que se le explique, la ignorancia tecnológica hace que se le de soporte una vez mas.

Y aquí parte de la solución: Las principales características del diseño del sitio Web en cuestión que afectan una buena visualización en Internet Explorer 6, de ahora en adelante IE6, fueron los bordes redondeados y las imágenes transparentes.

Aunque para solucionar los bordes redondeados tanto en IE6 e IE7 muchas veces se emplean imágenes, en este caso se presentaron defectos en IE6, así que la solución fue simplemente eliminar los bordes redondeados ya que no afectaban de sobremanera al diseño.

Las imágenes transparentes para la Web, como se sabe deben estar en el formato PNG, IE6 no soporta esta característica, pero afotunadamente existe un filtro que hace posible la transparencia. Dicho filtro es una regla CSS no estándar creada por Microsoft.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

Aplicando esta regla CSS a cada imagen hará que tenga transparencia, sin embargo para facilitarnos las cosas existe un plugin de jQuery (Supersleight), el cual agrega características nuevas y útiles a la hora de manejar las imágenes PNGs:

  • Funciona con imágenes en línea e imágenes de fondo.
  • Aplica automáticamente “position:relative” a los enlaces y a los campos de formularios, si no tienen “position”.
  • Puede ser aplicado a toda la página, o solo a una parte donde están los PNGs.
  • Detecta “no-repeat” en las imágenes de fondo y fija “scaleMode” para “crop” antes que “scale”.
  • Puede volver a ser aplicado por cualquier otro javascript en la página.

La desventaja es que no es compatible con la regla “background-position”, esto hace imposible posicionar la imagen cuando es necesario, por ejemplo en el uso de CSS Sprites.

Estilos Genéricos para CSS

Cuando uno maqueta páginas Web desde cero y de forma constante, se hace necesaria la adopción y creación de estilos genéricos con el propósito de facilitar y agilizar el proceso de codificación HTML/CSS.

En esta ocasión se presentan algunos estilos genéricos que pueden ser de mucha utilidad.

CSS Reset

Muy importante para empezar, son los estilos que «limpian» los elementos del HTML, es decir eliminan los atributos visuales que no son de utilidad (CSS Reset).

Ejemplo:

YUI Reset de Yahoo!

Enlaces o links

Se define un color común y el subrayado al pasar el puntero del ratón (evento “hover”).

Ejemplo:

a { color:blue; text-decoration:none; }
a:hover { text-decoration:underline; }

Alineación

Estilos para la ubicación o alineación de los elementos:

.left { float:left; } /* alineación izquierda */
.right { float:right; } /* alineación derecha */
.clearer { clear:both; } /* limpiador de alineaciones */

Estilos para la alineación de texto o cualquier elemento «inline» dentro de un elemento «block».

.tac { text-align:center; }
.tar { text-align:right; }

Esquinas redondeadas

Estos nos sirven para diseños que contienen elementos rectangulares con las esquinas redondeadas.

Ejemplo:

.esq { background:url('esquinas.gif') no-repeat; height:4px; position:absolute; width:4px; } /* propiedades similares de las 4 esquinas */
.si { left:0; top:0; } /* esquina superior izquierda */
.sd { right:0; top:0; background-position:-4px 0; } /* esquina superior derecha */
.ii { left:0; bottom:0; background-position:0 -4px; } /* esquina inferior izquierda */
.id { right:0; bottom:0; background-position:-4px -4px; } /* esquina inferior derecha */

Para este caso se utiliza la técnica de “sprite” y la imagen “esquinas.gif” es como sigue:


Y aquí un ejemplo de código HTML:

<div class=”caja”>
<div class="esq si"></div>
<div class="esq sd"></div>
<div class="esq ii"></div>
<div class="esq id"></div>
<!-- contenido -->
</div>

Esquinas redondeadas en CSS3

Con la nueva versión del CSS, la técnica es sencilla, pero solo es soportada por algunos navegadores.

Ejemplo:

.round { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }

Iconos

Usualmente los enlaces van acompañados de un icono al lado izquierdo.

Ejemplo:

/* Para un icono de 16x16 pixeles a lado izquierdo de un enlace */
.ico { background:url('icono.gif') no-repeat; line-height:16px; padding:1px 0 1px 20px; }

Elemento oculto

Muchas veces es necesario un estilo que oculte elementos, que podemos solucionar con la siguiente clase:

.oculto { display:none; }

De esta manera podemos crear aun mas estilos genéricos y que podemos usar en todas nuestras maquetas, incluso llegar a crear un sencillo Framework CSS que se adapte a nuestras necesidades.

Personaliza tu Like Box o Fanbox de Facebook

Luego de que creciera la popularidad de Facebook, ya hace bastante tiempo, se ha puesto de moda incluir en los sitios web y/o blogs un widget o plugin denominado Like Box o Fanbox.

Este plugin es proporcionado por el mismo Facebook y puede ser embebido mediante código HTML en cualquier página web.

Para ello debemos tener o crear una página de fans en Facebook y al momento de editarla, buscar la opción “Promocionar con un Me gusta”.

Antes de generar el código se nos da a escoger algunos atributos (el ancho, el número de fans, mostrar lo que se publica y mostrar el logo de facebook). Esto nos da como resultado dos tipos de código.

Tipo: iframe

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=138937514309&connections=10&stream=0&locale=es_ES" allowtransparency="true" style="border:none; overflow:hidden; width:300px; height:245px;"></iframe>

Tipo: javascript

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA"></script>
<script type="text/javascript">FB.init("169ca0b3b2d5dbc7b3bb01812e88b2bb");</script>
<fb:fan profile_id="138937514309" stream="0" connections="10" logobar="0" width="300"></fb:fan>

Podemos elegir cualquiera, lo importante es que existe la posibilidad de asociar una hoja de estilos (CSS) al plugin, he ahí el “truco”, simplemente agregando la URL de la CSS en el código generado (ver ejemplo).

Tipo: iframe

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=138937514309&connections=10&stream=0&locale=es_ES&css=http://www.tecnato.com/css/fanbox.css" allowtransparency="true" style="border:none; overflow:hidden; width:300px; height:245px;"></iframe>

Tipo: javascript

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA"></script>
<script type="text/javascript">FB.init("169ca0b3b2d5dbc7b3bb01812e88b2bb");</script>
<fb:fan profile_id="138937514309" stream="0" connections="10" logobar="0" width="300" css="http://www.tecnato.com/css/fanbox.css"></fb:fan>

Lamentablemente nuestras reglas del estilo deben tener la propiedad !important para que causen efecto; además el archivo CSS es almacenado en la memoria cache de Facebook por un tiempo indeterminado, esto quiere decir que si queremos hacer cambios estos no se reflejarán; al menos existe una forma para hacer varias actualizaciones a la CSS, la cual es cambiándole de nombre para cada nueva versión. mejor es agregar una variable, por ejemplo: estilo.css?1, donde «1» representa la versión.

CSS de ejemplo

.fan_box .full_widget .connect_top{background-color:#ced4dd !important;color:#000 !important;}
.fan_box .full_widget .connect_top a{color:#125687 !important;}
body.fan_widget &gt; div div *, body.fan_widget .fan_box .connections{border:none 0 !important;}
#fan_widget_container{padding-left:5px;width:274px;overflow:hidden;}
.fan_box .full_widget {
background:none repeat scroll 0 0 white;
border:solid #1C416C !important;
border-width:0 2px 2px 2px !important;
display:block;
overflow:hidden;
width:auto;
}
.fan_box .connections { border-top:1px solid #A6B2C8 !important; }
.fan_box .connections_grid .grid_item{width:42px!important;}
.fan_box .connections_grid .grid_item img{width:42px!important;}
.fan_box .name_block { display:none !important; }