epespad

Fases y Herramientas ideales para el desarrollo web.

Herramientas ideales para el desarrollo web y fases para llegar a ella y si. incluiré las descargas de cada una.

El desarrollo de una pagina web se compone por fases, luego están los niveles (nivel gráfico, frontend y backend) luego haré post con sus respectivas herramientas, mientras aquí generalizo.

Antes de empezar, que son esos 3 niveles?

Nivel grafico: Todo el diseño grafico para nuestra pagina (colorsitos, sus combinaciones, el orden de las cajas, imagenes, etc)
Frontend: Es todo con lo que interactua el usuario y puede verlo, por ejemplo herrmanientas con switchs, rotaciones de cosas, aplicaciones como un juego, etc. (aqui ya empezamos a hablar de programacion con Javascript)
Backend: Es todo lo que corre en el servidor, y con esto me refiero a con lo que NO interactua el usuario, como las bases de datos.


y bueno las fases de las que hablo son:

Diseño:
el diseño consiste en crear "dibujitos" de nuestra pagina web, como nos la imaginamos de manera final, a nivel de cajitas, imagenes, etc (contenido general) para esto podemos ocupar múltiples herramientas desde una hoja de papel y un lapiz del numero 2.

Primero tenemos herramientas que traen por defecto nuestros sistemas operativos, en caso de windows Paint, que si podemos ocuparlos y no abra ningun problema pues es un paso muy sencillo pero tabien existen mas opciones.

Esta Pecil:
Pencil
Fases y Herramientas ideales para el desarrollo web.
el cual es una muy buena herramienta para esto

Tenemos Adobe Fireworks:
Adobe Fireworks
Diseño Web
Podemos optenerla de "alguna forma" en la web.

Maquetación
la maquetación consiste en convertir esos dibujitos que creamos en la fase anterior en plantillas HTML, su respectiva hoja de estilos (css), y ponerle sus respectivas imagenes. Uno puede saltarse el paso anterior si uno ya tiene en mente la estructura de la pagina pero el no saber usar photoshop o alguna herramienta no es excusa pues como dije antes, puedes hacerlo con una hoja de papel.

Para el codigo tenemos una herrmienta que me encanta:
Sublime Text 2
desarrollo web
se le pueden descargar plugins y sintaxis para diferentes lenguajes. esta herramienta podemos ocuparla para los 2 pasos siguientes. en esta fase se ocupaara para el HTML y el CSS

Para los colores: Entraremos a esta pagina
donde generaremos los colores en Hexadecimal y en RGB
herramientas web

Tambien estan las herramientas de Adobe Edge que tambien son excelentes:
Adobe tools & service
Crea tu pagina
A pesar de ser de adobe son completamente gratis.

Existen herramientas como dreamweaver pero no las recomiendo porque hace malos diseñadores, diseñadores que no entienden su propio codigo.

Programación cliente:
Aquí ya se cruzo completamente la frontera entre diseñador y frontend, de esta fase se encarga el javascript.

Programación servidor:
en esta fase, que se desarrolla junto con la anterior, crearemos la aplicación web en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.

Depuración:
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.

Para los noobs esta HFS, que es una herramienta para hacer tu server local muy facil de ocupar
HFS
backend

para los mas experimentados, sabran que podran hacerlo con apache.

Subir ficheros al hosting:
Hosts? estos abundan en internet! solo es cuestion de elegir.
Cual host elejir?

para subir os archivos necesesitamos un FTP: en este caso FileZilla
pasos para crear una web

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 configuración que el servidor del hosting.

Para terminar quisiera perdirles un like a esta foto :
https://www.facebook.com/photo.php?fbid=493864127299391&set=a.155802621105545.34926.100000274257445&type=1&theater
si les gusto el post, se que suena feo, no me critiquen es para ganar un concurso entre unos amigos. SALUDOS

1 comentario - Fases y Herramientas ideales para el desarrollo web.

TaToMarrocco
=) yo uso DreamWeaver, Photoshop, Flash y tutos =P
AlexHgz +1
@TaToMarrocco tienes mucha razón, solo que yo uso mucho esas aplicaciones y me he estado cerrando un poco, aun asi. Saludos
AlexHgz
@TaToMarrocco apenas me di cuenta que taringa se comio una parte de mi respuesta jajaja lo ultimo era del flash, que ya esta prácticamente obsoleto y te recomendaria usar css para las animaciones que hacías con flash, tu sitio quedara mas liviano y sera mucho mas rapido, optimizaras tu sitio
TaToMarrocco +1
@AlexHgz si si, no lo uso mucho, prácticamente nada.. css es mas fácil aparte.