Aptana Studio, una revisión general.

Aptana Studio Community Edition
Un IDE gratuito para desarrolladores Web

De manera muy general, la escogencia de un entorno de desarrollo llega a tener matices muy personales, ya que esta es la herramienta que un desarrollador web utilizará la mayor parte del tiempo.

Aptana Studio es un IDE gratuito para el desarrollo de aplicaciones web que está basado en la plataforma Eclipse y soporta diferentes formatos de archivos, entre los que podemos mencionar: Javascript, HTML, CSS, ScriptDoc, XML, entre otros. Además, este IDE provee coloreo de código, chequeo de sintaxis, organización estructural del código fuente, depuración, autocompletitud integrada con el DOM (Document Object Model) y diferentes marcos de trabajo (Extjs, jQuery, Scriptaculous, Dojo etc.) entre una lista bastante grande de opciones, herramientas y perspectivas.

Una característica muy útil es que brinda la posibilidad de asociar un proyecto con una conexión FTP para subir y descargar archivos directamente en un servidor de producción.

Adicionalmente se provee de un administrador de “Plugins” para el soporte de código PHP, Ruby on Rails, integración con Subversion, CVS y Git, soporte para librerías como Adobe Spry, Adobe AIR, Yahoo YUI, entre otras.

A pesar de ser un entorno de desarrollo muy completo, al estar basado en Eclipse, esto lo convierte en un IDE bastante pesado y aplicable sólo para computadoras con ciertas características en su hardware.

Conozca más de Aptana Studio

El atributo z-index.

El z-index es un atributo css que permite editar a un elemento hace referencia al orden en que los elementos se superponen unos con respecto a otros. Permite crear "capas" dentro de la web.

A continuación un link de referencia que presenta ejemplos:

• Formulario interactivo que muestra resultados de la manipulación de z-index.
• Tutorial del z-index.

Editores de código fuente

Smashing Magazine analiza un conjunto de editores de código del mercado para el desarrollo. Un En Intergraphic Designs la experiencia indica que no existe un editor que lo haga todo bien, por ejemplo, dreamweaver puede ser uno de los mejores editores para trasladar del diseño al html, pero se queda corto con respecto a la programacion, en comparacion contra un phpDesigner o un NuSphere


Ver artículo aquí.

Funcionalidad target="_blank"

Ha sido muy útil colocar links páginas que se despliegue en otra ventana para colocar, por ejemplo, para los vínculos hacia patrocinadores o banners.

Sin embargo, esto no valida contra los estándares; sin embargo se propone una alternativa que sí lo hace en esta dirección.

http://www.sitepoint.com/article/standards-compliant-world

¿Cómo abreviar el código CSS?

Es muy frecuente encontrar código CSS en varias líneas que podrían ser simplificadas en una sola. Muchos diseñadores CSS prefieren la versión "contraída" del CSS para tener menos código, reducir el tamaño de sus archivos CSS, etc.

Acá presentamos algunos ejemplos conocidos sobre cómo se podrían simplificar algunas línea de código CSS:

Backgrounds:

CSS Expandido ( background ) - - - - - - - >
background-color: red;
background-position: top;
background-position: center;
background-image: url(../);
background-attachment: scroll;
background-repeat: repeat-x;

contracción - - - - - - - >
background: url(../) red top center scroll repeat-x;

Márgenes:

CSS Expandido ( margin / padding ) - - - - - - - >
margin-top: 10px;
margin-left: 5px;
margin-right: 5 px;
margin-bottom: 10px;

contracción 1 - - - - - - - >
margin: 10px 5px 10px 5px ;
contracción 2 - - - - - - - >
margin: 10px 5px;

Tipos de letra:

CSS Expandido ( font ) - - - - - - - >
font-family: Arial, Helvetica, "Trebuchet MS";
font-size: 12px;
font-style: italic;
font-weight: bold;
line-height: 15px;

contracción - - - - - - - >
font: bold italic 12px/15px Arial, Helvetica, "Trebuchet MS";

Bordes:

CSS Expandido ( border ) - - - - - - - >
border-top: 1px;
border-bottom: 1px;
border-left: 1px;
border-right: 1px;
border-color: red;
border-style: solid;

contracción - - - - - - - >
border: 1px solid red;

Colores:

CSS Expandido ( color ) - - - - - - - >
color:#0099FF;
color:#000000;
color:#660000;

contracción - - - - - - - >
color:#09F;
color:#000;
color:#600;

Listas:

CSS Expandido ( list-style ) - - - - - - - >
list-style-image: url(../);
list-style-position: inside;
list-style-type: circle;

contracción - - - - - - - >
list-style: url(../) inside circle;