martes, octubre 25, 2005

(PHP) Automatic Rotator

Descargar el código fuente

Descargar la últma versión del script y descomprimir el archivo (debe de descomprimirse en un archivo llamado rotator.php).

Subir el Script

Para empezar a usar el Rotaror, sóló baja el script a tu servidor y pónlo en el mismo folder donde están las imágenes que desees rotar.

Nota: Si deseas poner el archivo en otro folder, es necesario modificar la variable $folder del script.

Vincúlalo

Ahora puedes ligar el archivo como normalmente se liga una imágen:

    

Cada vez que la página se vuelva a cargar, se cambiará la imagen.

jueves, octubre 20, 2005

(CSS) Layout multi-column

Para hacer 2, 3, 4 o más columnas SOLO CON ESTILOS, me he encontrado una script fabuloso en csscripting.com.


Cómo usarlo:



  1. Descargar el script al sitio(TIENE QUE ESTAR EN EL SITIO SI NO NO JALA).

  2. Agregar el script DESPUÉS del vínculo a la hoja de estilos:



    <link rel="stylesheet" type="text/css" href="stylesheet.css" />

    <script type="text/javascript" src="css3-multi-column.js"></script>

  3. Se pueden usar estas propiedades:





























Propiedad CSS Tipo Ejemplo
column-count un número 3
column-width valor en pixeles 200px
column-gap valor en pixeles 10px
column-rule definición del borde 1px solid #000

(HTML) Validadores

Para validar un documento html:

Validación W3C

Para validar CSS:

Validación CSS W3C

O descargar el validador de CSS:
Style Studio CSS Editor

(HTML)Metadatos

Metadatos en html


Si hay algo en lo que el W3C siempre insiste es en el significado del documento. Desde el punto de vista del W3C, internet debe ser información estructurada, y el html debe ser la herramienta para lograr esa estructuración.



Una página web debe ser un conjunto de datos organizado con sentido. Las etiquetas html deben insertarse con este fin organizativo (dejando la presentación para otros lenguajes, CSS). La sola lectura del código debería ofrecer información relevante sobre el documento. Se trata en definitiva de organizar internet, escribiendo páginas que contengan información sobre si mismas, de forma que pueda mecanizarse su clasificación y catalogación. El futuro de la metainformación pasa por la web semántica y por XML, pero mientras tanto podemos avanzar por ese camino con los metadatos.



Los metadatos (información sobre la información) no se visualizan, pero estan integrados en el documento ofreciendo información variada: desde el tipo de formato utilizado (html, xml ...) hasta el autor, editor con el que se ha confeccionado, información para los buscadores, etc.


La etiqueta meta


La forma usual de insertar metadatos en el documento es por medio de la etiqueta <META> en la sección <HEAD> de la página.



Esta etiqueta es de aquellas de las que llamabamos "elementos vacios" porque no lleva etiqueta de cierre. Su estructura es la de una declaración propiedad:valor. Por ejemplo:


<meta name="generator" content="HTML-Kit" />

etiqueta que contiene la metainformación de que el documento ha sido escrito usando dicho editor.



No existe ninguna regla acerca de la informacion que puedes o no puedes incluir en las metatags. El standard html define la estructura de una etiqueta META, pero no sus valores. Es perfectamente válido que inventes tus propias etiquetas META; sin embargo dado que no se visualizan en el navegador, y que realmente solo se aprovechan por los buscadores y otras herramientas informáticas (que lógicamente solo entienden las etiquetas META mas difundidas) tampoco tiene mucho sentido crear tu propia metainformación, salvo para uso propio.


Etiquetas META mas usuales


description


<meta name="description" content="Esta es la mejor pagina del mundo mundial" />

Mediante esta etiqueta podemos incluir como metadato una descripción de nuestra página. Esta descripción puede ser leida y utilizada por algunos buscadores

La etiqueta <meta> admite el atributo lang, que nos permite ofrecer información sobre el idioma:

<meta name="description" content="Esta es la mejor pagina del mundo mundial" lang="ES" />


keywords


<meta name="keywords" content="mp3, free, FREE, download, britney, spears" /> 

Las palabras clave son aquellas que resumen de forma significativa el contenido de la pagina. Por ejemplo keywords adecuadas para ignside.net podrían ser "noticias, internet, manuales, html"



Las dos etiquetas META que acabas de ver son las mas importantes. Como los buscadores leen estas etiquetas y pueden juzgar acerca de la importancia de la pagina segun ellas, existe una auténtica industria montada sobre estas dos sencillas lineas. Una buena selección de descripción y keywords puede suponer que tu página aparezca muy arriba en las búsquedas, y eso supone mucho dinero para las páginas comerciales.



Naturalmente no es tan sencillo ... a cualquiera se le ocurriria que unas keywords como las del ejemplo atraerian visitantes como moscas ... por eso mucha gente, en lugar de hacer páginas atractivas, se conforma con incluir keywords atractivas, pensando que actuarán de cebo, y los buscadores incluyen filtros para evitarlo. Por ejemplo, el filtro mas sencillo es comprobar si en el texto del documento aparecen las palabras usadas como keywords.


HTTP-EQUIV


Las páginas web se distribuyen por internet mediante el protocolo http, que viene a regular el diálogo entre el servidor y el navegador. Pues bien, con estas etiquetas, el autor de la página puede predeterminar aspectos de este diálogo.



Su sintaxis general es:


<meta http-equiv="" content="" /> 

content-type


<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"/>

Con esta etiqueta META indicamos al navegador el tipo de documento que es nuestra página: si es un documento html, o un documento de texto plano, o cualquier otra cosa:



En el ejemplo, significaria que es un documento texto-html y que usa un juego de carácteres ISO-8859-1 (esto es, que no usa letras chinas, ni cirílicas, ni nada raro). Esta información es útil para que el navegador de nuestros visitantes sepa que juego de carácteres debe emplear.


refresh


<meta http-equiv="refresh" content="5" />
<meta http-equiv="refresh" content="5;url=http://www.ignside.net/otra.htm/" />

Mediante esta etiqueta y el valor refresh podemos indicar al navegador que debe recargar la página una vez transcurridos el tiempo de segundos especificado. En la primera linea se ve un refresh simple, con orden de recarga a los cinco segundos. En la segunda línea, un refresh con redirección. El navegador debe refrescar la página a los cinco segundos, recargando en su lugar la especificada.



Advierte como las comillas abarcan todo el contenido, incluyendo segundos y url.


expires


<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 2000 21:29:02 GMT">

Mediante la orden expires informamos de la vigencia del documento. Su utilidad principal es la de evitar que el navegador guarde indefinidamente en caché una página forzandole a cargar las nuevas versiones.


La fecha debe estar necesariamente en formato RFC840 (GMT), es decir:

dia_de_Semana, DD-Mon-YY HH:MM:SS TIMEZONE(Greenwich) todo ello en inglés



Por ejemplo Fri, 01 Jan 2003 07:20:55 GMT



Si la fecha está expresada en un formato distinto, el valor de expires será interpretado como now, es decir, se fija una caducidad inmediata.


pragma


Ordena al navegador que no almacene una copia cache de la página. Util cuando se trata de páginas dinamicas cuyo contenido cambia frecuentemente. Su unico valor aceptable es no-cache


<meta http-equiv="pragma" content="no-cache" />

set-cookie


Mediante esta metatag podemos enviar una cookie al navegador del usuario. Si contiene fecha de expiración, el navegador la conservará en el disco duro hasta dicha fecha; en caso contrario, se borrará al terminar la sesión de navegación.


<META HTTP-EQUIV="Set-Cookie"
CONTENT="nombre_cookie=valor_cookie;expires=fecha_valor;
path=/"
/>

Window-target


Sirve para especificar el nombre de la frame donde la página ha de ser cargada. Por ejemplo:


<META HTTP-EQUIV="Window-target" CONTENT="_top"> 

En fin, estas son las mas corrientes de entre las destinadas a tratar con los servidores; menos usadas son


<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> 
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

que informan respectivamente del tipo de lenguaje script utilizado, y del uso de CSS


Mas etiquetas, por favor


robots


Podemos dar instrucciones a los robots de los buscadores acerca de que páginas pueden incluir en sus bases de datos y cuales deben saltarse. Sus valores son index que indica que la página debe ser indexada; noindex es justo lo contrario, el robot debe saltarse esa página; follow pide al robot que siga los links que existan en la página e indexe las páginas resultantes; nofollow lo contrario. Los valores por defecto se entiende que son index, follow (separados por coma).


<META NAME="robots" CONTENT="noindex,follow">

Hay otras formas supuestamente mejores de tener tratos con los robots. Puedes enterarte como aqui.


PICS


Nada que ver con fotografias aqui (o si, indirectamente).



La etiqueta PICS se usa para facilitar la labor de filtrado de la página con arreglo a su contenido, advirtiendo de que puede tener, por ejemplo, contenido sexual, violencia o lenguaje ofensivo. Por ejempo:


<META http-equiv="PICS-Label" content='(PICS-1.1
"http://vancouver-webpages.com/VWP1.0/" l gen true comment "VWP1.0"
by "webmaster@ignside.net" on "2002.11.10T07:34-0800"
for "http://www.ignside.net" r (MC -1 Gam -1 Com 0 SF 0 Edu -2 S 0
Can 0 V 0 Env 0 P 0 Tol 0 ))'
/>

De utilidad dudosa (ya que la metatag por definicion la escribe el autor de la página), si tienes interés puedes probar este generador.


anti smart-tags


Las smart-tags fueron un invento de microsoft que sencillamente permitía alterar el contenido de una página web, insertando, insertandose enlaces aqui y allá al libre albedrío de sus creadores. El problema es que ya no es el autor de la página quien decide donde incluye links (y sobre todo, hacia donde enlaza) sino la propia microsoft. Naturalmente se levantó un clamor contra la idea, que de momento está aparcada.


<meta name="MSSmartTagsPreventParsing" content="TRUE">

(HTML) DOCTYPE

La declaración DOCTYPE


Si has leido estos apuntes desde el principio recordarás que una de las primeras cosas que se decian era que ninguna etiqueta precedia a la etiqueta html al comienzo del documento.



Tambien decíamos que la excepción era la declaración DOCTYPE. Es el momento de ocuparnos de ella.


DOCTYPE se refiere, obviamente, al tipo de documento. Mas técnicamente, podemos decir que un documento HTML válido debe declarar cual de las versiones de HTML está siguiendo, y puede además señalar la DTD (Document Type Definition) correspondiente.



Aunque luego los veremos con mas detalle, fíjate en la declaración de DOCTYPE html estricto, es decir, el que sigue con mas rigor el standard html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
... resto de la página ...

Donde vemos que en definitiva se trata de declarar al principio del documento cual es su contenido: en este caso, que se trata de un documento escrito en html, version 4.01, en inglés (Advierte que lo que se identifica como inglés no es el contenido del documento, sino el lenguaje de marcas utilizado. Los documentos HTML siempre deben estar marcados como EN); a continuación en la línea siguiente se incluye una URI (concepto similar a URL, pero mas amplio) donde el navegador puede obtener la DTD y descargarla si la precisa.


versiones de DOCTYPE en html


Limitándonos ahora al html, podemos decir que la version 4.01 (que va a ser la última, ya no hay mas, las siguientes serán xhtml y familia) admite tres tipos de documento:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

El primero es el que ya conocemos, html estricto, es decir, el mas ajustado al estandard. Un documento que se ajuste a esta declaración NO puede tener frames, ni elementos html que se hayan declarado en desuso. Para entendernos: en los documentos estrictos no puedes usar etiquetas html relacionadas con la presentación del texto, como el elemento font o el atributo align. Para esta finalidad debes usar solo CSS. Ajustarse plenamente a la sintaxis html puede ofrecer alguna dificultad, y por ello aunque es el modo recomendado por el W3C, en la práctica suelen usarse DOCTYPES mas tolerantes



El html transicional incluye todo lo que incluye el DTD estricto más los elementos y atributos declarados en desuso. Digamos que este es el tipo de declaración mas flexible, y la que se usa con mas frecuencia.



Por ultimo la tercera declaración se emplea para documentos html con frames, y es idéntica a la declaración de html transicional, solo que con dicho soporte para frames.


Utilidad práctica. Quirk mode v. standard mode


Las actuales versiones de mozilla 1+ (netscape 6+) y iexplorer (6+) cambian la forma en la que visualizan documentos html dependiendo de la DOCTYPE utilizada en el documento. En algunos caso lo visualizan ajustandose todo lo que son capaces a los standards oficiales ("Standard Mode"), mientras que en otro caso emulan la visualización (no ajustada a estos estandards) de los navegadores antiguos. Por ejemplo, Mozilla y Netscape tienen lo que llaman Quirk Mode que interpreta la página como lo haría la antigua version de netscape 4.x.



La razón de esto es que los diseñadores de navegadores son conscientes de que hay millones de páginas en internet que no están "bien escritas" desde el punto de vista del standard oficial, y que nunca van a ser corregidas. Estas páginas se solían ver razonablemente bien en los navegadores antiguos, mucho mas tolerantes (y a la vez imprecisos) en la interpretación de las etiquetas html. Para evitar que este legado de páginas no pudiera verse en los nuevos (e indudablemente mejores) navegadores, estos intentan determinar que a tipo de documento se enfrentan a traves del doctype, ajustando su visualización.


Mozilla


Mozilla tiene tres modos, que son standard, casi standard, y quirk mode.



El Quirk Mode, Mozilla se comporta como lo haría el Navigator 4, es decir, que ignorará cualquier irregularidad de código que encuentre, intentando mostrar el contenido a toda costa.



el modo casi standard emula al navigator en menor medida, y el modo standard se ajusta a las prescripciones del w3c.


Las siguientes DOCTYPE lanzan el modo standard:



  • Cualquier documento que llegue al navegador como XML

  • Cualquier documento que tenga un doctype correcto correspondiente a las versiones html 4.01, 4.0 o xhtml 1.0

  • Cualquier documento con DOCTYPE fijada como "DOCTYPE HTML SYSTEM"

  • Cualquier Doctype que no indique su DTD


El modo "casi standard" (solo existente en las versiones siguientes a Mozilla 1.0) se lanza:



  • Con los DOCTYPE correspondientes a XHTML transicional y frameset

  • Con los DOCTYPE correspondientes al HTML 4.01 transicional y frameset.


Y finalmente en quirk mode:

  • Cuando el documento carece de DOCTYPE

  • Cuando tiene una declaración DOCTYPE que no puede ser entendida (mal escrita, etc)

  • Cuando el DOCTYPE hace referencia a una versión de html anterior a la 4.0


Puedes ver con mas detalle el tema del quirk mode aqui.


iexplorer


Microsoft tambien tiene un modo de visualización "ajustado a los standard" que se lanza siempre que hay al comienzo del documento una declaración DOCTYPE valida, necesitandose además en algun caso incluir la URI de la DTD. (es decir, el DOCTYPE completo como mostramos al principio de esta pagina).



Este modo ajustado es desactivado cuando no existe declaración DOCTYPE, o si existe, pero no se refiere a ninguna versión concreta de HTML, o se refiere a una versión anterior a 4.0. (ojo, solo si esta version anterior es la 3.2, la 2.0 o la 2)



Si el DOCTYPE se refiere a HTML transicional o con soporte de frames, solo se lanza el modo estricto si ademas del DOCTYPE se adjunta la URI de la DTD.



También se lanza el modo estricto si la DOCTYPE se refiere a la version HTML 4.0strict o en general cuando se refiere a la versión 4.0 sin mas especificación.



Finalmente tambien se lanza el modo estricto si existe un DOCTYPE no reconocido, o si se refiere a las versiones HTML 1.0 o HTML 3.22.



Puedes ver una tabla completa aqui.


Opera


A partir de la versión 7.0 el navegador Opera tambien tiene dos modos de visualización, standard y quirk mode. Opera determina que modo utilizar en cada página siguiendo el mismo criterio que internet explorer 6.0 para windows. He aqui una tabla comparativa entre los tres navegadores.


Y encontrado por ahi en la red, un bookmarklet para comprobar en que modo se visualiza cada página: simplemente arrastra este link a la barra de enlaces de tu navegador y pulsalo cuando estes visualizando la página que deseas comprobar: Render Mode


Aparecerá un popup con alguno de los siguientes valores:



  • BackCompat: quirk mode (no standard)

  • CSS1Compat: standard mode

miércoles, octubre 19, 2005

(JAVASCRIPT) Corregir "bug" de IE para mostrar transparencia en PNG's

Para que el IE pueda mostrar “correctamente” nuestros PNGs con transparencias tenemos que añadir las siguientes líneas en las cabeceras HTML de nuestra web:



<!-- This solves the Internet Explorer PNG-transparency bug, but only for IE 5.5 and higher -->

<!--[if gte IE 5.5000]>

<script src="pngfix.js" type="text/javascript">

</script>

<![endif]-->



y copiar en nuestro servidor web el fichero pngfix.js:


function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.

{

for(var i=0; i<document.images.length; i++)

{

var img = document.images[i]

var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

{

var imgID = (img.id) ? "id='" + img.id + "' " : ""

var imgClass = (img.className) ? "class='" + img.className + "' " : ""

var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

var imgStyle = "display:inline-block;" + img.style.cssText

var imgAttribs = img.attributes;

for (var j=0; j<imgAttribs.length; j++)

{

var imgAttrib = imgAttribs[j];

if (imgAttrib.nodeName == "align")

{

if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle

if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle

break

}

}

var strNewHTML = "<span " + imgID + imgClass + imgTitle

strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

img.outerHTML = strNewHTML

i = i-1

}

}

}

window.attachEvent("onload", correctPNG);

jueves, octubre 13, 2005

(OTROS)Menú CSS con li

Código en el CSS:
#header {
   float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
background:url("norm_right.gif") no-repeat right top;
margin:0;
padding:0;
}
#header a {
display:block;
background:url("norm_left.gif") no-repeat left top;
padding:5px 15px;
}
Código en el Body:

<div id="header">
  <ul>
<li><a href="#">Home