Cambiar propiedades Style de un texto con Javascript

"No hay verdad si no hay mentira. No hay muerte si no hay vida. No hay amor sin ningún odio. No hay nada, si no hay todo."

Todo/Nada -Azrael

Copypasteado de Daikrieg

Ejemplos de instrucciones con Javascript para cambiar las propiedades style de un texto.

Ocultar un texto llamando a una id concreta con un botón

Por ejemplo, queremos ocultar el siguiente texto:

Me gustan las tetas gordas y, cuanto más gordas, mejor.

Para ello, lo vamos a escribir dándole la id 'texto' (por ejemplo, con un tag div) y vamos a añadir la siguiente función script (ya sea en el mismo html o desde una hoja .js):

function cambiarpropiedad()
{
/*Utilizamos una función if para que, al volver a clicar el botón, vuelva a verse el texto*/
if (document.getElementById('texto').style.display == 'none')
{
document.getElementById('texto').style.display = 'block';
} else {
document.getElementById('texto').style.display = 'none';
}
}

Luego, añadiríamos un botón que llamase a esta función, quedando el código html algo así:

<div id="texto">Me gustan las tetas gordas y, cuanto más gordas, mejor.</div>
<input type="button" value="Cambia el color del texto superior" onclick="cambiarpropiedad()" />

Ocultar un texto llamando a una id cualquiera con un botón

Sólo habría que cambiar, en la función Javascript, el 'texto' por el nombre de una variable cualquiera (en este caso escogemos var1) y luego añadir el nombre de la variable en la declaración de las funciones.

El código quedaría algo así:

unction cambiarpropiedad(var1)
{
if (document.getElementById(var1).style.display == 'none')
{
document.getElementById(var1).style.display = 'block';
} else {
document.getElementById(var1).style.display = 'none';
}
}

<div id="texto">Me gustan las tetas gordas y, cuanto más gordas, mejor.</div>
<input type="button" value="Cambia el color del texto superior" onclick="cambiarpropiedad('texto')" />
<!-- En este caso, el botón sólo está para la id texto pero la declaración de variable permite reutilizar la función para más botones o textos.-->

Otros cambios de propiedades

Con Javascript podemos modificar cualquier otro tipo de propiedad del tag que sea. Tan sólo hay que modificar de la función document.getElementById(variable).style.display la parte correspondida a .style.display. Por ejemplo, para cambiar el color de fondo, habría que poner: .style.backgroundColor. Si fuese un enlace y quisiésemos cambiar la dirección habríamos de poner .href.

Las posibilidades de modificar el código html con Javascript son, incluso para un iniciado, ilimitadas.

Crear un modificador de caracteres en php

"Sólo los estúpidos son esclavos del tiempo y el espacio"

Lost

Hoy en Malditaseamanía vamos a aprender a crear un modificador de caracteres en php. ¿Qué es un modificador de caracteres? Bueno, es un nombre ficticio para una función muy graciosa de PHP que se utiliza, normalmente, para censurar palabras en foros y blogs. Es muy graciosa y muy útil, sobretodo para evitar mensajes como el siguiente:

HOYGAN! IJOSDEPUTA DEL VLOGUERO K ME KAGO EN SUS PUTAKAS MADRES DEL HAMOR ERMOSO NO ME DIGAN K NO LE GUSTA LO K DIGO K ME KIER CNSURAR PUTA MIERDA. SCRIVES DE PENA Y DEVERIAN DE HARRANCART LA PLBIS A PATAS. CHUPAMELNAVAKO.

Bueno, aunque mensajes como ese requerirían algo más que una simple función phpera para evitarlos. Vamos al asunto.

El meollo de la cuestión

¿Cómo hacer para cambiar unos caracteres por otros? Ya sea por la función que se quiera. Para eso nada mejor que un ejemplo. En el siguiente ejemplo, vamos a cambiar todas las letras p por la palabra pene. Vale, es el caso inverso a nuestro censurador de palabras, pero para aprender igualmente nos vale.

1. En primer lugar vamos a definir tres variables: $patron, $texto y $encontrado.
   
   $patron, en este caso, será un caracter, aunque también puede usarse como cadena de caracteres. Será la palabra/caracter que queremos cambiar estando éste entre comillas y barras: ("/{ejemplo}/"). Lo llamamos así porque será nuestro patrón de búsqueda.
   
   $texto será el mensaje sobre el que queremos cambiar cada p por pene.
   
   $encontrado será un booleano que nos indicará si encuentra la palabra/caracter buscada o no usando una función en php que los busca: preg_match_all. No profundizaremos en este punto y dejaremos que el lector copie y pegue como mejor pueda. Esta función utilizará cuatro valores(por orden de uso): $patron (patrón de búsqueda, puede ser una cadena de caracteres); $texto (texto en el que buscar el patrón); $coincidencias (devuelve el valor TRUE o FALSE al valor de $encontrado); y PREG_OFFSET_CAPTURE(una cosa muy chunga que nos ayudará en nuestro código).
   
   Por ejemplo, para el caso que tratamos, el código sería:
   

   $patron = "/p/";
   $encontrado = preg_match_all($patron, $texto, $coincidencias, PREG_OFFSET_CAPTURE);

   
   


2. Ahora generamos un análisis de casos (una expresión if) que se active en el caso de que exista un caracter 'p' en la variable $texto. De esta forma, hacemos que la web vaya más rápida y optimizamos el código. Seguidamente generamos cuatro nuevas variables: $patron2,$ch, y dos contadores $index y $index2.
   
   En este caso, $patron2 y $ch tienen funciones equivalentes. $patron2 cogerá el valor de $texto para analizarlo. Esta variable no es necesaria, pero yo la declararía por si luego añadiésemos más funciones en las que requiriésemos el texto original. $ch, en cambio, irá generando la nueva palabra. Como la longitud del array va a aumentar, parece lógico hacer un contador de array para el texto y otro para la nueva palabra más larga. Ambos contadores los inicializamos (aunque no sea realmente necesario) por si los hubiésemos utilizado anteriormente y guardasen un valor que se cargase nuestro código.
   
   El análisis de casos quedaría, finalmente, algo así:
   

   if ($encontrado) {
   $patron2 = $texto;
   $ch = $texto;
   $index = 0;
   $index2 = 0;
   }



3. Utilizando las variables declaradas, finalmente, añadimos un bucle, concretamente una función for. A la misma le daremos datos sobre qué evaluar, la condición de parada y haremos que vaya aumentando el index con cada for. Dentro de esta función, haremos que $ch[$index2] vaya cogiendo el valor actual de $patron2[$index], luego analizamos si el valor $ch ha adquirido el valor 'p' y, si es así, generamos un código que le vaya dando los valores. Para saber si $ch ha cogido el valor 'p', utilizaremos la función strcasecamp que compara dos cadenas de caracteres y da, como valor, la diferencia entre ambos. Finalmente, aumentamos el contador $index2 en una unidad.
   
   Parece complicado, pero todo queda bien resumido con el siguiente código:
   

   for($index; $index < strlen($patron2); $index++)
   {
   $ch[$index2] = $patron2[$index];
   if (strcasecmp($ch[$index2], "p") == 0) {
   $index2++;
   $ch[$index2] = "e";
   $index2++;
   $ch[$index2] = "n";
   $index2++;
   $ch[$index2] = "e";
   }
   $index2++;
   }

El código resultante para cambiar el caracter 'p' por el array de carecteres 'pene' es:

$patron = "/p/";
$encontrado = preg_match_all($patron, $texto, $coincidencias, PREG_OFFSET_CAPTURE);
if ($encontrado) {
$patron2 = $texto;
$ch = $texto;
$index = 0;
$index2 = 0;
for($index; $index < strlen($patron2); $index++){
$ch[$index2] = $patron2[$index];
if (strcasecmp($ch[$index2], "p") == 0) {
$index2++;
$ch[$index2] = "e";
$index2++;
$ch[$index2] = "n";
$index2++;
$ch[$index2] = "e";
}
$index2++;
}
$texto = $ch;
}

Espero que este código os sirva para algo. Si lo que queréis hacer es cambiar palabras por lo que sea todo va igual, sólo que habría que hacer un nuevo loop y una nueva variable que fuese palabra por palabra (generando una nueva función para esto por comodidad) necesitando una nueva variable que fuese cogiendo la palabra y usándola para evaluar con el patrón. Es fácil, pero de todas formas ya la haré para otra ocasión.

Tutorial de PHP-MySQL

"Mi nombre es Starbuck pero vosotros podéis llamarme Dios."

Lt. Starbuck, Battlestar: Galactica

He encontrado un tutorial bastante bueno de PHP-MySQL:

Tutorial de PHP-MySQL

Este es para mí especialmente. Conforme lo vaya mirando y analizando sacaré posibles errores y correcciones de mi cosecha, en caso de que sean necesarias. Por ahora, me va, y eso es más que suficiente.

Como HTML es muy insuficiente, así que sólo guiaros de la parte magrosa de generar bases de datos en MySQL con PHP.

Incluir botones de Menéame en blogger

"-¿Lo estás disfrutando, Bauer?¿Tanto como disfrutaste masacrar a mi pequeño hermano?
-Tu hermano fue responsable por la muerte de docenas de vidas inocentes. Ahora tú eres responsable por miles. Créeme, no he empezado a disfrutarlo."

Fayed y Jack Bauer, 24

Tener botones de Menéame y similares en Blogger es bien sencillo, únicamente hay que introducir el siguiente código (código fuente de Leche Cortada, imágenes de La apatía uniforme):

{Botones}

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWpz671v6JtxhhG877sR35i5x1ByKEVIq8UxaLSNTf0koqGO1vnHQsTcqZwMCE0i525beP7Zaf7wT2lB5UMNQUSKA4vBGIWOfLGokCdPnITMfQqMb03V8ysh-MIw5OO2Hlruu8OKcF344/s320/delicio.jpg' style='border:none;'/></a>

<a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxIVDrO2mHkuCJQSC9jf-faZmqS4qam3oV8LGGna1dm8EVVdjNahVEFYXMwiNKrUDFjoqAqj7sWgb8dsqgAybtf2iu0nrb0Pck3zRcaZvBj9DqNSoKE_AWkBOxdqf8qZ1vcDh0k7pgd7o/s320/meneame.png' style='border:none;'/></a>

<a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='http://photos1.blogger.com/x/blogger2/5267/4508/320/127392/fresqui.png' style='border:none;'/></a>

Lo mejor es que las imágenes las descarguéis y las subais a un servidor propio. No tengo problema en que las linquéis desde mi site pero si yo decidiese borrarlo u ocurriese algún error no me haría responsable. Para insertarlo en el blog debéis de hacer lo siguiente:

1. Entrar a Edición de html y darle a donde pone Expandir plantilla de artilugios. Acto seguido, buscar el tag <div> con id='main-wrapper' (por defecto, puede estar nombrado de otra forma).


2. Llegado a este punto veréis algo así como 1864378 widgets y cosas raras. Mi consejo es que busquéis el siguiente tag:
   
   <p class='post-footer-line post-footer-line-3' />
   
   Si no estuviese, la inclusión puede verse más complicada. En ese caso, busca un tag dentro de main-wrapper que sea </b:includable> y pega justo encima el código siguiente (ojo, sin ningún tag </div> justo encima):
   
   <p class='post-footer-line post-footer-line-3'>{Botones}</p>



3. ¡OJO! Es muy recomendable añadir un tag <br> justo delante de todo el código, aunque esto ya queda a gusto del bloguero

Si tenéis alguna duda, siempre acudid a comments.

ACTUALIZO versión 2: Arreglado el código, ahora ya sí que funciona.

Wikitutorial de CSS (I): Introducción

"El nuevo número para las emergencias es 0118 999 881 999 119 725.. 3"

The IT crowd

1.- ¿Qué es el CSS?

Supongo que todo el mundo que haya llegado hasta aquí sabrá lo que son los Css. De todas formas, nunca sobra una buen definición. Css es, literalmente, una hoja de estilo en cascada. Su utilidad es bien simple: estructurar una página web sin necesidad de modificar cada una de las tags de html de la misma web. En una hoja de estilos, se van definiendo Ids que luego usaremos para la página web haciéndole una llamada. Ya veremos cómo se hace esto más adelante.

2.- ¿Dónde se coloca la hoja de estilos CSS?

El código de la hoja de estilos SIEMPRE estará entre las etiquetas <head> y </head> y, más concretamente, dependiendo de qué estés usando estará de una forma u otra:

• En plantilla blogger: deberá ponerse de la siguiente forma: <b:skin><![CDATA[{hoja de estilos}]]></b:skin>


• En plantilla blogger classic o website: habrá que ponerlo de la siguiente forma:
  <style type="text/css">{hoja de estilos}</style>

El código se puede incluir de dos formas diferenciadas:

• Escribiendo el código de la hoja de estilos en la misma página o plantilla (opción recomendada para blogs).


• Editando la hoja de estilos en un archivo de texto aparte, apellidándolo con la extensión .css. Luego habría que subir el archivo a un ftp y llamarlo con la instrucción:
  @import url({dirección url de la hoja de estilos});

3.- Definición de variables

Empezaremos por lo poco importante o útil: la definición de variables. Sólo he tenido constancia de este uso en plantillas bloggers como ésta y que no sirve para páginas webs. En cualquier caso, yo no lo echaría de menos. La definición de variables se ha de colocar en primer lugar de la hoja de estilos y tiene una estructura como ésta:

<Variable name="{nombre de variable}" description="{descripción}" type="{tipo}" default="{valor 1}" value="{valor2}">

Tal como indica, con esto se definen variables que luego más tarde pueden ser utilizadas en la definición de las Ids. Cada una de las partes de la variable definida son:

• name: Como indica, es el nombre de la variable. No puede repetirse (si se repitiese no sé qué pasaría, supongo que al llamarla se escogería la primera variable definida). Es de vital importancia ya que, para llamar la variable más adelante, se ha de hacer con el código ${nombre de la variable}.


• description: es la descripción de la variable. Sólo sirve para poner algún comentario sobre la misma, dejar claro para que sirve y demás.


• type: es el tipo de la variable. Puede ser color, font, y es posible que se pueda definir algún tipo más, ya que no me sorprendería que se pudiesen declarar tamaños.


• default & value: son los valores de la variable. La diferencia entre default y value no la tengo clara y por lo que he visto no creo que tenga mucha importancia. Así que opto porque pongáis, en ambos, el mismo contenido y ya está. En el caso de que se esté definiendo un color habrá que poner un número hexadecimal entre #000000 y #FFFFFF (aunque también vale entre #000 y #FFF). Estos número son colores en el que cada par pertenece a la concentración de Rojo, Verde y Azul consecutivamente del color final. En caso de que el tipo sea una fuente deberá de contener lo siguiente: normal {estilo} {porcentaje de tamaño} {tipo de letra} {familia de letra}, en el que estilo puede ser: bold, italic, .. porcentaje: 0% - 999% puede que incluso más. Tipo de letra de cualquiera de las innumerables y familia, lo usual, es que sea serif o sans-serif.

Para tenerlo claro, os pongo un ejemplo de definición de variable de un color y, después, otro ejemplo de tipo de letra:

VARIABLE DE COLOR

<Variable name="colortexto" description="Color del texto principal" type="color" default="#000" value="#000000">

VARIABLE DE TIPO DE LETRA

<Variable name="tipotexto" description="Tipo de letra del texto principal" type="font" default="normal italic 100% Verdana, sans-serif">

Continuará..

Agregar una tercera columna en Plantillas Blogger

Obviamente, refiriéndome a plantillas de nuevo blogger, ya sabéis, el blogger betaqueyanoesbeta, el que se ha impuesto por antonomasia y por exigencias de Google. Y que, a pesar de ser reticente al principio, ahora estoy viendo lo genial y simple que es. En sólo un par de horas ya sé cómo manejar a la perfección el Template de mi blog.

Trabajando en plantilla estándar TicTac (Blueberry), que es la que estoy usando yo. Lo más seguro es que valga también para el resto de plantillas:

Paso 1:

Entramos en Plantilla -> Edición de código html y vamos al código CSS. Antes de añadir ninguna etiqueta, tendremos que introducir un nuevo código CSS. Buscamos entre las etiquetas <head> y </head> la función #sidebar (nombre estándar). Debe salir algo parecido a esto:

#sidebar {
float: right;
width: 259px;
padding: 20px 0px 0 0;
font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor;
}

Lo que haremos será copiar el código que haya en vuestra plantilla y pegarlo inmediatamente después renombrándolo con el nombre de sidebar2 y realizando los cambios que consideréis convenientes. Así, seguidamente, si no queréis que pierda la estética con el resto del blog, deberías hacer lo mismo con el resto de tags de CSS nombrados como sidebar.

Para evitar que el blog se descentre, obviamente, habrá que cambiar los tamaños de la etiquetas #outer-wrapper y #content-wrapper. Para ello sólo hay que sumar el valor asignado a la variable Width bajo #sidebar2 a la width de las etiquetas anteriores. Puede que #outer-wrapper y #content-wrapper tengan otro nombre en vuestra plantilla, si es diferente. Para saber qué etiquetas debéis modificar, vienen definidas en la variable id del primer tag <div> después de <body>, y la otra en idéntico lugar pero después del tag </div> que cierra el tag anterior. Sé que parece complicado, pero no os procupéis que la mayoría siguen unos estándares y no tendréis que llevar a cabo esta complicada búsqueda.

Paso 2:

Con la etiqueta CSS ya generada, ahora hay que modificar el código html. Como ahora Blogger funciona por Widgets, esto nos va a ahorrar muchos quebraderos de cabeza. Con el expandir plantillas desactivado, sólo deberéis de colocar el siguiente código en el lugar que queráis:

<div id='sidebar2-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
</div>

Esto añadirá una nueva sección (concretamente un Sidebar, como es obvio) en donde lo hayáis colocado. Pero claro, no lo podéis poner en cualquier sitio. Debéis procurar que el código anterior esté entre <div id='content-wrapper'></div> pero que no esté entre ningún otro par de tags <div></div> o el blog se descolocaría.

Paso 3:

Finalmente, para modificar el contenido del nuevo Sidebar nada más que tenéis que ir a Plantilla -> Elementos de la página y simplemente darle a añadir nuevo elemento.

Puede que, tras este paso, se vean las imágenes del blog un tanto descolocadas, refiriéndonos a las imágenes de fondo. Eso es porque no están hechas para aguantar este tipo de modificaciones. Para ello se pueden modificar fácilmente o eliminar directamente. Para poder tener acceso a estas imágenes, habrá que entrar en Edición de html y buscar en las etiquetas #header, #content-wrapper y #footer la variable background, la cual, importará un vínculo de una imagen. Como este punto ya es demasiado personalizado no entraré en detalles, aunque yo he optado por modificar las imágenes del blog (es bastante rápido y fácil).



-¿Conoces a alguna chica que esté obsesionada por los zapatos?
-No, pero conozco a una chica y ha salido de aquí gritando: ¡Los zapatos!

The IT crowd

Sobre el blog

¿Qué es "¡Maldita sea!"?

¡Maldita sea! es un blog en el que pretenderé resolver toda duda informática que exista, ahora que está tan de moda tener un ordenador con internet. Todo aquello que sepa solucionar irá aquí incluido. Como novedad, los usuarios podrán preguntar aquellas cuestiones que no sean capaces de resolver y que no se encuentren resueltas en los propios artículos del blog (que se irán actualizando conforme las necesidades de la gente). Es, en sí, un blog de ayuda informática. En general, la idea es resolver dudas informáticas sin centrarme en un campo en concreto. Un día puedo explicar como construir ciertas funciones en ensamblador y otro día explicar cómo activar alguna función del Windows Media Player.

¿Por qué se llama "¡Maldita sea!"?

Porque aquí, el menda, estudiante de informática en la UM, cuando no le sale lo que quiere salirle (como comúnmente pasa cuando se trata de cosas relativas al binario elemento) tiene la mala costumbre de vociferar tamaña maldición. Sí, verme programar cualquier tipo de código puede llegar a ser un recital de maldiciones, como estoy seguro que le pasa a la mayoría.

¿Y si hay algo que no sabes resolver?

Pues si hay algo que no sé resolver procuraré aprender. Como comprenderéis, hay muchas, infinitas cosas, que no sé hacer relacionadas con la informática y si este blog pretende servir para algo también es, por supuesto, para aprender. La idea es procurar intentar abarcar el mayor número de campos posibles.

¿Este es el único blog que has hecho?

Pues no, tengo unos cuantos más de los que, la verdad, sólo merece la pena lincar el de La apatía uniforme. También participo con asiduidad en el vlog Leche Cortada y puede que también eche algún cable en algún que otro blog, gracias a mis cada vez mejores conocimientos en html.

¿Con qué frecuencia vas a actualizar?

Con la frecuencia en que nuevas dudas y problemas se vayan colocando en mi camino. Cuanto más me dedique a un campo en particular más actualizaré en relación a ese campo. Así que os digo, cuantas más dudas plantéeis, más actualizaré.

¿Sólo hablará de dudas informáticas?

Por norma sí, a menos de que ocurra algún hecho totalmente extraordinario que merezca la pena detallar aquí o alguna noticia que tenga relación con el blog o lo que data el mismo que sea necesario nombrarla. También procuraré darle mi toquecito friqui y, en cada nuevo artículo, colocaré alguna frase o cita de películas, libros, series o similar que me haya gustado. Y como muestra, un botón.


"Soy el Capitán Lee Adama. Apolo es sólo un sobrenombre."

Capitán Lee 'Apolo' Adama, Battlestar: Galactica (2004)