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.

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

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

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)

Como ya sabéis, a lo largo del curso suelo ser muy pesado con lo de probar las páginas en Internet Explorer y en Firefox. No me canso de repetir que hay que tener ambos navegadores abiertos a mismo tiempo que vamos creando la página, con objeto de comprobar como se ve en uno y como se ven en otro. Y no, no me fio un pelo de los “previsualizadores” propios que traen algunos editores como Pspad, las versiones antiguas de Dreamweaver…

Entiendo que a alguien le puede resultar “lioso” el moverse por tres aplicaciones abiertas a la vez: Explorer, Firefox y el editor que usemos para crear la pagina. También entiendo que haya gente que prefiera uno u otro navegador y “le cueste” abrir ambos.
Pero el tema del diseño web es asi. Hasta que todos los navegadores sean capaces de cumplir con los estandares establecidos (vease como ejemplo el modelo de cajas CSS en IE y en el resto de navegadores), nos tenemos que aguantar.

Para ayudar a esa gente que se “lia” con dos navegadores abiertos a la vez, os voy a mostrar un fantástico plugin de Firefox: IE TAB

Su descripción es bien clara: IE Tab, una extensión de Taiwán que permite: Integrar Internet Explorer en pestañas de Mozilla/Firefox. Es decir, podemos abrir el IE desde una pestaña de Firefox. Fijaros en el ahorro de medios que eso supone.

Ahora es suficiente con tener abierto un solo navegador, Firefox, y tener dos pestañas abiertas: una pestaña normal y corriente (para ver nuestra pagina en Firefox) y otra pestaña usando el IE Tab (para ver nuestra pagina en IExplorer).

Es mas, si tenemos una pagina abierta con FireFox, en cualquier momento podemos comprobar como se ejecutaría esa pagina en Internet Explorer. Tan solo hay que pulsar el icono que activa el plugin y listo!!!.

Para facilitaros el uso del plugin y evitaros el tener que trastear por los menús, os recomiendo que, una vez instalado el IE Tab, pulséis con el botón derecho en la barras de iconos del navegador (pej, al lado del icono de la casita), seleccionéis “personalizar” en el menú que se despliega y os aparecerá un montón de iconos. Buscad el del plugin (ver imagen) y arrastrarlo con el ratón al lado de la casita.

De esta manera cada vez que queráis cambiar entre FireFox y Explorer, bastara con pulsar ese botón. Si lo que quereis es abrir una pestaña nueva en Firefox con vista de Explorer, pulsad sobre ese mismo icono pero con el botón central del ratón (la rueda del ratón, vamos).

Normalmente en clase nosotros solemos comprobar las paginas para los dos navegadores más usados: Internet Explorer y Firefox. Sin embargo, existen muchos mas navegadores minoritarios. ¿Necesito instalarmelos todos para comprobar que mi pagina funciona bien en ellos? Esta claro que no.

Para comprobar como quedan nuestras paginas en varios navegadores podemos usar BroserShot

En ella nos encontraremos una tres listas extensas de casi todos los navegadores que existen asi como de sus  sus diferentes versiones. Ordenados todos por sistema operativo .

Marcamos los que deseamos que compruebe (cuantos mas marquemos, mas tarda en dar el resultado), colocamos la direccion de nuestra pagina web (que debe estar subida a internet) donde pone enter URL Here y, si queremos, tocamos las listas desplegables de abajo que hacen referencia a la resolucion de pantalla, Javascript, Flash… Si no nos preocupa ese tipo de cosas, dejamos el valor que traen por defecto: No interesa

En el momento que le damos al boton Submit, nos aparecera un tiempo estimado. El primer tiempo que nos da es el tiempo de espera EN COLA, es decir, lo que tenemos que esperar hasta que nuestra petición empiece a procesarse (os aviso que la pagina tiene mucho uso siempre). Una vez acabado ese tiempo, nos dará el tiempo que va a tardar en sacarnos los resultados. Cuantos mas navegadores hayamos marcado, mas tardará.

Conforme vaya obteniendo resultados, ira poniendo pequeñas fotos para que vayamos viendolas. Al final, podremos descargarnos un archivo .zip con fotos de nuestra pagina tomadas en los distintos navegadores elegidos.

Llevo tiempo pensando en cambiar de editor para las clases. Habéis leído bien. Quiero jubilar a nuestro queridisimo PSPAD. No es que quiera dar Dreamweaver/Kompozer desde el principio, es tan solo que veo al PSPAD corto de funcionalidad comparado con otros editores que suelo usar yo para programar.

Vale que el objetivo de PSPAD es ser un editor liviano, claro, versátil y sencillo de manejar. Sin embargo, creo que le falta algo para ser perfecto: El auto-completado y auto-cierre de las etiquetas.

Los que hayan tocado las opciones del PSPAD, sabrán que si empezamos a escribir y pulsamos CTRL+J, aparece una lista de sugerencias para completar. Un auto-completado a su manera.

Pero yo busco algo mas. Busco un auto-completado como el del NetBeans o el del Komodo edit. Algo que, conforme vayas escribiendo, vaya afinando en la sugerencia de la etiqueta que quieres poner, sin necesidad de elegir forzosamente la etiqueta de una lista (como sucede si pulsamos CTRL+J)

Después de buscar un poco, me he dado cuenta de que ningun editor satisface mis condiciones. NetBeans es muy pesado ya que esta basado en Java, Komodo edit, aunque mas liviano que el anterior, esta aun enteramente en ingles y Notepad++ no aporta nada que no tenga ya el PSPAD y mantiene el auto-completado por lista

Visto lo visto, me puse a probar las extensiones y plugins que se le puede añadir al PSPAD para ver si habia alguna interesante. Al final me quede con las siguientes:

• Any Tag Close: usando Ctrl+ . (punto) cierra la etiqueta abierta que se acaba de escribir. Es una forma de hacer el auto-cierre que yo buscaba, aunque sigue sin convencerme del todo (pero menos da una piedra…)
• Insert Comments: Transforma un bloque seleccionado en un comentario. Podemos elegir el tipo de comentario en un menu desplegable (HTML, JavaScript, CSS…)
• Text to Table: transforma el texto seleccionado en una tabla con tantas filas como líneas tiene el texto.
• Text to URL: igual que el anterior, pero esta vez lo encuadra todo entre etiquetas <a> (enlace).
• Text to List: creo que sobra explicaciones…no?? Igual que los dos ultimos pero esta vez transforma en lista el texto.

Si visitáis la pagina de extensiones veréis que hay tres paginas llenas. Yo he probado solo estos cuatro, pero hay alguno mas interesante (sobre todo para PHP), por lo que no tardaré en volver a dedicarle tiempo a esto.

Para instalar estas extensiones tan solo tenéis que bajaros el fichero en cuestión y meter cada fichero en su carpeta correspondiente: Los .vbs van en ScriptVBScript y los .js en ScriptJScript (La carpeta Script esta dentro del directorio de  instalación del PSPAD).

Para usarlos, elegimos Guiones en el menú del PSPAD y ahí nos saldrá todas las extensiones instaladas. Algunas tienen atajo de teclado y no hace falta usar ese menú para utilizarlas.

Aun con todo lo visto, sigo sin encontrar un auto-completado y un auto-cierre de etiquetas que me guste. A ver si algun@ puede ayudarme …