Crea tus propias plantillas para iWeb, IV

Última oportunidad de salvarte

Bueno, aquí estamos. Este es el último paso para obtener una Plantilla de iWeb personal y única, totalmente adaptada a tu gusto. Los archivos XML no son nada bonitos, más bien son feos como el dolor. Me han escocido los ojos durante días después de estar mirándolos, analizarlos y descubrir sus entrañas. Pero de todas formas estoy muy satisfecha por los resultados y francamente, después del esfuerzo inicial, ahora me parece muy fácil navegar en ellos y cambiarlos a mi gusto. Tú dedícate a dejar comentarios dentro de ellos de tal manera que, para una próxima vez que te pongas a crear una template nueva, puedas buscarlos con tu editor de texto favorito.

Un tutorial de Suzanne Boben. Consta de 4 partes; enlaces de articulos anteriores, al final del artículo.

Cargando los archivos XML

Los archivos, si te has perdido, están dentro de cada archivo de template que has creado para cada tipo de página. Así que, por esta vez, vamos a entrar en el directorio de About Me, buscar tu template, mostrar su contenido y allí lo encontrarás… index.xml.gz. En primer lugar has una copia de seguridad de ese archivo y guárdala en algún lugar seguro. Ahora haz doble clic y mira el contenido XML.

Antes de que te de un pasmo ante todo esto que ves ábrelo en un editor de texto. Yo que tú no intentaba abrir hacerlo con un editor como el TextEdit u otro que no resalte texto, ya que puedes perder la vista ante ese chorro de código.

Pero hay más problemas: no he podido abrir el archivo en mi editor favorito, ya que se bloquea a causa de que el código está escrito en una única línea. De locos, vamos. Solucioné esto abriéndolo en el TextEdit (sí, al final caí), copiando pedazos de código bastante gordos en otro archivo y separándolos con retornos de carro (en nuevas líneas). Cerré el archivo original, guardé el archivo nuevo en mi editor de código, lo cerré y copié la nueva versión sobre le viejo. Luego lo abrí con mi editor y funcionó. Espero que a vosotros también.

Anatomía de un archivo XML… y algunas otras cosas que no querríais saber

Mencionaré algunos detalles generales que os ayudarán en este tema. En primer lugar no intentes ir formateando todo lo que leas para hacerlo más legible. La verdad es que no va a haber muchas cosas que necesites tocar, por lo que formatear todo lo que hay es una pérdida de tiempo.

Segundo, para los que no conozcan nada de XMl decirles que es parecido al HTML pero que en este caso tú puedes hacer las etiquetas que hay entre ‘<’ y ‘>’, por lo que podrás leer muchas cosas raras. No te preocupes por eso. De todas maneras es útil saber que el XML usa reglas similares a HTML para abrir y cerrar etiquetas. Por ejemplo, <sf:fontSize> y </sf:fontSize>. ¿Te suenan, no? Bien. Otra cosa a tener en cuenta, y tu maravilloso editor capaz de resaltar con colores te lo demostrará, es que los valores están siempre entre comillas, y que tendrán un color diferente de las etiquetas mismamente. Apuesto a que eres capaz de descubrir que tamaño de fuente se ha especificado aquí:

<sf:fontSize><sf:number sfa:number=”72″ sfa:type=”f”/></sf:fontSize>

¿Y se necesita saber XML para saber esto? No. Esto es más que nada buscar con cuidado y tener un poco de lógica, así que vamos allá.

¿Qué es lo primero que no te gusta?

¿Has abierto con éxito el archivo XML? Si así es apunta cual es, pero ten en cuenta que para este ejemplo usaremos la página Welcome.

Ahora, a medida que las cosas cambian no importa por dónde o con qué empiezas, pero sí que debes asegurarte de que cambias cosas que realmente deseas cambiar. Puedes desear cambiar la fuente, el tamaño de la fuente, su estilo, el color, el espaciado, etc., cualquier propiedad que define al elemento. Busquemos ese elemento en la página Welcome y anotemos sus propiedades actuales. Para la template Freestyle, en la que se basa mi template de pruebas, la fuente de la cabecera es Portago y su tamaño es 70. Así que lo primero que voy a hacer es usar (tecla comando + F) para encontrar la palabra Portago. No puede haber muchas…

Acabas de clavar tu primera estaca en el XML

Bien. Cuando encuentras la palabra Portago dentro del archivo lo que descubres es un lío de código casi indescifrable. Aquí te doy algunas pistas para desenredar ese enredo con un poco de claridad.

Si estás cambiando las fuentes o los colores de las fuentes, seguramente lo que buscas lo hallarás en un gran bloque de código XML que se parecerá bastante a lo que te muestro abajo. Si te fijas verás el nombre de la fuente, PortagoITCTT:

<sf:paragraphstyle sfa:ID=”SFWPParagraphStyle-0″ sf:name=”Body” sf:ident=”paragraph-style-5″><sf:property-map><sf:defaultTabStops/><sf:underlineWidth/><sf:tabs/><sf:leftIndent/><sf:paragraphFill><sf:null/></sf:paragraphFill><sf:lineSpacing><sf:linespacing sfa:ID=”SFWPLineSpacing-0″ sf:amt=”1.2″ sf:mode=”relative”/></sf:lineSpacing><sf:paragraphBorders/><sf:italic/><sf:baselineShift/><sf:tocStyle><sf:null/></sf:tocStyle><sf:fontName><sf:string sfa:string=”PortagoITCTT”/></sf:fontName><sf:fontColor><sf:color xsi:type=”sfa:calibrated-rgb-color-type” sfa:r=”0.27450981736183167″ sfa:g=”0.23529411852359772″ sfa:b=”0.23529411852359772″ sfa:a=”1″/></sf:fontColor><sf:rightIndent/><sf:textBackground><sf:null/></sf:textBackground><sf:outlineLevel/><sf:strikethru/><sf:outline/><sf:dropCap/><sf:listStyle><sf:null/></sf:listStyle><sf:textShadow/><sf:capitalization/><sf:ligatures/><sf:keepWithNext/><sf:keepLinesTogether/><sf:textBorders/><sf:strikethruWidth/><sf:widowControl/><sf:word_underline/><sf:followingParagraphStyle><sf:null/></sf:followingParagraphStyle><sf:superscript/><sf:effectColor><sf:null/></sf:effectColor><sf:spaceBefore/><sf:firstLineIndent/><sf:bold/><sf:showInTOC/><sf:fontSize><sf:number sfa:number=”70″ sfa:type=”f”/></sf:fontSize><sf:hidden/><sf:underline/><sf:effect><sf:null/></sf:effect><sf:hyphenate/><sf:word_strikethrough/><sf:outlineColor><sf:null/></sf:outlineColor><sf:spaceAfter/><sf:language><sf:null/></sf:language><sf:tracking/><sf:decimalTab/><sf:strikethruColor><sf:null/></sf:strikethruColor><sf:atsuFontFeatures/><sf:pageBreakBefore/><sf:kerning/><sf:paragraphStroke><sf:null/></sf:paragraphStroke><sf:underlineColor><sf:null/></sf:underlineColor><sf:alignment/><sf:firstTopicNumber/></sf:property-map></sf:paragraphstyle>

Nota que el trozo de código empieza con algo llamado paragraphstyle, párrafo de estilo, algo típico para los estilos de texto. Aquí tienes el código formateado con múltiples líneas para poder ver así las diversas propiedades.

<sf:paragraphstyle sfa:ID=”SFWPParagraphStyle-0″ sf:name=”Body” sf:ident=”paragraph-style-5″>

<sf:property-map>

<sf:defaultTabStops/>

<sf:underlineWidth/>

<sf:tabs/>

<sf:leftIndent/>

<sf:paragraphFill><sf:null/></sf:paragraphFill>

<sf:lineSpacing><sf:linespacing sfa:ID=”SFWPLineSpacing-0″ sf:amt=”1.2″ sf:mode=”relative”/></sf:lineSpacing>

<sf:paragraphBorders/> <sf:italic/>

<sf:baselineShift/>

<sf:tocStyle><sf:null/></sf:tocStyle>

<sf:fontName><sf:string sfa:string=”PortagoITCTT”/></sf:fontName>

<sf:fontColor><sf:color xsi:type=”sfa:calibrated-rgb-color-type” sfa:r=”0.27450981736183167″ sfa:g=”0.23529411852359772″ sfa:b=”0.23529411852359772″ sfa:a=”1″/></sf:fontColor>

<sf:rightIndent/>

<sf:textBackground><sf:null/></sf:textBackground>

<sf:outlineLevel/>

<sf:strikethru/>

<sf:outline/><sf:dropCap/>

<sf:listStyle><sf:null/></sf:listStyle>

<sf:textShadow/> <sf:capitalization/>

<sf:ligatures/>

<sf:keepWithNext/>

<sf:keepLinesTogether/>

<sf:textBorders/>

<sf:strikethruWidth/>

<sf:widowControl/>

<sf:word_underline/>

<sf:followingParagraphStyle><sf:null/></sf:followingParagraphStyle>

<sf:superscript/>

<sf:effectColor><sf:null/></sf:effectColor>

<sf:spaceBefore/>

<sf:firstLineIndent/>

<sf:bold/>

<sf:showInTOC/>

<sf:fontSize><sf:number sfa:number=”70″ sfa:type=”f”/></sf:fontSize>

<sf:hidden/>

<sf:underline/>

<sf:effect><sf:null/></sf:effect>

<sf:hyphenate/>

<sf:word_strikethrough/>

<sf:outlineColor><sf:null/></sf:outlineColor>

<sf:spaceAfter/>

<sf:language><sf:null/></sf:language>

<sf:tracking/>

<sf:decimalTab/>

<sf:strikethruColor><sf:null/></sf:strikethruColor>

<sf:atsuFontFeatures/>

<sf:pageBreakBefore/>

<sf:kerning/>

<sf:paragraphStroke><sf:null/></sf:paragraphStroke>

<sf:underlineColor><sf:null/></sf:underlineColor>

<sf:alignment/>

<sf:firstTopicNumber/>

</sf:property-map>

</sf:paragraphstyle>

A partir de este momento debes buscar lo que deseas cambiar y que lo más normal es que se llame de la forma más lógica y que ya conoces… como el nombre de la fuente de la cabecera de la plantilla Freestyle. Para cambiarle sólo debes sobrescribirlo. Por ejemplo yo he cambiado todas las instancias de Portago a Impact en la nueva template. De igual manera cambié el tamaño de la fuente de la cabecera a 72. Deberías poder ver esos cambios en el código con suma facilidad. Para estar seguro de lo que cambias formatea el código tal y como se ve en el segundo ejemplo, pero estate bien seguro de cómo lo haces, porque si no puedes organizar un buen lío.

Después de hacer algunos cambios en el estilo inserté un comentario de texto para identificar más fácilmente en el futuro.

<!– Header Text Style –> o <!– Nav Menu Rollover Color –>

Otras propiedades que puedes desear cambiar

He encontrado algunos otros parámetros que se pueden configurar.

Colores de fuentes

Los colores de las fuentes están definidos con códigos RGB 100, pero aquí llevan el uso del punto decimal de una manera poco menos que excesiva. Mirad a estas especificaciones de color:

<sf:fontColor><sf:color xsi:type=”sfa:calibrated-rgb-color-type” sfa:r=”0.27450981736183167″ sfa:g=”0.23529411852359772″ sfa:b=”0.23529411852359772″ sfa:a=”1″/></sf:fontColor>

No son necesarios tantos decimales. Estos colores podrían ser descritos con sólo dos decimales, y si usas Art Directors Tool Kit podrás obtener los colores que te guste y sus códigos de dos decimales listos para que los insertarlos en tu web. Esta precisión de decimales tan excesiva afina un poco más el tono del color, pero ¿es de verdad necesario para tu web? Tu mismo.

<sf:fontColor><sf:color xsi:type=”sfa:calibrated-rgb-color-type” sfa:r=”0.27″ sfa:g=”0.24″ sfa:b=”0.24″ sfa:a=”1″/></sf:fontColor>

Poner negritas

Si deseas la fuente en negrita sólo debes sobrescribir la sección <sf:bold> con

<sf:bold><sf:number sfa:number=”1″ sfa:type=”i”/></sf:bold>

Desactivar la opción de Capitalizar

Es algo me que molesta muchísimo, así que obligué a apagarla en Freestyle sobrescribiendo el código

<sf:capitalization><sf:number sfa:number=”1″ sfa:type=”i”/></sf:capitalization>

de la siguiente manera:

<sf:capitalization/>

Fíjate en lo que ha cambiado. Cuando una propiedad tiene un valor existe una etiqueta de apertura y otra de cierre con lagunas cosas entre medio. Pero si lo que deseas es eliminar esa propiedad de una manera radical solo tienes que quitar todo lo del medio y el final y acabar la primera parte con un backslash (/).

Desactivar las negritas

¿Adivinas? <sf:bold/>

Añadir sombras al texto

Aquí tienes el código que habilita las sombras en tu texto. Puedes definir la dirección de la sombra, su posición, el radio (llamado blur en el interfaz) y la opacidad. De igual manera puedes determinar el color de la sombra, pero no hace falta poner esos 15 dígitos sino sólo dos.

<sf:textShadow>

<sf:shadow sfa:ID=”SFRShadow-4″ sf:angle=”45″ sf:offset=”1″ sf:radius=”6″ sf:opacity=”0.75″>

<sf:color xsi:type=”sfa:calibrated-rgb-color-type” sfa:r=”0.27″ sfa:g=”0.23″ sfa:b=”0.23″ sfa:a=”1″/>

</sf:shadow>

Determinar la altura de la línea

Dentro del XML se le llama line spacing, pero la interfaz lo denomina Line. Está en el panel inspector de texto. Cuando cambié la fuente de Portago a Impact me cambió al mismo tiempo el alto de la línea de 1.1 a 1.2.Cuando miras estos valores dentro del código lo que ves es un chorro de decimales. De nuevo sucede que con limitar el número de dígitos se obtiene el mismo resultado.

<sf:lineSpacing><sf:linespacing sfa:ID=”SFWPLineSpacing-0″ sf:amt=”1.2″ sf:mode=”relative”/></sf:lineSpacing>

Más después

Pero si no puedes esperar y ya tienes lo que quieres, ahora básicamente lo que tienes que hacer es volver a comprimir el archivo index.xml a index.xml.gz o a index.xml.tgz Y eso es todo. Crea una nueva página con tu template… o siendo más realistas mira qué es lo que te falta, investiga y retócalo tu mismo. 🙂

Artículos anteriores

Crea tus propias plantillas para iWeb, I

Crea tus propias plantillas para iWeb, II

Crea tus propias plantillas para iWeb, III

Traducción de Txisco

0 0 votos
Article Rating
Subscribe
Notify of
0 Comments
Opiniones Inline
Ver todos los comentarios
0
Me encantaría saber tu opinión, por favor, deja un comentariox
()
x