Separar los scripts del html

23 02 2008

html javascript, css

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:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
–>
</style>
</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

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:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link href=”css/fuentes.css” id=”stilecss” rel=”stylesheet” type=”text/css” />
<title>Untitled Document</title>

</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

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 .


Comentarios : 1 comentario
Etiquetas: , , , , , , , , , , , , , , , , , , , ,
Categorías : Css para principiantes, General, Trucos css, css, manuales, movil, navegadores, webmaster

Como nombrar correctamente los divs y las clases

10 02 2008

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.


Comentarios : Deja un Comentario »
Etiquetas: , , , , , , , , , , , , , ,
Categorías : Css para principiantes, General, Trucos css, accesibilidad, css, programacion, webmaster

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

23 01 2008

Float,clear

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.
cuadros
Para los descuidadines, aqui les coloco el codigo html….
<div id=”div1″>Texto que va en el div1</div>
<div id=”div2″>Texto que va en el div2</div>

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:
divs
Si se observa el div3 se bajo… entonces les voy a mostrar el código css:

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

<div id=”div1″>Texto que va en el div1</div>
<div id=”div2″>Texto que va en el div2</div>
<div id=”div3″>Texto que va en el div3</div>

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.


Comentarios : 2 Comentarios »
Etiquetas: , , , , , ,
Categorías : Css para principiantes, General, Trucos css, manuales, webmaster

La importancia del color de fondo (accesibilidad)

18 01 2008

Accesible

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:

con_fondo

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.

sin_fondo

: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 :P :

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!.


Comentarios : Deja un Comentario »
Etiquetas: , , , , , , , , , , , , , , , , , , , , , , ,
Categorías : Css para principiantes, General, Trucos css, accesibilidad, manuales

Mucho ojo con este error en css

8 01 2008

:P Hoy estoy haciendo una aplicacion llamada ARMIN, un gestor de proyectos, y me encontre un caso peculiar que ya me habia pasado mucho antes, hay veces por pereza o por descuido no le damos espacio a algunas propiedades en css, y les voy a mostrar el caso:

tenemos:
Captura error
Esa es la esquina del diseño de la aplicacion la cual estoy cortando y diagramando en css, ahora, todo estaba bien… este es el codigo en css para generar solo el cuadro que dice CONTACTOS:
  

#menu_derecho{
      margin:11px 6px 0px 6px;
      background:url(‘../img/fondo_derecha.gif’)#00CCCC repeat-x;
      float:right;
      width:185px;
      height:300px;
  }

:) todo super bien, en el maldito firefox, que no me gusta pero toca testear la aplicacion ahi, salio perfecto, en mi opera preferido tambien, y lo veo en ie7 y adivinen, :S tenemos problemas!, una captura para que se den cuenta.

Vista desde la zorra, :P :
Zorra
Vista desde el ie
Ie
Y el problema radica en que al momento de declarar la propiedad BACKGROUND,       

background:url(‘../img/fondo_derecha.gif’)#00CCCC repeat-x;

no le di espacio entre gif’)# , la forma correcta es gif’) # ,asi es nuestro amigo explorer :P y sus mañas :) . chau!


Comentarios : Deja un Comentario »
Etiquetas: , , , , , , , , , , , , , , ,
Categorías : General, Trucos css, navegadores, webmaster

Evitar la mayoria de problemas en css, neutralizar propiedades

6 01 2008

Neutro css

En css tenemos un problema muy grande, que es la diferencia entre navegadores, cada navegador quiere tomar algunas formas de interpretar las propiedades del css. entonces por eso hay un truco llamado NEUTRALIZACION de css :P yo lo llamo asi :P y consiste en lo siguiente:

insertamos este codigo al comienzo de nuestro archivo css, esto nos permitira que iniciemos la mayoria de las propiedades desde 0 y quen o tengamos problemas mas adelante. aqui va el codigo:

/* CSS Document */
@charset “utf-8″;
/*Neutralizando elementos*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { border:0;
}
body{
color:#000;
text-align:left;
margin:0px;
}
img {
border: none;
text-decoration: none;
}
/*Fin de la neutralizacion*/


Comentarios : 4 Comentarios »
Etiquetas: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Categorías : Css para principiantes, General, Trucos css, manuales, webmaster

El padding y el margin

4 12 2007

Hace poquito, estaba codificando una web, cuando de repente llego un amigo, el que me involucro en el cuento del Css, y me comento que usando padding en vez de margin casi para  la mayoría de los casos nos ahorraría descuadres a la hora de que la pagina se viera en diferentes navegadores. me puse a la labor de evaluar esa teoría y fue muy cierto, usando padding para la mayoría de los divs, siempre y cuando se pudiera, la visualización entre los exploradores era casi perfecta hasta que llegue a la etiqueta IMG, esta etiqueta en el internet Explorer, tiene un caso peculiar, a diferencia de los demás exploradores cuando aplicas padding sobre la imagen puede provocar descuadres en la estructura, por eso les recomiendo que para las imágenes usen margin, sea cual sea el caso, si ya no se puede usar margin pues recurrir al padding, pero PUEDE SER QUE CREE PROBLEMAS a la hora de graficar.


Comentarios : Deja un Comentario »
Etiquetas: , , , , ,
Categorías : Trucos css