Avisar de contenido inadecuado

Html en Pixelovers

Expand

Codificando XHTML y CSS más rapido con Zen-Coding

Zen Coding es un plugin que está disponible para casi todos los editores del mercado y con el que podras codificar HTML/XML/CSS a gran velocidad.

Este plugin nos ofrece dos funcionalidades:

  • Expansión de abreviaciones: con unas abreviaciones determinadas (muy sencillas, ya que son muy parecidas a los selectores de CSS) podremos generar gran cantidad código HTML/XML/CSS con una simple combinación de teclas.
  • Selección de bloques (pares de tags): Pudiendo realizar una serie de acciones como seleccionar pares de tags, ir a zonas editables de los tags, envolver (wrap) un bloque con otras abreviaciones, comentar/borrar bloques y más cosas.

Para que veais lo que se puede hacer con este plugin os dejo aquí un video.

También hay disponible una demo online desde la que podeis probar su funcionamiento via web (CTRL+E para expandir, requiere Javascript)

Expand

Reset CSS para HTML5

Ya os hablamos en CSS: Consejos y buenas prácticas sobre la importancia de resetear las propiedades CSS para eliminar diferencias entre navegadores desde el principio. Pues ahora os traemos de la mano de html5doctor.com un nuevo reset CSS adaptado a HTML5. Incluye las nuevas etiquetas y elimina las que ya no están permitidas en este lenguaje de marcado.


/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

Puedes descargar el código del proyecto html5resetcss en google code.

Expand

Coda: editor de código todo-en-uno para Mac

10699-11708.jpg

Coda es un editor de texto orientado al desarrollo web que integra, además, un completo gestor de sites, funciones de un cliente FTP, un cliente SSH, un editor visual de hojas de estilo, opciones de previsualización incorporadas, funciones de autocompletado para HTML, CSS, PHP, SQL... Vamos, un todo-en-uno en toda regla, y con la solvencia de haber sido desarrollado por la gente de Panic.

10699-11707.jpg Lo conocí esta misma semana a través de una de estas webs que recopilan diseños interesantes: CSSRemix, CSSMania... no recuerdo cuál. Debo reconocer que en nuestra primera toma de contacto me quedé sólo con lo atractivo del diseño de su página y pensé que no sería si no "otro más" de esos programas que intentan sin mucho éxito combinar demasiadas cosas bajo un único interface. Sin embargo, el viernes Eric, uno de los compañeros de la oficina, me lo recomendó, así que hoy he decidido darle una oportunidad usándolo durante toda la tarde para llevar a cabo algunos cambios a OboLog.

La verdad es que supera con creces la prueba. Tanto, que me estoy planteando sustituir mi actual editor de texto, TextMate, por éste.

  • El interface es cómodo e intuitivo, consigue conjugar todas las 'caras' de la aplicación sin saturar al usuario con miles de opciones.
  • 10699-11709.jpgEl editor de texto, como comentaba más arriba, incorpora auto-completion para los lenguages más habituales, así como coloreado automático del código.
  • Organiza los archivos abiertos en pestañas, en vez de abrir nuevas ventanas para cada uno.
  • Trabaja de forma fluida aunque los archivos se encuentren en red ( uno de los temas que más problemas me daban con TextMate ).

En mi caso la verdad es que poco partido le saco al cliente FTP. Si tuviera integrado un cliente para Subversion o similar sería ya El Editor Definitivo, pero será una carencia que perdonaremos, ya que con el cliente SSH en la misma interfaz podemos, en un momento dado, lanzar los commits en local o los updates en el servidor cuando haga falta.

En definitiva, toda una opción a tener en cuenta. Posiblemente siga usando CSSEdit 2 para la creación y edición de hojas de estilo, puesto que en ese aspecto es mucho más completo que Coda, pero creo que ambos van a formar un buen equipo. El precio, por otra parte, no es desorbitado: $79.

Actualización 2 de Mayo: Panic ofrece una actualización desde su web a Coda 1.0.1, en la que han añadido soporte para JPS-HTML y ActionScript, la posibilidad de trabajar con plantillas Smarty, y la opción de definir una URL local para lanzar las previsualizaciones mientras estemos desarrollando (release notes de la nueva versión).