Ads 468x60px

Perfil

jueves, 12 de diciembre de 2013

Vincular cuentas de correo con gmail

Hoy en día mucha gente tiene más de una cuenta de correo electrónico, ya sea una cuenta personal, una para las cosas importantes, una del trabajo, , una para registrarnos en todas aquellas webs que solo nos interesa confirmar un correo… Conclusión: muchas cuentas que recordar, muchas contraseñas a memorizar y muchas webs que visitar.
Solución: Recibir todo el correo de todas las cuentas en una sola. Gracias a Gmail esto es posible, ya que podemos configurarlo y programarlo para que compruebe cada cierto tiempo si tenemos correo en cada una de las cuentas y nos descargue todo ese correo a nuestra cuenta de Gmail automáticamente.
Además podremos mandar correos desde Gmail pero con el remitente correspondiente a la cuenta que queramos, es decir, que la persona que lo reciba, verá que ese correo se ha mandado desde la cuenta que hayamos elegido.
Aquí os dejo un tutorial de como hacerlo con una cuenta de educaragon. Con Hotmail y Yahoo, funciona mal, ya que son la competencia.
COMO GESTIONAR UNA CUENTA DE EDUCARAGON EN GMAIL
(PARA ENVIAR CORREOS)
Lo primero que hay que hacer es acceder a nuestra cuenta Gmail desde el navegador. Desde allí accedemos al menú configuración.
Después accederemos a apartado "cuentas e importación".
En la fila que pone [Añadir otra dirección de correo a la tuya] pulsaremos sobre el enlace. Ahora nos aparecerá la siguiente pantalla en la que debemos introducir la dirección de correo que queremos vincular a Gmail, después pulsamos [Paso siguiente >]
Y después...
Ahora recibiremos este mensaje que nos pedirá que vayamos a nuestra cuenta de educaragon donde nos habrán enviado un código de verificación que deberemos pegar en el formulario.
Ya podemos enviar correos a través de gmail, con nuestra cuenta de educaragon... quedará algo así:
(PARA RECIBIR CORREOS)
En la misma página que nos encontramos, haremos clic en "Añadir una cuenta de correo POP3 tuya".
Si rellenamos los siguientes campos vincularemos nuestra cuenta a la de gmail.... NOTA: google está haciendo cambios continuamente con lo cual dentro de un mes todo este proceso se hace de otra manera, pero... paciencia que esto cambia mucho. HACER CLICK EN "continue"

viernes, 29 de noviembre de 2013

Curso CakePHP

Este es el 1º video tutorial de cakephp en la cual vemos en primera instancia la instalación y una aplicacin rapida para demostrar lo raápido de realizar una aplicacin básica.

Cómo crear un disco de arranque USB con varios sistemas operativos

Existen varias herramientas que nos permiten crear discos de arranque USB para diferentes plataformas, una de las mas populares es UNetbootin, pero en mi opinión Yumi Multiboot USB Creator es mas sencilla de usar y organiza mejor los sistemas. Yumi es una herramienta gratuita que nos permite de una manera muy sencilla crear un disco de arranque USB con varios sistemas operativos.
Crear disco de arranque USB con varios sistemas operativos
Desde hace un buen rato las unidades de discos físicos de nuestros computadores han pasado a ser un accesorio muy poco utilizado. Pocos son aquellos que aún usan CDs o DVDs para reproducir música, vídeos, o instalar programas, mucho menos para instalar un sistema operativo.
Gracias a las bondades de la nube podemos descargar el sistema operativo que queramos directamente desde el ordenador en el cual lo queremos instalar, y gracias a utilidades geniales como Yumi, podemos crear un disco de arranque USB con este mismo sistema, agregarle varios mas, e instalarlos en nuestro equipo. Yumi te permite añadir cualquier archivo de imagen .ISO, por lo que también podemos agregarle otras herramientas que nos permitan solucionar problemas en nuestro sistema, como utilidades de antivirus, o de diagnostico de hardware. Todo en un único disco USB.
Yumi es muy sencillo de utilizar, luego de descargarlo simplemente ejecutamos el archivo .exe (no necesitas ejecutarlo como administrador, pero si se presenta algún problema puedes probar de esta manera). Aceptas los términos de la licencia, y esta listo para usarse. Es una aplicación portable, por tanto no se instala en tu sistema, puedes llevarla a cualquier lado y solo ejecutarla.
Aunque Yumi es una aplicación para Windows, puede ser fácilmente ejecutada en Linux usando Wine.

Requisitos Básicos

  • Una memoria USB con formato Fat32 o NTFS.
  • Un ordenador que pueda bootear desde USB.
  • Windows XP/Vista/7/8 o WINE para poder correr Yumi.
  • Los archivos .ISO de tu elección.
Una vez dentro de Yumi se te mostraran una lista de sistemas operativos y herramientas soportadas para añadir a tu dispositivo USB.
disco de arranque usb con varios sistemas
Yumi se mantiene actualizado y añadiendo soporte a las ultimas versiones de decenas de distribuciones de Linux.

Creando el disco de arranque múltiple paso a paso

  1. Conecta tu dispositivo USB al ordenador.
  2. Ejecuta Yumi y acepta los termino de la licencia.
  3. Selecciona la letra de la unidad del dispositivo USB.
  4. Selecciona de la lista el sistema operativo o herramienta que vas a añadir.
  5. Selecciona el archivo .ISO previamente descargado y guardado en tu ordenador, ó usa la opción "Download the ISO" para descargar el sistema seleccionado.
  6. Presiona "Create"
  7. Presiona Ok en la advertencia y espera que el proceso termine.
Una vez concluido Yumi te preguntara si deseas añadir otro sistema operativo al disco, así que si quieres puedes repetir el proceso cuantas veces necesites y agregar todos los .ISO que quepan en tu pendrive.
Al reiniciar y bootear desde el disco USB creado, veras una pantalla de selección en la cual se te permite elegir cual de los sistemas quieres instalar, o si deseas simplemente arrancar desde tu disco duro.
La interfaz similar a GRUB, horrible pero cumple su cometido.
yumi multiboot usb creator - Crear disco de arranque USB con varios sistemas operativos
Yumi es una herramienta sumamente útil para muchas situaciones, la facilidad de usar un solo dispositivo USB para instalar un arranque Dual-boot con Windows y Linux en mi computador o en el de cualquier amigo, no tiene precio.
Para los adictos a probar distribuciones de Linux es también una herramienta a tener. Y si tenemos muchas memorias USB que no usamos para nada, crear discos de arranque múltiples para salir de situaciones molestas cuando se nos daña el ordenador, o para cuando un amigo quiere que le hagamos de "pringao", es el mejor uso que se me puede ocurrir.
Por ultimo, les comento que Yumi almacena todas los archivos en una carpeta llamada Multiboot, y mantiene todo organizado, por lo tanto tu dispositivo aún puede ser utilizado para almacenar otras cosas sin que deje de ser booteable, y sin desperdiciar el espacio libre.

¿Qué es Responsive Web Design?

Premium_Themes-639x390
Debido a la proliferación de smartphones y tablets en el mercado actual, existe más diversidad que nunca de formatos de pantalla. De acuerdo con el estudio realizado por Comscorelas ventas de smartphone superarán a las de computadoras de escritorio durante este año y la adopción de tablets en Estados Unidos se prevee que experimente un crecimiento del 40% en los próximos 4 años, alcanzando los 75.8 millones en 2016.
Este panorama obliga a adaptar los formatos web a estos nuevos dispositivos y la estructura de cada uno de ellos, es indiscutible que necesitamos websites inteligentesque se adapten a todos ellos. Sobre todo si tenemos en cuenta las ventas a través de m-commerce (e-commerce adaptados a móvil), según eMarketer, las ventas a través de smartphones han crecido en un 81% ($25.000 millones en los Estados Unidos).
A partir de todo esto, el término “responsive web design” se escucha frecuentemente, pero ¿qué es exactamente? El responsive design corresponde a una tendencia de creación de páginas web que pueden ser visualizadas perfectamente en todo tipo de dispositivos, desde ordenadores de escritorio hasta smartphones o tablets. Con este tipo de diseño no necesitas tener una versión para cada dispositivo, una sola web se adapta a todos ellos.

¿Cómo funciona el responsive web design?

En lugar de construir una website para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media queries y un layout con imágenes flexibles. De esta forma, la website detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos imágenes, más ligeras, redistribución de las columnas en el diseño, menos texto, etc.).
El HTML5 permite una experiencia excelente para los usuarios, sin el coste de desarrollar una app nativa para cada dispositivo. En resumen, se diría que el responsive design son todo ventajas.
Es fácil de manejar ya que solamente trabajas sobre una website y los resultados serán uniformes en todas las plataformas sin distorsiones en las imágenes o texto. Además, ahorras tiempo y dinero al desarrollar una vez y un pago único de hosting.

¿Qué pasa con el posicionamiento web?

Una web creada con responsive web design mejora el SEO, las búsquedas a través de dispositivos móviles son diferente a las que se realizan desde un ordenador de escritorio por lo que tener una versión móvil de tu web es bueno, tener una con responsive design es aún mejor, sobre todo porque cuantos más dispositivos alcances a cubrir más tráfico generará tu web. Tan simple como eso. Además, buscadores como Google ya están priorizando en el ránking a las websites móviles en búsquedas móviles, como es lógico.
Entonces, ¿cuáles son las opciones para crear una website con responsive? realmente, las mismas que para crear una nueva website. Puedes optar por contratar un desarrollador o agencia que lo haga por ti, una opción costosa teniendo en cuenta las especificaciones que se quieran.
La alternativa es hacerlo tú mismo, para ello existe una nueva propuesta en editores web, esta vez, responsiveZeendo. Se trata de una plataforma basada en cloud computing, de forma que todo el trabajo está siempre online y se puede continuar el proceso de edición de la nueva web sin perder ningún cambio, sin tener que descargar ningún tipo de software, y así, desde cualquier lugar, a cualquier hora. Pero sin duda, lo más importante es que está concebido para cualquier usuario sin conocimientos de programación.

¿Cómo funcionan los editores web para responsive design?

A partir de plantillas personalizables creadas en HTML5 y CSS3 con fluid grids que re-colocan los elementos de la web, dependiendo del espacio disponible según la resolución de pantalla. De esta forma discriminan elementos, texto, pestañas del menú, reducen las imágenes de manera que la navegación sea fluida, intuitiva y se enriquezca la experiencia de usuario.
zeendo
No sólo se trata de obtener una solución para todos los dispositivos, se trata de ganar puntos en el ránking de los buscadores móviles de manera que ganemos visibilidad y tráfico en nuestro sitio web.

miércoles, 20 de noviembre de 2013

Herramientas recomendadas para el desarrollo de software

La calidad del software es uno de los temas que más líneas me han ocupado en este blog. Es por ello que no debe faltar un listado con las principales herramientas software que nos faciliten y aseguren entregar un software de calidad.
Las herramientas de calidad software expuestas son las que más he utilizado y mejor cumplen, a mi parecer, sus objetivos. Os dejo el link a la página donde os la podéis descargar, una breve descripción y, entre paréntesis, la licencia que tienen.
Como en el caso de los libros recomendados,  podéis votar para opinar qué os parece la herramienta. Así ayudaremos entre todos a elegir las mejores herramientas para mejorar su código y entregar un producto software de calidad.
Para que se pueda buscar más fácilmente he agrupado las herramientas por funcionalidad:

Herramientas de calidad del Producto Software

PMD. Analizador estático de código, principalmente Java. Identifica problemas como repetición de código, if`s anidados, etc. (BSD)[poll id="21"]

Check Style Analizador estático de código, principalmente Java. Comprueba si se siguen las reglas de estilo. (GNU Lesser General Public License Version 2.1)[poll id="22"]

SONAR. Herramienta de gestión de la calidad del código fuente. Permite recopilar, analizar, y visualizar métricas del código fuente. Está formado por PMD, Checkstyl, Findbugs, Clover y Cobertura. Principalmente es usado con Java pero da soporte a otros lenguajes. (LGPL)[poll id="23"]

Google CodePro Analytix. También es una herramienta de gestión de la calidad del software. Ofrece un entorno para evaluación de código, métricas, análisis de dependencias, cobertura de código, generación de Test unitarios, etc.[poll id="24"]

Simian. Herramienta para detectar código duplicado. (Libre para proyectos OpenSource)[poll id="25"]

Herramientas de Testing

Selenium. Compuesto por dos herramientas: Selenium IDE y SeleniumWebDriver. La primera permite crear casos de prueba para aplicaciones web y la segunda los ejecuta. Utiliza los siguientes lenguajes: Python, Ruby, Java y C# y ejecuta pruebas de aplicaciones para Android y iPhone. (Apache 2.0 License)[poll id="26"]

JMeterPermite realizar pruebas funcionales y de rendimiento para aplicaciones web. (Apache 2.0 License)[poll id="27"]

Testlink. Permite crear y gestionar casos de prueba, organizarlos en planes de pruebas, realizar un seguimiento de los resultados, establecer trazabilidad con los requisitos, generar informes etc. (GPL)[poll id="28"]

Herramientas para Scrum

KunagiOfrece herramientas colaborativas y otras facilidades, como un cuadro de mando del proyecto, un panel interactivo para el Sprint o soporte a la estimación con Planning Poker. (GNU)[poll id="37"]

ScrumDoPermite gestionar las listas de tareas e historias de usuario, crear y gestionar iteraciones, obtener gráficos de avance “burndown” y también dar soporte a la estimación con Planning Poker. (Comercial)[poll id="38"]

SprintoMeterHerramienta para la gestión, medición y seguimiento de proyectos Scrum y eXtreme Programming. (Comercial)[poll id="39"]

IceScrumHerramienta Scrum y Kanban. Ofrece las opciones de operación, consulta y estimación de historias de usuario. Permite añadir historias de usuario a la pila de producto, dividir el tiempo en Sprints y mover estas historias de la pila de producto a cada uno de los Sprint. (GNU)[poll id="40"]

Pango ScrumPermite escribir, estimar y priorizar la pila de producto. Facilita en gran medida la planificación de Sprints y las reuniones. (Comercial)

miércoles, 13 de noviembre de 2013

Librerías interesantes PHP-GTK

Hoy traemos una biblioteca que más que útil, es curiosa. Sí, curiosa, y es porque esta librería nos va a permitir construir interfaces gráficas con PHP, cosa que no es muy habitual en este lenguaje.
Realmente, la utilidad real de la librería, a priori no es que sea muy grande, y más teniendo lenguajes de programación donde se pueden crear interfaces de forma muy sencilla, pero seguro que alguien le da un uso bastante elevado a este php-gtk.
Lo primero que debemos hacer es instalar nuestra librería en Linux:
Simplemente introduciremos estos comandos en la consola:
Descargamos el source desde este enlace y lo descomprimimos donde queramos.
Una vez tengamos la carpeta descomprimida, nos movemos a ella (por consola).
Y por último una vez dentro seguimos los pasos (comandos) que nos indica el fichero INSTALL:
./buildconf
./configure
make
make install
Una vez hecho ésto, si no ha dado errores, deberemos añadir la extensión al php.ini. El fichero debéis buscarlo vosotros porque según la distribución e incluso la versión de la misma puede variar.
En la parte de extensiones del fichero, añadimos:
extension=php_gtk2.so
Una vez hecho esto, si tenéis todas las librerías extras que necesita php-gtk (cosa que es normal tener), debería funcionar.
Nota: Si os da algún error podéis pedir ayuda y os intentaremos solucionar el problema lo mejor que podamos, o podéis acudir a Google que hay bastante información sobre errores con esta librería.
Ahora vamos a ver la instalación en Windows:
Instalando Gnope , tenemos todo solucionado:
http://sourceforge.net/projects/gnope/
Una vez instalado vamos a probar si funciona haciendo uso del ejemplo que viene en la ayuda de PHP para esta librería.
Creamos un nuevo archivo .PHP y escribimos el siguiente código :
set_title('Our PHP-GTK window');
$window->connect_simple('destroy', array('gtk', 'main_quit'));
$label1 = new GtkLabel("Hello world!");
$window->add($label1);
$window->show_all();
Gtk::main();
?>
Y lo ejecutamos en la consola php nombredelfichero.php, si todo sale bien aparecerá una ventana , sino, un mensaje de error en la consola que nos indicará que el módulo php-gtk2 no está cargado ( “Please load the php-gtk2 module in your php.ini”)
Ahora vamos a explicar las partes del código que puedan resultar confusas:
$window = new GtkWindow();
$window->set_title('Our PHP-GTK window');
$window->connect_simple('destroy', array('gtk', 'main_quit'));
Esta porción de código sin duda puede resultar la mas difícil de comprender, así que vamos a hablar de ella un poco.
  • La primera línea es simplemente la instanciación de la clase GtkWindow() mediante la llamada al un constructor.
  • La segunda línea usa el método set_title para añadir un título a a la ventana.
  • La tercera línea es un método de la clase que debe ponerse siempre y se usa básicamente para conseguir un cerrado “limpio” de las aplicaciones.
El resto de código hasta el GTL::main(); es repetir lo mismo, sólo que con otros elementos, en este caso con labels(etiquetas), se crean, se les da un título o texto y se añaden a la ventana principal.
Cuando está todo añadido se muestra por pantalla.
Y al final, la última línea de código inicia el bucle principal (algo así como un bucle de eventos) que toda interfaz gráfica (moderna) debería tener.

jueves, 7 de noviembre de 2013

Un bender que baila en LiveWeav

Actualmente hay muchas herramientas para editar código online y aquí les hemos mostrado algunas como CSSDeck y Runnable, pero esta vez les quiero mostrarLiveWeave. Una herramienta que te permite editar código HTML, CSS y Javascript y con una peculiar característica que puedes ver el resultado en tiempo real.
LiveWeave es una herramienta muy bien pensada y diseñada para que puedas probar, practicar y compartir tu código con la comunidad. La plataforma funciona en todos los navegadores modernos (entiéndase IE solo a partir del 10), puedesincluir librerías JavaScript desde el menú superior o incluirlas en el head del código HTML, descargar tu trabajo para que puedas implementarlo fácilmente en tu sitio o compartirlo con la comunidad.
Algo que me pareció particularmente bueno es que tiene soporte para emmet que ayuda mucho a hacer más rápido el trabajo y disminuir los errores que se puedan generar.
Por ejemplo si escribimos esto y presionamos Ctrl +E o Cmd + E (en Mac)
  1. ul> li*3
Obtenemos lo siguiente:
  1. <ul>
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. </ul>
Tambien tiene resaltado de código y debug de javascript en tiempo real. En fin espero que les guste y como lo prometido es deuda pueden ver a Bender bailando hecho solo con CSS en este link.

miércoles, 6 de noviembre de 2013

Filezilla: ¿Qué es y para qué sirve un cliente FTP?

Básicamente, y sin utilizar palabras ni lenguaje técnico, un cliente FTP es un programilla que nos permite conectarnos desde nuestro ordenador, a un servidor Web.

Un servidor Web, es un ordenador que está en algún lugar del mundo, NO es un decir, que es por ejemplo donde tenemos albergada nuestra página Web.

Por ejemplo; ahora mismo, tú que estás leyendo estás líneas, estás leyendolas desde EE.UU. porque concretamente el servidor donde está ésta página, está allí. Que igual que está allí, podría estar en Canadá, Nueva Zelanda, o hasta en Venezuela mismo.

No, no tiene porque ser más rápido para nosotros, que estamos en Venezuela un servidor Web Venezolano , que uno que esté en EE.UU., nada tiene que ver.

En definitiva, con un cliente FTP, podemos subir o bajar archivos a un servidor Web.

Un caso práctico de para qué se utiliza, en muchas ocasiones a la gente o empresas a las que se diseña páginas Web, necesitan en un momento determinado, pasar nuevo material, como por ejemplo nuevas fotos para que las cuelge, pero muchas veces, esas imágenes ocupan demasiado como para enviarlas por correo electrónico, y sinceramente, el correo ordinario, hoy por hoy es muy lento para la prisa que tenemos todos …
Generalmente, y más hoy en día, el acceso a los servidores Web, es privado, es decir, necesitas un nombre de usuario y una contraseña, y en muchos casos, que te configuren una cuenta FTP, cosa que tiene que hacer el administrador de tu dominio o sistema informático.
Datos básicos para configurar tu cuenta de FTP:

Nombre del Servidor:
Nombre de Usuario:
Contraseña:

Vamos a utilizar un software gratuito, llamado Filezilla, que no por el hecho de ser gratuito, significa que no sea potente, pues yo mismo que me dedico profesionalmente a esto, lo utilizo, y estoy verdaderamente satisfecho de como funciona.
 1
Voy a hacer una pequeña descripción de las diferentes partes de Filezilla:

1 – Este botón es el “Gestor de sitios”, ya que podemos tener acceso a un servidor Web, o a 70, incluso dentro de un mismo servidor Web, podemos tener acceso a varias carpetas, siendo que creando un acceso directo a esas carpetas, podemos acelerar el proceso de conexión a las mismas. Posteriormente veremos en detalle como configurar el acceso a un nuevo sitio.

2 – “Registro de mensajes”: En esta parte de la ventana, se nos informa de todo lo que va ocurriendo en Filezilla, aunque para un usuario normal, esto no se utiliza para nada. De hecho, yo prácticamente no lo utilizo.

3 – “Árbos del directorio local”: En español: Lo que hay en nuestro ordenador. Yo esta parte no la utilizo, porque pueden subirse archivos arrastrando directamente a la sección número 6 de la ventana, pero esto también lo veremos luego en detalle.

4 – “Contenido del directorio local”: Es lo que hay dentro de la carpeta que hayas seleccionado de tu directorio local. Como digo, yo ni el apartado 3, ni el 4, los suelo utilizar, cuando quiero subir o bajar algo, lo hago directamente arrastrando, bien desde alguna de mis carpetas del Explorador de Windows directamente a la sección 6, o desde la sección 6 directamente a mi escritorio por ejemplo. Aunque es de ley comentarte que por ejemplo, si quieres subir un archivo desde tu ordenador (sección 4) al servidor Web (sección 6), puedes también hacerlo pulsando el botón derecho del ratón, cuando esté situado en el archivo a subir, y pulsar sobre subir.

5 – “Árbol del directorio remoto”: Directorio de carpetas que hay en el servidor Web. Cuando queramos subir algo al servidor, previamente de arrastrar el archivo o carpeta a la sección 6, seleccionaremos la ubicación en la sección 5, aunque si no hay una estructura de carpetas, pues simplemente arrastras a la sección 6 sin tener que hacer nada más, y listo.

6 – “Contenido del directorio remoto”: Aquí podrás ver los archivos y carpetas de lo que hay en el servidor Web, o dentro de la carpeta que hayas seleccionado en la sección 5, que recuerda que también está en el servidor Web.

7 – Esto es la “Cola de transferencia”: Aquí verás el proceso de transferencia, ya sea de subida o de bajada, cuando inicies el proceso. Si te fijas, tienes bajo 3 pestañas, que te indican los “Archivos en cola”, es decir, lo que falta por subir o bajar, las “Transferencias fallidas” si es que en algún momento se ha producido un error, y las “Transferencias satisfactorias”, que si todo va bien, ha de coincidir con el número de archivos que hayas subido.

Bueno, ya conocemos un poco el entorno de Filezilla, así que ahora veamos como configurar un nuevo sitio, para poder conectarnos a un servidor Web.
2

Vayamos por partes.

Lo primero será pulsar sobre el botón “Nuevo sitio”, y verás como se coloca un nuevo item en la lista de los sitios. Puedes ver en la imagen, como yo por ejemplo tengo configurado mi sitio de administrador en JSNet, y hay un “Nuevo sitio”, porque acabo de pulsar el botón.

A continuación, tenemos que configurar los datos de acceso al servidor Web, que como digo, nos los tiene que dar nuestro administrador, que yo en mi caso, soy yo mismo 

Rellenaremos la casilla de “Servidor” (número 2), la mayoría de veces la casilla de “Puerto” no es necesario rellenarla, y muy importante, en el número 3, que es el desplegable de “Logon Type”, tenemos que seleccionar “Normal”. Si no hacemos esto, no funcionará, el por qué ahora mismo da igual, y no quiero enrollarme con historias que no vienen a cuento, tu selecciona “Normal”, confiando en lo que yo te digo, y ya está.

4 y 5, es el usuario y la contraseña que nos hayan dado, simplemente hay que rellenarlo RESPETANDO mayúsculas y minúsculas.

6 “Aceptar”, para guardar los datos que hemos introducido y no tener que hacerlo cada vez, y el 7 sería ya para conectar con nuestro servidor Web.

Una vez conectados, veremos algo tal que así:
3

Fíjate como en el “Registro de mensajes” hay historias de Comando y Respuesta, que sinceramente, ahora mismo a nosotros nos da igual.

En la imagen, el proceso que está haciendo, es subir un archivo a la sección 2, por lo que en la “Cola de transferencia” se ve el proceso de transferencia, indicando el porcentaje realizado hasta el momento, en este instante hay 1 archivo en cola, y cuando termine ese 1 pasará a “Transferencias satisfactorias”.
Como ves, un software muy sencillo de utilizar, pero a la vez, muy potente, sobre todo para la gente que continuamente necesita transferir archivos de un determinado tamaño.
Para descargar Filezilla, simplemente pulsa sobre el enlace que sigue a continuación. La instalación es muy sencilla, siguiente siguiente siguiente … y se realiza directamente desde la página del autor.

Esta versión es para Windows de 32 bits (casi todos), pero también existe versión para Mac.
La página del autor, si necesitas otro tipo de instalador, es http://filezilla-project.org/


miércoles, 18 de septiembre de 2013

HTML, XHTML y HTML5

xhtml vs html5
HTML ha evolucionado de formas nuevas e inesperadas. Recientemente, la situación se ha complicado.
HTML es el lenguaje original de la Web. La última versión completada (4.01) se formalizó a fines de 1999.
En la última década ha sido reemplazado gradualmente por una versión similar pero modernizada denominada XHTML (Extensible HyperText Markup Language, Lenguaje Extensible de Marcado de Hipertexto).
NOTA:
Como XHTML es una variante de HTML y como éste fue el estándar original de la Web, suele decirse que todas las páginas están escritas en HTML. Al emplearse de este modo, el término, en realidad, significa cualquier versión de HTML o XHTML.
Veamos la parte complicada. La versión de XHTML usada actualmente es la 1.0 o (menos habitual) la 1.1.
Los programadores debían sustituir ambas por un estándar incluso más reciente denominado XHTML 2.
No obstante, los desarrolladores de XHTML 2 se perdieron en el intento.
"Crearon un estándar filosóficamente puro pero prácticamente inservible."
Los programadores Web y los fabricantes de los principales navegadores se asustaron del carácter estricto de XHTML 2 y del hecho de su falta de compatibilidad inversa con las páginas Web existentes.
Es decir, no se podía convertir una hecha en XHTML 1.0 a una nueva XHTML 2.
Es más, el estándar XHTML 2 carecía de las nuevas funciones que muchos programadores Web, incluidos los creadores de aplicaciones ultracomplejas, requerían.
El golpe final para XHTML 2 se produjo cuando un grupo de la competencia comenzó a presentar las versiones iniciales de un estándar denominado HTML5.
Aunque novedoso, diferente y sólo se admite en los navegadores más modernos, ha generado mucho interés.
De hecho, la W3C (la organización de estándares encargada oficialmente de HTML y XHTML) ha abandonado recientemente sus trabajos con el estándar XHTML 2 y ha comenzado a formalizar HTML5, convirtiéndolo en oficial:HTML5 es el futuro de la Web.
NOTA:
No hay espacio entre el HTML y el 5 en HTML5. Es un error del nombre del estándar.
Los diseñadores de HTML5 fueron inteligentes debido a que hicieron compatible todas las funciones que admite XHTML en la actualidad, lo que significa que puede crear documentos con este lenguaje ya mismo, sin necesidad de las nuevas prestaciones que los navegadores todavía no reconocen.
Todo funcionará a la perfección. Lo mejor de todo es que estará listo para un futuro no tan lejano, en el que nuevo navegadores colonizarán la Tierra y podrán empezar a usar las atractivas funciones exclusivas de HTML5.
NOTA:
HTML5 acepta todo lo que admite XHTML, sin necesidad de cambios. Sin embargo, la sintaxis de XHTML es más estricta que la de HTML5, por lo que éste acoge determinadas prácticas que XHTML no aceptaba. Los programadores Web no se ponen de acuerdo en si estas prácticas son apropiadas de un estilo inadecuado o simplemente útiles soluciones.
Familiarizarse con HTML5 puede resultar todo un reto. Parte del problema es que la palabra "HTML5" incluye la última versión del idioma HTML junto con numerosos estándares emergentes que siguen en fase de desarrollo.
Para que todo sea más interesante, algunos de ellos funcionan con los navegadores actuales más utilizados y otros todavía no se han implementado ni siquiera en las últimas versiones de HTML5.
Curiosamente, este lenguaje solo ofrece ciertas novedades a la familia estándar de etiquetas.
Muchas de ellas proporcionan a los navegadores Web motores de búsqueda y otras herramientas automatizadas, además de la información estructural sobre sus páginas Web. Por ejemplo, puede usarlas para indicar qué sección de su página contiene los enlaces de navegación.
HTML5 también ofrece una nueva forma de añadir elementos de vídeo a su página Web sin necesidad de un complemento, como sucede en muchos navegadores actuales.
El principal objetivo de HTML5 y de sus estándares relacionados es proporcionar  un conjunto de potentes instrumentos para desarrollar aplicaciones y páginas Web con las que interactuar.
Por ejemplo, incluye un lienzo para dibujar en dos dimensiones, una función para delimitar la ubicación geográfica de los visitantes y una técnica para que las páginas interactivas funcionen sin conexión.
Todas estas herramientas son la vanguardia del diseño Web y no son compatibles con versiones de Internet Explorer anteriores a 9.

lunes, 16 de septiembre de 2013

Convertir tu web estatica a Ajax

com.bydust.ajax es una Clase Javascript que convierte tu pagina estática a un verdadero sitio web Ajax.
Como funciona?
Cuando un usuario entra a tu sitio web, la clase realiza una comprobación del navegador . Si es capaz de soportar Ajax la clases se activa y convierte tu web automáticamente, si no, la secuencia de comandos se desactivara y el usuario navegara en tu web sin hacer peticiones Ajax.
Características
  • Es fácil de implementar y quitar
  • Filtra información necesaria que traera con Ajax
  • Puede añadir reglas para algunos enlaces
  • Animaciones personalizables
  • Permite retroceder de Pagina
Implementación
Primero que nada, bajarnos el .zip con los dos archivos Javascript (Descargar) , luego debemos incluir estos archivos en el head de cada pagina que deseamos convertir.
<head>
<script  src="js/com.bydust.array.js"></script>
<script  src="js/com.bydust.ajax.js"></script>
</head>
El Segundo paso sera especificar el contenido que debera recargar con Ajax, para esto clasificamos las secciones con divs y un identificador, el siguiente código sera guardado como
demo.html y como demo2.html con otro contenido en el div content, esto resultara dos paginas estaticas sin ninguna función Ajax.
<div id="page">

  <div id="content">
  <!-- begin content -->
  Contenido Demo 1*
  <!-- end content -->
  </div>

  <div id="sidebar">
  <!-- begin sidebar -->
  <a href="demo.html" >demo 1</a> -
  <a href="demo2.html" >demo 2</a>
  <!-- end sidebar -->
  </div>

</div>
Para finalizar incluiremos esta rutina en todas la paginas que se requieran con Ajax y con ella nuestras paginas estaticas tendrán ahora funcionalidad Ajax.
window.onload = function(){
var refreshed_content = Array('!content','sidebar');
bda.start(refreshed_content); 
}
Aunque paresca mentira, su pagina ahora esta Ajaxificada, pruebenla y verán la funcionalidad. Aquí puedes ver una demostración de una dos paginas estaticas Ajaxificadas.
Recursos

Generar Captura de pantalla con Ajax

PageGlimpse es un servicio que proporciona la captura de pantalla de una web.
Funciona consultando una pagina mandando como parametro la url y el tamaño.
Ejemplo
http://images.pageglimpse.com/v1/thumbnails?url=http://google.com&size=large&devkey=*****&nothumb=http://web.com/noimage.gif
Parametros:
url es la web que se desea capturar.
size es el tamaño estandar del thumbnail (small, medium, large).
devkey es el código que te darán al momento de registrarte en PageGlimpse.
nothumb es un parametro opcional para mostrar una imagen en caso todavía no se halla generado la captura de pantalla de la web.
Utilizandola con Javascript
Thumbnails.js es una librería Javascript que utiliza la API de PageGlimpse para traer la captura de pantalla con una funcion en Javascript el cual utiliza los mismos parametros que la url.
Para utilizar esta librería primero incluiremos el Javascript Thumbnails.js dentro del "head".
Luego crearemos la siguiente funcion
var getScreenShot= function(caja,size){

 var container = document.getElementById('container'),
  thumbs = Thumbnails({
   devkey:'bf3ec081beb6d6af0ff9e43e6f77771e',
   size:size,
   nothumb:'noimage.gif'
  });

 thumbs.get(caja, function(url, img) {
  var link = document.createElement('a');
  img.style.border = 'none';
  link.href = url;
  link.appendChild(img);
  container.innerHTML = '';
  container.appendChild(link);
 });
}
Insertamos un div con id “container” dentro del "body":
<div id="container"></div>
Y despues llamaremos a la pagina de esta manera:
<script type="text/javascript">
getScreenShot('http://google.com','small');
</script>

Recursos