Volver al Indice – Internet y Tutoriales de Diseño Web
Por Alejandro Franco – contáctenos
Amo el HTML. Diseño en HTML desde los inicios de Internet en Argentina – a finales de los años 90, cuando comencé a usar Netscape Composer para armar mi primer sitio – y después evolucioné a Dreamweaver. Pero el tiempo pasa, el mundo evoluciona y, por mas de que uno no quiera, llega un momento en donde las herramientas se quedan anticuadas… con el plus de que algunos de nosotros armamos sitios masivos que quedaron estancados en una plataforma perimida. El punto pasa por la visibilidad del sitio en la pantalla del navegante, la cual es fácil de corregir si hablamos de usuarios de computadoras que usan monitores con resoluciones cada vez mayores, pero que te obliga a hacer toda una serie de malabares en el caso de las plataformas móviles, léase celulares o tablets. Allí no hay estándares de ningún tipo: los primeros smartphones con Android tenían pantallas de 640 x 480 pixels pero hoy en día cualquier móvil de gama media anda en 1280 x 720 o, peor, en el caso de los celulares mas grandes ya hablamos de 2160 x 1080. y si bien hay trucos en CSS para poner letras escalables y proporcionales al tamaño de la pantalla, la interpretación de cada celular / navegador móvil es distinta. Ser visible y fácil de leer es una cosa, y que quede bonito es otra.
Las alternativas en mi caso eran evolucionar a una versión superior de HTML (como la 5, que resuelve casi todos estos dramas), o directamente saltar a una plataforma nueva, fácil de usar y que tiene resuelto este punto con total holgura como es WordPress. WordPress no agranda simplemente las cosas; directamente las reacomoda, las pone en otro orden y con un escalado automático que es preciso para cualquier pantalla sin importar la cantidad de pixels que tenga (la tan mentada responsividad). Ahora la cuestión era cómo hacer la mudanza; y como el copy / paste quedaba descartado de entrada (hablamos de portales que tienen entre 1500 y 2500 páginas de contenido), era necesario dar con un plugin que hiciera todas estas cosas de por sí solo y con la mayor transparencia posible en el proceso.
Ahí es donde entra en juego HTML Import, un formidable plugin para WordPress que resuelve todo esto en cuestión de un par de horas. Para hacer el proceso de traslación es recomendable que usted corra una simulación de server (tipo Wamp) en su computadora, instale allí un WordPress desde cero, customice la plantilla que vaya a usar y saque el backup pertinente (por ejemplo, con All In One WP Migration) antes de empezar a experimentar. Luego descargue y active el plugin HTML Import, indique la URL final del sitio (en el caso de Wamp será www.datacraft.com.ar\susitio) y señale la carpeta (de su disco duro) donde están todos los archivos del sitio HTML que desea importar. HTML Import lee todos los archivos HTML (incluyendo subcarpetas), los convierte a páginas de WP (aunque tiene la opción de convertirlas en entradas), importa las imágenes e incluso le arma un listado con las redirecciones 301 para que usted las pegue en el archivo .htaccess de su dominio / server definitivo. Claro, usted está importando archivos con extensiones .html / .htm y eso se pierde por el camino, con lo cual es necesario hacer las redirecciones correspondientes a las nuevas URL que armó automáticamente WordPress como, por ejemplo,
RedirectMatch 301 /pagina.html http://www.susitio.com.ar/pagina/ [R=301,NC,L]
RedirectMatch 301 /pagina2.html http://www.susitio.com.ar/pagina2/ [R=301,NC,L]
etc.
Mientras que el proceso de importación es rápido y simple, eso no significa que los resultados queden prolijos de entrada. Primero debe entender cómo funciona WordPress para saber qué cosas debe eliminar en el código de todas las páginas de su viejo sitio HTML. Por ejemplo las cabeceras con imágenes y los pies de página hay que borrarlos porque WP los maneja de manera centralizada. Segundo, tiene que rehacer los links internos. Como el nombre de archivo de las páginas reconvertidas se sigue llamando igual (pero pierde la extensión HTML o HTM), entonces puede eliminar directamente todo lo que diga .htm / .html en el código. Tercero, en el caso de las imágenes la alineación en HTML usa cierto código (align=”center”) que en WordPress se escribe de manera completamente diferente (class=”aligncenter “) así que debe reemplazar la instrucción para que, cuando importe su viejo sitio, las imágenes queden con la alineación correcta sin necesidad de retoques. Cuarto, las tablas deben eliminarse y, si no se puede – porque parte del contenido se expresa en tablas, por ejemplo un listado a dos o tres columnas que contiene teléfonos y direcciones de instituciones, bancos, etc -, al menos ponerle parámetros proporcionales (width=”100%”) en vez de tamaños fijos en pixels ya que WordPress sabe como escalar páginas, tablas e imágenes. Quinto, debe alterar las URL de las imágenes en los archivos HTML para que coincidan con la URL final de la carpeta de imágenes de WordPress (como http://www.datacraft.com.ar/wp-content/uploads/foto-html-import.jpg que es la URL de la imagen que acompaña a este artículo, el cual desarrollo en una versión de WP instalada en mi servidor Wamp local), que es su destino final (recuerde que cuando ya esté todo terminado y corregido y saque una copia de seguridad para recuperarla / instalarla en su servidor web real online, todo lo que figura como http://www.datacraft.com.ar WP lo reemplazará con la URL definitiva http://www.susitio.com) .Y, sexto, para hacer todo esto, le conviene conseguirse algún práctico editor HTML que permita cambios masivos en el código de los archivos .html contenidos en una carpeta. Dreamweaver lo hace y es de una ayuda enorme a la hora de ahorrar trabajo reduciendo la cantidad de correcciones necesarias que precisan los archivos importados devenidos páginas de un sitio WordPress.
¿Si esto es complicado?. No, pero precisa darse maña. Cuando haga la primera importación en crudo se dará cuenta de las cosas que quedan horribles, tomará nota, y verá la manera de sacarlas del código HTML del sitio original. Entonces probará de re-importar los archivos (con el código HTML purgado) ya sea en otra copia virgen de WordPress o, bien, borrando todas las páginas e imágenes de la instalación WordPress que usó para hacer la primera prueba de importación. La idea es ir sacando / reemplazando cosas hasta que quede la importación de datos lo mas eficiente posible, con visibilidad potable de textos, encabezados formateados e imágenes alineadas como usted quiere. De ningún modo se va a salvar de tener que editar página por página para hacer correcciones, pero una cosa es perder uno o dos minutos haciendo tres o cuatro modificaciones menores en cada página que tener que estar media hora en cada una, arreglando URLs mal escritas de las imágenes, encabezados mal centrados, párrafos mal formateados o borrando tablas desconfiguradas que merecen borrarse o hacerse de nuevo desde cero (y además usando otros plugins como Broken Link Checker para revisar si hay enlaces internos mal escritos que a usted se le escaparon en la revisión). y una vez que termine todo en el Wamp, saca un backup y lo recupera en la instalación virgen de WordPress que posea el dominio definitivo donde va a correr el sitio. En mi caso (y referido a este portal, Datacraft, aunque también tengo otro que es monstruoso con 2.500 páginas de contenido que es el portal de cine de culto Arlequin) tuve que trabajar una semana en depurar el código HTML de 1.400 páginas hasta ver que quedaran lo mas simplificadas posible y listas para la importación. y luego estuve dos meses editando página por página cada uno de los 1.400 artículos importados en WordPress, tiempo que demandó el trabajo no por ser complicado sino porque uno tiene una limitada capacidad diaria de hacer cosas repetitivas antes de empezar a marearse. Si yo edito una página y la dejo en su versión final en 30 segundos, hago 2 páginas por minuto y 120 por hora… pero llega un punto en que a uno se le empiezan a cruzar los ojos porque va demasiado rápido y uno no es un autómata incansable.
Convertir un sitio HTML a WordPress no es un imposible y el plugin HTML Import lo demuestra. ¿Es simple? Sí. ¿Es rápido?. Ni que hablar. ¿Es prolijo?. No del todo, pero hay que tomarse el trabajo de reescribir porciones enteras de código de manera masiva en su viejo sitio para que la importación solo le deje detalles menores para corregir. En todo caso es un proceso que usted solo hace una vez en la vida, y que le va a llevar muchísimo menos tiempo que si tuviera que crear desde cero página por página, copiando y pegando textos, subiendo imágenes, enlazando links y reformateando todo. En definitiva es un plugin indispensable para pegar el gran salto a esa plataforma tan masiva, pragmática y genial que es WordPress, ganando el acceso al público navegante que usa celulares y ofreciéndoles un sitio que opera con total eficiencia y magnífica visibilidad en la pantalla de sus móviles.