Hemos eliminado los marcos de la página principal del Gretatester, y hemos sustituido el menú de los marcos por uno incluido dentro de la propia página, posicionándolo con CSS. El problema es que ahora habría que incluir ese mismo menú en todas las páginas del sitio web. Como hacerlo a mano es tedioso, y para los trabajos tediosos ya está el ordenador, que lo haga él...
Pero, ¿cómo? La respuesta está en la opción de Edición->Buscar y Reemplazar. ¿Cómo podemos usar la función de reemplazar para añadir? Bueno, añadir es reemplazar lo que ya hay con lo mismo que había y algo más. Necesitamos definir qué queremos buscar y por qué lo queremos reemplazar.
¿Qué queremos buscar? Pues todo el cuerpo de la página, es decir, todo lo que haya entre las etiquetas <body> y </body>. Es decir, tengo que decirle que busque <body>todo_lo_que_haya_aqui</body>.
Para especificarlo tenemos que hacer uso de las expresiones regulares, que son una forma elegante e intrincada de escribir todo_lo_que_haya_aqui para que el ordenador lo entienda. Después de un buen rato de ensayo, error, tirones de pelo, rascado de perilla, etc, la expresión regular ganadora ha resultado ser ésta:
(<body[^>]*>)((.|\n)*)(<\/body>)
¿Y ésto dónde se mete? Pues, con el archivo donde queremos hacer la prueba abierto en el Dreamweaver, vamos a Edición->Buscar y Reemplazar. Donde dice "Buscar en:" le decimos que en el documento actual, donde dice "Buscar:" decimos que código fuente, y en el cuadrito que nos sale al lado ponemos el chorizo anterior.
Si ahora pulsamos en "Buscar sig.", nos debe marcar todo lo que hay entre las etiquetas <body> y </body>.
Ahora el objetivo es decirle que todo eso que ha encontrado, lo reemplace por lo mismo más lo que queramos añadir. En este caso, vamos a añadir un comentario al principio del cuerpo, justo después de <body>. Para ello, en el cuadro Reemplazar con: escribimos lo siguiente:
$1
<!-- Aquí irá el encabezado -->
$2
$3
Y pulsamos Reemplazar. El resultado debe ser la misma página que teníamos con el trozo nuevo (el comentario) añadido al principio.
En sucesivos artículos veremos cómo nos puede servir esto para añadir el nuevo menú a todas las páginas del sitio. Pista: hay que ampliar la búsqueda y sustitución a todos los archivos, y lo que hay que añadir es el trocito de código del menú...
lunes, 22 de septiembre de 2008
miércoles, 17 de septiembre de 2008
Versión de Gretatester en CSS actualizada
La versión de la página de Gretamanía construída únicamente mediante CSS (sin marcos ni tablas, dos escollos para la accesibilidad y la claridad) ha sido actualizada para reflejar los últimos cambios, sobre todo el cambio de nombre del dominio, ya que la anterior versión todavía llevaba los gráficos de la antigua gretamania.tk.
En el proceso se ha construido una página principal prácticamente a mano, combinando los trozos que estaban sueltos en la versión con marcos en una sola página e identificándolos con comentarios en el código fuente, para saber qué trozos de la página corresponden a qué partes. Más adelante veremos cómo esto nos puede ayudar a la hora de sustituir una sección completa del sitio en todas sus páginas usando funciones de búsqueda y reemplazo de trozos de texto.
Aparte de la actualización, la página es idéntica al antiguo Gretatester: el menú sólo tiene opciones de texto para comprobar que funciona, y todas las entradas no se abren correctamente todavía. El siguiente paso será pulir el menú para conseguir que incluya exactamente los mismos gráficos que tiene actualmente Gretamanía, de manera que el aspecto final de la página principal sea el mismo que en la versión con marcos.
Seguiremos informando...
En el proceso se ha construido una página principal prácticamente a mano, combinando los trozos que estaban sueltos en la versión con marcos en una sola página e identificándolos con comentarios en el código fuente, para saber qué trozos de la página corresponden a qué partes. Más adelante veremos cómo esto nos puede ayudar a la hora de sustituir una sección completa del sitio en todas sus páginas usando funciones de búsqueda y reemplazo de trozos de texto.
Aparte de la actualización, la página es idéntica al antiguo Gretatester: el menú sólo tiene opciones de texto para comprobar que funciona, y todas las entradas no se abren correctamente todavía. El siguiente paso será pulir el menú para conseguir que incluya exactamente los mismos gráficos que tiene actualmente Gretamanía, de manera que el aspecto final de la página principal sea el mismo que en la versión con marcos.
Seguiremos informando...
lunes, 7 de julio de 2008
Suscribirse a:
Entradas (Atom)