Don estandares

Separar los scripts del html

donestandares — Sat, 23 Feb 2008 13:50:17 +0000

Hay un error común en nuestros sitios web, que es de principiante y es el de incluir código externo en el html, me refiero a esto:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

Untitled Document

Hola mundo

Eso es ERRÓNEO, ¿Por que?, es sencillo, imagina que entran a tu web desde un móvil, este móvil solo admite HTML, no te admite css. que va a pasar… tu web… se va a cargar mas lento, la simple razón es que esta cargando código css que al móvil no le va a servir, por eso siempre digo que lo que es css, javascript y otros siempre vayan en un archivo aparte!.

Entonces lo correcto seria:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

Untitled Document

Hola mundo

Lo que esta marcado con naranja es el llamado del archivo css externo, esto nos permite que no coloquemos directamente el código en el html. y así cuando el navegador web del celular, cuando vaya pasando por esa instrucción vera que es un archivo .css y dirá :O ami no me interesa el css, mejor sigo derecho y sigo mirando las demás etiquetas, en cambio si no tubieramos eso el navegador estaría diciendo font-family: Arial, Helvetica, sans-serif; , que es eso1! :S no entiendo, font-size: 18px; , no entiendo eso tampoco, ven… así que perderíamos segundos de carga y el usuario dinero en carga :P.

Una opinión sobre “width” y “height” en las imágenes

donestandares — Thu, 14 Feb 2008 13:43:29 +0000

El problema de afirmar de forma tajante y sin lugar a dudas es que se pueden crear ideas equivocadas. Una de ellas es muy conocida en el mundillo web:

“No hay que usar tablas en el diseño”

Sin embargo eso se refiere únicamente a no utilizar tablas para maquetar la web. Lo que forma parte del diseño y su maquetación debe ser tarea del CSS, el contenido va para (x)HTML.

De la idea original se ha creada una que no es correcta y es que no se deben usar las tablas “para nada”. Las tablas son para tabular datos y si tenemos que hacer por ejemplo una comparativa lo más fácil es una tabla. Es absurdo crear un sistema de “tablas” de mediante cientos de “div’s”, clases y MUCHO código XHTML/CSS.

En el caso de las imágenes estoy viendo cada día más una idea “equivocada” de este tipo. Es el caso de no utilizar height="" o width="" ya que son atributos de representación que deberían ir al CSS.

Esto último es totalmente cierto. No se “deben” utilizar. Todavía hay cientos de sitios que tienen pendiente eliminar cientos de etiquetas de representación como y atributos como size="".

Pero las imágenes dentro del contenido (las que no forman parte del diseño) ¿deben evitar estos atributos?. De primeras lo correcto sería añadir un identificador o clase a cada imagen y definir sus proporciones vía CSS pero a menos que queramos tener hojas de estilo de megabytes de tamaño y un cacao del copón no compensa mucho.

Viendo la situación creo que con las imágenes se puede especificar sin problemas el tamaño sin recurrir al CSS. En un sitio como SigT el utilizar o no los atributos no es problema pero ¿y en los artículos extensos con muchas imágenes?.

Ahí se hace especialmente molesto leer un artículo y que el texto pegue “saltos” a medida que se descargan las imágenes. Es en ese escenario cuando se hace necesario plantearse cosas como ésta.

“Todo por la experiencia del usuario, oye”.

Y sin embargo con este tema tan superficial ya he tenido varias discusiones con dos “fanáticos de los estándares” de los que “si no valida no es bueno” (como si el validador fuera perfecto). Pero lo mejor, y para más INRI, es que al utilizar estos atributos sigue validando…

Tomado de:

http://sigt.net/archivo/una-opinion-sobre-width-y-height-en-las-imagenes.xhtml

Tipos de fuentes en css

donestandares — Thu, 14 Feb 2008 04:13:26 +0000

Holas en css se plantea mucho sobre las fuentes, lo ideal… es usarle las propiedades del css para que se vea bonito al usuario, y para nosotros fácil de manejar.

El css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarlas, no todas :p por que son demasiadas pero si las mas importantes.

Recuerda algo, por el momento no se pueden usar fuentes que el visitante no tenga instaladas, por ejemplo este tipo de letra, es muy bonita y hasta agradable, pero el problema es que si nosotros la instalamos en nuestra pc y trabajamos con css o en html con ese tipo de letra y la subimos a un servidor, esta en NUESTRA PC se va a ver muy bien, el problema es cuando nuestros usuarios abran nuestro sitio web, ellos no verán correctamente por que en la pc del usuario no esta instalada esta fuente.

Por ahora no existe forma de hacer solución a esto, pero lo único que podemos hacer es usar las fuentes default de “windows”, “linux”, “Mac os”, en fin… los sistemas operativos mas usados.

principalmente las fuentes default son:

Arial, Helvetica, sans-serif
“Times New Roman”, Times, serif
“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Cada renglón representa un grupo de fuentes, estos grupos están hechos para que tratar de que la web en cualquier sistema operativo sea visible CASI igual, vamos a ver su funcionamiento:

Arial, Helvetica, sans-serif

Si en el sistema operativo no se encuentra ARIAL, el navegador continua con la siguiente, que es Helvatica y si por cuestiones de configuración o lo que sea sigue con sans-serif.

Y que pasa si en el sistema operativo (Mi preferido Linux! ), no se encuentra ninguna de el grupo de fuentes?, pues muy sencillo el navegador tiene por defecto configurada un tipo de letra… esto permite que se pueda ver sin problemas.

Ahora… ya que sabemos esto, pasamos a la creación de CLASES PARA FUENTES

Lo primero es crear una fuente:

.fuente_titulos{
}

por que le coloque ese nombre?, Recuerda que es mas fácil identificar el css con nombres relacionados, entonces como es un tipo de fuente, entonces se le coloca al comienzo pues FUENTE, recuerda no dejar espacios.

ahora pasamos a crear las propiedades de esa clase, entonces:

.fuente_titulos{
color:#00699C;
font-size:1.1em;
font-family:”trebuchet MS”, Arial, Helvetica, sans-serif;
}

Lo primero, la propiedad COLOR, es lógico, es el color que le queremos darle a la fuente.
En lo segundo hay una parte que necesito hablar con ustedes , y es relacionada con el tamaño de fuente. En css se admiten varios tipos de “medidas” para el tamaño del texto, una de ellas es el PX, Que muchos lo conocen, 12px, 14px, etc… pero… es recomendable que usemos EM, osea 0.8138 em, 0,7340 em, etc… esto lo explicare mas adelante, pero les voy a dar el truco para usar tamaños en em, todo esta en la conversión. Si ustedes digamos tienen 13 px, para pasarlo a em simplemente cojen y multiplican 13 x 0.0626 , osea cojen el valor en px y lo multiplican por 0.0626, este ultimo valor es un numero que equivale a 1 px, entonces al momento que multiplicamos pues nos da el valor jeje.

Lo tercero es el grupo de fuentes, entonces el dreamweaver ya viene con la opción de colocar las básicas igual arriba ya les escribí cuales son. recuerda que solo se puede declarar un grupo, también puedes crear tus propios grupos, pero estos ya están organizados para que sean compatibles y similares.

Como nombrar correctamente los divs y las clases

donestandares — Sun, 10 Feb 2008 15:30:34 +0000

Cuando estas trabajando con paginas pequeñas, no tienes muchos problemas con los nombres, pero un error que uno comete generalmente es el de nombrar las clases y los objetos con cosas que uno esta pensando, entonces por ejemplo “.claudia”, “#careperro” y así cosas así. pero no eso no es lo correcto.

lo correcto es crear nombres relacionados a la posición, función y contenedores… osea si el div que vamos a crear esta dentro de un div llamado CABEZOTE, y su función es contener el logo, entonces quedaría algo así:

#cabezote_logo{
}

Ves.. es algo mas organizado, esto que nos permite, que a la hora de ubicarnos y buscar un div en especificio, lo encontraremos en menor tiempo que si estan nombrados al azar.

Recuerda no dejar espacios, pues estos le dan una orden especial al navegador que después veremos.

¿Quieres saber quién te tiene no admitido/eliminado en el MSN? Pues no des tu contraseña a desconocidos

donestandares — Sun, 10 Feb 2008 15:00:23 +0000

Parece mentira que después de tanto tiempo (¡años ya!) del invento de este fraude todavía haya gente que siga cayendo en él. Es muy simple, y seguro que muchos lo conocéis, simplemente se trata de páginas que ofrecen el servicio de mostrarte quién te tiene como no admitido o te ha eliminado del mésenyer a cambio de que les des tu datos de conexión, es decir, tu usuario y contraseña. Creía que este negocio ya estaba más que muerto, pero hoy mismo un par de contactos míos me han saltado con la típica ventanita que me acceda a una de esas páginas para que me lea el futuro.

Como norma general, dar la contraseña de tu correo a alguien que no pertenezca a tu familia ya es un suicidio tecnológico, y en este caso sería como darle la contraseña de tu tarjeta de crédito a una persona desconocida para que te muestre el dinero que tienes. ¿Quieres saber qué es lo que hacen? La mayoría de páginas, después de mostrarte esa información, se conectan a tu cuenta varias veces al día para molestar a todos tus contactos con spam descarado. Lo que es peor, esto puede colapsar tu cuenta y no sería raro que la perdieras para siempre, o al menos que la conexión sea pésima. Así que ya sabes, no des tu contraseña a ningún sitio web, o atente a las consecuencias.

Pero claro, ¡tú quieres saber quién te tiene como no admitido! Sorpresa: esos sitios, además de ser peligrosos, no funcionan. Microsoft cambió hace tiempo el protocolo para que los servidores de msn no difundieran esta información. Antes sí podías, pero ahora mismo ni siquiera puedes saber el estado de otra persona sin que ella te invite/admite o sin saber la contraseña de la cuenta (sin cambiar la configuración de la cuenta). Sin rebuscar demasiado, algunos sitios fraudulentos que siguen esta práctica serían: blockoo.com, scanmessenger.com, detectando.com, quienteadmite.info, checkmessenger.net, blockstatus, etc… Todos ellos son potenciales phishing, y ninguno funciona más allá de recolectar cuentas de correo.

Disculpad los lectores avanzados que ya habéis dejado atrás este tipo de engaños facilones hace mucho tiempo, pero es que hoy me he vuelto a conectar al messenger por obligación y me he dado cuenta de que las cosas han cambiado muy poquito.

Artículo original: http://www.genbeta.com/2007/11/13-quieres-saber-quien-te-tiene-no-admitido-en-el-msn-pues-no-des-tu-contrasena-a-desconocidos

Variables globales PHP

donestandares — Sat, 02 Feb 2008 17:23:25 +0000

En el mundo del php se esta evolucionando constantemente, es cierto sigue siendo el mismo FOR, IF y todo sigue igual, la diferencia son en funciones y novedades, una de ellas es que las variables globales se deshabilitaron por cuestiones de seguridad.

entonces por ejemplo, antes llegábamos y colocábamos
index.php?variable1=”holas”

y en php imprimíamos asi:

echo $variable1;

ahora como las variables globales están des habilitadas por defecto, entonces accedemos asi:

echo @$_GET["variable1"];

GET por que estamos trabajando las variables por get, si fuese un formulario por donde enviamos las variables y usa post, remplazamos el GET por POST.

echo @$_POST["variable1"];

para los que estabamos acostumbrados a imprimir asi nomas, es complicado al comienzo, igual hay una forma de evitar colocar GET y POST. Es una porcion de codigo.

/***VARIABLES POR GET ***/

$numero = count($_GET);
$tags = array_keys($_GET);// obtiene los nombres de las varibles
$valores = array_values($_GET);// obtiene los valores de las varibles

// crea las variables y les asigna el valor
for($i=0;$i<$numero;$i++){
$$tags[$i]=$valores[$i];
}

/***VARIABLES POR POST ***/

$numero2 = count($_POST);
$tags2 = array_keys($_POST); // obtiene los nombres de las varibles
$valores2 = array_values($_POST);// obtiene los valores de las varibles

// crea las variables y les asigna el valor
for($i=0;$i<$numero2;$i++){
$$tags2[$i]=$valores2[$i];
}
/*fin normalizador get y post*/No se de donde lo tome, si el autor del código anda por ahí avísenme

Imagenes y accesibilidad

donestandares — Fri, 01 Feb 2008 15:37:00 +0000

cuando usas imágenes en un documento html, es necesario que coloques una descripción de ella, esto permite que cuando no cargue la imagen se pueda ver de que trata, ademas cuando visite una persona tu web con un navegador de texto, como lo hacen los invidentes… pueda este leer el contenido tranquilamente.

Ademas de esto, esta demostrado que Google te indexa mejor, son truquitos que se van aprendiendo a lo largo de la vida vamos a ver un ejemplo:

ahí vemos una serie de imágenes, ahora vamos a deshabilitarla con opera.

Esta captura nos sirve para también mostrarles lo del anterior post, donde hablaba de la importancia del color de fondo cuando se usa imágenes de fondo, aquí vemos que el texto y la información es totalmente visible, también observamos que al quitar las imágenes, aparecen textos que representan esas imágenes que no están… eso es bueno ya que por ejemplo si tenemos un sitio personal y esta la foto de toda la familia y en el caso que no cargue, aparecerá el nombre de cada uno de los integrantes…. esto se logra de la siguiente manera:

En dreamweaver en modo gráfico seria algo así:

donde dice ALT ahí, se coloca el texto descriptivo, tiene que ser lo mas explicativo posible. tampoco FOTO CON ARBOLES MUY HERMOSOS naaa tampoco, pero si por ejemplo foto con PEDRITO, JUANITO, MARCELA, ANDREA, ANDRES EN EL DIA DE EL AMOR Y LA AMISTAD.

Esa es una forma, si tu trabajas con el código directamente pues ya te muestro como se hace

“img/ojos_bonitos.jpg” alt=“Foto de articulo” />

alt=“Foto de articulo” es el texto que se debe insertar, para colocar la descripción de la imagen. practiquen y me comentan.

Truco para usar fireworks en ubuntu (linux)

donestandares — Fri, 25 Jan 2008 05:23:51 +0000

Ubuntu es la distribución de linux mas usada del mundo, si estoy mal que me corrijan. lastimosamente aplicaciones muy buenas como las de macromedia aun no tienen soporte para linux, esto hace que usemos windows aun, no voy a entrar a discusión si linux o windows es mejor, aya cada uno si se quiere aguantar virus cada mes. pero bueh… sigamos… hay un truco que aprendí hasta hace poco, lo confieso yo en la pc del trabajo tengo windows, en el portátil tengo ubuntu y esto pues me acarreaba algunos problemas como lo son no usar bien el fireworks y el dreamweaver, al comienzo utilice el wine, pero tenia problemas no es lo mismo, hasta que se me ocurrió intentar con la virtualizacion.

Para los que no saben que es virtualizacion, consiste en cojer un sistema operativo, crear un disco duro de mentiras e instalar el nuevo sistema operativo dentro de otro algo asi:

En una ventana puedo tener windows sin ningún problema, entonces esto me da la ventaja de poder trabajar con mi UBUNTU con total libertad. eso es virtualizacion, entonces… esto lo logro con un programa llamado VIRTUALBOX.

Como no puedo demorarme mucho explicando la instalacion del virtualbox, saltamos ese paso, suponiendo que tienen instalado ubuntu o fedora o cualquier distro linux, y que tienen el virtualbox, entonces hay un truco muy especial para trabajar bien con el virtualbox y que pareciera que el fireworks esta instalado en el escritorio, en mi caso gnome, entonces lo que yo hago es lo siguiente:

Me posiciono en la ventana.

Ahora presione la tecla de host, que por defecto es el CONTROL de la derecha, y despues la L, entonces CONTROL+L.

Y listo tenemos integración de los dos escritorios, el explorer y gnome, ahora abrimos fireworks

No es el mejor manual pero peude servir de algo.

Colocar un div junto de otro (Seguimos con los cursos)

donestandares — Wed, 23 Jan 2008 13:58:56 +0000

Hasta ahora hemos visto como crear divs, con clases… y si hemos analizado los divs son verticales, pero no sabemos aun como se colocan divs horizontales, entonces es muy sencillo de haces, pero algunas personas tienden a confundirse.
Para indicarle al navegador que divs queremos que queden juntos verticalmente, le damos la propiedad float.
Depende de a donde lo queramos alinear le daremos left ó right. Entonces:
#cajon1{
float:left;
}
#cajon2{
   float:left;
}
Ahora, para diferenciarlo, vamos a colocarle colores a cada cajón:
#cajon1{
     float:left;
background:#CC6600;
}
#cajon2{
      float:left;
background:#000FFF;

}
Algo asi quedaría.

Para los descuidadines, aqui les coloco el codigo html….

Texto que va en el div1

Texto que va en el div2

Hey!!! pero aun no hemos acabado, digamos que queremos que un div no siga siendo alado, para que quede abajo… le damos la propiedad clear:boot;, nos dará un resultado asi:

Si se observa el div3 se bajo… entonces les voy a mostrar el código css:

#cajon3{
clear:boot;
background:#000FFF;
}

Texto que va en el div1

Texto que va en el div2

Texto que va en el div3

Ya es parte de su imaginacion como usar estas propiedades, no es necesario usar tablas para organizar nuestras webs, recuerda solo usar tablas cuando muestres datos estadisticos.

La importancia del color de fondo (accesibilidad)

donestandares — Fri, 18 Jan 2008 13:12:23 +0000

El color de fondo es muy importante, dado que no todo el mundo tiene velocidades de conexión altas como la banda ancha, sino que aun se conectan por modem.

Si nosotros planteamos un diseño con imágenes de fondo, debemos necesariamente colocarle un fondo de color por ejemplo de tipo #FFFFFF, por que esto nos permite que en el caso que no carguen las imágenes pueda el usuario visualizar la información ó enterarse de una previsualizacion del sitio. Ejemplo:

ese es el administrador de proyectos en el que e estado trabajando estos últimos 12 días, ahí podemos ver la interfaz… que maneja varias imágenes, esto el da un aspecto “bonito :P” creo yo. Ahora vamos a quitarle las imágenes para ver como se visualiza.

:O si notamos se pierden las imágenes, pero el texto sigue totalmente legible, esto es importante en una web y en una aplicación de internet, por que mientras cargan las imágenes, aparece el color de fondo y esto a vos te da un tiempo extra. SI! un tiempo extra, por que el usuario no necesita que cargue la web completamente para poder comenzar a leer, escribir o navegar sobre la web creada.

Si aun no sabes como colocar un fondo como imagen, ó si ya sabes y no sabes como colocarle el color a continuacion con un minitutorial te explicare.

Primero crea la clase:
.clase_fondo1{
}

Ahora, dentro de ella declara la propiedad BACKGROUND, de esta forma:
background:url(’../img/fondo.png’);
Algunas personas dicen que debe ir sin las comillas, por que en el ie para mac crea problemas cuando tiene comillas, pero pues a mi me gusta con comillas, asi que vamos a colocarlo asi :

entonces el codigo quedaria asi:

.clase_fondo1{
background:url(’../img/fondo.png’);
}

Ya tenemos declarada la propiedad con la url de fondo, recorda que la direccion de ubicacion es relativa segun el directorio del archivo css. ahora vamos a colocarle un fondo, por ejemplo un color negro.

.clase_fondo1{
background:url(’../img/fondo.png’) #000000;
}

si ves, le agregue el codigo de la imagen despues de la declaracion del fondo, recuerda dejar espacio para que el IE en windows no te cree problemas.

y listo!.