HERRAMIENTAS PARA EL DESARROLLO WEB

Chrome Developer Tools:

Chrome Developer Tools son un conjunto de herramientas de depuración integradas en Google Chrome. Los DevTools proporcionan a los desarrolladores acceso a los componentes internos del navegador y sus aplicaciones web. Se utilizan para rastrear problemas de diseño de de manera eficiente y obtener ideas para la optimización de código.

Con las DevTools puedes editar el DOM (HTML)/CSS en tiempo real, depurar JavaScript paso a paso y añadir una terminal. Con esta herramienta puedes aprender mucho acerca de cómo un navegador hace su trabajo realmente, lo que te permite tomar por completo el control de tu aplicación. Además de su sitio, puedes visitar su canal de Youtube donde conseguirás información muy valiosa que seguro sabrás apreciar. También puedes unirte a su comunidad en Google +.

Grunt:

Grunt es un automatizador de tareas de JavaScript. Básicamente es una librería que nos permite configurar tareas automáticas, lo que nos puede terminar ahorrando valioso tiempo en el desarrollo y despliegue de aplicaciones web. Ofrece una gran cantidad de plugins incluidos para tareas comunes, pero también te da la opción de escribir las tareas que necesites para cubrir tus necesidades.

Una vez instalado, Grunt es fácil de usar y cuando aprendas todo su potencial seguramente no dejaras de usarlo regularmente. En su sitio hay una guía de primeros pasos y una serie de documentación que te ayudara a conocerlo. Si quieres revisar su código y colaborar con el proyecto puedes visitar su perfil de GitHub o unirte a su comunidad en Twitter.

LiveReload:

LiveReload es una sencilla herramienta que te ahorrara millones de clicks a la opción de refrescar/recargar el navegador cada vez que haces un cambio en HTML/CSS/JavaScript. Es un protocolo web que dispara eventos al cliente cada vez que los archivos son modificados. El cliente/servidor está disponible en diversas implementaciones.

Se puede descargar para las distintas plataformas desde su sitio. Si quieres dar un vistazo a su código y hacer contribuciones puedes visitar su perfil de GitHub. También puedes seguirlos en Twitter.

Mocha:

Mocha es un poderoso framework de pruebas de JavaScript que te ahorrara muchos dolores de cabeza. Se ejecuta en Node.js y en el navegador facilitando las pruebas de código asíncrono, siendo esta su característica principal. Los tests de Mocha se ejecutan en serie y permiten reportes flexibles y precisos.

Mocha ofrece sólo el comportamiento BDD o Behavior-driven development y no el assertion/mock framework, pero ya que se puede integrar perfectamente con frameworks dedicados como Chai y Sinon esto no representa un problema.

Mocha puede ser instalado con npm. Para más información puedes visitar su Wiki o unirte a su grupo de Google. Si deseas ver su código fuente puede visitar su perfil en GitHub.

Karma:

Karma es un test runner de JavaScript escrito por los creadores de AngularJS. Es el complemento perfecto para correr continuamente todas esas pruebas que escribes con Mocha, con feedback en tiempo real. Con esta herramienta de pruebas puedes ejecutar en modo continuo las pruebas desde tu ordenador hasta producción.

Karma permite correr tus pruebas en múltiples navegadores para que puedas depurar tu código al máximo mientras lo escribes. Para ver su código fuente y hacer contribuciones puedes visitar su perfil en GitHub. También puedes unirte a su comunidad en Twitter.

FASES DEL DESARROLLO WEB

Investigación:

La investigación debe considerar la cartera de Internet entorno al sitio Web propuesto. Las oportunidades de consolidación son consideradas con base en su contexto.

Una revisión de sitios similares, así como el material de marketing existentes pueden ayudar a identificar un estilo para el diseño.

Planificación:

Cuando se planifica un sitio Web, se debe considerar:

·         Entender a su audiencia y sus necesidades actuales y a futuro.

·         Definir claramente el propósito del sitio Web

·         Asignar los temas y contenidos que le gustaría cubrir

·         Decidir cómo se llamará el sitio

·         Comprobar la disponibilidad del nombre de dominio y registrarlo

·         Hacer un análisis de lo que otros sitios han hecho

Arquitectura del sitio y contenido:

Con base en las preferencias del contenido se crea un mapa de la arquitectura del sitio para demostrar visualmente cómo se organizan el contenido y la estructura del sitio.

Diseñar, construir y hacer pruebas:

Propuesta de diseño web y definir "qué te transmite a través de lo que ves."

Una vez establecido el diseño final del sitio y el contenido, se incorporan fotografías y todo el diseño gráfico para complementar el sitio Web.

En esta etapa la estructura del sitio se encuentra desarrollada y en fase de prueba por los usuarios y grupos de interés por parte de la empresa.

El sitio Web se ha lanzado y se encuentra trabajando en vivo.

Operar, mantener y evaluar:

En esta etapa el sitio Web es controlado y en constante mantenimiento para posibles mejoras. Se procura obtener informes sobre el rendimiento, para asegurar que el sitio Web sea un éxito.

Uno de los elementos del plan de mantenimiento debe ser la evaluación periódica del sitio, esta evaluación podría dar lugar a una decisión de mejora o reconstrucción total de la misma.

Una correcta evaluación puede dar lugar a la consolidación de los contenidos y por ende del sitio, por otro lado, también puede determinar poco rentable la operación.

Después del lanzamiento:

Se recomienda  una agresiva campaña de marketing a través de motores de búsqueda para obtener una clasificación pronta, además de programas de mantenimiento periódico sobre el sitio.

CONCEPTOS GENERALES

Página web:

Una página web, página electrónica o ciberpágina, es un documento o información electrónica capaz de contener texto, sonido, vídeo, pro gramas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada World Wide Web, y que puede ser accedida mediante un navegador. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación (acceso) a otras páginas web mediante enlaces de hipertexto. Las páginas web frecuentemente también incluyen otros recursos como ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.

Blogs:

Los blogs tienen las características de ser sitios web muy fáciles de gestionar, con una identidad personal, una temática concreta, una actualización más o menos frecuente de sus contenidos y dar la posibilidad de participar a otros usuarios con sus comentarios.

El término blog surge del inglés Weblog (diario web) y en castellano también se conoce con el término de Bitácora. El significado de bitácora es coincidente con los cuadernos de bitácora, que son cuadernos de navegación donde se van anotando de forma cronológica todas las incidencias que relatan un viaje.

El blog o bitácora puede ser gestionado por uno o varios autores donde se van colocando los post (publicaciones, artículos o entradas) para que puedan ser comentadas por otros usuarios (comentarios). Los post se colocan cronológicamente de forma inversa a su publicación, apareciendo siempre en primer lugar los últimos publicados. 

Navegador:

Es el programa que se utiliza para acceder a los contenidos de Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la información de Web. Los navegadores más populares son Internet Explorer, Mozilla Firefox, NetScape, Opera, Safari, etc.

HTTP (HyperText Transfer Protocol):

Es el protocolo de comunicación utilizado para transmitir las peticiones y archivos a través de Internet entre el servidor y el navegador. El protocolo http:// se indica en el inicio de la dirección. Si no se teclea este prefijo, el navegador lo añade de forma automática. 

URL (Universal Resource Locator):

Es la dirección donde se encuentra un recurso en Internet. Ejemplo: http://www.google.es. 

Si no se indica página html, el servidor enviará la página índice (index) o bien por defecto (default). Durante la navegación por Internet.

1.      El usuario, situado en el equipo cliente, teclea la URL en la casilla dirección del navegador y pulsa la tecla .

2.      La petición se dirige a los servidores DNS que traducen esta URL a una dirección IP. Por ejemplo: www.cnice.mec.es -> 195.53.123.85. Es posible situar en el navegador esta dirección aunque resulte más complicada e ininteligible.

3.      La petición llega al servidor que tiene esa IP.

4.      El servidor devuelve la página solicitada.

5.      El archivo HTML y los multimedia referenciados se almacenan en la carpeta caché del navegador (disco duro del equipo cliente). Cuando se han descargado estos activos entonces el usuario visualiza la página y todos sus elementos.

 HTML (HyperText Markup Language):

Es el lenguaje en el que se diseñan las páginas que se visualizan a través del navegador. Este lenguaje se basa en etiquetas (instrucciones que le dicen al navegador como deben mostrarse) y atributos (parámetros que dan valor a la etiqueta). Una página HTML contiene texto con un cierto formato y referencias a archivos externos que contienen imágenes, sonidos, animaciones, etc. 

Documentos HTML:

Un documento HTML es un fichero de texto ASCII en el que se incluye, además del texto que se

quiere mostrar en pantalla, ciertas directivas o etiquetas que indican, entre otras cosas, el formato del documento y la información relativa a los hiperenlaces.  Las etiquetas se escriben entre los signos '<' y '>' y generalmente se introducen por parejas, indicando el comienzo y el final de una acción. En este caso, la etiqueta final es similar a la inicial pero precedida por una barra '/'. Por ejemplo, la etiqueta

delante de un texto y la etiqueta detrás del mismo indican que el texto comprendido entre ellas se mostrará centrado con respecto a la página.

La mayoría de las etiquetas precisan de una de cierre, que delimite el alcance de la acción, si bien se presentan excepciones.

El texto del documento junto a las directivas HTML se puede escribir con cualquier editor ASCII y el nombre del fichero que contenga dicho documento tendrá como extensión los caracteres html o htm.

World Wide Web (WWW):

Es el sistema de presentación de la información más utilizado en Internet. Sus principales características son:

Hipertexto: Es texto o imagen que se muestra en la pantalla vinculada a otras páginas del mismo sitio o de sitios ajenos. Al situar el puntero del ratón sobre él, éste toma el aspecto de una mano. Al hacer clic se mostrará la página vi nculada al mismo.

Multimedia: En la pantalla aparece texto, imágenes, videos, audios, animaciones, etc.

Universalidad: Se puede acceder desde cualquier tipo de equipo o sistema operativo (Windows, Linux, Mac), usando cualquier navegador y desde cualquier parte del mundo.

Pública: Toda su información está distribuida en miles de ordenadores (servidores) que ofrecen su espacio para almacenarla. Es información pública y normalmente accesible por cualquier usuario.

Dinámica: Mucha información, aunque está almacenada, puede ser actualizada por el público que la consulta sin que el usuario necesite conocer detalles técnicos de su mantenimiento. Son las páginas activas: asp, php o jsp.

Servidor:

Los servidores web son aquellos cuya tarea es alojar sitios y/o aplicaciones, las cuales son accedidas por los clientes utilizando un navegador que se comunica con el servidor utilizando el protocolo HTTP (hypertext markup language).

Básicamente un servidor WEB consta de un intérprete HTTP el cual se mantiene a la espera de peticiones de clientes y le responde con el contenido según sea solicitado. El cliente, una vez recibido el código, lo interpreta y lo exhibe en pantalla.

Además los servidores pueden disponer de un intérprete de otros lenguajes de programación que ejecutan código embebido dentro del código HTML de las páginas que contiene el sitio antes de enviar el resultado al cliente. Esto se conoce como programación de lado del servidor y utiliza lenguajes como ASP, PHP, Perl y Ajax. Las ventajas de utilizar estos lenguajes radica en la potencia de los mismos ejecutando tareas más complejas como, por ejemplo acceder a bases de datos abstrayendo al cliente de toda la operación.