WEB

MAGAZINE

DESCUBRA LAS HERRAMIENTAS

NECESARIAS PARA EL DISEO
& DESARROLLO WEB.

PUBLICACIN DIDCTICA Jos Mata Walesca Hernandez Micael Montesinos

EDUCACIN A DISTANCIA C.I:V-18735071 C.I:V-26.120.690 C.I:V-22.332.943
INDICE
Aqu veras herramientas que te ayudarn a ahorrar
tiempo a la hora de crear diseos web.

ARTICULOS
EDITORIAL. P2
HERRAMIENTAS QUE TODO DISEADOR P3
WEB DEBE CONOCER.
Descubre todo desde el inicio.
Herramientas Bsicas.
EL mejor Editor de Texto.
Que es un dominio y que es un host. P6
Subiendo los archivos al internet. P7

El mundo de las herramientas de diseo

es de lo ms amplio... Pero sabras
decirme cules realmente te ayudan a
optimizar tu tiempo?

WEB
MAGAZINE
Si quieres crear tu propio sitio
web pero no sabes programar ni
disear, te ofrecemos algunas
soluciones gratuitas que pueden
sacar de apuros a ms de un
inexperto que no cuenta con el
presupuesto necesario para
contratar a un profesional.
P2
EDITORIAL
El diseo efectivo y eficiente de sitios web
puede ser una tarea compleja, difcil y larga.
De ah que las herramientas se conviertan en
un elemento clave a la hora de maximizar
nuestros recursos.
Hoy en da el mercado de la herramientas
es muy amplio y cubre todo tipo de
necesidades, por eso resulta difcil escoger la
adecuada para cada proyecto.
Hoy te quiero ensear, algunas de las
herramientas que me facilitan el trabajo, son
de lo ms completas y seguro que te ayudarn
en tu da a da.
Autor: Jos Mata. Publicado: 2017
Actualizado: 2017
 P3

descubre todo desde el inicio

Las fases de un desarrollo web.

En el desarrollo web tenemos unas herramientas para el diseo, otras para la

maquetacin, otras para la programacin, y para la depuracin. Todas las
herramientas que usemos son muy importantes, desde el Sistema Operativo
hasta el comando ms insignificante, y por ello debemos elegir la ms adecuada a
nuestras necesidades y capacidades.

Sistema Operativo

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es
lgico, y su eleccin no es tan trivial. Hay que tener en cuenta las aplicaciones de las que dispone
el Sistema Operativo y sus costes.
Por ejemplo, tenemos Microsoft Windows, cuyas aplicaciones son muy caras, como Photoshop,
Dreamweaver, Fireworks, ASP .NET Y por otro lado tenemos GNU/Linux, con GIMP, Inkscape,
Amaya, Aptana, PHP (aunque todos ellos tambin estn disponibles en Windows).
Otra caracterstica a tener en cuenta es las facilidades que el Sistema Operativo aporta al
desarrollador, y en este sentido GNU/Linux se lleva de calle a Windows. Y esto es porque
Windows no fue diseado para los desarrolladores, sino para personas que no tienen muchos
conocimientos sobre informtica.
Y por el contrario GNU/Linux fue creado por desarrolladores, y para desarrolladores; y por lo
tanto en GNU/Linux podemos encontrar infinidad de herramientas que nos harn la vida mucho
ms fcil, que adems son libres.
 P4

Fases de desarrollo de una web

Para elegir las herramientas a utilizar, antes
debemos identificar las fases del proceso que
forman el ciclo de vida de un desarrollo web.
Diseo:
el diseo consiste en crear esbozos de la web final
mediante una herramienta grfica, como
Photoshop, GIMP o Inkscape.
Maquetacin HTML/CSS:
la maquetacin consiste en convertir los esbozos
creados en la fase anterior en plantillas HTML, su
respectiva hoja de estilos, y las imgenes usadas.
Es posible saltarse la fase anterior para comenzar
directamente con esta fase, dependiendo de si
dominamos herramientas como Photoshop o no.
Programacin cliente:
la programacin cliente consiste bsicamente en
Javascript. Una web puede no tener necesidad de
hacer programacin cliente, como puede ser una
pequea web corporativa con poca informacin
esttica, o puede que requiera enormes esfuerzos
en esta fase, como ocurre con los proyectos Web
2.0.
Programacin servidor:
en esta fase, que se desarrolla junto con la
anterior, crearemos la aplicacin web en un
lenguaje de servidor, como puede ser PHP, ASP
.NET, Python, Perl, etc.
Depuracin:
esta fase enlaza la anterior con la siguiente, y es
donde haremos las pruebas unitarias, aserciones,
trazas, etc.
Pruebas en local:
en nuestro servidor local haremos todas las
pruebas posibles.
Subir ficheros al hosting:
una vez nuestra web est completada y bien
testeada en nuestro servidor local (desarrollo), la
subiremos al servidor del hosting elegido
(produccin). Dependiendo del hosting,
podremos usar FTP, SFTP (SSH), WebDAV, o
incluso Subversion. Yo aconsejo usar Subversion
si as lo permite el servidor, por su comodidad y
rapidez, adems de por su principal utilidad, que
es la de control de versiones.
Pruebas en hosting:
realizaremos las ltimas pruebas en el servidor
del hosting para comprobar que el cambio de
servidor no ha afectado a nada. Para evitar
problemas, nuestro servidor local debe tener
exactamente la misma configuracin que el
servidor del hosting.
 P5

E
n esta seccin podrs encontrar
descripciones y tutoriales de
software de desarrollo que software de utilidad
online
resultan tiles para cualquier persona
dedicada al desarrollo del Web.

HomeSite
Programa para desarrollar pginas web.
Muy til. Permite programar las pginas
en varios lenguajes.
UltraEdit
Uno de los programas para editar cdigo
multitud de lenguajes de programacin
como HTML, Javascript, ASP.
MED
Programa profesional de edicin de
textos para programacin con un buen
sistema de gestin de proyectos.
HTML-kit
Editor de HTML donde se programa
directamente con cdigo.
Edit2Web
Programa para crear pginas web,
incluso con acceso a bases de datos,
para no programadores: utilizando el
ratn.
Zend Studio
Editor web orientado a la programacin
de pginas PHP, con ayudas en la
gestin de proyectos y depuracin de
cdigo. Te permite montar un prototipo en cuestin
Visual Web Developer 2005 Express
Edition. de minutos, online y para multitud de
Un entorno de desarrollo gratuito para plataformas diferentes: Android, iPhone,
tus creaciones ASP.NET, que adems
ofrece componentes adicionales de fcil WordPress, Joomla, Drupal, Facebook
instalacin como el .NET Framework o la Es muy intuitiva ya que es tan fcil como
base de datos SQL Server Express.
Komodo IDE hacer drag and drop con los componentes
Komodo IDE es un entorno de desarrollo que te proporciona para construir tu
para programadores de una amplia
gama de lenguajes: PHP, Perl, Python, wireframe.
Ruby, Javascript, HTML...
IDE desarrollo PHP: phpDesigner
Presentamos un editor de PHP y entorno La versin gratuita slo permite un proyecto
de desarrollo integrado phpDesigner. con 4 pginas, pero puedes descargarlas
Editor de cdigo PSPad
Analizamos un editor de cdigo gratuito en diversos formatos y borrarlas conforme
que te permite editar cdigo PHP, HTML, las dejes de necesitar.
C, Java, etc.
estos son algunos de infinitas
opciones de software que existen
para el diseo & desarrollo web.
 P6

EL MEJOR EDITOR
DE TEXTO

Sin duda alguna en los tiempos que corren Sublime Text no necesita presentacin. Un editor de texto que
poco a poco suplant a TextMate en Mac y que se ha ido expandiendo en otras plataformas a ritmo
acelerado. Entre las ventajas de este editor se encuentra su reducido tamao (el instalador no sobrepasa
los 10MB), su arranque casi inmediato y la capacidad de ampliar sus funcionalidades a travs de plugins.

Sublime Text no es gratis, sin embargo podemos usar la versin de prueba por tiempo indefinido, solo que
nos saldr un popUp cada vez que guardemos nuestros archivos una determinada cantidad de veces,
recordndonos que sera bueno para su desarrollador, el pagar por usarlo. No es tan molesto en realidad,
pero siempre puedes pagar por su licencia que comparada con otros programas, es muy barata.

Esta aplicacin es bastante personalizable al punto que podemos cambiar el comportamiento del editor, el
tamao y tipo de tipografa, los atajos de teclado, los esquemas de colores y otras series de opciones para
acomodar la aplicacin a nuestras necesidades. Por defecto incluye un minimapa que nos permite navegar
rpidamente por nuestro cdigo. Podemos adems gestionar nuestros proyectos, e incluso combinarlos, y
cambiar entre ellos de forma rpida. Con Sublime Text podemos escribir cdigo para diversos lenguajes,
tienes soporte para Snippets, y con la instalacin de plugins podremos tener soporte para GIT, o pre-
compiladores para CSS como como Less o Stylus. Es ideal si queremos desarrollar con DJango o Python
directamente.

Algo que hace genial a Sublime Text es que mantiene nuestros archivos en el mismo estado en el que los
dejamos al cerrar el editor (sin necesidad de guardar) y tiene por defecto soporte para Cdigo Zen por lo
que podemos agilizar nuestro trabajo.
 CLIENTE FTP P7

QUE ES UN HOSTING & UN FTP es un protocolo de transferencia

diseado para ayudar a mover
DOMINIO archivos desde una ubicacin hacia
otra a travs de una red. Este
Cuando se inicia cualquier proyecto en internet como blogs, portales de protocolo es ampliamente usado para
noticias, sitios web, foros, redes sociales, etc, el primer paso a realizar es acceder a los contenidos de
adquirir el hosting y dominio para el proyecto, todo el mundo sabe esto, pero servidores web y muchos grupos
no todo el mundo sabe exactamente qu es. entusiastas configuran servidores
A pesar de ser un paso bsico y obligatorio existen muchas personas FTP para compartir archivos entre sus
(sobre todo los que no tienen mucha experiencia en internet) que no saben miembros. A pesar de que puedes
exactamente qu es hosting y dominio o como se diferencian y llegan a conectarte a un servidor FTP usando
pensar incluso que son la misma cosa o que el dominio tambin es hosting, tu navegador, notars que obtendrs
etc. muchas ms funcionalidades si usas
un cliente FTP dedicado.
Que es el Dominio?

En internet todo parte desde el dominio, el dominio es el nombre que Para poder transferir archivos
tendrs t o tu marca en internet, es un nombre por el cual las personas te necesitas un programa especfico
reconocern, este nombre lo debers elegir tu, obviamente que pondrs tu (cliente de FTP). Es probable que ya
nombre o el de tu marca como dominio. tengas uno instalado en tu disco duro.
Si tu marca o empresa se llama Animoral SA tu dominio se podra Si no es as, puedes recurrir a la Red.
llamar animoralsa.com o como a ti te parezca mejor. Hay muchas aplicaciones gratuitas
Que es el Hosting?
que se parecen mucho.
Una vez que ya tienes instalado el
Ahora ya registraste tu dominio, pero hay un problema, cuando intentes programa, pincha dos veces sobre el
acceder a tu dominio por el navegador no va a cargar nada, esto es porque el icono que se ha guardado en el
dominio solo es tu nombre en internet y su trabajo es mostrar en el navegador escritorio (de esta forma se abren las
los archivos de tu web, pero esos archivos necesitan estar en algn lado, sino aplicaciones en Windows).
como sabr el dominio que cosa mostrar. Independientemente de la aplicacin
Es aqu donde entra al juego el Hosting, y es que el hosting (palabra en que hayas elegido, todos los clientes
ingls que significa hospedaje) es ese espacio en internet donde alojars los de FTP comparten unos campos que
archivos de tu web, tales como imgenes, texto, documentos html y css, debes rellenar. Host name (es el
vdeos, pdfs, etc. nombre del ordenador o servidor al
q u e n o s q u e r e m o s c o n e c t a r.
Previamente, su dueo nos ha tenido
que facilitar esa informacin. Por
ejemplo: ftp.estonoexiste.com) User
ID (es el nombre de usuario)
Password (la contrasea) Algunos
programas piden adems que se
rellenen otros dos campos: Host
Typed (habra que seleccionar la
opcin automatic detect) Puerto (usa
el puerto 21) Cuando hayan
completado todos los campos, pulsa
el botn de conectar. Si lo has hecho
todo bien, tendrs acceso al servidor
remoto.
Una vez que ya tienes configurado el
cliente de FTP, slo te queda enviar o
recibir el archivo. Todos los programas
suelen tener la misma visualizacin:
una pantalla a la izquierda con los
archivos de la persona que se conecta
y una pantalla a la derecha con los
archivos del servidor.