links for 2006-11-22
-
800×600? 1024×768? The oldest question in website design – ‘What’s the best monitor screen resolution to use when building your site?
Kuler: un esquema diario de colores por Adobe
Si ya hace tiempo hacÃamos referencia a Daily Color Scheme, un lugar donde nos daban esquemas de colores para poder usar en nuestros diseños (que por cierto, no se actualiza demasiado), ahora nos toca hablar de Kuler una aplicación similar creada por Adobe, la cual nos permite ver esquemas de colores, crearlos, bajárnoslos y modificarlos.
Me ha gustado mucho la forma en que mediante una rueda de colores podemos crear nuestro propio esquema, permitiéndonos elegir si queremos colores análogos, monocromáticos…
Kuler
VÃa / Criterion
VideoRonk: buscador de vídeos
La gente de VideoRonk nos pasa información sobre su buscador de vÃdeos, que la verdad tiene muy buena pinta:
Videoronk.com es un buscador de vÃdeos, en estado beta, donde nos permite introducir el término a buscar y elegir el motor de búsqueda, pudiendo elegir Google VÃdeos, Youtube, Metacafe, Myspace,
Dailymotion, Vimeo o todos a la vez.
Dentro de los resultados, con seleccionar uno se nos abre una ventana
donde podemos ver el vÃdeo en cuestión pero que además añade un botón
que nos permitirá bajarnos el vÃdeo directamente a nuestro ordenador
en formato .flv, .mp4 y .avi.
También dentro de los resultados, nos permite añadir los vÃdeos como
favoritos, aunque esa lista se guarda en una cookie, lo que significa
que si borras las cookies de tu ordenador o navega desde otro, no
verás tu lista de favoritos.
Otra opción que se ha incluido es la búsqueda inteligente, en función
del texto que introduzcas en la propia búsqueda te da otras opciones
a buscar.
También tenemos la opción para que pueda meter cualquier video en su blog.
Reciéntemente hemos incluido dos opciones que creemos dan un valor
añadido a la página. Un buscador de música, donde puedes buscar un
artista y te muestra los vÃdeos musicales de dicho artista. Y también
incluimos las palabras más buscadas en un pequeño gráfico con formas
circulares que le dan un toque creativo y dinámico a la página.
links for 2006-11-21
-
Uno de los métodos que más hecho de menos en Javascript para tratar cadenas es trim(). Un método que se encarga de eliminar espacios en blanco del principio y fin de la cadena, de modo que si nos dejamos un espacio de más este método nos lo elimina y
-
en Mac OS X, es posible también disponer de Apache, MySQL y PHP, de una forma rápida y sencilla, con MAMP
-
Ten is the optimal number of slides in a PowerPoint presentation because a normal human being cannot comprehend more than ten concepts in a meeting—and venture capitalists are very normal
Desarrollo web | MYSQL | PHP
Escritura el campos blob en MySQL y PHP
Muy buen artÃculo que explica cómo almacenar imágenes en campos blob usando MySQL y PHP, el post explica realmente cómo crear galerÃas de imágenes almacenándolas en campos blob. Yo personalmente no soy muy partidario de esta opción, cuando realmente se deberÃa guardar la ruta de la imagen en el servidor y que el servidor web se encargue de enviar la imágen, ya que si no, lo que hacemos es hacer trabajar bastante a la BD.
De todas formas, el artÃculo puede sernos útil para saber como almacenar en este tipo de campos, porque aunque el ejemplo no sea del todo correcto, en alguna ocasión si que vamos a necesitar guardar datos en campos blob.
Muy bien explicado, añade conceptos básicos de protección por contraseña, actualización y borrado de imágenes, a parte de un par de consejos sobre los problemas que nos podemos encontrar con la capacidad máxima que se permite subir al servidor usando PHP.
PHP MySQL example: image gallery (blob-storage)
VÃa / Good PHP Tutorials
Addons para desarrolladores e IE
Si ya hace tiempo hablábamos de la posibilidad de bajarse Addons para IE7, ahora vamos a mencionar unos pocos que ayudarán a los desarrolladores web que usen IE.
- Internet Explorer Developer Toolbar: desarrollado por Microsoft, nos permite navegar por el DOM, desactivar opciones de IE como el javascript o los pop-ups, remarcar tablas, capas y otros elementos para localizarlos de forma sencilla en la página, validación de CSS y XHTML, redimensionar el navegador y limpiar la caché.
- Fiddler: permite capturar las peticiones HTTP de entrada y salida y depurarlas antes de que se reciban o envÃen.
- HttpWatch: igual que el anterior, pero con una interfaz más amigable e integrado directamente con IE.
- IE Powertoys for WebDevs: desarrollado por Microsoft, válido para IE6 e IE7 aunque diga que lo es para IE5, permite ver el código fuente parcialmente mediante el menú contextual.
- Inline Search: imita la fucnionalidad de búsqueda de Firefox en el IE.
VÃa / dzone
Opciones de una SELECT agrupadas
Algo que no mucha gente suele conocer es que en una select de un HTML se pueden agrupar opciones. Algunos pensarán que esto es una tonterÃa y que es imposible no saberlo, pero conozco bastantes casos de gente que usa selects y que no se fija en toda su especificación, lo cual no me extraña, porque yo jamás he tenido que crear una select agrupada, y supongo que es porque la “opción” que agrupa no es seleccionable.
Para agrupar opciones se necesita la etiqueta optgroup, la cual encerrará las opciones que pertenecen al mismo grupo, y dispondrá de un atributo label que será el texto que aparecerá agrupando las opciones.
<select name="prueba">
<option value="1">Opción 1</option>
<optgroup label="Opción 2">
<option value="2.1">Opción 2.1</option>
<option value="2.2">Opción 2.2</option>
<option value="2.3">Opción 2.3</option>
</optgroup>
<option value="3">Opción 3</option>
<optgroup label="Opción 4">
<option value="4.1">Opción 2.1</option>
<option value="4.2">Opción 4.2</option>
</optgroup>
</select>A la hora de modificar los estilos de optgroup, hay que tener cuidado que algunos los heredarán las opciones que contenga, por ejemplo el color de la letra.
links for 2006-11-18
-
Un estudio basado en una muestra aleatoria de miles de páginas indica que las búsquedas relacionadas con esta temática apenas alcanzan el 6% del total
-
En el transcurso de la reunión de Sevilla habrá un hueco también para que se den a conocer algunas iniciativas de emprendedores y empresas que basen sus proyectos o actividades, de forma más o menos directa, en el uso de los blogs.
Lógica de aplicación y plantillas mediante PHP
Cuando desarrollamos una aplicación web, algo muy importante es separar la lógica de la aplicación de la presentación. En el siguiente artÃculo, nos comentan como hacerlo mediante PHP y el sistema de plantillas Smarty.
Primero nos explica la direfencia entre la lógica de aplicación, la cual se encarga de las operaciones como acceso a base de datos, validación de formularios, de la lógica de plantillas, que es la que se preocupa únicamente de mostrar la información.
Dentro de la lógica de aplicación nos tenemos que ocupar de la inicialización y configuración de la lógica de plantillas:
<?php
$smarty = new Smarty();
$smarty->display('index.tpl');
?>Y en la plantilla mostraremos la información:
<p>
Title: {$title|strtoupper}
Summary: {$summary|truncate}
</p>Hay que tener cuidado de no cometer el error de en la plantilla modificar el formato del texto, por ejemplo quitarle espacios u otras cosas que corresponden a la lógica de aplicación.
Os recomiendo el artÃculo, porque viene muy claramente explicado, con ejemplos y nos puede ser de mucha ayuda.
Firebug 1.0, lo que nos va a ofrecer
Ya en otras ocasiones hemos hablado de Firebug, y esta vez no puede ser menos debido a todo lo que nos va a ofrecer la versión 1.0, lo cual es mucho:
- Usabilidad: posibilidad de abrirlo en una ventana nueva, pudiendo situarla en un segundo monitor. Listas de páginas en las que queremos que esté activo o no Firebug. Tecla de acceso directo para abrir Firebug de forma normal o en una ventana nueva. Facilidad de lectura ya que se puede aumentar o disminuir el tamaño de la letra.
- Código HTML: visor de código fuente de forma estructurada, con posibilidad de desplegar etiquetas. Ver qué es lo que se está modificando en la página web. Editar el código HTML en el momento. Encontrar elementos HTML en el código posicionándonos en ellos con el ratón. Busquedas. Si se modifica la página y se recarga, Firebug seguirá apuntando al elemento que tenÃamos antes de la recarga. Copiar el código HTML al portapapeles.
- CSS: Inspección en cascada. Previsualización de colores e imágenes. Facilidad para ajustar los estilos mediante la edición de las propiedades. Autocompletado. Modificar los valores numéricos aumentando y disminuyendo los valores usando las flechas de cursor. Selección de valores posibles de los estilos. Posibilidad de desactivar propiedades en los estilos para ver las diferencias. Inspeccionar cualquier hoja de estilos. Copiar al portapapeles colores y rutas de imágenes.
- Visualización de CSS: Se puede ver el modelo de caja de los elementos HTML. De igual manera, se puede visualizar las medidas de la caja del elemento. Uso de reglas y guÃas como si se tratara de un programa de diseño gráfico. Modificación de las medidas de las cajas en el acto.
- Monitor de red: Toma los tiempos de carga de del fichero y de los ficheros adjuntos. Separar los tiempos por tipo de fichero. Distinción entre ficheros de la caché y los que se han descargado de la red. Visualizador de la cabecera HTTP. Monito de las peticiones XMLHTTPRequest.
- Debug: Permite encontrar ficheros js de forma sencilla. Poner puntos de interrupción en nuestro código. Incluir condiciones en los puntos de interrupción. Ejecución paso a paso. Parar automaticamente la ejecución si encuentra un error. Cuando se produce un error existe la posibilidad de ver la pila de llamdas a funciones que esperan respuesta. Visor de los valores de los objetos y de las propiedades. Uso de tooltips cuando está parada la ejecución del script para ver el valor de las variables. Medición de tiempos de ejecución. Logs de las llamadas a funciones. Acceso rápido a números de lÃnea.
- Búsqueda de errores: Los errores se muestran en la barra de estado del navegador. Visualización de los errores javascript solo de la página a la que se accede. Información descriptiva de los errores. Acceso fácil al debugger. Búsquedas rápidas. Filtro por tipo de errores.
- Inspector DOM: Diferenciación entre código estándar y el creado mediante Javascript. Resumen informativo de los objetos inspeccionados. Edición de los objetos con posibilidad de autocompletado. Al recargar la página accede al mismo objeto que estaba seleccionado anteriormente. Navegación por el código Javascript.
- Ejecución de código Javascript: consola para ejecución de código javascript. Autocompletado. El texto de la consola no es tratado como texto plano sino como hipertexto.
- Trazas: posibilidad de mostrar trazas en la consola desde Javascript. Las trazas pueden ser de texto, objetos y texto formateado usando variables. Distintos colores para distintos tipos de logs (error, warm, debug e info). Marcas de tiempo. Stack traces. Agrupación de trazas. Inspección de objetos.
Estoy deseando que salga la beta para poder probarla.
VÃa / Ajaxian