Recursos Web

En este caso, más que una mejora , es una actualización de la mejora vista en la entrada Mejorando PSPAD II.

Se trata de una actualización de la plantilla usada en esa entrada. Tan solo he quitado atributos innecesarios, he corregido el charset y he añadido varias meta etiquetas importantes para que las rellene el alumno.

A partir de ahora, todos los trabajos en clase se harán usando esta plantilla.

Para finalizar os digo lo de siempre: si encontrais algún error, si tenéis algún comentario, quereis añadir alguna mejora… lo que sea, decidmelo.

Hemos visto en clase como podemos redondear bordes de diferentes elementos de nuestra página. Como sé que no os acordáis, os refresco un poco la memoria:

Si nuestro navegador soporta el estándar CSS3, usaremos:

Hoy día esa propiedad ya es soportada por todos los navegadores modernos (incluido IE9). Aún así, todavia existe gente que usa versiones más antiguas de los navegadores. Para estos navegadores podemos usar:

Aunque con estas propiedades no nos validaran la página (no son estándar).

Internet Explorer, como no, es diferente. Como ya sabemos, las versiones 6, 7 y 8 de este “magnifico” navegador, no soportan propiedades de CSS3, por tanto, lo explicado antes no nos sirve.

Algunos sitios comentan que para solucionar esto en IE8 se ha de usar la propiedad: -ms-border-radius: 3px; Ni caso. Esa propiedad no funciona en ninguna de las versiones de IE indicadas (y me extrañaria que funcionara en IE9)

En clase vimos que podíamos solucionar esto usando una libreria en Javascript llamada DD_roundies.js

Para quien no le guste esa solución, o simplemente quiera saber alguna alternativa más, aquí os muestro como redondear bordes en Ineternet Explorer usando un archivo .htc

El método es muy sencillo:

Imaginad que queremos que este DIV tenga los bordes redondos en todos los navegadores:

< div id="redondo">Esto es algo muy útil< /div>

Para ello nos vamos al CSS y añadimos un selector ID para darles las propiedades:

#redondo{
    ...
   -moz-border-radius: 8px; /* Firefox*/
   -webkit-border-radius: 8px; /* Safari,Chrome.*/
   border-radius: 8px; /* El estándar.*/
   behavior:url(border-radius.htc);/* IE 8.*/
}

Como veis, para IE hemos añadido la propiedad behaviour (os remito al libro de CSS Avanzado) junto con ruta relativa de un archivo .htc. FIN. Eso es todo.

El archivo necesario se puede descargar de AQUI. En ese mismo enlace tenéis ejemplos de lo que acabo de explicar.

Ni que decir tiene que esta forma tampoco valida (estamos usando la propiedad Behavior que es propia de IE).

Cuando hacemos un proyecto web, lo normal es tener varias carpetas. Carpeta para las hojas de estilo, carpetas para los archivos JavaSript, para las imagenes…

No se si os habéis parado a pensar alguna vez en esto pero, cuando subimos todas esas carpetas a nuestro host… nada impide que un usuario ponga la ruta de dichas carpetas en la URL y visualice el listado de todos los archivos y directorios que se encuentran dentro. Probadlo con algún proyecto vuestro que tengáis subido.

¿Cómo evitamos eso?

Los más rápidos habrán pensado: “Fácil, coloco un archivo index.html en cada carpeta  y así evito que se visualice nada”.

Pues es perfectamente correcta esta respuesta Ya sabemos de clase que, si dentro de una carpeta existe un archivo llamado index.html (si es .php os recuerdo que también vale), en la mayoría de los casos el navegador mostrará ese archivo (a no ser que se haya cambiado deliberadamente la configuración del servidor, que repito, no es lo normal).

Sin embargo, no me negaréis que esta solución es poco elegante. Por ejemplo: ¿Qué pinta un archivo .html (o .php) en el directorio de las imágenes?

Aquí os traigo una solución más elegante y correcta que la anterior.
Lo que tenemos que hacer es crear un archivo llamado .htaccess (Alguno de vosotr@s ya sabéis para que sirve este archivo. Para el resto, os basta con saber que es un archivo usado para configurar el comportamiento del servidor apache).

Dentro de ese archivo, tan solo debemos poner esta línea: Options All -Indexes

Una vez escrito eso, grabamos los cambios y guardamos el archivo en el directorio que queremos bloquear. De esta forma, cada vez que alguien intente acceder a dicho directorio le saldrá algo como esto:

Aquí os dejo el video del seminario de Redes Sociales del pasado 21 de Marzo:

También podeis obtener el material usado en la ponencia desde la página oficial del evento: Seminario Redes Sociales

Las opiniones sobre este tema están en el grupo de clase, pero vamos, básicamente fue un calco del anterior seminario. Con eso todo queda dicho

Como varios me habeis pedido que publique cosas sobre JQuery (ya se sois unos vagos y no os gusta leeros manuales :p) voy a ir poniendo programitas sencillos para que veais lo fácil que es “crear” cosas usando este potente Framework de JavaScript.

En esta entrada vamos a hacer un sencillo efecto de rollover en una imagen. La imagen se cargará de inicio. Cuando pasemos el ratón  por encima (onmuseout en JavaScript), dicha imagen cambiará a otra y cuando abandonemos el espacio que ocupa (onmouseout) se volverá a la imagen inicial.

Hacer esto en JavaScript es relativamente sencillo (como se ha visto en clase). Hay que hacer un par de funciones (una para cada evento del ratón) y jugar con el atributo src de la imagen.

Con JQuery es mucho mas rápido. No hace falta indicar ningún evento en el HTML y vamos a tener listo el efecto en una sola función.

Preparación

Lo primero es colocar una imagen en nuestra página con su respectivo ID:
<body>
<img id="foto" src="images/original.jpg" />
</body>

A continuación, en la cabecera enlazamos el fichero jquery.js y abrimos las etiquetas necesarias para que el efecto esté disponible  tan pronto como se cargue la página (como window.onload en JavaScript):

<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Aqui va el código del efecto
});
</script>

Ni que decir tiene que, a la hora de enlazar el fichero jquery.js, se debe poner la ruta relativa de este (habiendolo descargado previamente desde aqui) o poner la URL donde esta alojado. Esto está mas que visto en clase

Programando el efecto

Lo que nos queda es programar el efecto. Para ello vamos a poner el código donde os he indicado en el paso anterior (dentro del $(document).ready):

$('#foto').hover(
function() {
$('#foto').attr("src","images/cambio.jpg");
},
function() {
$('#foto').attr("src","images/original.jpg");
}
);

Para los que no sepan aún como va el JQuery os explico a grandes rasgos como funciona:

• Con $('#foto') se selecciona la etiqueta cuyo ID sea foto (como un getElementById en JavaScript).
• $('#foto').hover indica que se va a crear un rollover y necesita dos funciones. La primera será la que se haga cuando se ‘entre’ en la imagen y la segunda, cuando se ‘salga’.
• Con $('#foto').attr("src","ruta") tocamos el atributo SRC del elemento seleccionado.

Como veis, todas las ordenes de JQuery son mucho más intuitivas que las de JavaSCript (y mas cortas de escribir)

Os dejo el ejemplo completo para descargarlo: Ejemplo rollover

En muchas ocasiones, cuando navego en busca de algo (un recurso, una solución , unos archivos…) nos encontramos con sitios que parecen tener lo que buscamos.  Sin embargo, en muchos de esos sitios no podemos acceder a esa información a no ser que, previamente, nos registremos en el sitio.

Esto para mi es una molestia. No por el hecho de rellenar el formulario de registro (que normalmente es corto) si no por el hecho de ceder mi dirección de correo a un sitio que, muy posiblemente, no vaya a volver (encuentre o no la solución en dicho sitio)

Es por eso que el recurso que os presento es más una herramienta útil para estos casos que para el diseño web.  Su nombre es: 10 Minute Mail

Nada más entrar en esa página se nos genera automaticamente un correo temporal que dura 10 minutos. Pasado ese tiempo (y si no le decimos lo contrario) esa dirección de correo desaparece.

Esa página tambien sirve de bandeja de entrada del correo generado. De modo que si realizamos un registro y nos tienen que validar el correo usado (normalmente nos envia un mensaje con una URL de validación al correo) tan solo tenemos que esperar a que el correo aparezca en la bandeja  de entrada ‘falsa’ que tiene la página.

Si diez minutos no es suficiente, siempre podemos “dame 10 minutos más” (aparece debajo de nuestra dirección falsa) para alargar la vida de nuestra cuenta de correo.

No os preocupeis si, dentro de los diez minutos de vida, cerrais la página. Mientras no borreis las cookies/sesiones del navegador, la página va a seguir manteniendo la cuenta generada (y por ende, los mensajes que tuvierais en la bandeja de entrada).

Siempre que empiezo con el tema de HTML, a mis alumnos les llama la atención el que ‘caracteres’ tan cotidianos para nosotros (la ñ, las vocales acentuadas, el espacion en blanco…) no sean entendibles para los navegadores.

Por mucho que intentemos ir colocando el código correcto conforme escribimos, o que usemos la opcion ‘buscar y reemplazar’ de nuestro editor favorito,  si no estamos acostumbrados,  es normal que se nos escape algún carácter y tengamos que hacer correcciones una vez que tenemos la web subida al servidor. Un coñazo, todo sea dicho.

Para intentar evitar este tipo de cosas, hoy os muestro una sencilla y útil página web que se encarga de traducir lo que escribimos a texto entendible por los navegadores. Esto es, que hace toda la transformación de caracteres problemáticos de nuestro texto por nosotros. Como resultado nos devuelve un texto totalmente apto para colocar en nuestra web.

Pero no acaba ahí la cosa, esta web también hace el paso inverso. Es decir, podemos darle un texto con los caracteres pasados a codificación HTML y la página nos devolverá el texto con acentos, espacios, arrobas…

Html-Ent.com

Para finalizar me gustaría indicar que es facil hacer una web con la funcionalidad que presenta esta que os enseño…¿verdad? Os animo a ver si sois capaces de “copiar” el funcionamiento de esta web (que seguro que lo sois).

Como pista os dire una palabra…htmlentities

Hola a tod@s:

Después de un largo periodo de ausente… he vuelto! He estado un poco mas ocupado de lo habitual y, como nadie se anima a escribir, el blog ha estado muy parado.

Voy a hacer varios cambios en el blog. Para empezar he actualizado a la ultima version de wordpress (que ya hacia mucha falta) y he cambiado el tema. No es el tema definitivo, tan solo hago pruebas . Aún tengo que trastear un poco con él (quitar/poner cosillas).

Lo siguiente será actualizar el servidor al que yo tengo de pago (la cosa es hacer sitio dentro de ese hosting). Migrando el server conseguiremos una velocidad DECENTE en clase, ya que, como todos sabemos, la conexión de internet de la ‘Junta’ es como es… mala.

Veamos como acaba todo esto …

Como en todos los cursos sois varios los que no os queda del todo clara la clase en la que explicamos el uso del cliente FTP Filezilla y como sois muy pocos los que me haceis caso y lo probais en casa para que se os queden bien los conceptos… he publicado un video-tutorial de uso del Filezilla con lo que vemos en clase.

Por supuesto, en el video-tutorial solo explico el uso básico del programa. Todo lo que comento en esa clase referente a teoria (qué es un servidor, qué es el FTP, el archivo Index …) no sale en el video-tutorial (obviamente).

Es mas, el video-tutorial parte de que ya os habeis dado de alta en un plan de hosting y que ya teneis los datos necesarios en vuestro poder (nada que no se haya visto en clase).

Video-tutorial Filezilla Parte 1
Video-tutorial Filezilla Parte 2

Vamos a continuar tocando opciones de configuración del editor que solemos usar en clase. Va a ser algo parecido a lo que hicimos en el articulo ‘Mejorando PSPAD‘. Sin embargo, vamos a corregir un fallo bastante importante que tiene el editor (y que deberian haber solucionado los autores hace tiempo). Por ello, me gustaria que todo aquel que use el PSPAD de manera habitual, preste especial atención a este articulo.

El fallo que comento esta relacionado con el “standar mode” y el “Quircks mode” que tienen los navegadores para visualizar las páginas.

Cuando creamos un nuevo documento usando el PSPAD, nosotros soliamos hacer: Archivo => Nuevo y en la pestaña que salia por defecto escogiamos XHTML ¿cierto?

PSPAD: Archivo Nuevo

Haciendo eso obteniamos el “esqueleto” de una pagina web para poder ir completandolo. Tal que asi:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
< head>
< meta name="generator" content="PSPad editor, www.pspad.com">
< title>
< /head>
< body>
< /body>
< /html>


Si os fijais en la etiqueta < !DOCTYPE> vereis que… está incompleta!!! Eso es un fallo bastante gordo ya que, haciendo esto, en los navegadores de Microsoft va a saltar el “Quircks mode” si o si.

Podeis ver mas información en el articulo correspondiente sobre DTD de la wikipedia.

Solucionando el problema

Como editor versátil que es, el PSPAD nos da la posibilidad de crear plantillas para usarlas cuando creemos archivos nuevos. Todas las plantillas que trae por defecto el editor se encuentran en la ruta pspad Editor/Templates (siendo pspad editor el directorio donde habeis instalado el PSPAD).

Pues bien, lo unico que tenemos que hacer es corregir la plantilla que usa el editor por defecto o, mejor aun, crearnos nuestra propia plantilla y colocarla en ese directorio.

Aqui os dejo la plantilla que uso yo en clase: Descargar Plantilla CursoWeb

Ahora, cuando vayamos a crear una pagina, hacemos lo de Archivo => Nuevo pero esta vez seleccionamos la pestaña PLANTILLAS. Una vez dentro de esta pestaña elegimos la que hemos creado.

PSPAD Plantilla Nueva

Como estar seguro de que todo va bien

Si os habeis leido los enlaces que he puesto a articulos de la Wikipedia vereis que es muy facil comprobar si el Internet Explorer esta dibujando la página en modo Standar o en modo Quirks. Nos basta con, una vez cargada la pagina que queremos comprobar, poner en la URL del navegador la sentencia: javascript:alert(document.compatMode)
Para en modo estándar, nos devolverá el valor ‘CSS1Compat‘, mientras que en modo quirks obtendremos el valor ‘BackCompat‘.

Para ver esto mismo en Firefox es mas sencillo aún… es algo que explico siempre en clase ¿Os acordais? Si no es asi, repasad un poco (o preguntadle a San Google)