Definción del Editor de páginas web, sugerencias de editores y chuletas o cheat sheet

1. HTML

2. • 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ón
Mtra. Ana Elena García Pumarino

3. • 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

4. • 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

5. 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

6. 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

7. • Elementos HTML5
• Chuletas de programación
• Anatomía de una URL
• Código de colores
• Código ASCII
• Efectos Scripts
Sugerencia de Chuletas
Mtra. Ana Elena García Pumarino

8. Editor de texto
Las 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

9. Editor de texto
En 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

10. 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

11. 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

12. Para finalizar
El siguiente paso sería…
Mtra. Ana Elena García Pumarino
 Para conocer la estructura de una página,
 Familiarizarse con las etiquetas básicas y
 Posteriormente poder hacer modificaciones.
Marzo 2016