Artículos sobre html

Vía Anieto2k descubro Sketchpad, un paint online con esteroides, creado completamente con HTML5 y Javascript, que permite hacer algunas composiciones sencillas con  degradados, patrones y pinceles.

No está nada mal y puede sacarnos de un apuro si tenemos que hacer alguna composición y no tenemos a mano un editor de imágenes en condiciones.

No hay comentarios

El viernes publicaron en Smashing Magazine un interesante artículo sobre cómo dar estilo a nuestras listas HMTL con CSS. También comenta un poco las diferencias entre navegadores y da algunos ejemplos de menús creados a partir de estas técnicas.

Si no tenéis claro como darle estilos a las listas <ul>, <ol> y <dl>, este artículo os será de mucha utilidad.

No hay comentarios

Logo de TwitterVía Anieto2k descubro cómo mostrar nuestros últimos Tweets en cualquier página. Básicamente tenemos que cargar los siguientes archivos Javascript:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/NOMBREDEUSUARIO.json?callback=twitterCallback2&count=5"></script>

Tenemos que reemplazar NOMBREDEUSUARIO con nuestro nombre de usuario y el último número (el 5) por el numero de Tweets que queremos mostrar.

A continuación añadimos el siguiente código HTML donde queramos mostrar los Tweets:

<div id="twitter_div">
<ul id="twitter_update_list">
<li>&amp;nbsp;</li>
</ul>
</div>
No hay comentarios

Muestra una alerta a los usuarios de Internet Explorer

A raíz de un comentario de JaimePG se me ha ocurrido volver a tratar un tema del que ya hablé hace casi un año: Detectar a Internet Explorer. Aunque el tema quedó bastante claro, esta vez haré un recopilatorio de dos métodos para mostrar un cartel a los usuarios de Internet Explorer.

En todos los modos partiremos de un código CSS preestablecido (que deberéis añadir a vuestro CSS):

#usuarios-ie {
width:100%;
font-family:Verdana, Geneva, sans-serif;
background: #FFFFDE;
border-bottom:1px solid #666;
color:#000;
position:fixed;
top:0px;
left:0px;
z-index:999999;
}

#usuarios-ie p { font-size: 13px; margin: 0; padding:2px 10px; }
#usuarios-ie a  {text-decoration: underline; font-weight: bold; color: #D64411; }

Y también partiremos del mismo código HTML cada vez:

<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>

Usando HTML

Este método es el más fácil de implementar y consiste en utilizar un estilo CSS especial para Internet Explorer que muestre el cartel de aviso. Básicamente usaremos un comentario condicional que sólo analiza Internet Explorer y que nos permite distinguir cada versión de Internet Explorer. Este comentario, al ser código HTML, nos funcionará en cualquier servidor, sin necesidad de que tenga instalado PHP.

La estructura del comentario condicional es la siguiente:

<!--[if IE]>
Código especial para IE
<![endif]-->
<!--[if IE N]>
Código especial para IE, donde N es el número de la versión de Internet Explorer
<![endif]-->
<!--[if IE 6]>
Código especial para IE 6
<![endif]-->
<!--[if IE 7]>
Código especial para IE 7
<![endif]-->
<!--[if lt IE 6]>
Código espcial para versiones anteriores a IE 6
<![endif]-->
<!--[if lte IE 6]>
Código especial para versiones anteriores o iguales a IE 6
<![endif]-->
<!--[if gt IE 6]>
Código especial para versiones posteriores a IE 6
<![endif]-->
<!--[if gte IE 6]>
Código espcial para IE 6 y versiones posteriores
<![endif]-->

Como podréis imaginar, situaremos el código entre los comentarios condicionales, dependiendo de a quién queramos mostrarle el cartel. Si por ejemplo nos basta con IE6 y anteriores, usaremos el siguiente código:

<!--[if lte IE 6]>
<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>
<![endif]-->

Atención: Este método funciona debido a que el motor de renderizado de Internet Explorer (Trident) analiza estos comentarios, así que este método no funcionará alterando el User Agent del navegador con el que accedemos.

Usando PHP

Ahora sí que usaremos PHP, y por tanto necesitaremos un servidor capaz de ejecutarlo para poder detectar a Internet Explorer. Lo que haremos será leyendo el User Agent del navegador buscaremos la cadena identificatoria de Internet Explorer y si la encontramos, le daremos true al valor de la variable $ie.

Con este método podemos llegar a falsos positivos, ya que si el navegador con el que accedemos a la página tiene el User Agent cambiado por el de Internet Explorer, lo detectaremos como si de él se tratase.

El código PHP que usaremos será:

$user_agent = $_SERVER['HTTP_USER_AGENT'];

$posicion = strrpos($user_agent, "MSIE");

if ($posicion === false) {
$ie = false;
} else {
$ie = true;
}

Ahora basta con comprobar si $ie es true o false y actuar en consecuencia. El código necesario para hacerlo sería:

<?php if ($ie) { ?>
<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>
<?php } ?>

Con este código estaríamos detectando a Internet Explorer, sea cual sea su versión. Si queremos buscar una única versión, basta con modificar la cadena MSIE, por ejemplo, para buscar a IE6, utilizaríamos MSIE 6 en lugar de MSIE.

Lo malo de este método es que no podemos detectar a Internet Explorer 6 o inferiores, tan sólo a IE6 (o IE7, o IE8, etc).

Yo por mi parte a partir de ahora mostraré un cartel de aviso a los usuarios de Internet Explorer 6 o inferior en el blog, lo siento por los usuarios de IE6, pero hay alternativas mejores, multiplataforma y gratuitas, así que no veo motivo alguno para no cambiarse.

Un comentario

Vía Anieto2k descubro un método para oculta la barra de navegación en Mobile Safari sin usar Javascript: Usando Meta Tags.

Con este código podremos eliminar la barra de navegación:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
No hay comentarios