Mis pinitos en HTML. Etiquetas y editor de textos.
La herramienta básica del HTML son sus etiquetas. Conocerlas a la perfección es difícil, dado al gran número de éstas que hay, pero un buen conocimiento de las mismas puede ahorrarnos mucho tiempo a la hora de programar.
Pero, ¿cómo gestionamos estas etiquetas? Para Mac, tenemos diversas opciones:
Smultron, mi preferido, es un editor escrito en Cocoa que permite editar infinidad de lenguajes de programación (PHP, ASP, SQL, XML, CSS, Ruby, Javascript, etc.) para los que dispone de autocompletado, coloreado de sintaxis, gestión de proyectos, división de la pantalla, sincronización con tu cuenta .Mac, etc.
TextWrangler es un interesante editor de texto, comparable al BBedit Lite, que posee un cliente FTP/SFTP además de soporte para ANSI C, C++, HTML/XHTML, Fortran, Java, JavaScript, Object Pascal, Objective-C, Perl, PHP, Python, Rez, Tcl, TeX, Unix Shell Scripts, y XML.
Aptana es un editor basado en Eclipse y principalmente dirigido a desarrolladoresJavascript, pero también le acompaña soporte para (X)HTML, CSS y XML. Muy recomendado para el desarrollo de aplicaciones AJAX.
Zend Studio, el IDE para PHP por excelencia con soporte para PHP, (X)HTML, Javascript, CSS, XML y SQL, cliente CVS y SVN, SFTP/FTP, conexiones a servidores de bases de datos, seguimiento de trazas, debugging, entre una infinidad de características.
Dreamweaver que sigue al pie del cañón como uno de los editores más versátiles, tanto como editor de programación como para editor WYGWYS.
El completado de código que posee es realmente uno de los mejores que he visto, eso sí, únicamente destacable para CSS y XHTML.
Textmate, uno de los editores que más éxito ha tenido y con mejor diseño, nos aporta a diferencia del resto soporte para Ruby, RoR, Xcode, LaTeX, Markdown, Textile, entre otros.
El año pasado obtuvo el premio Apple Design Award for Best Mac OS X Developer Tool (o lo que es lo mimo, el premio de diseño de Apple a la mejor herramienta de desarrollo para Mac OS X).
BBedit dispone, además de lo comentado para TextWrangler, soporte para FTP/SFTP, Ruby, YAML, SQL, AppleScript y Mac OS X Unix Scripting, entre otros. Así mismo, permite control de versiones con Subversion y Perforce.
| Elemento | Descripción corta | |
|---|---|---|
| <!-- --> | Inserta comentarios ocultos | |
| <!DOCTYPE> | Establece el tipo de documento | |
| <a> | Inserta vínculos o marcadores | |
| <abbr> | Explica/expande abreviaciones | |
| <acronym> | Explica/expande acrónimos | |
| <address> | Muestra información de contacto del autor | |
| <applet> | Inserta un applet (script) | |
| <area> | Define sectores para un mapa de imagen | |
| <b> | Convierte texto en negrita | |
| <base> | Establece la URI base, usada para resolver URIs relativas | |
| <basefont> | Establece el tamaño de fuente por defecto para todo el documento | |
| <bdo> | Anula el algoritmo bidireccional para su contenido | |
| <big> | Muestra el texto en estilo de fuente "grande" | |
| <blockquote> | Inserta una cita en forma de párrafo | |
| <body> | Actúa como contenedor para toda la parte representable del documento (cuerpo) | |
| <br> | Forza un quiebre de línea | |
| <button> | Crea un botón que permite contenido HTML (elementos) | |
| <caption> | Establece un título para una tabla | |
| <center> | Muestra su contenido centrado | |
| <cite> | Inserta una cita o referencia | |
| <code> | Declara a su contenido como código de computadora | |
| <col> | Establece atributos generales para las columnas de una tabla | |
| <colgroup> | Agrupa un número de columnas en una tabla | |
| <dd> | Muestra una definición en una lista de términos y definiciones | |
| <del> | Incluye texto que debería ser borrado o reemplazado (ya no válido) | |
| <dfn> | Asigna una definición a un término | |
| <dir> | Inserta una lista de directorio (árbol) | |
| <div> | Define un bloque de contenido | |
| <dl> | Inserta una lista de términos y definiciones | |
| <dt> | Inserta un término en una lista de términos y definiciones | |
| <em> | Indica énfasis para su contenido | |
| <fieldset> | Agrupa controles en un formlario | |
| <font> | Establece el estilo de fuente para su contenido | |
| <form> | Inserta un formulario | |
| <frame> | Inserta un marco simple | |
| <frameset> | Inserta un conjunto de marcos | |
| <h1> | Define un encabezado de nivel 1 | |
| <h2> | Define un encabezado de nivel 2 | |
| <h3> | Define un encabezado de nivel 3 | |
| <h4> | Define un encabezado de nivel 4 | |
| <h5> | Define un encabezado de nivel 5 | |
| <h6> | Define un encabezado de nivel 6 | |
| <head> | Encierra el bloque de encabezado del documento (para las declaraciones globales) | |
| <hr> | Dibuja una línea horizontal | |
| <html> | Actúa como contenedor para el documento entero (encabezado y cuerpo) | |
| <i> | Muestra su contenido con estilo de fuente itálica | |
| <iframe> | Inserta un marco dentro del contenido del documento | |
| <img> | Inserta una imagen | |
| <input> | Muestra un control de entrada (texto, contraseña, casillas de verificación, etc.) | |
| <ins> | Indica que su contenido ha sido insertado a un texto anterior en una actualización | |
| <isindex> | Provee una entrada de una sola línea | |
| <kbd> | Representa texto que es ingresado por el usuario | |
| <label> | Establece una etiqueta para un control en un formulario | |
| <legend> | Asigna un título para un "fieldset" (grupo de controles en un formulario) | |
| <li> | Inserta un ítem en una lista (para listas ordenadas y desordenadas) | |
| <link> | Da infromación relacional acerca del documento al vincularlo con otros recursos | |
| <map> | Define un mapa de imagen del lado cliente | |
| <menu> | Inserta una lista menu | |
| <meta> | Provee información acerca del documento en la forma de variables (nombre y valor) | |
| <noframes> | Provee contenido alternativo para marcos, mostrado cuando los mismos no son soportados | |
| <noscript> | Provee texto alternativo para scripts, mostrado cuando los mismo no son soportados | |
| <object> | Inserta aplicaciones externas (por ejemplo, animaciones /prlículas Flash) | |
| <ol> | Inserta una lista ordenada | |
| <optgroup> | Agrupa las opciones en un contro "select" | |
| <option> | Define una opción en un control "select" | |
| <p> | Inserta un párrafo | |
| <param> | Establece un parámetro para un objeto insertado | |
| <pre> | Muestra texto preformateado, usualmente con fuente de ancho fijo y respetando espacios | |
| <q> | Inserta una cita a nivel de línea | |
| <s> | Muestra texto tachado | |
| <samp> | Representa la salida de un programa | |
| <script> | Actúa como contenedor para scripts del lado cliente | |
| <select> | Crea un control select (lista desplegable de opciones) | |
| <small> | Muestra trexto en duente "pequeña" | |
| <span> | Encierra un trozo de texto (en línea), útil para asignar atributos a su contenido | |
| <strike> | Muestra texto tachado | |
| <strong> | Indica énfasis fuerte para su contenido | |
| <style> | Contiene código de hojas de estilo que definen atributos visuales para el documento | |
| <sub> | Inserta texto como subíndice | |
| <sup> | Inserta texto como superíndice | |
| <table> | Actúa como contenedor para la información de una tabla | |
| <tbody> | Define un cuerpo en una tabla | |
| <td> | Inserta una celda regular en un tabla | |
| <textarea> | Crea una entrada de líneas múltiples | |
| <tfoot> | Define un pie para una tabla | |
| <th> | Inserta una celda de encabezado en una tabla | |
| <thead> | Define un encabezado en una tabla | |
| <title> | Define un título para el documento completo | |
| <tr> | Inserta una fola de celdas en una tabla | |
| <tt> | Muestra texto de máquina de escribir | |
| <u> | Muestra texto subrayado | |
| <ul> | Inserta una lista desordenada | |
| <var> | Indica una instancia de una vatiable |
Pero, ¿cómo gestionamos estas etiquetas? Para Mac, tenemos diversas opciones:
Sin embargo, Mac OS dispone de muy buenas opciones a la hora de desarrollar (ya sea diseño o programación) sitios web, servicios web o gestores de contenidos. Resumiendo las mejores posibilidades gratuitas y/o libres:
Smultron, mi preferido, es un editor escrito en Cocoa que permite editar infinidad de lenguajes de programación (PHP, ASP, SQL, XML, CSS, Ruby, Javascript, etc.) para los que dispone de autocompletado, coloreado de sintaxis, gestión de proyectos, división de la pantalla, sincronización con tu cuenta .Mac, etc.TextWrangler es un interesante editor de texto, comparable al BBedit Lite, que posee un cliente FTP/SFTP además de soporte para ANSI C, C++, HTML/XHTML, Fortran, Java, JavaScript, Object Pascal, Objective-C, Perl, PHP, Python, Rez, Tcl, TeX, Unix Shell Scripts, y XML.Aptana es un editor basado en Eclipse y principalmente dirigido a desarrolladoresJavascript, pero también le acompaña soporte para (X)HTML, CSS y XML. Muy recomendado para el desarrollo de aplicaciones AJAX.
En cuanto a los entornos de pago:
Zend Studio, el IDE para PHP por excelencia con soporte para PHP, (X)HTML, Javascript, CSS, XML y SQL, cliente CVS y SVN, SFTP/FTP, conexiones a servidores de bases de datos, seguimiento de trazas, debugging, entre una infinidad de características.Dreamweaver que sigue al pie del cañón como uno de los editores más versátiles, tanto como editor de programación como para editor WYGWYS.El completado de código que posee es realmente uno de los mejores que he visto, eso sí, únicamente destacable para CSS y XHTML.
Textmate, uno de los editores que más éxito ha tenido y con mejor diseño, nos aporta a diferencia del resto soporte para Ruby, RoR, Xcode, LaTeX, Markdown, Textile, entre otros.El año pasado obtuvo el premio Apple Design Award for Best Mac OS X Developer Tool (o lo que es lo mimo, el premio de diseño de Apple a la mejor herramienta de desarrollo para Mac OS X).
BBedit dispone, además de lo comentado para TextWrangler, soporte para FTP/SFTP, Ruby, YAML, SQL, AppleScript y Mac OS X Unix Scripting, entre otros. Así mismo, permite control de versiones con Subversion y Perforce.Etiquetes de comentaris: codigos, editor textos, etiquetas, HTML
penjat pel Natalia el dilluns, de febrer 20, 2012
0 comentaris
