XandruSoft Web Blog

C omo habíamos dicho en el artículo trabajar con distintos user agent , existen multitud de navegadores con sus características particulares desde los que se accede cada día a las páginas web. Para adaptar nuestras páginas a los distintos navegadores debemos poder reconocelos, mediante su User Agent para poder aplicar las distintas configuraciones. La función que nos permite comprobar el tipo de User Agent es: stristr($_SERVER['HTTP_USER_AGENT'],'user_agent') Simplemente añadiendo las condiciones que nos interesen y haciendolas cumplir, podemos hacer que la página se comporte de forma distinta para cada navegador.

S i queremos incluir los últimos twitts de nuestra cuenta de Twitter ( timeline ) en un blog creado en Blogger no tenemos más que acceder a la aplicación de Twitter creada a tal efecto. Configuramos el número de entradas que queremos mostrar y el título que se mostrará y una vez que pinchemos en el botón de la parte izquierda nos redirigirá a nuestra cuenta de Blogger , desde la que tendremos que permitir la inclusión de la aplicación. Seleccionamos la posición en la que queremos que se muestre y una vez guardado, mostraremos nuestros últimos twitts en el blog .

S i queremos facilitar la tarea de twittear nuestros enlaces a los usuarios que nos visitan no tenemos más que añadir el código del nuevo “botón de twittear” que nos proporciona el propio Twitter desde la página del proyecto . Para añadir el botón a cada post de nuestro blog de Blogger debemos buscar en el código (con los artilugios expandidos) la siguiente cadena: <div class='post-footer-line post-footer-line-1'> E insertamos a continuación el código del botón, que para el formato pequeño sería: <a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='XandruCancelas' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

C on la reciente aparición de los primeros códigos en HTML5 han aparecido también los primeros en CSS3, y es que esta vez, ambas tecnologías van de la mano. Si antes era recomendable utilizarlas conjuntamente, ahora es casi obligado, ya que es el objetivo del desarrollo de dichas tecnologías. Al igual que ocurre con HTML5, CSS3 incluye una serie de mejoras y nuevas funcionalidades que nos harán la vida más fácil a la hora de dar estilo a nuestras páginas. Alguna de estas mejoras las iremos viendo a continuación. Para facilitar la tarea y no tener que escribir código HTML de nuevo, usaremos el que hemos creado en el mini tutoria de HTML5. El código CSS es el siguiente: /* Makeshift CSS Reset */ { margin: 0; padding: 0; } /* Tell the browser to render HTML 5 elements as block */ header, footer, aside, nav, article { display: block; } body { margin: 0 auto; width: 940px; font: 13px/22px Helvetica, Arial, sans-serif; background: #f0f0f0; } h2 { font-size: 28px; line-hei...

S i estamos pensando en dar algun servicio de contacto o soporte a nuestros usuarios o simplemente nos queremos comunicar a través de nuestra página web, Google nos ofrece un Gadget muy facil de configurar, llamado Google Talk cahtback badges. Para configurarlo, accedemos a la página del proyecto desde el navegador con nuestra cuenta de google activa y configuramos las opciones que nos ofrecen en la pestaña edit a nuestro gusto. Una vez finalizada la configuración, simplemente nos queda copiar el código que se muestra en la parte inferior de la página y añadirlo a nuestra página web. ATENCIÓN: Este servicio ya no está soportado, por lo que habrá que buscar algún otro.

S i no conocemos la ruta exacta de algún archivo que necesitamos modificar o conocer su ubicación, podemos usar el comando locate para ello. La sintaxis es muy sencilla: Locate "archivo" La sencillez del comando lo hace muy potente, por lo que… ya nunca volveréis a perder un archivo dentro de la estructura de directorios.

E n el primer artículo hemos creado la estructura básica de una página con HTML5. Ahora es el turno de añadiendo contenido. Veremos el nuevo código y a continuación comentaremos las novedades introducidas. <!DOCTYPE HTML> <html lang="es-es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <title>Page title</title>   </head>   <body>   <header>   <h1>Título de la página</h1>   </header>   <nav>   <ul>   <li><a href="#">Blog</a></li>   <li><a href="#">About</a></li>   <li><a href="#">Archivos</a></li>   <li><a href="#">Contacto</a></li>   <li class="subscribe"><a href="#">Subscribete via. RSS</a>...