Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Archive for febrero, 2008

PHP: codificación UTF-8 de una cadena mediante utf8_encode

Fecha de publicación: 2008/02/28

A veces las páginas generadas por PHP con cofificación UTF-8 devuelven algunos caracteres (acentos, interrogaciones, eñes, etc) con mal aspecto, debido a que la codificación de algunos de los fragmentos del texto no coinciden con la del documento, y eso hace que el navegador no los interprete adecuadamente.

Pero PHP provee una solución a este inconveniente: utf8_encode.

$cadena = 'valor';
echo $cadena; //Sin pasar a UTF-8
echo utf8_encode($cadena); //pasada a UTF-8

Saber más sobre utf8_encode.

Datos del artículo:

CSS: miniaturas de imágenes en gestores de contenido

Fecha de publicación: 2008/02/26

En algunos gestores de contenido existen módulos para gestión de galerías de imagen en los que no hay más que subir las imágenes, dar título y descripción y el gestor se encarga del resto, incluyendo el redimensionado de la imagen.

Pero a veces ese redimensionado no es el adecuado. Supongamos que solo se redimensiona por anchura , guuardando la proporcion de la imagen original, y que lo que queremos es, por ejemplo, una imagen con forma de cuadrado de 110×110 px.

En este caso concreto el gestor redimensiona la imagen, pero no la recorta, por lo que o le damos una imagen cuadrada o la miniatura no ocupará todo su espacio.

Hay dos soluciones. La primera y más rápida darle a la imagen las dimensiones por CSS, pero quedará deformada o incluso pixelada.

Y la segunda solución, más adecuada, utilizar la propiedad CSS overflow: hidden; en el contenedor de la imagen y que dicha imagen tenga siempre unas dimensiones superiores a 110px, tanto en altura como en anchura (sin pasarse mucho).

Supongamos que tenemos este código HTML (para dos miniaturas):

<div>
 <div class="e;thumb"e;>
  <a href="#"><img src="imagen1.jpg" /></a>
 </div>
 <div class="e;thumb"e;>
  <a href="#"><img src="imagen1.jpg" /></a>
 </div>
</div>

Se utilizaría el siguiente CSS:

div.thumb {width:110px;height:110px;}
div.thumb a {width:110px;height:110px;display:block;position:relative;overflow:hidden;}
div.thumb a img {display:block;position:absolute;top:0;left:0;}

Atención a las propiedades position: son para que esto funcione en Internet Explorer (versiones 6 y 7).

Datos del artículo:

Javascript: evitar conflictos entre Jquery y otras librerías

Fecha de publicación: 2008/02/20

si en un sitio web se usan varias librerías Javascript (Prototype, Mootools) junto con Jquery podemos encontrarnos con incompatibilidades, ya que la función que Jquery utiliza para los selectores CSS se denomina igual que la que usa Prototype para seleccionar por identificador.

La solución es más sencilla de lo que parece:

var q = jQuery.noConflict();

La variable, en este caso la letra "q" será lo que se utilice en lugar del símbolo "$".

Sin aplicar la variable de eliminación de conflictos:

$("div p").hide();

Y aplicando la variable:

q("div p").hide();

Existen más formas de evitar conflictos explicadas con detalle en la documentación de Jquery.

Datos del artículo:

Linux: cambiar el nombre de la máquina

Fecha de publicación: 2008/02/18

El nombre se puede cambiar de forma permanente editando el fichero /etc/hostname y ejecutando /etc/init.d/hostname.sh. En lugar de ejecutar esto último, se puede reiniciar el sistema.

También se puede hacer el cambio de forma temporal, hasta el siguiente inicio del sistema, habría que ejecutar /bin/hostname nuevo-nombre-de-la-maquina.

Supersencillo.

Datos del artículo:

PHP: Averiguar cuando un número es impar

Fecha de publicación: 2008/02/13

Con esta sencilla función se podrá averiguar si un número es o no impar:

function esImpar($numero) {
 return $numero & 1; // 0 = es par, 1 = es impar
}

Sencillo ejemplo de uso:

if (esImpar($numero)) {
 echo 'El número '.$numero.' es impar';
} else {
 echo 'El número '.$numero.' es par';
}

Una de las aplicaciones más interesantes de esta función es la creación de tablas que alternen filas de dos colores (efecto conocido como pijama).

Encontrado en: Is number odd or even? (PHP-Scripts Blog)

Editado 13 de febrero de 2008 (16:44)

Datos del artículo:

PHP: eliminar marcado HTML de una cadena de texto

Fecha de publicación: 2008/02/11

Eliminar las etiquuetas HTML junto con sus atributos en una cadena de texto en PHP es muy sencillo. Solo hay que utilizar la función strip_tags:

Tenemos este fragmento de HTML:

<p>Párrafo de <a href="#">prueba</a> al que se <strong>le van a quitar</strong> las etiquetas HTML.</p>

Y lo queremos convertir a texto plano

Párrafo de prueba al que se le van a quitar las etiquetas HTML.

Aquí está el código PHP:

$HTML = <p>Párrafo de <a href="#">prueba</a> al que se <strong>le van a quitar</strong> las etiquetas HTML.</p>

$txt = strip_tags($HTML); //Devuelve el texto sin etiquetas HTML

PHP.net: strip_tags

Datos del artículo:

Inserción de elementos en Javascript: insertBefore y appendChild

Fecha de publicación: 2008/02/11

Método appendChild

El método appendChild permite insertar un elemento al final de otro.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div id="contenedor">>
 <p id="existente">Elemento existente</p>
 <p id="nuevo">Elemento nuevo</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('contenedor');
elemento2.appendChild(elemento1);

Método insertBefore (o insert before)

El método insertBefore tiene una función similar a appendChild, solo que no inserta el elemento hijo justo al final del elemento padre, sino antes de un elemento concreto que hay que especificar.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div>
 <p id="nuevo">Elemento nuevo</p>
 <p id="existente">Elemento existente</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('existente');
elemento2.parentNode.insertBefore(elemento1,elemento2);

Saber más

Datos del artículo:

Duplicación de elementos de la interfaz en sitios web

Fecha de publicación: 2008/02/10

Enlace "Volver"

Una práctica muy habitual al diseñar un sitio web es la de introducir botones o enlaces con los textos "Atrás", "Volver" o cualquier otro cuyo significado sea el de volver a la página inmediatamente anterior.

Este tipo de enlace probablemente sea un poco redundante, ya que todos los navegadores web disponen en su interfaz de un botón para ir atrás, incluso los de móviles.

Enlace o botón "Imprimir"

Más de lo mismo. Todos los navegadores disponen en su interfaz de un botón para imprimir.

Adquiere sentido si lo que hace es abrir una versión de la página optimizada para la impresión.

Enlace "Enviar esta página por email"

Los navegadores también coinciden en incorporar esta opción, aunque en este caso se ahorra al usuario una más que probable apertura de la aplicación de correo que utilice.

Enlaces de aumentar/disminuir tamaño de página

Los habituales botones para aumentar o disminuir el tamaño en pantalla de la página. Cada navegador lleva sus propias herramientas para este propósito, además accesibles desde sencillos atajos de teclado.

Los usuarios que necesitan ésta funcionalidad muy probablemente estarán habituados a utilizar dichos atajos de teclado, prescindiendo de los enlaces de zoom.

Conclusión

Este tipo de enlaces y botones tiene como objetivo, consciente o inconsiente, sustituir a la interfaz del navegador para determinadas acciones, lo cual puede resultar redundante y ayuda a que los usuarios no se molesten en aprender a utilizar minimamente el navegador web que hayan (o les hayan) elegido.

Datos del artículo:

Caracteres especiales en Javascript

Fecha de publicación: 2008/02/08

Si un archivo en el que hay código Javascript está en codificación ANSI podemos encontrarnos con que al poner acentos por ejemplo en un alert salga algo como esto:

Acentos en ANSI

El código del alert:

alert('prueba de ácéntós');

La solución que he encontrado es la siguiente: utilizar los códigos Unicode de esos caracteres acentuados:

alert('prueba de \u00E1c\u00E9nt\u00F3s');

De esta forma ahora saldría esto:

Acentos en ANSI

Tabla de equivalencias Unicode

En el Javascript habrá que añadir antes del código Unicode correspondiente el siguiente fragmento: \u.

Caracter especial Código Unicode
Á 00C1
á 00E1
É 00C9
é 00E9
Í 00CD
í 00ED
Ó 00D3
ó 00F3
Ú 00DA
ú 00FA

Lista completa de equivalencias en formato PDF.

Datos del artículo:

PHP: Limitar el número de caracteres de una cadena

Fecha de publicación: 2008/02/07

Se pueden limitar los caracteres a mostrar de una cadena (o string) mediante la función substr:

$cadena = 'abdefghijk'; //Esta es la cadena que se quiere acortar
echo substr($cadena, 0, 4); //con esto se cogen los 4 primeros caracteres
//Habría devuelto: abcd

Saber más sobre la función substr en PHP.

Datos del artículo:

Información del sitio