TEMA 2: CONCEPTOS BÁSICOS

ENTORNO DE PROGRAMACIÓN
El entorno de programación de cualquier desarrollador web suele estar constituido por una
serie de aplicaciones o software específico que tienen como objetivo principal facilitar la tarea
de codificación de los diferentes lenguajes que intervienen en el desarrollo de páginas web.

Teniendo esto en cuenta, el software necesario para un desarrollador web se puede dividir en
dos grupos bien diferenciados:
➢ editor web
➢ navegador web

EDITOR WEB
Un editor web es un tipo de software que tiene como función agilizar la tarea de codificación de
los documentos o lenguajes de marcas o lenguajes de programación implicados en el desarrollo
web: HTML, XHTML, CSS, JavaScript, PHP, Python, JSON, etcétera.

Aunque tanto HTML como CSS, JavaScript y otros se pueden codificar directamente con
cualquier editor de texto plano, no es necesario ningún entorno o entorno de desarrollo
integrado (IDE) de programación específico.

No obstante, es recomendable el uso de editores web que nos faciliten y nos guíen en la labor de
la escritura del código, ya sea mediante el coloreado y el resaltado de la sintaxis, o bien con la
ayuda del autocompletado de código que la mayoría de estos entornos de programación ya
incorporan de serie.

A continuación, se verán algunos de los editores web más comunes:

➢ Visual Studio Code:

Desarrollado por Microsoft, publicado por primera vez en 2015.
Características
● Multiplataforma, disponible en versiones para Windows, Linux y Mac.
● Gratuito y distribuido bajo licencia MIT, su código se encuentra disponible en Github.
● Traducido a múltiples idiomas, incluido el castellano.
● Coloreado y resaltado de la sintaxis.
● Gran cantidad de plugins disponibles para ampliar sus funcionalidades.

➢ Atom:
Entorno de programación escrito en Node.js y desarrollado por la comunidad de Github.
Características:
● Software libre y totalmente gratuito.
● Disponible para Windows, Linux y Mac.
● Dispone de multitud de plugins con los que ampliar sus funcionalidades.
● Gran comunidad de desarrolladores y colaboradores.
● Bajo consumo de recursos, lo que le hace ser un software bastante ligero y fluido.
 ➢ UltraEdit:
Entorno de programación con múltiples características.
Características:
● Disponible para plataformas Windows, Linux y Mac.
● Software de pago, existen versiones gratuitas solo por un periodo de pruebas de 30 días.
● Disponible en varios idiomas, entre ellos el castellano.
● Coloreado, resaltado y autocompletado del código.
● Cliente FTP integrado.
● Indentación automática de bloques de código.
● Soporte e integración de multitud de plantillas predefinidas.
● Comparador de ficheros.

➢ WebStorm:
Entorno de programación creado por JetBrains y concebido principalmente para JavaScript
aunque con soporte para multitud de lenguajes y tecnologías.
Características:
● Software de pago con versión de prueba de 30 días.
● Disponibles para Windows, Linux y Mac.
● Muy personalizable con multitud de temas disponibles.
● Autocompletado, resaltado y navegación dentro del código de forma sencilla.
● Amplio soporte para sistemas de control de versiones como Git, SVN, Mercurial y
Perforce
Existen muchos más editores web que pueden ser utilizados. Por ejemplo Notepad++ es un
editor de texto que es muy útil y sencillo de utilizar.
No se debe utilizar un procesador de texto como Word para escribir código ya que es necesario
salvar el código como texto plano.

También existe una categoría de editores web conocida como WYSIWYG (What You See Is What
You Get), que traducido al castellano es algo así como "lo que ves es lo que consigues".
➢ El funcionamiento de este tipo de software está apoyado en un entorno visual a través
del cual será la propia aplicación la que irá generando el código HTML a medida que el
usuario vaya agregando elementos en la vista diseño de la página web.
➢ El uso de este tipo de software está cada vez más en desuso y se desaconseja el uso de
este tipo de herramientas.

NAVEGADOR WEB
La compatibilidad entre los diferentes navegadores es un problema para el desarrollo web ya
que no todos los navegadores interpretan el código HTML+CSS de la misma forma y se traduce
en un aspecto visual diferente.

Lo más recomendable es trabajar con un navegador predeterminado, recomendar ese navegador

en nuestra web y, posteriormente, adaptar nuestro proyecto en la medida de lo posible a otros
navegadores.

A continuación se verán algunos de los navegadores web más comunes

➢ Mozilla Firefox:
Desarrollado por la fundación Mozilla, el primero en convertirse en una alternativa al
"monopolio" que tenía Internet Explorer en el pasado.
Características:
● Navegador libre, gratuito y de open source.
● Multiplataforma: Windows, Linux y Mac, entre otras.
● Nuevo sistema de actualizaciones en ciclos de seis semanas.
● Amplio catálogo de extensiones y plugins que incrementan considerablemente las
posibilidades del navegador.

➢ Google Chrome:
Navegador desarrollado por Google en 2008. Actualmente es el navegador con mayor aceptación
y con una mayor cuota de mercado.
Características:
● Navegador gratuito. Su código fuente está disponible en la versión denominada
Chromium.
● Versiones disponibles para Windows, Mac, Linux y dispositivos móviles.
● Sin llegar al nivel de Mozilla Firefox, Chrome también dispone de un catálogo de plugins
y extensiones en continuo crecimiento.

➢ Opera:
Pionero en características interesantes como el uso de pestañas para evitar sobrecargar el
escritorio con multitud de ventanas y otras.
Características:
● Gratuito, aunque no es software libre.
● Tiene versiones para Windows, Mac, Linux y dispositivos móviles.

➢ Microsoft Edge:
● Navegador desarrollado por Microsoft para su sistema operativo Windows 10 y que
sustituye a Internet Explorer;
● Dispone de un motor de renderizado desarrollado mediante software libre
● Al contrario que Internet Explorer sí que pretende respetar en la medida de lo posible
los estándares web.

➢ Internet Explorer:
● Navegador desarrollado por Microsoft en agosto de 1995, apoyado por el sistema
operativo Windows no tardó en posicionarse como el navegador más usado en Internet.
● En el año 2000 llegó a copar un 95 % de la cuota de mercado.
● En marzo de 2015, Microsoft comunicó que Microsoft Edge reemplazaría a Internet
Explorer en Windows 10.
● Actualmente, únicamente la versión 11 de Internet Explorer tiene soporte para usuarios.

Cada persona tiene sus preferencias, aunque para desarrollo web quizás sea conveniente utilizar
Google Chrome o Mozilla Firefox o alguno ya que respetan en gran medida los estándares del
W3C.

HERRAMIENTAS DE DEPURACIÓN DE CÓDIGO

Las herramientas de depuración de código son aplicaciones que le permiten al programador
analizar y capturar los errores de codificación, así como agilizar el proceso de diseño y
desarrollo de aplicaciones en tiempo real.

Hace años lo más común era usar un plugin externo de Mozilla Firefox llamado Firebug. En la
actualidad tanto Mozilla Firefox como Google Chrome ya tienen esa funcionalidad incluida de
serie.

➢ Firebug:
Al tratarse de una aplicación externa a Mozilla Firefox, es necesario instalarla como plugin o
extensión del propio navegador. Hay que buscar e instalar Firebug dentro de la ventana de
complementos de Mozilla Firefox. Para abrir esta ventana de complementos ejecutaremos el
comando Herramientas>Complementos.

Otra forma de conseguir Firebug es accediendo a su página web e instalando la aplicación

directamente desde Internet.

➢ Consola web de Firefox

La Consola web de Mozilla Firefox no es una aplicación o plugin externo, se trata de una utilidad
que forma parte del grupo de herramientas que este navegador nos proporciona desde el menú
Herramientas>Desarrollador web.

➢ Consola web de Google Chrome

Ver>Más herramientas>Herramientas para desarrolladores

ESTRUCTURA DE UN SITIO WEB

Es recomendable disponer de una estructura de directorios o carpetas donde tener organizados
todos los elementos que pueden conformar nuestro sitio web.

Los tipos de ficheros que pueden aparecer en una página web sencilla: ◦
➢ Ficheros o documentos HTML: almacenan el código HTML de una página web. Estos
ficheros están generados normalmente con un editor web y tienen como extensión .html
o .htm.
➢ Hojas de estilos: recogen el código CSS u hoja de estilos que se le aplica a un documento
HTML. Estos ficheros tienen extensión .css.
➢ Ficheros JavaScript: almacenan las funciones o guiones en JavaScript que necesita
nuestro sitio web. Estos ficheros también podrían estar generados con un editor web y
deben llevar extensión .js.
➢ Multimedia: Archivos multimedia tales como iconos, imágenes, fotografías, vídeos,
música, etcétera. Las extensiones de estos ficheros son del tipo .jpg, .png, .fig, .ico, .mp3,
.mp4, etcétera.

La idea es tener cada tipo de fichero almacenado en su carpeta correspondiente

Ejemplo de una posible estructura de ficheros para un sitio web básico:
Los documentos HTML son los únicos que no están almacenados en carpetas, sino que cuelgan
de la rama principal
 ➢ Esto es así para facilitar la definición de los enlaces relativos dentro de código HTML, ya
que estos ficheros siempre estarán un nivel superior que el resto de ficheros.

PUBLICAR NUESTRO SITIO WEB

Una vez finalizado el proyecto, será el momento de publicarlo en la red, ya sea Internet o la red
local de nuestra organización.

Hasta entonces habremos ido desarrollando y comprobando el funcionamiento de nuestro sitio

web cargando directamente las páginas en el navegador, pero, si queremos que esta web esté
disponible para todo el mundo, habrá que publicarla en un servidor web.

Para llevar a cabo esta publicación, únicamente nos hace falta un cliente FTP que nos suba los
ficheros al servidor correspondiente.
➢ un cliente FTP es una aplicación que usa el protocolo FTP para conectarse a un servidor
remoto, en este caso, a un servidor web, y transferir los ficheros seleccionados

Algunos editores web tienen incorporado un cliente FTP. También hay muchos programas de
este tipo gratuitos, como por ejemplo FileZilla, GoFTP o FireFTP (plugin de Mozilla Firefox).

Una vez tengamos instalado el cliente FTP en nuestro PC, los pasos para publicar el sitio web son
los siguientes:
1. Utilizar los datos de conexión que nos ha facilitado el administrador del servidor web o
nuestro proveedor de servicios de Internet para crear una conexión entre nuestro cliente FTP y
el servidor web.
➢ Los datos necesarios son nombre o dirección IP del servidor, usuario y contraseña. El
puerto por defecto para todo FTP es el 21.

2. Una vez realizada la conexión con el servidor, tendremos que navegar por su estructura de
carpetas hasta localizar el lugar correcto donde subir nuestros ficheros.
➢ Normalmente el nombre de la carpeta donde alojar nuestra página web será httpdocs.

3. Localizada la carpeta de publicación en el servidor, solo nos quedará subir la estructura

completa de nuestro sitio web a dicha carpeta.