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.

 

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.

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í:

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.

>> Descargar Filezilla Client <<

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/

HTML, XHTML y 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.

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

• Ver Demo
• Web Oficial
• Descarga Script
• Ejemplo Avanzado

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

• Ver Demo

Detectar peticiones Ajax con PHP

Cuando desarrollamos aplicaciones Web, una de las ventajas que ahora tenemos es de utilizar Ajax para ciertas secciones donde es conveniente, y también es necesario restringir peticiones que no sean tipo XMLHttpRequest.

Para filtrar solo peticiones Ajax bastara con colocar este simple script.

if(isAjax()){
    die('Es una peticion Ajax.');
}else{
    die('Acceso denegado!');
}

function isAjax(){

    $xhr = strtolower($_SERVER['HTTP_X_REQUESTED_WITH']);
    if( !empty($xhr) &&
        $xhr == 'xmlhttprequest'){ 

        return true;
    }else{

        return false;
    }

}

Nota: algunos servidores Web no proporcionan esta variable, de modo que tendrás que probar antes de implementarlo.