Hoy ha hecho un día de perros aquí en Asturias, me he sentado delante de mi iMac y he estado enredando un poco con esa aplicación que tanto me gusta (el template dominoblog.ntf, of course).
En esta entrada vamos fusilar un página web,
concretamente esta.
Todo lo voy a hacer con páginas del blog, no creo que cambie mucho con otras páginas que usen HTML, CSS y javaScripts. Se trata de "robar" el código y adaptarlo a nuestra aplicación web.
Bueno, vamos a la faena, nos vamos a la página que queremos fusilar, botón derecho, ver código fuente, lo seleccionamos todo y lo copiamos.
Ahora nos vamos a nuestra aplicación, en mi caso me voy al blog del ESLUG, Advanced, Recursos, Web Pages y creo una nueva Web Page, la voy a poner de título borrar1, en el campo "page name" le voy a poner también borrar1.htm y por último voy a pegar el código en el campo "Additional HTML/Text". Le doy a la acción de "Save and Post", ya tengo una cosa lista para ver con un navegador.
Como sabéis, las Web Pages de esta aplicación no se publican como las entradas, hay que crear un enlace apuntando a la página.
En este enlace veremos la página que hemos creado. Queda como un culo (con perdón), me saca el navegador dos veces, el campo de búsqueda igual, etc, etc. En alguna ocasión he comentado que las Web Pages usan el Page Template Document ( a no ser que usemos el campo "Document Template" para poner uno que creemos nosotros).
El Page Template Documento muestra el header, el navegador de la izquierda, la parte de abajo, etc, etc, pero nosotros no queremos nada de eso, lo que queremos es que salga clavada a la página que hemos copiado.
Vamos a ver como lo arreglamos, lo primero es crear una Page Template, o sea, vamos a Advanced, HTML Templates, Page Templates y creamos uno nuevo. Le ponemos de nombre "borrar2" y le pegamos el código de la página "robada".
Ya sabéis, no podemos apuntar directamente a esa Page Template, tenemos que crear otra Web Page, le vamos llamar borrar2, el campo "page name" ahora será borrar2.htm y nada de pegar el código robado, lo que haremos es ir al campo "Document Template" y seleccionaremos el template que creamos anteriormente (borrar2).
Bien, ya tenemos una Web page creada,
si le echamos un vistazo quedará así, hombre, ya no está tan fea pero que algo no va bien, parece que la hoja de estilos no está funcionando.
A partir de aquí la cosa es sencilla, tenemos dos opciones, la mala que es apuntar a la hoja de estilos de la aplicación de la página robada y la buena que es "robar" la hoja de estilos y traerla a nuestra aplicación.
Cuando digo "robar" para el ESLUG no hay problema, aquí todo es opensource, pero al loro con estos temas, hay copyright's y debemos de ser respetuosos con el trabajo de los demás.
Fijaros en el código pegado, la hoja de estilos está referenciada más o menos así "../css/picasso.css", se trata de ponerle la ruta buena de la página copiada, en el caso que nos traigamos la hoja de estilos a nuestra aplicación no tenemos que tocar nada, nos iríamos de nuevo a Advanced, Recursos, Stylesheets, creamos una nueva hoja de estilos, pegamos el codigo que muestra el link de la hoja de estilos, le damos un nombre a la hoja, en este caso sería picasso.css y trabajo terminado (o casi terminado).
Voy a crear una nueva Web Page y un nuevo Page Template con todos los temas comentados anteriormente arreglados, la voy a llamar johnlennon.htm y
este es el enlace.
He dicho que la cosa está casi terminada, porque si os fijáis, aquí nos falta una imagen, esa que se ve John Lennon posterizado.
Qué pasa con esa imagen ??? porqué no sale ??? el resto de las imágenes estan referenciadas en la hoja de estilos, está esta a pelo, fijaros en el código, la solución es apuntar a ella o descargarla y crearla con recurso de imagen en nuestra base de datos.
Otro tema, fijaros que la página que hemos fusilado tiene arriba un navegador, yo diría que es igual que el del ESLUG (posiblemente lo copié de ESLUG para trabajar menos), si la queremos dejar en nuestra aplicación debemos de cambiarle los enlaces, lo voy a hacer, voy dejar solo el "Inicio" para que me lleve a la página principal del ESLUG.
Creo que con esto he terminado, solo comentar que este 2014 el ESLUG parece que está un poco parado, a ver si la gente se anima y vuelve a coger un poco de marcha.
Actualización posterior. (16/2/1014)
Pongo esta aclaración por si alguien se lee esta entrada completa (cosa que me extraña un guevo) verá que no coincide mi explicación con el resultado final.
Una vez copiada la página he hecho algunos cambios, me he traido la hoja de estilos al blog del ESLUG, eso me obligó a traerme también las imágenes, le he cambiado el Header y la parte de abajo donde muestra las 10 diez últimas entradas del blog, ya sabéis, esto es un parámetro del documento de configuración.
Bueno, ahora como la página hace referencia a mi grupo preferido y especialmente a John Lennon, el álbum "Imagine" suena como música de fondo.
"You may say I'm a dreamer, But I'm not the only one, I hope someday you will join us, And the world will be as one."
Blog for DummiesBlog para Torpes
