UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera

Ingeniera de Sistemas
Diseos de Sitios Web

ACTIVIDAD 1
CONFIGURANDO EL ENTORNO DE TRABAJO

Presentado Por:
Juan Pablo Riveros Conde
Cdigo: 14106046
Grupo 301122_19

Presentado a:
Ing. Mauricio Perdomo Vargas

UNIVERSIDAD ABIERTA Y A DISTANCIA (UNAD)

CEAD IBAGUE/TOLIMA

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

FEBRERO DE 2015
INTRODUCCION

El desarrollo del presente trabajo tiene como finalidad la gestin del entorno de
trabajo para el diseo y construccin de pginas, mediante herramientas de
software como son: editores de texto, servidores web y clientes ftp entre otras.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

OBJETIVOS

El entendimiento y apropiacin de conceptos y teora relacionada con principios y

fundamentos de un entorno de trabajo para un proyecto de Diseo Web.
La configuracin de un computador personal de una manera prctica un entorno
de trabajo para un proyecto de Diseo Web.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

ACTIVIDAD No. 1 CONFIGURANDO EL ENTORNO DE TRABAJO.

Aplicaciones a instalar:
Editor de texto SublimeText2.
Servidor Web Xampp
Cliente de FTP Filezilla

Editor De Texto Sublime Text2. Es un editor de cdigo multiplataforma, muy

liviano, con una interfaz mus sencilla ligero, fue creado por Jon Skinner y est
programado en C++ y Python, esta gran herramienta utiliza Plugins, Snippets y se
pueden importar varios mdulos tambin se basa en un sistema de construccin
de cdigo Build System. Y est disponible para los sistemas operativos Windows,
Linux y OS X.

Su funcionalidad es muy amplia ya que soporta variedad de lenguajes algunos de

ellos son: HTML, JavaScript, Groovy, HTML5, Java, Matlab, XML, Haskell,
Markdown, PHP, OCaml, Python , Perl, Lisp, Ruby entre otros.

Instalacin de Sublime Text 2. Primero debemos descargar la aplicacin en el

siguiente Url: http://www.sublimetext.com/2. Como podemos observar la aplicacin
puede ser instalada en 3 diferentes sistemas operativos.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Despus de descargar la herramienta Sublime Tex 2 en su versin actual 2.0.2

iniciamos su instalacin.

Chequeamos Add o explorer context men, opcin que nos aadir un men
contextual al explorador.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Esperamos que el instalador desempaquete todos los archivos en el directorio

Raz C:\Program Files\Sublime Text 2

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Instalamos y activamos el Packege Control mediante la consola utilizando el

men View > Show Console, seguidamente pegamos en la caja de texto el
siguiente cdigo:

import

urllib2,os;

pf='Package

Control.sublime-package';

ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp)

else

None;

urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));

open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.re
place(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Oprimimos Enter, seguidamente Sublime Text 2 nos pedira reiniciar el programa.

Con esto se crea el elemento en Preference > Package Control.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Ahora instalamos el Plugin de Zend Coding Emmet presionando la combinacin

Shift + Ctrl + P activando de esta manera un men oculto de Sublime Text 2,
escribimos Install Package en la caja que se activa y luego Enter.
Seguidamente digitamos Emmet y Enter de esta manera quedan activos el
Package Control, y el Plugin de Zend Coding Emmet

Servidor WEB XAMPP. Xampp es un servidor web distribucin de apache y

est compuesto por

MySQL, PHP y Perl, adems en compatible con los

principales sistemas operativos Windows, Linux y OS X, fue creado o

desarrollado por el grupo apache Friends, esta gran herramienta nos permite
probar nuestros proyectos web en nuestro computador sin preocuparnos por
estar conectados a internet

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Xampp

fue

descargado

de

la

siguiente

URL:

https://www.apachefriends.org/es/download.html

INSTALACIN DE XAMPP

Se debe suspender la proteccin del antivirus para que no bloque algunos

componentes del servidor

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Luego es
lanzada
una ventanas que nos informa que se debe desactivar el control de cuentas
de usuario, pues restringe algunos permisos de escritura en el directorio
donde se instala por defecto el Servidor Xampp C:\xampp

10

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Elegimos
la

instalacin por defecto

11

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Seleccionamos donde instalaremos el servidor

El

instalador

desempaqueta todos los archivos en el directorio C:\xampp

12

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Oprimimos Finish para terminar la instalacin y lanzar el panel de control de

Xampp

En el panel de control podemos poner en marcha o detener cualquiera de

los mdulos

A continuacin lanzamos el servidor web apache para probar la instalacin

del Xampp.
13

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

A continuacin probamos el funcionamiento del servidor apache digitando

en nuestro navegador http://localhost o 127.0.0.1 donde podemos elegir el
idioma para su presentacin.

14

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

La siguiente pantalla nos indica que el Servidor Xampp se instal bien.

Instalando El Cliente De Ftp Filezilla

Descargamos

el

cliente

Ftp

del

siguiente

Url:

https://filezilla-

project.org/download.php?type=client. Damos clic en Show additional download

options, para que nos muestre las opciones adicionales de descarga.

15

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Ahora podemos elegir el instalador apropiado dependiendo de la plataforma que

tenemos y el sistema operativo.

Se
inicia la instalacin desempaquetando los archivos necesarios en el directorio

especfico.

16

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Ahora
damos clic en Finish para inicial el cliente FTP

17

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Ahora vemos el pantallazo de inicio de Filezilla, como podemos observar el cliente

FTP debe tener una configuracin especifica como la direccin de un servidor,
usuario y contrasea los cuales utilizaremos en las prximas actividades

CONCLUSIONES

18

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

Con el desarrollo de las actividades se analiz y se puso en prctica los conceptos

y teora relacionada con Principios y fundamentos de un entorno de trabajo para
un proyecto de Diseo Web, adems de la instalacin y configuracin
computador personal para la realizacin adecuada del proyecto Web.

BIBLIOGRAFIA

19

de un

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas Tecnologa e Ingeniera
Ingeniera de Sistemas
Diseos de Sitios Web

http://www.sublimetext.com/2
http://www.vidaamarilla.com/2012/07/tutorial-para-sublime-text-2.html
http://es.wikipdia.org/wiki/Sublime_Text
https://www.apachefriends.org/es/download.html
http://www.elwebmaster.com/articulos/xampp-servidor-web-facil-de-instalar
http://es.wikipedia.org/wiki/XAMPP
http://roble.pntic.mec.es/aunturbe/facil/xampp.html
http://es.slideshare.net/kissees/xampp-25917007?next_slideshow=1
https://filezilla-project.org/download.php?type=client

20