{"id":18194,"date":"2019-10-29T16:19:56","date_gmt":"2019-10-29T19:19:56","guid":{"rendered":"http:\/\/localhost\/datacraft2023\/?page_id=18194"},"modified":"2019-10-29T17:20:54","modified_gmt":"2019-10-29T20:20:54","slug":"internet-html-import","status":"publish","type":"page","link":"http:\/\/localhost\/datacraft2023\/internet-html-import\/","title":{"rendered":"Internet: an\u00e1lisis HTML Import, utilidad para convertir sitios HTML a WordPress"},"content":{"rendered":"

\n

\u00a0Volver al Indice –\u00a0Internet y Tutoriales de Dise\u00f1o Web<\/a><\/h2>\n

\"an\u00e1lisis<\/p>\n

Por Alejandro Franco –\u00a0cont\u00e1ctenos<\/a><\/h2>\n

\"calificaci\u00f3n:Amo el HTML. Dise\u00f1o en HTML desde los inicios de Internet en Argentina – a finales de los a\u00f1os 90, cuando comenc\u00e9 a usar Netscape Composer<\/strong> para armar mi primer sitio<\/em> – y despu\u00e9s evolucion\u00e9 a Dreamweaver<\/strong>. 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\u00e1cil 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\u00f3viles, l\u00e9ase celulares o tablets. All\u00ed no hay est\u00e1ndares de ning\u00fan tipo: los primeros smartphones con Android<\/strong> ten\u00edan pantallas de 640 x 480 pixels pero hoy en d\u00eda cualquier m\u00f3vil 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\u00f1o de la pantalla, la interpretaci\u00f3n de cada celular \/ navegador m\u00f3vil es distinta. Ser visible y f\u00e1cil de leer es una cosa, y que quede bonito es otra.<\/em><\/p>\n

Las alternativas en mi caso eran evolucionar a una versi\u00f3n superior de HTML (como la 5, que resuelve casi todos estos dramas), o directamente saltar a una plataforma nueva, f\u00e1cil de usar y que tiene resuelto este punto con total holgura como es WordPress<\/strong>. WordPress<\/strong> no agranda simplemente las cosas; directamente las reacomoda, las pone en otro orden y con un escalado autom\u00e1tico que es preciso para cualquier pantalla sin importar la cantidad de pixels que tenga (la tan mentada responsividad<\/em>). Ahora la cuesti\u00f3n era c\u00f3mo hacer la mudanza; y como el copy \/ paste<\/em> quedaba descartado de entrada (hablamos de portales que tienen entre 1500 y 2500 p\u00e1ginas de contenido), era necesario dar con un plugin que hiciera todas estas cosas de por s\u00ed solo y con la mayor transparencia posible en el proceso.<\/p>\n

\n

Ah\u00ed es donde entra en juego HTML Import<\/strong>, un formidable plugin para WordPress<\/strong> que resuelve todo esto en cuesti\u00f3n de un par de horas. Para hacer el proceso de traslaci\u00f3n es recomendable que usted corra una simulaci\u00f3n de server (tipo Wamp<\/strong>) en su computadora, instale all\u00ed un WordPress<\/strong> desde cero, customice la plantilla que vaya a usar y saque el backup<\/em> pertinente (por ejemplo, con All In One WP Migration<\/a>) antes de empezar a experimentar. Luego descargue y active el plugin HTML Import<\/strong>, indique la URL final del sitio (en el caso de Wamp<\/strong> ser\u00e1 localhost\\susitio) y se\u00f1ale la carpeta (de su disco duro) donde est\u00e1n todos los archivos del sitio HTML que desea importar. HTML Import<\/strong> lee todos los archivos HTML (incluyendo subcarpetas), los convierte a p\u00e1ginas de WP<\/strong> (aunque tiene la opci\u00f3n de convertirlas en entradas), importa las im\u00e1genes 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\u00e1 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\u00f3 autom\u00e1ticamente WordPress<\/strong> como, por ejemplo,<\/p>\n

RedirectMatch 301 \/pagina.html http:\/\/www.susitio.com.ar\/pagina\/ [R=301,NC,L]<\/strong><\/em><\/p>\n

RedirectMatch 301 \/pagina2.html http:\/\/www.susitio.com.ar\/pagina2\/ [R=301,NC,L]<\/strong><\/em><\/p>\n

etc.<\/p>\n

Mientras que el proceso de importaci\u00f3n es r\u00e1pido y simple, eso no significa que los resultados queden prolijos de entrada. Primero<\/strong> debe entender c\u00f3mo funciona WordPress<\/strong> para saber qu\u00e9 cosas debe eliminar en el c\u00f3digo de todas las p\u00e1ginas de su viejo sitio HTML. Por ejemplo las cabeceras con im\u00e1genes y los pies de p\u00e1gina hay que borrarlos porque WP<\/strong> los maneja de manera centralizada. Segundo<\/strong>, tiene que rehacer los links internos. Como el nombre de archivo de las p\u00e1ginas reconvertidas se sigue llamando igual (pero pierde la extensi\u00f3n HTML o HTM), entonces puede eliminar directamente todo lo que diga .htm \/ .html en el c\u00f3digo. Tercero<\/strong>, en el caso de las im\u00e1genes la alineaci\u00f3n en HTML usa cierto c\u00f3digo (align=”center”<\/em>) que en WordPress<\/strong> se escribe de manera completamente diferente (class=”aligncenter “<\/em>) as\u00ed que debe reemplazar la instrucci\u00f3n para que, cuando importe su viejo sitio, las im\u00e1genes queden con la alineaci\u00f3n correcta sin necesidad de retoques. Cuarto<\/strong>, 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\u00e9fonos y direcciones de instituciones, bancos, etc<\/em> -, al menos ponerle par\u00e1metros proporcionales (width=”100%”<\/em>) en vez de tama\u00f1os fijos en pixels ya que WordPress<\/strong> sabe como escalar p\u00e1ginas, tablas e im\u00e1genes. Quinto<\/strong>, debe alterar las URL de las im\u00e1genes en los archivos HTML para que coincidan con la URL final de la carpeta de im\u00e1genes de WordPress<\/strong> (como\u00a0 http:\/\/localhost\/datacraft2023\/wp-content\/uploads\/foto-html-import.jpg <\/em>que es la URL de la imagen que acompa\u00f1a a este art\u00edculo, el cual desarrollo en una versi\u00f3n de WP<\/strong> instalada en mi servidor Wamp<\/strong> local), que es su destino final (recuerde que cuando ya est\u00e9 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:\/\/localhost<\/em> WP<\/strong> lo reemplazar\u00e1 con la URL definitiva http:\/\/www.susitio.com<\/em>) .Y, sexto<\/strong>, para hacer todo esto, le conviene conseguirse alg\u00fan pr\u00e1ctico editor HTML que permita cambios masivos en el c\u00f3digo de los archivos .html contenidos en una carpeta.\u00a0Dreamweaver<\/strong> 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\u00e1ginas de un sitio WordPress<\/strong>.<\/p>\n

\u00bfSi esto es complicado?<\/em><\/strong>. No, pero precisa darse ma\u00f1a<\/em>. Cuando haga la primera importaci\u00f3n en crudo se dar\u00e1 cuenta de las cosas que quedan horribles, tomar\u00e1 nota, y ver\u00e1 la manera de sacarlas del c\u00f3digo HTML del sitio original. Entonces probar\u00e1 de re-importar los archivos (con el c\u00f3digo HTML purgado) ya sea en otra copia virgen de WordPress<\/strong> o, bien, borrando todas las p\u00e1ginas e im\u00e1genes de la instalaci\u00f3n WordPress<\/strong> que us\u00f3 para hacer la primera prueba de importaci\u00f3n. La idea es ir sacando \/ reemplazando cosas hasta que quede la importaci\u00f3n de datos lo mas eficiente posible, con visibilidad potable de textos, encabezados formateados e im\u00e1genes alineadas como usted quiere. De ning\u00fan modo se va a salvar de tener que editar p\u00e1gina por p\u00e1gina para hacer correcciones, pero una cosa es perder uno o dos minutos haciendo tres o cuatro modificaciones menores en cada p\u00e1gina que tener que estar media hora en cada una, arreglando URLs mal escritas de las im\u00e1genes, encabezados mal centrados, p\u00e1rrafos mal formateados o borrando tablas desconfiguradas que merecen borrarse o hacerse de nuevo desde cero (y adem\u00e1s usando otros plugins como Broken Link Checker<\/strong> para revisar si hay enlaces internos mal escritos que a usted se le escaparon en la revisi\u00f3n). y una vez que termine todo en el Wamp<\/strong>, saca un backup<\/strong> y lo recupera en la instalaci\u00f3n virgen de WordPress<\/strong> que posea el dominio definitivo donde va a correr el sitio. En mi caso (y referido a este portal, Datacraft<\/strong>, aunque tambi\u00e9n tengo otro que es monstruoso con 2.500 p\u00e1ginas de contenido que es el portal de cine de culto Arlequin<\/a>) tuve que trabajar una semana en depurar el c\u00f3digo HTML de 1.400 p\u00e1ginas hasta ver que quedaran lo mas simplificadas posible y listas para la importaci\u00f3n. y luego estuve dos meses editando p\u00e1gina por p\u00e1gina cada uno de los 1.400 art\u00edculos importados en WordPress<\/strong>, tiempo que\u00a0 demand\u00f3 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\u00e1gina y la dejo en su versi\u00f3n final en 30 segundos, hago 2 p\u00e1ginas 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\u00e1pido y uno no es un aut\u00f3mata incansable.<\/p>\n

Convertir un sitio HTML a WordPress<\/strong> no es un imposible y el plugin HTML Import<\/strong> lo demuestra. \u00bfEs simple?<\/em> S\u00ed. \u00bfEs r\u00e1pido?<\/em>. Ni que hablar. \u00bfEs prolijo?<\/em>. No del todo, pero hay que tomarse el trabajo de reescribir porciones enteras de c\u00f3digo de manera masiva en su viejo sitio para que la importaci\u00f3n 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\u00edsimo menos tiempo que si tuviera que crear desde cero p\u00e1gina por p\u00e1gina, copiando y pegando textos, subiendo im\u00e1genes, enlazando links y reformateando todo. En definitiva es un plugin indispensable para pegar el gran salto a esa plataforma tan masiva, pragm\u00e1tica y genial que es WordPress<\/strong>, ganando el acceso al p\u00fablico navegante que usa celulares y ofreci\u00e9ndoles un sitio que opera con total eficiencia y magn\u00edfica visibilidad en la pantalla de sus m\u00f3viles.<\/p>\n","protected":false},"excerpt":{"rendered":"

\u00a0Volver al Indice –\u00a0Internet y Tutoriales de Dise\u00f1o Web Por Alejandro Franco –\u00a0cont\u00e1ctenos Amo el HTML. Dise\u00f1o en HTML desde los inicios de Internet en Argentina – a finales de los a\u00f1os 90, cuando comenc\u00e9 a usar Netscape Composer para armar mi primer sitio – y despu\u00e9s evolucion\u00e9 a Dreamweaver. Pero el tiempo pasa, el … Leer m\u00e1sInternet: an\u00e1lisis HTML Import, utilidad para convertir sitios HTML a WordPress<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/pages\/18194"}],"collection":[{"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/comments?post=18194"}],"version-history":[{"count":0,"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/pages\/18194\/revisions"}],"wp:attachment":[{"href":"http:\/\/localhost\/datacraft2023\/wp-json\/wp\/v2\/media?parent=18194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}