últimoartículo

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? ;)

Por jgarcía | PHP, MySQL, Recursos, JavaScript, ASP, Microsoft, Linux, Internet, CSS, Diseño Web, HTML, General | Permalink | 2 comentarios » |

artículosanteriores

CSSPlay: Recursos CSS

12.12.2006

CSSPlayCSSPlay es una una estupenda web en la que su autor Stu Nicholls ofrece un amplio repertorio de recursos CSS.

Nicholls tiene 60 años y está casado con dos hijos y trabaja como proyectista electrónico. Sus pasiones: las computadoras y la fotografía.

Algunos de los recursos CSS que podemos encontrar en su fantástica web:

  • Foto Galerías
  • Menús
  • Layouts
  • Manipulación de Imágenes
  • Mapeado de Imágenes
  • Bordes Artísticos
  • Manipulación de Textos
  • Calendarios
  • Sombreados
  • Pop-ups

Muchas gracias por el enlace, Javier.

Por jgarcía | CSS, Internet | Permalink | Comentar » |

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.

Por jgarcía | HTML, Diseño Web, CSS | Permalink | 1 comentario » |

CSSYA: Tutorial CSS Online

05.09.2006

CSSDesde Argentina, Diego Moisset ofrece un estupendo tutorial online de CSS diseñado para que pueda ser seguido por una persona que conoce sólo HTML.

La meta de este sitio es poder aprender CSS de forma sencilla adquiriendo un concepto teórico, luego algunos ejercicios resueltos y por último y lo más importante efectuar una serie de ejercicios. Se pueden desarrollar los ejercicios en el mismo sitio, probarlos y visualizar los resultados.

Os recomiendo que primero veáis el detalle del tema, luego paséis por los problemas resueltos del tema tratado (podemos hacer modificaciones sobre dicho problema) y finalmente resolver los ejercicios propuestos.

¡Buen trabajo, Diego!

Por jgarcía | CSS, Internet | Permalink | 2 comentarios » |

EditCSS: Acceso Rápido a CSS desde Mozilla

09.02.2006

EditCSSUna extensión indispensable para los desarrolladores webs.

Una vez instalado EditCSS podremos acceder rápidamente al código CSS de cualquier página que visitemos con el Mozilla, con tan sólo hacer uso de la opción Edit CSS que aparecerá en el menú contextual al pulsar el botón secundario del ratón.

El código CSS se nos presentará en un panel del Mozilla y podremos revisar las declaraciones, editarlas, guardarlas…

Muy recomendable.

Por jgarcía | Navegadores, CSS | Permalink | 3 comentarios » |

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.

Por jgarcía | HTML, Diseño Web, CSS | Permalink | 6 comentarios » |

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.

Por jgarcía | Recursos, PHP, HTML, CSS | Permalink | 4 comentarios » |

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?

Por eMe | JavaScript, Recursos, PHP, HTML, CSS | Permalink | 6 comentarios » |

Organizando nuestros CSS

19.01.2006

Gracias (de nuevo) a Tacs he encontrado un artículo llamado 5 Tips for organizing your CSS, o 5 consejos para organizar tus CSS, que viene a ser, como su propio nombre indica, una pequeña guía con 5 útiles trucos para que tu código CSS esté más agrupado y ordenado.

Algunos son tan sencillos como el de colocar una cabecera antes de cada tipo de estilos: Globales, Cabeceras, Comentarios, etc. pero de siempre los consejos más simples fueron los más útiles. Seguro que encuentras algo que aún no se te había ocurrido.

Por eMe | CSS | Permalink | 1 comentario » |

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.

Por eMe | Recursos, HTML, Diseño Web, CSS | Permalink | 1 comentario » |

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.

Por eMe | JavaScript, Navegadores, Usabilidad, Recursos, HTML, Internet, CSS, Diseño Web, Buscadores | Permalink | 7 comentarios » |

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.

Por jgarcía | JavaScript, HTML, Diseño Web, CSS, General | Permalink | 6 comentarios » |

Layout 3 Columnas, Encabezado y Pie

12.11.2005

Fruto de un encargo, he diseñado con CSS este simple layout con tres columnas, encabezado y pie, con la columna central líquida.

El color y la anchura de las columnas derecha e izquierda lo he aplicado cambiando el color y anchura de los bordes del contenedor caja:

#caja {

border-left: 150px solid #B8C4CC ; /* ancho, estilo y color de la columna izquierda */
border-right: 150px solid #B8C4CC; /* ancho, estilo y color de la columna derecha */

}


Layout 3 Columnas, Encabezado y Pie

Espero que os pueda resultar útil.

Nota: ¿Quieres colaborar con BdW? Envíanos tu layout y lo publicaremos haciéndonos eco de su autoría.

Por jgarcía | Recursos, Diseño Web, CSS | Permalink | Comentar » |

Mapas de Imágenes con CSS

18.09.2005

Me gusta aprender nuevos usos de las herramientas que ya utilizo. Por ello llevaba tiempo queriendo probar algo que había leido en Criterion y había quedado almacenado en mis favoritos

Un mapa de imagen en HTML nos permite añadir a una imagen zonas interactivas desde las cuales podremos enlazar otras páginas. Es una de las funcionalidades básicas del lenguaje HTML que más juego nos dan cuando estamos aprendiendo. Bien, gracias a CSS podemos hacer mapas de imágenes aún más funcionales, similares a las que podemos crear en Flickr para nuestras fotografías, y añadirle una pequeña descripción que se muestra sobre la misma imagen.

Es bastante simple de realizar y seguro que se nos ocurren muchos usos para darle. Espero que lo disfrutéis.

Artículo original en Criterion

Por eMe | JavaScript, CSS, General | Permalink | 3 comentarios » |

10 Trucos CSS

10.06.2005

Muy interesanes éstos 10 trucos sobre CSS que comentan en IndieBlog. Son 10 sencillos trucos no muy conocidos que pueden cambiar nustra forma de maquetar con CSS, mejorando la eficacia con que lo hacemos.

Algo más para añadir a nuestra sección de CSS en BdW. Entre mis chuletas, los fantásticos artículos de Milton y éstos trucos, nos vamos a convertir en todo un manual de referencia!

Para los favoritos.

Por eMe | CSS, General | Permalink | 1 comentario » |

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.

Por | HTML, CSS | Permalink | 2 comentarios » |

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.

Por jgarcía | Recursos, PHP, MySQL, HTML, CSS | Permalink | 6 comentarios » |

PSPad: Editor código web

11.03.2005

PSPad es un estupendo editor de código gratuito en español que nos facilita la escritura de código en HTML, PHP, XHTML, JavaScript, ASP, Perl, C …
Algunas de sus ventajas son:

  • Trabaja con proyectos.
  • Trabaja con varios documentos simultaneamente (MDI)
  • Dispone de cliente de FTP, con lo que se puede editar los ficheros directamente desde la web.
  • Permite la creación de macros.
  • Busca y reemplaza textos en ficheros.
  • Resalta por medio de colores la sintaxis de cada lenguaje.
  • Contiene plantillas para HTML, PHP, Pascal, JScript, VBScript, MySQL, MS-Dos, Perl,…
  • Dispone de autocorrección.
  • Dispone de una vista previa con IE y Mozilla.
  • Completo editor HEX.
  • Integra el TopStyle Lite.

Sugerido por nuestro amigo DIROCO

Por jgarcía | PHP, Recursos, MySQL, HTML, Diseño Web, CSS | Permalink | 3 comentarios » |

Chuletas informáticas de todos los sabores

31.01.2005

Según parece me estoy volviendo el indiscutible rey del chuleteo, quizás es que la habilidad de búsqueda para éste tipo de documentos se afina en los que aún somos estudiantes, en cualquier caso, creo que con éste post cerraré mi particular sección de chuletas para unos cuantos meses.

Y ésto es así, simplemente porque navegando por Techfluff un blog perteneciente a los nuevos MSN Spaces que tan rápido se están expandiendo, he encontrado éstas Quick Reference Cards de Digilife.be, que no vienen a ser otra cosa más que unas fantásticas chuletas de todo tipo de lenguajes, aplicaciones, etc. en PDF, que pueden ser impresas para mayor comodidad de uso y que harán las delicias de todo aquel que necesite una rápida referencia a la materia de la cual trata la chuleta en cuestión.

Sin lugar a dudas, éste mes de exámenes es perfecto para ponerlas a prueba ;)

Por eMe | PHP, JavaScript, MySQL, Linux, CSS, HTML, General | Permalink | 3 comentarios » |

Creando nuestros Layouts

11.01.2005

Muchos desarrolladores web (tanto aficionados como algunos profesionales) aún piensan que la migración al diseño de páginas web usando hojas de estilos en cascada o CSS y siguiendo los estándares es muy díficil, la idea principal de este artículo es demostrar todo lo contrario, es decir, el desarrollo de layouts usando CSS es más simple de lo que pensamos, adicionalmente, no haremos uso de tablas para la maquetación, por lo cual, el código será más claro de interpretar y más "limpio".

Primero, propondré el ejemplo más "díficil" ha realizar, es decir, explicaré el modelo del layout de tres columnas y al final se propondrán otros dos ejemplos, el análisis para éstos últimos es análogo al explicado para el layout de tres columnas, aunque estos dos últimos ejemplos son más "fáciles" de generar.

Por | HTML, Diseño Web, CSS, General | Permalink | 10 comentarios » |

« Artículos anteriores