Incluir vÃdeos, del tipo que sean, en nuestras páginas web suele traernos dificultades, sobre todo si queremos que sean vistas en cualquier navegador y si queremos seguir los estándares. Si os encontráis con este problema nada mejor que echarle un ojo a este artÃculo, en el cual se indica como incluir mediante el uso de la etiqueta object vÃdeos de distintos formatos, ya que embed no es estándar.
Entre los distintos tipos de vÃdeos que incluye están los que usa el Flash Player, como YouTube o Google Video, pelÃculas en formato Windows Media y QuickTime.
Ya no tienes excusa para seguir los estándares. Bye, Bye <embed>
WordPress 3.4 ha añadido la opción de theme customizer, la cual permite modificar las opciones del theme y darle el aspecto que deseas de forma muy visual y sencilla. En estos momentos, por lo que he podido ver, solo permite modificar el background y poco más. Pero viendo y pegándome con el código he podido ver cómo añadir mis propias opciones.
El ejemplo que voy a poner permite elegir entre tres tipos de fuente de Google Webfonts y modificar las css para usar ese tipo de letra.
Aviso que el código quizás no sea el mejor, pero realizar ingeniería inversa no siempre es fácil y tampoco he visto otro sitio donde lo hagan.
Lo primero que se tiene que hacer es crear las opciones en el panel de customizer. Para ello hay que crear una sección (section “Fuente”) y asignarle unas opciones (settings) y añadirle unos controles (control) a las opciones. Existen controles por defecto, el de elegir el color está muy bien, pero en mi caso me he creado uno personalizado que muestra un control radio modificado para que el label del radio muestre la tipo de letra en cuestión.
add_action('customize_register', 'mi_theme_customizer', 1);
function mi_theme_customizer() {
global $customize;
if($customize) {
// La seccion
$customize->add_section('mi_font', array(
'title'=>'Fuente'
) );
// La opcion
$customize->add_setting( 'mi_font_family', array(
'control' => 'color', // esto ni idea de para que sirve, realmente no es un control tipo color y funciona
'type' => 'option'
) );
$customize->add_control( 'mi_font_family', array(
'settings' => 'mi_font_family',
'section' => 'mi_font',
'type' => 'font_radio',
'choices' => array('Trocchi', 'Great Vibes', 'Bad Script') // las fuentes de google
) );
}
}
Una vez creado los controles, añado el código que dibuja (render) mi control personalizado, primero añado los css para que dibuje las fuentes de Google y luego dibujo el control en sí. He usado Javascript en vez de PHP porque parece ser que el código no está del todo completo, y no hay un filtro para crear tu propio control, por lo que tengo que añadirlo mediante jQuery a un elemento para que el Javascript del customizer tenga en cuenta cuando selecciono una opción y refresque el preview del theme.
// Añado los css de google webfonts mediante javascript para tener luego el nombre de las fuentes y usarlo para crear los radio buttons
add_action('customize_controls_print_scripts', 'mi_customize_scripts');
function mi_customize_scripts() {
$fonts = array('Trocchi', 'Great Vibes', 'Bad Script');
?>
type == 'font_radio') {
if ( empty( $control->choices ) )
return;
$name = '_customize-font-radio-' . $control->id;
?>
label ); ?>
Y ya por último solo falta usar la opción guardada para mostrarla en el theme
add_action('wp_head', 'mi_custom_styles');
function mi_custom_styles() {
$option = get_option('mi_font_family');
// El customizer modifica este filtro para refrescar el preview
$option = apply_filters('option_mi_font_family', $option);
if ($option) {
echo "";
echo '';
}
}
Y esto es todo, no sé si hay una forma mejor de hacerlo, estoy abierto a sugerencias.
Según cuenta el autor, dice que hay una diferencia entre ser un buen diseñador web y un gran diseñador web, que es tomar atajos para hacer más sencillo tu trabajo sin que repercuta en la calidad. Por eso nos da una serie de consejos o trucos a seguir:
Planificación: aunque parece algo obvio, suele ser algo que no se lleva a cabo.
Hazlo a mano: yo no podrÃa estar más de acuerdo con este consejo. Existen aplicaciones muy buenas que te crean el código HTML sin tener que escribirlo uno, pero hacerlo tú mismo es algo que te va a dar mayor control sobre el diseño. Con un editor normal que te coloree el código debe ser más que suficiente.
Hojas de estilo, enlazar o importar: hay dos formas de importar un CSS y no todos los navegadores reconocen las dos formas, por ello se puede usar ambas para que navegadores modernos y antiguos carguen el CSS.
Usar gradientes como fondo con cuidado: el uso de imágenes como fondo de pantalla es algo sobre lo que se puede y debe tener mucho control, se puede hacer un degradado vertical de ancho 1px y luego repetirlo solo en el eje x, y que el color de fondo sea el color en que finaliza el gradiente. Yo añadirÃa que cuidado con los gradientes, ahora están muy de moda, pero tampoco se debe abusar de ellos.
Comentarios: imprescindibles para cualquier tipo de desarrollo, ya sea para una aplicación en .NET o para una página web. Otra cosa es que lo hagamos siempre.
Usa simples scripts PHP: no es necesario ser un experto en PHP, pero si tu servidor lo admite, úsalo, sobre todo para incluir trozos de HTML que sean muy utilizados, como por ejemplo el código que crea el menú.
Dimensiona las fuentes con em: a los diseñadores les suele gustar usar px porque se ajusta exactamente al tamaño que quieren, pero el problema es que, por ejemplo, IE no redimensiona las fuentes definidas con px con el consiguiente problema de accesibilidad para los lectores con discapacidad.
Hack en IE del modelo de caja: quizás no os haya pasado, pero IE tiene un bug con el tamaño de una capa cuando se usa width y margin, padding o border. Esto se soluciona usando el guión bajo delante del estilo (_margin), que IE reconocerá como el propio estilo, mientras que los otros navegadores lo ignorarán. No recomiendo seguir haciendo esto, porque con la nueva versión de IE podrÃais tener problemas ya que se ajusta más a los estándares.
Espacio en los formularios: los form aunque no se vean tienen márgenes, cuando crees uno, no olvides quitarles el margen superior e inferior.
Testea: imprescindible, sobre todo para intentar conseguir que funcione en casi todos los navegadores.
Formato de imágenes: usa GIF para imágenes con colores planos y JPEG para imagenes tipo fotografÃa, aunque deberÃas usar PNG en ambos casos, ya que funciona tanto para colores planos como para tipo fotografia, el problema es que IE no admite el canal alpha, hay que esperar a IE7 para que lo podamos usar.
Atributos alt y title: para que la descripción de las imágenes o enlaces aparezcan correctamente en los dispositivos móviles.
Orden de las pseudoclases: como ya explicamos en esta entrada.
Lenguaje semántico: separa el contenido de la apariencia, si eliminamos la css de una página se deberÃa ver correctamente.
Favicons: los iconos que aparecen en los favoritos o en las pestañas, algo sencillo que representa a nuestra web.
Usa máyusculas mediante CSS: cuando quieras escribir un texto completamente en mayúsculas usa text-transform en vez de escribirlo tú directamente en mayúsculas.
Escribe el texto alrededor de las imagenes: algo ya comentado en esta entrada.
Usa UTF-8: no todo el mundo tiene tu idioma o tu juego de caracteres, vuelve a leer esta entrada para obtener más información.
Estilos para impresora: crea estilos especÃficos para impresoras (media=”print”)
Aprende de otros: para eso nada mejore que CSSMania.
Uno de los problemas a los que nos enfrentamos al desarrollar en responsive es que en local es difícil acceder a nuestro localhost desde móviles y tablets. Aunque con unos sencillos pasos podremos acceder sin problemas.
Primero tendremos que modificar nuestro vhosts de Apache para que acepte peticiones desde la red, añadiendo lo siguiente:
<VirtualHost [IP de nuestro ordenador en la red]>
ServerAdmin [IP de nuestro ordenador en la red]
DocumentRoot "[path a nuestro WP]"
ServerName [IP de nuestro ordenador en la red]
LogLevel debug
ErrorLog "logs/wordpress-error.log"
CustomLog "logs/wordpress-access.log" combined
</VirtualHost>
A continuación tenemos que modificar el wp-config.php para decirle el WP_SITEURL y el WP_HOME que variará si se accede desde nuestro ordenador o desde un móvil o tablet.
// Hay que ver si la IP desde la que accedemos es del rango de nuestra red que normalmente suele ser 192.168.1.x
if(preg_match('#^192\.168\.1\.\d+#', $_SERVER['HTTP_HOST'])) {
define('WP_HOME', 'http://'.$_SERVER['HTTP_HOST'].'/');
define('WP_SITEURL', 'http://'.$_SERVER['HTTP_HOST'].'/');
}
Y ya por último nos creamos un plugin que sustituirá toda referencia a la URL de local por la correspondiente que se encuentre en el contenido de los posts y que activaremos cuando trabajemos en local, o bien lo metemos en el functions.php, pero esto sería guarrear el código:
if(preg_match('#^192\.168\.1\.\d+#', $_SERVER['REMOTE_ADDR'])) {
function replace_domain($buffer) {
// modify buffer here, and then return the updated code
return str_replace('http://localhost/', 'http://'.$_SERVER['HTTP_HOST'].'/', $buffer);
}
function buffer_start() { ob_start("replace_domain"); }
function buffer_end() { ob_end_flush(); }
add_action('wp', 'buffer_start');
add_action('wp_footer', 'buffer_end');
}
Tienes el plugin disponible en mi repositorio de GitHub
