Archivo de la categoría: web

.:la cena está servida:.

Estándar

La página css diner creo un juego on line para practicar selectores CSS. Los selectores están inventados pero permite ejercitar perfectamente la lógica de ubicación de las propiedades y qué elemento modificamos cuando escribimos código.

css dinner

Con la excusa de servir la mesa, habrá que saber como modificar los elementos que se mueven en ella, con un poco de ayuda pero igual la tarea se va complicando a medida que pasan los niveles.

.: migrar a XHTML :.

Estándar

Parece ser que se hace necesario migrar hacia XHTML, pero antes veamos bien qué es XHTML:
Vendría a ser la versión XML del HTML (eXtensible Hyper Text Markup Language)
Su objetivo es cumplir con el World Wide Web Consortium, por el que las páginas web deberán tener la información y la forma de presentarla claramente separadas. Por esto XHTML es un lenguaje semántico: no define el aspecto de las cosas sino lo que significan.
El aspecto estará dejado en manos de las CSS y de JavaScript.
Su sintaxis debe ser coherente, correctamente anidada, con los tags en minúscula, todos los elementos cerrados correctamente y los valores de los atributos entrecomillados. Si sos una persona prolija, ya has venido trabajando asi desde hace rato.

.: class o id :.

Estándar

El uso de class va a permitirnos determinar distintos estilos para un mismo elemento o generar estilos tipo para cualquier tag XHTML. Deberás escribir en la CSS:
elemento.nombreclase {propiedad:valor}
Es decir, a modo de ejemplo:
p.amarillo{color:yellow}
Y el código del XHTML será:
<p class=”amarillo”>lalalalalalala</p>

Ahora bien con ID sólo puedes usarlos en un elemento y recuerda que es case sensitive.
#idelelemento {propiedad: valor}
Es decir:
#textoarticulos {font-weight: bold}
Y en el código XHTML pondrás:
<p class=”amarillo” id=”textoarticulos”>hola que tal?</p>
o
<div id=”textoarticulos”>hola que tal?</div>

.: espejito espejito :.

Estándar

Un script impresionante que te permite reflejar las imágenes de tu web.
<script src=”reflection.js” type=”text/javascript” charset=”utf-8″></script>, siempre entre el tag </head> y el <body>
Dentro de las propiedades de la imagen en cuestión tendrás que poner
<img src=”imagen.jpg” class=”reflect rheight80 ropacity25″ />
 Claro que los valores los personalizás, no?!

 

http://cow.neondragon.net/stuff/reflection/

.: banner con imágenes aleatorias :.

Estándar

Cuando quieras hacer una web que tenga imágenes cambiantes para que cada vez que un visitante llegue a ella tenga una fotografía distinta para ver, te recomiendo el siguiente script, que va detrás del tag </head> y antes del <body>

< script Language=”JavaScript”>
hoje = new Date()
numero_de_imagens = 3
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
banner = “acavaeltitulodetufoto.jpg”
link = “
http://www.acavatuweb.com
alvo = “_self”
}
if (numero == 1){
banner = “tusegundafoto_02.jpg”
link = “
http://www.acavatuweb.com
alvo = “_self”
}
if (numero == 2){
banner = “tutercerafoto_03.jpg”
link = “
http://www.acavatuweb.com
alvo = “_self”
}
document.write(‘<a href=”‘ + link + ‘” target=”‘ + alvo + ‘” ><img src=”‘ + banner + ‘” border=0></a>’)
< /script>

.: el día que quieras, María :.

Estándar

Este es para mi amiga María. Para poner la fecha con Javascript en una web tenés que escribir luego del tag </head> el siguiente código:

<script languaje=”JavaScript”>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym=”0″+daym
var dayarray=new Array(“Domingo”,”Lunes”,”Martes”,”Miércoles”,”Jueves”,”Viernes”,”Sábado”)
var montharray=new Array(“Enero”,”Febrero”,”Marzo”,”Abril”,”Mayo”,”Junio”,”Julio”,”Agosto”,”Septiembre”,
“Octubre”,”Noviembre”,”Diciembre”)
document.write(“<large><font color=’0000FF’ face=’verdana’>”+dayarray[day]+” “+daym+” de “+montharray[month]+” de “+year+”</font></small>”)
</script>

y vualá!Si querés darle otra tipografía, color, tamaño, deberas cambiar en la parte que habla del document.write

.: tunda-ta tunda-ta :.

Estándar

¿Para qué definir en cuatro renglones lo que podés establecer en una sola línea de texto? Cuando estamos escribiendo el CSS que utilizaremos para nuestro sitio debemos evitar poner código innecesario, lo cual hará que el sitio sea menos pesado y se interprete más rápido.

En lugar de:

border-top:2px solid #00f;
border-right:2px solid #00f;
border-bottom:2px solid #00f;
border-left:2px solid #00f; 

Debemos resumirlo en un único renglón:

border:2px solid #00f; 

.: tirando anclas :.

Estándar

Generalmente los enlaces nos llevan a otras páginas de un mismo site o a otras distintas, pero también podemos crear enlaces dentro de la misma página; esto se denomina crear anclas. Estas anclas nos permitiran saltar directamente a una sección en especial.

 

Habrá que situar el cursor al sector a donde deseamos que el ancla se dispare y escribiremos:

 

<a href=”#cocina“>Cocina</a>

 

Y luego nos situaremos desde donde queremos que el ancla nos lleve y escribiremos el siguiente el siguiente código:

 

<a name=”cocina“>Cocina</a>

 

Este recurso nos sirve para facilitar la lectura de un documento muy largo, y asi como hicimos un ancla para llegar hasta ahí, quizas desde un índice, podremos crear un ancla para volver al punto de inicio.

.: colocar un ícono como favicon :.

Estándar

Muchos sitios web tienen en la barra de dirección del site colocado el ícono de la empresa u organización. Hacer eso es una tarea bastante sencilla. Con cualquier software de creación de íconos trabajaras la parte gráfica, guardandolo, por supuesto como .ico y con las variantes de visualización posibles que puedan llegar a tener los destintatarios y con el nombre favicon, en este caso. Una vez realizado esto, sólo te queda colocar el siguiente código dentro del tag head:

 

<link rel=”shortcut icon” href=”favicon.ico”>

 

Y guardar el ícono en el directorio raíz, o por lo menos si así no lo hicieras, recuerda direccinar bien el href