últimoartículo

Proteger Contenidos Web

28.09.2007

Aunque todo lo que publicamos en Internet puede ser copiado y pegado en otras webs, con gran facilidad, son muchos los que se apuntan a poner algunas dificultades…

Añadidendo el siguiente código en la etiqueta <body> los visitantes a nuestra página no podrán selecciónar el texto ni las imágenes publicadas.

oncontextmenu = “return false” onselectstart = “return false” ondragstart = “return false”

Una medida que no soluciona el problema de la copia indiscriminada de contenidos en la Red, pero que disuadirá a algunos amigos de publicar contenidos ajenos.

artículosanteriores


Chuletas, chuletas y más chuletas

19.12.2006

ChuletasEl Diccionario de la Real Academia de la Lengua Española define CHULETA (3ª acepción) como entre estudiantes, nota o papelito que se lleva oculto para consultarlo disimuladamente en los exámenes.

He visto muchos tipos de chuleta como estudiante y como docente… pero nunca olvidaré una en forma de bolígrafo.

Hace tiempo nuestro amigo eMe publicó varios artículos dedicado a este tema:

Ahora que no se encuentra entre nosotros este fantástico diseñador, tomo su testigo para continuar publicando una relación de chuletas que he descubierto en Smashing Magazine:

Actionscript

Ajax

Apache

ASCII Character Codes

ASP

C# and VB.NET

CSS

CVS

C++

Django

Firefox

Google

HTML/XHTML

Java

JavaScript

LaTeX

Microformats

Misc

MySQL

Oracle

Perl

Photoshop/Gimp

PHP

Python

Regular Expressions

Ruby

Unix/Linux

Weblog

Windows

XML

Pensé que sería buena idea bajarse todos los pdf’s y subirlos comprimidos para facilitar la descarga ¿No? ;)

Web de Cortesía

11.12.2006

Muchas veces nos vemos obligados a mostrar una página web temporal, que informe al visitante que estamos en plena fase de desarrollo o mantenimiento.

Una imagen corporativa, mostrando el logo, un mensaje y un email de contacto, suele bastar.

Esta imagen no debería sobrepasar los 800px de ancho para que pueda visualizarse correctamente en la mayoría de las resoluciones del monitor. Por otro lado sería ideal que quedara la imagen centrada horizontal y verticalmente. Para conseguir este centrado con CSS, os sugiero esta simple solución:

<html>
<head>
<title>ACME LT: Alta Tecnología para Todos</title>

<style type=”text/css”>
<!- -
body{
background-color: #000;
text-align: center;
}
#logo{

position: absolute;
margin-left: -400px;
margin-top: -300px;
top: 50%;
left: 50%;
width: 800px;
height: 600px;
vertical-align: middle;
}
- ->
</style>
</head>

<body>
<div id=”logo”>
<img src=”img/cortesia.jpg” alt=”Bienvenidos a ACME LT”>
</div>
</body>
</html>

Como habréis dado cuenta a los margin-left y margin-top le asignamos la mitad del width y height.

A la propiedad vertical-align le hemos asignado el valor middle por si en lugar de una imagen queremos mostrar texto.

Compatibilizar IE y MOZILLA

27.01.2006

Hace mucho tiempo que Mozilla Firefox es mi navegador habitual (mi amigo eMe es el responsable de este hecho). Tiene todas las características para ser el lider de los browsers. Una de las que más me convence es que cumple los estándares redactados por la W3C. Pero podéis descubrir muchas más ventajas en el artículo Ventajas de Firefox frente a Internet Explorer.

Por otro lado tenemos al MicroSoft Internet Explorer. Microsoft impuso sus estándares sobre los universalmente establecidos del W3C incumpliendo con las especificaciones de HTML a distintos niveles. Pero no debemos olvidar que todavía el browser de Bill Gates reina (68% de los visitantes a BdW lo usan).

El caso, es que esta falta de unificación de criterios hace muchas veces difícil la maquetación de nuestras webs. Lo que queda bien para Mozilla, queda descolocado en el IE… y viceversa. Es un problema. Sobre todo cuando proyectamos layouts con muchos bloques o capas.

Os propongo una solución:

  1. Creamos tres hojas de estilo:
    • estilo.css: Declaración de todos los estilos de la web.
    • layoutIE.css: Declaración del layout para una visualización óptima en el Internet Explorer.
    • layoutW3C.css: Declaración del layout para una visualización óptima en los browser que siguen los estándares definidos por World Wide Web Consortium.
  2. En la sección HEAD de la página web añadir el siguiente código:
  3. <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
    <link rel=”stylesheet” type=”text/css” href=”layoutW3C.css”>
    <!–[if IE]>
    <link rel=”stylesheet” type=”text/css” href=”layoutIE.css”>
    <![endif]–>

    Sólo se aplicará la hoja de estilos layoutIE.css si el visitante está usando el Microsoft Internet Explorer como navegador.

Mandar un Formulario con un Enlace

27.01.2006

No sé si el título de este artículo deja completamente claro su contenido. Deseo exponer una técnica con la que podemos enviar un formulario cumplimentado sin utilizar un botón Submit, sólo con hacer clic sobre un enlace.

Para ello debemos declarar el formulario:

<form name=”form1″ action=”enviar.php” method=”post”>

Hemos asociado el script enviar.php que se encargará de tratar los datos enviados.

En lugar de insertar un botón submit en el formulario añadimos el siguiente código:

<input type=”hidden” name=”form1″ />
<a href=”javascript:document.form1.submit()” alt=”Enviar Datos”>Enviar</a>

PHP Designer 2006 Beta

26.01.2006

Desde hace pocos días podemos descargarnos este magnífico editor de código gratuito, con el que podremos programar en PHP, HTML, CSS, XML, JavaScript, Java, Perl, JavaScript, VB, C#, Java & SQL.

De PHP Designer 2006 Beta me gustaría destacar su pequeño tamaño y su alta velocidad de ejecución, así como funcionalidades como ayuda de autocompletado de palabras reservadas, las sangrías automáticas, plantillas, FTP…

Recomendado.

Editores de código/texto en Mac

20.01.2006

Andaba con bastantes ganas de olvidarme de Dreamweaver desde hace un tiempo. No utilizo la vista de diseño nunca, puesto que rara vez lo que muestra Dreamweaver se corresponde con lo que se pueda luego ver en alguno de los distintos navegadores, y además el tiempo de carga de la aplicación es enorme, así que ayer estuve un buen rato mirando editores de código para OS X buscando mi futura nueva herramienta de trabajo. Descartando los WYSIWYG como Nvu mis experiencias fueron las siguientes.

SKEdit es un fantástico editor de código con muchas opciones algunas tan buenas como el autocompletado, o coloreado de sintaxis, éste último con soporte para bastantes lenguajes y bastante inteligente. Tiene muchas opciones de configuración, se integra fantásticamente bien en el entorno OS X y carga muy rápido. Llevaba tiempo oyendo hablar muy bien de él y la verdad es que me ha dejado muy buen sabor de boca, todas las alabanzas que he leido se confirman al probarlo, sin embargo, no usa pestañas para cuando estas editando varios documentos (corregidme si me equivoco), y ésto se me antoja imprescindible para cuando estas con un par de html’s y la hoja de estilos liado. Además es de pago, aunque muy barato, 20$ solamente. No obstante, bajad la versión de prueba porque puede que dejeis de buscar. Yo miré un poquito más.

TextWrangler es una versión reducida y gratuíta de su hermano mayor BBEdit cuyo precio, 199$ se me antojó una losa que no tenia ganas de levantar (ni de bordear buscando un crack). De su hermano mayor, TextWrangler conserva muchas propiedades que lo convierten en una muy buena opción: Cajón lateral para ordenar los documentos que tengas abiertos, coloreado de sintaxis, soporte para muchos lenguajes, numeración de líneas, etc. No tiene la opción de autocompletado, que a mi particularmente me viene muy bien, pero por lo demás es fantástico.

Smultron es otro editor que posee unas características similares a los anteriores: cajón para los documentos abiertos, coloreado de sintaxis (aunque el coloreado tuve que cambiarlo porque no me gustaba mucho, demasiado llamativo), numeración de línea, etc. y además se asocia a la perfección con CyberDuck mi cliente FTP favorito para Mac, funcionalidad esta última que me ha hecho decantarme temporalmente por éste editor.

En cualquier manera cualquiera de las tres opciones son magníficas, y aún hay varios más que seguramente tendrán un altísima calidad, es cuestión de comparar. Si alguien conoce alguno con opción de autocompletar que lo comente. Quizás entre todos podemos ir completando éste post.

Por cierto, Smultron lo encontré buceando entre los posts de un blogger malagueño llamado Yomizmo, cada vez somos más los que posteamos desde el sur, dentro de poco habrá que organizar un blogs and beers o un blogs and málaga virgen en el pimpi ¿no?

Plantillas CSS y XHTML

18.01.2006

Hay tareas en el proceso de diseño de una página web que se repiten con bastante asiduidad: Crear un documento nuevo para el código html, definir el tipo de codificación, enlazar la hoja de estilos, etc. Lo normal sería que uno, que ya se conoce de varios años, almacenase un documento con unas pocas líneas maestras que le permitiesen comenzar con mayor celeridad el trabajo, y le ahorrasen quizás, tener que recordar algunas de dichas líneas, selectores, etc.

Pero uno es una persona poco práctica, y hasta ahora no había conseguido guardar una plantilla que me facilitase las cosas, (o la guardé en un lugar dónde luego no recordaba…) por eso me han venido tan bien estas plantillas de CSS y XHTML para comenzar a diseñar rápidamente cuando lo necesito.

Vienen muy bien explicadas (en inglés) y a lo largo del tiempo parece que han sido perfeccionadas gracias a los comentarios de gente que ha querido colaborar. Muy útiles.

Todos estos enlaces, para no perderlos los voy añadiendo a Tacs, como ya comenté el otro dia.

Listas de recursos para el Webmaster

17.01.2006

Hoy escribo sobre dos páginas que no deberían faltar en los favoritos de alguien relacionado con el diseño y administración de sitios web: Web Developer’s Handbook y Resources For Web Design.

La primera puede que ya la conozcáis puesto que es una página desarrollada y mantenida por Vitali Friedman al que ya hicimos referencia hace unos dias por su recopilación de las mejores fuentes de licencia gratuíta de 2005. Además, el prolífico Skeku lo enlaza también esta semana, aunque él lo conocía desde hace tiempo y no nos lo quiso contar;).

La segunda la he descubierto hoy por casualidad, para mi gusto es más concisa, y quizás más útil que la del señor Friedman, aunque el hecho de que el diseño sea más básico da sensación de una mayor desorganización.

Entre ambas creo que no dejan fuera ninguno de los recursos que podamos necesitar a la hora de diseñar, programar, validar y mantener una página web: Información de los distintos buscadores y navegadores, tutoriales de CSS, HTML, JS, etc., validadores de código, artículos sobre autoría web, analizadores de tráfico… Todo!

Lo dicho, la referencia completa de un webmaster en dos páginas.

Actualización (19-1-06): En Criterión, Skeku nos muestra un nuevo enlace similar a los comentados anteriormente, (nos lo había prometido en los comentarios) se trata de CSS & XHTML Bookmarks. Echadle un ojo.

Enlace en el Encabezado

23.11.2005

Con frecuencia nos podemos encontrar con páginas web con un encabezado que muestra una imagen por medio de la propiedad background de CSS asociado a un elemento del layout.

Si deseamos que la imagen de fondo sea un enlace a la página inicio de la web debemos añadir el siguiente código en la etiqueta del encabezado de la plantilla inicio:

<div id=”header” onClick=’window.location.href=”http://www.dominio.com”‘>

y en la hoja de estilo debemos añadir la siguientes reglas en la declaración del estilo header:

cursor: pointer;
cursor: hand;

Otra propuesta más accesible de Leo:

<h1 id="encabezado"><a href="/">Nombre del sitio</a></h1>

Y en el CSS:

h1#encabezado {
background: url(’img/logo.jpg’) no-repeat;
text-indent: -9999px;
}

h1#encabezado a {
display: block;
width: 100px;
height: 100px;
}

Stan nos recomienda que leamos un artículo suyo titulado Personaliza el titulo de tu sitio con javascript en el que se recogieron muchas recomendaciones.

Mostrar capa teniendo en cuenta el scroll

20.06.2005

El otro día estaba tratando de mostrar una capa al pasar el puntero del ratón sobre una imagen, de manera que la capa apareciera justo debajo del puntero del ratón. Al principio sólo tuve que mostrarla cuando se lanzará el evento onmouseover, pero a medida que iba añadiendo controles a la página ésta se iba haciendo más grande hasta que apareció el maldito scroll. Lo que ocurrió entonces es que la capa no me salía justo debajo del puntero del ratón sino que se desplazaba arriba o abajo. Después de un rato mirando el código me di cuenta que el desplazamiento que se producía era equivalente al desplazamiento que tenía la barra de scroll, por lo tanto, para solucionarlo tuve que sumarle a la posición actual del ratón, el desplazamiento de la barra de scroll:

document.getElementById(”divObservaciones”).style.left=event.clientX + document.body.scrollLeft;
document.getElementById(”divObservaciones”).style.top=event.clientY + document.body.scrollTop;

Esto se debe a que event.clientX y su homólogo en el eje Y toman una posición relativa a la pantalla, mientras que las propiedades left y top toman medidas absolutas, por lo que se produce un desfase. Si a la posición del puntero del ratón le sumamos los desplazamientos, tanto horizontal como vertical del scroll, obtendremos las posiciones absolutas que demandan las propiedades left y top.

Con esto la capa siempre se muestra donde yo quiero, aunque haya un scroll de por medio.

S3rGy0.

Conversor de imágenes a html

14.06.2005

Navegando por la red descubrí hace un tiempo una interesante herramienta. Se trata de un conversor de imágenes a html (desarrollado en php). La aplicación mapea con absoluta fidelidad la imagen que le pasemos como parámetro a código html en el que recrea con texto los píxeles de la imagen.

La idea original del autor era la de generar pósters e imágenes grandes para su impresión en modo local o como mucho en red local, por lo que tras consultarle, ha modificado un poco la aplicación para limitar el tamaño inicial de las imágenes, para reducir el tiempo de carga. Desde aquí agradecerle el interés y la colaboración.

Un abrazo, Lucas! Me despido con una generación del logo de BdW.

Lista de Paises Hispanohablantes

05.06.2005

Para completar la Lista de Paises en Español , la Lista de Provincias de España y Lista de Capitales de Provincia de España, publicamos el código HTML necesario para mostrar un cuadro combinado que muestre la lista con todos los paises que hablan español.

El resultado:

Lista de Capitales de Provincia de España

23.05.2005

Para completar la Lista de Paises en Español y la Lista de Provincias de España, publicamos el código HTML necesario para mostrar un cuadro combinado que muestre la lista con todas las capitales de provincia de España.

El resultado:

Lista Provincias de España

23.05.2005

Para completar la Lista de Paises en Español publicamos el código necesario para mostrar un cuadro combinado con las provincias españolas:
El resultado:

Otros artículos relacionados:
Lista de Capitales de Provincia de España

Lista de Paises del mundo

22.05.2005

En ilovejackdaniels.com encontré el código HTML para mostrar un cuadro combinado con los nombres de los paises del mundo en inglés.

Pensé que sería interesante disponer de la misma lista en español.
El resultado:

Espero que os sea útil.

Otros artículos relacionados:
Lista Provincias de España
Lista de Capitales de Provincia de España

Configurar Seguridad en Hosting Linux (.htaccess)

26.04.2005

Este post va dirigido a todas aquellas personas que quieren aplicar seguridad a una carpeta de su alojamiento Web en Linux. Haciendo clic aquí, podréis descargaros un script en PHP que permite configurar el archivo .htaccess y .htpasswd de nuestro servidor. La forma de utilizarlo es fácil:

- Descargamos el fichero PHP
- Lo subimos a la carpeta de nuestro alojamiento que queremos proteger
- Podemos todos los archivos con permisos CHMOD 777
- Lo ejecutamos desde nuestro navegador (http://…./configuar_htaccess.php)
- Nos pedirá un Usuario y Contraseña
- Presionamos sobre el botón “Aceptar”
- Esta información será encriptada y almacenada dentro de los ficheros ocultos .htaccess y .htpasswd
- Borrar el fichero PHP de nuestro servidor

A partir de ese momento, cada vez que queramos entrar a un fichero que esté por debajo de la carpeta protegida, nos pedirá usuario y contraseña.

Este pequeño código me fue de gran utilidad para proteger el acceso a la zona de administración de una tienda virtual creada con Oscommerce, aplicación de la que ya hemos hablado en un par de ocasiones (1,2).

Imágenes accesibles

06.04.2005

He estado visitando unas cuantas bitácoras y me he dado cuenta de que muchas no hacen uso del atributo ALT cuando muestran imágenes.

La inclusión de ayudas contextuales con el argumento ALT es la más antigua y sencilla de las directrices para hacer los sitios accesibles a los usuarios con discapacidades.

Para ello, sólo debemos añadir el argumento ALT en la definición de la etiqueta IMG, como figura en el ejemplo:

<img src=”images/logo.jpg” alt=”Logotipo de la empresa ACME” />

Os recomiendo que hagáis uso del argumento ALT.

Rediseñando NNL Newsletter (I)

29.03.2005

Hace ya bastante tiempo que llevo siguiendo esta interesante lista de correo, orientada sobretodo al mundo IT, también se publican noticias relacionadas al mundo GNU/Linux, lo cual capto mi atención de inmediato. Pero este artículo no tratará sobre el excelente contenido que presenta regularmente Carlos Tori (el hombre detrás de NNL Newsletter), este artículo tratará más bien una propuesta de rediseño en los boletines que se presentan.

Comenzamos

Si observamos los boletines que presenta NNL Newsletter podemos darnos cuenta que aún mantienen el formato usual de mensajes de correo electrónico, todo esto a pesar del avance que ha presentado la lista, ahora se puede catalogar como un sitio web en donde se podrá leer noticias interesantes, dichas noticias aparecen cada cierto tiempo, agrupadas en un mismo documento, al final de cada documento se anexa el soporte que le ha brindado Carlos Tori a sus fervientes lectores.

Desde mi perspectiva debe darse un “lavado de cara” al Newsletter. Comencemos por la semántica de los documentos. Tomaré como muestra el NNL Newsletter » 1.

PHP Designer 2005

18.03.2005

Se trata de un fantástico editor de PHP freeware de agradable aspecto y gran número de funcionalidades.

PHP Designer
es un completo entorno de desarrollo y programación especialmente diseñado para los amantes de PHP, aunque también permite trabajar con comodidad en otros lenguajes de programación como HTML, XHTML, CSS y SQL.

Cuenta con un cómodo cliente FTP, utilidades de corrección y autocompletado, y muchas más funcionalidades.

Aunque está disponible sólo en el idioma de Shakespeare, os lo recomiendo.