Ayer, cuando os pedía consejo sobre editores de código para Gnome no me esperaba esa respuesta (gracias, de verdad). Ahora tengo un montón de ellos para escoger y creo que lo mejor es que los pongamos todos juntos en un artículo como referencia para futuros linuxeros desamparados. Cito por orden alfabético:
Proyecto oficial de Eclipse para el desarrollo con PHP
Algunos son completos IDEs, otros simples editores de código con resaltado de sintáxis y algunos son sólo para los más fuertes de ánimo.
Seguro que nos hemos dejado muchos en el tintero, una vez más quedan abiertos los comentarios, por si se os ocurre algún otro.
De la mano de Eric Meyer nos llega una solución que, por simple, es sin duda un gran hayazgo.
Haciendo un uso magistral de los selectores de CSS, va filtrando situaciones comunes en cualquier sitio (imagenes sin alt, enlaces que no van a ningún sitio…), haciéndolas mucho más fáciles de localizar.
La hoja de estilo queda algo así (por supuesto, adáptala a tus necesidades)
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}
Sin duda, la Web Developer Toolbar ya nos sirve para esto pero, de esta manera, recibimos referencias visuales más concretas (sabremos de un vistazo qué está mal y por qué).
Para profundizar en la lógica de esta hoja de estilo nada mejor que leer el artículo de Eric: Diagnostic Styling
Hoy, en el trabajo, surgió el ancestral debate “¿y por qué tanto lío para evitar maquetar con tablas?”. Por supuesto, un vistazo al código fuente de aplicaciones web como las de Google o el mismo Flickr, buque insignia de la web 2.0 no hizo más que sumar argumentos en mi contra ya que, como supondréis, me posiciono en favor de un marcado limpio. Como siempre, se sacó una conclusión errónea: “Eso de los estándares al final es para 4 frikis”.
No obstante, toda esta lata que damos los “estandaristas” tiene razón de ser y, en el caso de proyectos modestos o de empresas con recursos limitados (o sea, todas salvo las mega corporaciones), los estándares pueden suponer ventajas insospechadas para muchos:
A todo esto, además, podemos sumarle el gusto de hacer bien las cosas ¿Acaso eso no es suficiente?
A través del blog de Leandro D’Onofrio conozco Libros Web, un sitio en castellano donde nos ofrecen algunos libros traducidos a nuestra lengua para leer online o imprimir.
Por el momento tienen sólo tres libros: una guia de Symphony, Introducción a CSS e Introducción a XHTML pero, por lo que veo en su sitio, parece que pretenden ampliar esta colección con más libros traducidos para desarrolladores web.
LibrosWeb.es pretende publicar varios libros gratuitos sobre diseño web y aplicaciones relacionadas
Esperemos que se mantengan gratuitos o a bajo precio en un futuro (Yo pagaría algo por poder descargar los libros en PDF, ahí va una idea…)
LibrosWeb: http://www.librosweb.es/
Seguro que alguna vez has escuchado ese argumento, que no por mucho que se repita es cierto, de que los estándares web no tienen cabida en el ámbito de los negocios. Se puede tratar de rebatir con argumentos pero, sin duda, lo que mejor convence a alguien son los ejemplos de uso.
The Business Case for Web Standards es un wiki en el que, a pesar de los spammers que ya han tomado la página principal, pretenden recopilar ejemplos reales de uso (o no uso) de estándares web en aplicaciones y sitios con caracter comercial. Sin duda, la lista de factores a favor es más que interesante, de entre todos destaco:
Por el momento faltan argumentos en contra que tengan algo de fundamento.
Existen múltiples test y validadores para tu código que puedes emplear online, no obstante, si necesitas ir validando múltiples sitios puede ser laborioso ir acudiendo al sitio de cada herramienta.
Si hay una ventaja que hace destacar a Firefox sobre los demás navegadores (sin ánimo de polemizar, otros navegadores también tienen sus herramientas pero se salen de la perspectiva de este blog al no ser software libre) son sus extensiones.
Para todos los desarrolladores web, existen numerosas extensiones que nos ayudarán a validar y verificar nuestro código:
Con Offline Page Validation podrás enviar cualquier página que estés visitando al servicio de validación del W3C incluso si son páginas locales, que requieran registro, etc.
Valida tus hojas de estilo mediante el servicio del W3C
La “HERA-Extension” es una extensión para los navegadores de la familia Mozilla (Netscape, Firefox, Flock, Safari, etc.), que permite revisar online, en un solo clic, la página web que estemos visitando e incluso un marco de esa página (si los tiene), facilitando el uso y acceso a HERA.
TAW3 en un click te permite comprobar la accesibilidad de las páginas que visites, utilizando el servicio TAW3 Online y las reglas WCAG 1.0
Con ella podrás comprobar que el contraste de los colores que has escogido para tu sitio web es adecuado para todos tus posibles visitantes
Te mostrará tus páginas de forma similar a como las interpreta un lector de pantalla
Esta extensión está pensada para ser una ayuda en la navegación de personas discapacitadas pero los desarrolladors podemos utilizarla para comprobar si su desempeño es correcto
Entre sus múltiples posibilidades (de las que hablaremos en unos días en profundidad) está la de validar tus sitios locales y los sitios que visites, tanto su html y css, como su accesibilidad…
La extensión Total Validator, de la que ya hablamos por aquí, te permite realizar múltiples validaciones en un solo click
Valida HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hypervínculos, Metadata y más
Seguro que alguna vez te has visto en problemas para mantener el pie de tus páginas en su sitio, abajo del todo. Ya vimos, en este mismo blog, una aproximación que nos permitía conseguir que los pies de página se mantuviesen en su sitio. No obstante, aquella solución nos obligaba a emplear atributos de estilo propietarios y no válidos.
Ryan Fait llega a otra solución que, en lugar de requerir etiquetas no válidas, requiere un div extra y poco más.
El CSS es algo tan simple como:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /* el margen inferior es el valor del pie en negativo */
}
.footer, .push {
height: 4em; /* .push y .footer deben tener la misma altura*/
}
Pero lo mejor es que veáis el ejemplo y echéis un vistazo al código.
A través de 456 Berea St encuentro un interesantisimo artículo de Andy Rutledge que trata de explicar, de una vez por todas, a los diseñadores gráficos por qué los estándares no son el enemigo de su creatividad: Web Misunderstandars.
Sin duda, algo que hay que repetir más: Los estándares no tienen nada que ver con el diseño. Cualquier cosa que pueda ser representada gráficamente puede representarse en internet sin tener que incumplir ningún estándar.
…if there is something you cannot do with design online it’s because of your ignorance or lack of skill, not because of Web standards.
…si hay algo que no puedas hacer con un diseño online es por culpa de tu ignorancia o falta de habilidad, no por culpa de los estándares web
Como ya sabréis, Internet Explorer no se lleva demasiado bien con la etiqueta <q> La ignora completamente y, por tanto, perdemos las comillas de las citas. Siempre podemos incluir las comillas manualmente ¿no?
Pero, claro, las etiquetas aportan significado semántico, no deberíamos tener que prescindir de ninguna por caprichos de un navegador.
Como ya vimos con el caso de los png, existen unos archivos llamados behaviors (comportamientos) que nos permiten proveer de estas funcionalidades a Internet Explorer.
Para utilizarla, la descargamos de Will code 4 beer: fixQuotes_en.htc y lo llamamos con un poco de CSS que dará a Internet Explorer las instrucciones pertinentes.
Atento porque utilizará las reglas de entrecomillado inglesas, para utilizar otras edita el archivo htc, para saber como visita el artículo original: Fixing the Quote Tag in Internet Explorer
Seguro que todos hemos tenido alguna vez la necesidad de facilitar, mediante una página web, direcciones y teléfonos de contacto. Lo ideal sería poder ofrecer toda esa información de la forma más cómoda posible para nuestros usuarios, en formato vcard, para que puedan importarlo de forma sencilla en sus gestores de contactos.
Lo que, en principio, puede parecer una tarea complicada se simplifica mucho gracias a los microformatos, en concreto hcard y a Brian Suda, que ha creado un comodísimo script con el que podemos convertir nuestras hcard en vcards.
Pero, vamos por partes. lo primero que debemos hacer es crear nuestra hcard. Como sabéis, los microformatos no son más que una forma de añadir mayor valor semántico al XHTML mediante el uso de determinadas clases. Por tanto, podréis incorporarla a cualquier página sin problemas y darle estilo con toda la libertad del mundo. Para no alargarnos mucho, vamos a crear nuestra hcard con el hcard creator.
La mía queda más o menos así:
endlessgrief(en)gmail(punto)com
This hCard created with the hCard creator.
Y se ve así:
endlessgrief(en)gmail(punto)com
This hCard created with the hCard creator.
Bien, ahora que ya tenemos nuestra hcard sólo queda transformarla en una vcard y facilitarla a nuestros usuarios. Para ello sólo tendremos que incluir un enlace al script de Brian Suda con la url de la página en la que reside nuestra hcard.
Descarga mis datos de contacto como vCard
En Shape Shed, donde descubrí el script conversor, llevan más allá la parte estética de este método. Eso ya es cosa tuya, recuerda, no es más que XHTML así que tu imaginación es el límite.
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Ver más noticias de los usuarios