Editor de paginas Web

HTML

Mtra. Ana Elena García PumarinoAsesor Virtual

• Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML.

•  Su complejidad puede variar desde la de un simple editor de texto plano como el NotePad, entornos WYSIWYG, hasta editores WYSIWYM.

IntroducciónMtra. Ana Elena García Pumarino

• El desarrollo web es quizás la rama informática que aglutina más lenguajes (HTML, CSS, Javascript, PHP, Java, CSS) que deben interactuar entre sí y por ello necesitamos un editor web que facilite nuestro trabajo. Son muchos los editores web existentes en el mercado:

• Dreamweaver, Front Page, • CoffeCup, HTML Editor,• NotePad++, Homesite, etc.cada uno con sus propias peculiaridades, aunque en realidad no son muy distintos unos de otros.

Mtra. Ana Elena García Pumarino

• Las características principales que observamos en todos ellos es que son edición WYSIWYG, cliente FTP, control de versiones, autocompletado de código, resaltado de sintaxis, soporte de lenguajes de servidor, depuración, documentación en línea.

• Y cada persona le dará más valor a unas u otra dependiendo del entorno y el trabajo específico que realice.

• Por ejemplo, un desarrollador novel encontrará muy útil la edición WYSIWYG, pero no así un desarrollador más experimentado, que rara vez lo utilizará.

Mtra. Ana Elena García Pumarino

Tipos de Editores

Texto sin formato

• También llamado editor de texto plano. Este tipo de editor suele ser muy sencillo. Dos ejemplos son Notepad o Bloc de Notas

Texto con ventanas

• Versión ligeramente más sofisticada que la anterior, consta de una ventana para previsualización del documento generado.

WYSIWYG

• Acrónimo de What You See Is What You Get, "lo que tú ves es lo que obtienes", en los que de manera visual se pueden colocar distintos elementos sobre una vista previa de la página.

Existen diferentes tipos de editores por su uso, complejidad.

Mtra. Ana Elena García Pumarino

Traducido al español como “hojas de trucos u hojas resumen” que sirven para obtener la información más importante en un golpe de vista de las tecnologías y lenguajes más comunes del desarrollo de webs ya que es muy complicado, por no decir imposible recordar todas las funciones de las distintas tecnologías o lenguajes.

Chuletas o Cheat sheet

Mtra. Ana Elena García Pumarino

• Elementos HTML5• Chuletas de programaci

ón• Anatomía de una URL• Código de colores• Código ASCII• Efectos Scripts

Sugerencia de ChuletasMtra. Ana Elena García Pumarino

Editor de textoLas ventajas del bloc de notas (windows) o  textedit (Mac) son básicamente que es una herramienta rápida y sencilla y de la que sabemos con seguridad que podemos disponer en cualquier ordenador. Los inconvenientes: sus limitaciones, entre las que destacaríamos la pobre presentación del código que aporta a los programadores, sin identificación de líneas, marcado de etiquetas, etc.

Mtra. Ana Elena García Pumarino

Editor de textoEn el otro extremo tenemos los programas de desarrollo con utilidades de edición incorporadas como Dreamweaver, Homesite o Frontpage. Estos programas, permiten usar el editor visual y comienza a agregar textos y botones, sin saber realmente que esta pasando.Por esta razón es preciso conocer como están conformados los sitios web, cual es su código, que orden debe llevar, como funcionan los elementos, y un sin fin de cosas mas.  El valor real de un programador Web es entender html y css, saber cuál es la estructura de un sitio para poder modificarlo fácilmente y poder aprender más sobre verdaderos sitios web. Para programar un sitio web, solo necesitas de un espacio donde escribir código, no necesitas de tantos botones y menús,  y que lo puedas guardar en formato.html, .css, .js, etc.

Mtra. Ana Elena García Pumarino

Notepad++ descargar

• Para los de usan Mac existe Editra, que es un editor multiplataforma considerado uno de los mejores en el mercado, y tiene con qué hacerle competencia a algunos de los grandes de Mac.

• Lo que tiene a favor es que cuenta con una estética similar al Notepad++

• Editra cuenta con una interfaz intuitiva, con algunas funcionalidades ideales para aquellas personas que escriben código.

• Tiene un soporte  de más de 60 lenguajes de programación, y se puede extender con plugins en Python, tiene resaltado de texto y etiquetas, entre otras cosas.

Editra descargar

Tanto para las personas que dan sus primeros pasos en programación como para los programadores profesionales, disponer de un editor directo más potente que el bloc de notas les resultará ventajoso. Este es el caso de Notepad++, un editor que trabaja en entorno Windows y que resulta muy interesante para programadores.• Permite abrir prácticamente todo: archivos con

cualquier extensión, e incluso sin extensión.• Nos indica los números de línea. En html y PHP,

reconoce las etiquetas y nos indica donde empieza y donde terminan,

• Los elementos son diferenciados cuando nos posicionamos con el cursor encima de ellas. Muestra los mensajes de error y nos permite localizar y editar con rapidez la línea aludida.

• Permite todas las funcionalidades habituales en Windows: copiar y pegar, zoom usando CTRL+ rueda del ratón, buscar, reemplazar, posibilidad de deshacer, mostrar caracteres ocultos (como saltos de línea…).

Mtra. Ana Elena García Pumarino

Sublime Text 2 descargar

Características generales de Sublime Text 2

• Editor multiplataforma con una funcionalidad excelente y una interfaz de usuario limpia y muy cómoda.

• Es un editor programado en Python y C++ con unas características únicas que lo convierten en una herramienta muy versátil y flexible a la hora de editar cualquier tipo de documento de texto. No tiene nada que envidiar a editores comerciales puesto que es muy completo.

• No es un editor gratuito, pero el autor de SublimeText 2 permite su uso en sin restricciones ni limitaciones, pero recuerda que es necesario hacerse con una licencia si le vas a dar un uso continuado. De todas formas podemos probarlo indefinidamente ya que no tiene ningún tipo de limitación, aunque lo ideal sería comprar una licencia si se le va a dar un uso profesional.

Mtra. Ana Elena García Pumarino

Para finalizar

El siguiente paso sería…

Mtra. Ana Elena García PumarinoCrear una

Webpágina

En HTML

Para conocer la estructura de una página, Familiarizarse con las etiquetas básicas y Posteriormente poder hacer modificaciones.

Marzo 2016