Instituto No Gubernamental María Auxiliadora

Catedrático: José Elías Maldonado

INTEGRANTES: Gustavo Lara

Denilson Mejía
Josué Castro
Enrique Martínez
Freddy Diaz
Daniela Cortes
Fabiola Escobar
Isis Domínguez

Asignatura: Diseño Web

Trabajo: Herramientas de desarrollo web

Grado: III BTP Info

Sección: A

Jornada: Isemed

Fecha de entrega:20/07/2018
 ÍNDICE

Introducción……………………………………………………………………… (1)

Objetivos específicos…………………………………………………………… (2)

Objetivos generales ……………………………………………………………… (3)

Marco teórico…………………………………………………………………… (4-11)

Conclusiones………………………………………………………………… (12-13)

Recomendaciones…………………………………………………………… (14)

Anexos………………………………………………………………………… (15-16)

Bibliografía……………………………………………………………………… (17)
 INTRODUCCIÓN

Hoy en día todos tenemos una web en nuestras empresas y quien no tenga una
web estará pensando en crear su propia página web para su negocio. Por esta
razón es por la que el mercado del desarrollo web está en alza y por la que hay
tantos profesionales que se dedican a esta profesión.

En el momento que queremos empezar con el desarrollo de una web tenemos

que tener muchas cosas claras, diseño, colores, tipografías, organización,
palabras clave… Por suerte para nosotros, tenemos muchas herramientas que
nos ayudarán en estas tareas. A continuación, voy a mostrar una lista con las
mejores herramientas para el desarrollo web.

1
 OBJETIVOS ESPECÍFICOS

 Empezamos con lo más importante de todo, el dominio de nuestra web.

Esta herramienta de búsqueda de nombres de dominio incluye más de 6
millones de palabras y más de 20 generadores de dóminos.

 Podremos crear dominios cortos, mezclar varias palabras en un domino y

también nos puede dar algunos consejos de SEO.

 Podremos crear columnas de contenido y alterar la tipografía utilizada,

escogiendo en el menú lateral el proveedor de las fuentes escribiendo
cualquier tipo de texto para ver los resultados directamente en la web.

 Finalmente podremos obtener el código CSS para poder utilizar estas

fuentes en sus páginas web, con la total certeza de que tus usuarios
cargarán la fuente y verán el mismo resultado que tú.

2
 OBJETIVOS GENERALES

 El objetivo de esta es decidir la tipografía que utilizaremos en los textos

que publicaremos en la web de una forma sencilla y rápida de la misma
forma como haríamos con los editores de texto y fotografía.

 Se ha revolucionado en el mundo de las aplicaciones de representación

de prototipos. Transformaremos nuestros diseños en prototipos
interactivos con transiciones y animaciones web dotando de un realismo
a nuestros mockups.

 Además, nos permite compartir un mismo proyecto con cuánta gente se

desee por lo que resulta muy práctica a la hora de que este pueda
previsualizar e interactuar con el diseño de su web antes de comenzar
con el desarrollo web.

3
 MARCO TEORICO
Para crear una empresa online y hacerla visible de una forma rápida y sencilla,
se deben seguir los consejos, recursos y herramientas para diseño web que se
van a explicar a continuación. En muchas ocasiones, se necesita echar mano de
recursos tanto de diseño como de desarrollo web, ya que el nivel de
conocimiento de diseño o código no es el más adecuado para ponerse a
programar desde cero. Incluso, es más, en muchísimas ocasiones, existen casos
de emprendedores que han abierto su negocio con páginas web creadas a partir
de estos recursos y sin tener conocimiento alguno de desarrollo web, por lo que
se proponen dar el paso de crear una línea de negocio con las apps móviles y
vuelven a utilizar este tipo de recursos que se pueden encontrar en la Red.

Sin embargo, se debe recordar que, si lo que verdaderamente se desea

conseguir es un proyecto profesional optimizado, con un buen diseño y que
pueda reportar informes de gestión que ayuden a mejorar la interfaz de usuario
y su experiencia durante la visita o compra, habrá que contratar los servicios de
un profesional del sector. Pero, si, por el momento, no se prevé suficiente
presupuesto o uno desea probar estas herramientas gratuitas para más tarde
profesionalizar el negocio, es importante distinguir entre las siguientes
herramientas y entender su funcionamiento.

Para la creación y el desarrollo de un proyecto web hacen falta 3 tipos de

herramientas:

Por un lado, existen las herramientas esenciales, que son aquellas que van a
ayudar a crear la plataforma web (en código puro y duro o con un CMS) sobre la
que se va a construir el negocio. Sin la existencia de dicha plataforma no se
podrá crear el negocio online y, obviamente, el resto de recursos no tendrá
utilidad alguna. De ahí que se hayan denominado como esenciales o básicas.

4
De cara a embellecer esta plataforma, se necesitará una serie de recursos para
mejorar el diseño web y, por consiguiente, facilitar a la plataforma un aspecto
con cierto atractivo y que consiga atraer de manera visual a los usuarios. La
imagen que perciban los usuarios cuando visiten la página debe ser lo más
ajustada posible a lo que se desea mostrar, ya que esta será la tarjeta de visita
online del negocio.

Por último, si se desea tener presencia en las App Sores de los distintos
dispositivos móviles, habrá que utilizar una serie de herramientas que permitan
transformar o crear el negocio en app y funcionen correctamente para los
distintos dispositivos que se pueden encontrar en el mercado. O, por lo menos,
para los más utilizados.

Herramientas que facilitan el desarrollo web

Herramienta Diseño Web

Existen infinidad de herramientas, tanto gratuitas como de pago, que ayudan a

crear una plataforma web en cuestión de minutos y sin tener apenas idea de
código o programación. De todas las herramientas que se pueden encontrar en
el mercado, se van a seleccionar unas pocas, que sean gratuitas y sirvan para
poder crear un proyecto profesional útil, fácil y dinámico.

Si el negocio requiere cierta programación, aunque no se posean grandes

conocimientos, se pueden utilizar herramientas de desarrollo web como
Témplate y HTML5 UP. Estas herramientas, además de ser totalmente gratuitas,
proporcionan una cantidad elevada de plantillas en HTML5 y CSS ideales para
comenzar con el negocio y total libertad para modificarlas.

5
Es más, la gran mayoría de plantillas que se pueden encontrar en Témplate es
'responsiva', es decir, que los usuarios que visiten la página a través de su móvil
verán la página web adaptada a las dimensiones de dicho dispositivo.

Otra opción sería utilizar aplicaciones gratuitas que proporcionan los servidores
de hosting. Al tener que contratar un hosting en el que alojar la web, se pueden
utilizar las herramientas que ellos mismos proporcionan para crear una web en
varios pasos y con distintos diseños a elegir y fáciles de mantener. Esta opción
es rápida y sencilla, pero es importante saber que, si se cambia de hosting, se
perderá la web y habrá que comenzar de nuevo en otro hosting.

La opción más avanzada sería utilizar un CMS gratuito del tipo de WordPress,
Joomla o Drupal; o, si el negocio está enfocado a ser una tienda virtual,
PrestaShop o Magento. Todas las plataformas anteriormente nombradas son
gratuitas y su instalación es relativamente fácil en el servidor, aunque requieren
de conocimientos web, ya que, para su correcto funcionamiento, hay que activar
módulos y plantillas. Tanto los módulos como las plantillas para este tipo de CMS
son gratuitas, pero, si se necesita algo más personalizado o con mayor nivel de
profesionalización, existen recursos de pago que se acoplen a las necesidades
del negocio.

Si finalmente uno se decanta por esta opción, que es una de las más completas
y controladas, hay que tener en cuenta que la instalación de módulos, plantillas
y plugins no se debe realizar de manera indiscriminada. Cada vez que se instala
cualquiera de estos recursos se están añadiendo líneas de código al sistema y,
por tanto, se puede ralentizar la carga de la página.

Es por eso que se recomienda siempre mantener el código lo más limpio que se
pueda. En este caso, si se instalan únicamente aquellos recursos que vayan a
estar activos en el panel, eso permitirá la optimización de la carga de la página
y, finalmente, la velocidad de carga será sensiblemente menor.

6
Como pequeño apunte, hay que indicar que se destaca la velocidad de carga
frente a otros factores que pueden afectar al SEO de la página, puesto que es
uno de los factores sobre los que se puede tener control sin apenas poseer
conocimiento. Siempre hay que cuidar, en la medida de lo posible, aquellos
aspectos que puedan ayudar a posicionar el negocio en las primeras páginas del
ranking de los distintos buscadores, entre los que se encuentran el archiconocido
Google, ¡¡¡¡¡¡Yahoo!!!!!!!, Bing y Yandex (este último cada vez se está integrando
más en el mercado, ya que el mercado ruso está cada vez más en expansión).

Herramientas de diseño web para hacer más atractiva la experiencia del usuario

Mockup Web

La primera opción, como herramienta para el diseño web, es la utilización de un

software como Photoshop, InDesign, Corel o similares. Estas herramientas,
aparte de requerir unos avanzados conocimientos en diseño, son de pago.

Como primer paso, es necesario tener una idea acerca de cómo se desea que
sea el logo con el que se identifique el negocio o la marca. Si todavía no está
creado el logo y no se poseen conocimientos para diseñar uno con calidad, se
aconseja la utilización de Squarespace Logo y se podrá crear el logo en dos
pasos. Primero se coloca el texto que irá en el logo (la marca o el nombre de la
empresa o, incluso, un breve slogan) y después se adjunta una imagen sencilla,
pero que identifique perfectamente a la empresa o actividad comercial. Si, por el
contrario, no existe una idea formada de lo que se desea como logo, se puede
utilizar la herramienta de diseño de logos gratuita Withoomph, que solicita que
se escriban unas cuantas palabras clave que identifiquen el negocio para poder
mostrar varios diseños sugeridos por la misma aplicación. Aunque la idea es fácil
y permite modificar algunos diseños mostrados, se puede correr el riesgo de
seleccionar un logo que otra persona también haya solicitado a la aplicación
(aunque la probabilidad de que ocurra esta opción es mínima).

7
Respecto a la decoración de los productos, artículos y demás contenidos, se
necesitarán unos pequeños bancos de imágenes (en este caso, gratuitos), que
faciliten imágenes con un diseño muy cuidado y harán aún más atractivo el
contenido. Para ello, se pueden visitar páginas como:

Pixabay: hay multitud de imágenes gratuitas y solo hay que citar a la fuente. La
gran mayoría de los recursos fotográficos proviene de usuarios de habla inglesa,
por lo que, si la búsqueda se realiza en dicho idioma, se conseguirá una
respuesta mejor.

Bajstock.com: fotografías muy cuidadas, ya que los autores son fotógrafos

profesionales o amateurs. Al igual que con la anterior, se debe citar al fotógrafo
para poder utilizarlas.

Freedigitalphotos.net: es un banco de imágenes gratuito y bastante amplio. Lo

único que exige es citar la autoría de la imagen para no tener problemas con sus
derechos.

Freeimages: está considerado uno de los bancos de imágenes más populares,

entre los recursos gratuitos de diseño. Posee más de 350.000 fotos gratuitas de
gran calidad y que se pueden utilizar sin coste alguno. Además, esta plataforma
la utilizan muchos profesionales para dar a conocer su trabajo, por lo que se
encuentra un material gráfico muy cuidado.

Desarrollo Web

Al ser más extendida la forma de programar de Android, su fácil adaptación de

la web a la aplicación hace que existan mayores recursos para Android que para
Iphone.

8
A diferencia de las anteriores, la herramienta para crear apps móviles UppSite
no solo permite crear una app del negocio para los tres sistemas operativos
principales (Android, Apple y Windows Phone) de los dispositivos móviles y
distribuirla en las dos grandes tiendas (App Store (Apple) y Google Play
(Android)), sino que también la distribuye en su propia tienda online.

Un paso más sería la siguiente herramienta que permite desarrollar y diseñar

apps que funcionen en cualquier dispositivo móvil. Mobincube facilita una
cantidad de plantillas que se pueden utilizar para crear una aplicación móvil y
conseguir un diseño y desarrollo más completos y que funcionen en todo tipo de
smartphones del mercado.

Mockflow es una herramienta esencial para crear una plataforma para Android o
iPhone sin necesidad de tener conocimientos de programación o diseño.
Además, a diferencia del resto de herramientas que hasta el momento se han
detallado, esta posee un sistema 'drag and drop' por el que se puede construir la
plataforma simplemente arrastrando los recursos de un lado a otro de la pantalla.
Es muy intuitiva y fácil de utilizar.

De modo que, si se está interesado en crear un negocio online y no se tienen los

conocimientos necesarios de programación y diseño, existen distintas
herramientas y recursos que facilitarán la labor de diseño y desarrollo web. Estos
recursos pueden ayudar a comenzar el camino online, pero, si se desean
recursos más profesionales que puedan ayudar en la gestión, producción y
distribución, se aconseja contratar los servicios de un profesional del sector que
oriente y realice las modificaciones pertinentes en los recursos y herramientas
que se hayan utilizado.

9
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 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 automatizado 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.

10
Libérela

Libérela es una sencilla herramienta que te ahorrara millones de clics 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.

11
 CONCLUSIONES

La herramienta de software implementada en este informe de grado puede

impactar positivamente la manera en que se desarrollan sitios Web, esto debido
a la capacidad de integrar dos arquitecturas con características diferentes con el
fin de aprovechar las funcionalidades tanto en el aspecto de presentación
dinámica y amigable al usuario final, como en el aspecto de la eficiencia en el
almacenamiento y manejo de contenido.

Se halló que el uso de esta herramienta puede:

• Permitir la administración de los contenidos de los sitios Web de una manera

sencilla y organizada por medio del administrador de contenidos.

• Proporcionar flexibilidad en la estructura de los contenidos de la presentación,

con la capacidad de crear, eliminar y editar nuevas imágenes, contenidos,
escenas y otros componentes de un sitio Web.

• Facilitar la actualización constante de los contenidos de una presentación por

parte de usuarios finales que no necesariamente necesitan conocimientos
técnicos con respecto al desarrollo de aplicaciones Web.

• Actualizar de una manera inmediata las modificaciones hechas en el

administrador de contenidos de las diferentes presentaciones.

• Facilitar la adaptación de presentaciones a las necesidades específicas de los

clientes potenciales.

Como producto comercializable el Manejador de Contenido es una idea

innovadora que actualmente no se encuentra disponible en el mercado y que
puede ser distribuida fácilmente en empresas desarrolladoras de aplicaciones
Web a la medida para que así estas puedan ofrecer la herramienta como un
valor agregado en sus productos ya que esto permite una administración
directa y fácil de los contenidos por parte del cliente.

12
En el momento de implementar la solución propuesta en el presente informe,
además de una labor de desarrollo de software se realizó una actividad de
investigación de tecnologías de desarrollo Web que permitió descubrir una gran
variedad de funcionalidades que pueden ser implementadas contando con la
base conceptual desarrollada en este trabajo de grado.
Funcionalidades tan innovadoras como:
• El hecho de poder elaborar estrategias de negocio que conozcan las
preferencias de los clientes al momento de visitar un sitio determinado.
• Catálogos dinámicos de productos actualizados remotamente vía Web para
aplicaciones de escritorio sin necesidad de hacer una modificación costosa, tanto
en tiempo como en implementaciones, de los archivos fuentes.

13
 RECOMENDACIONES

Al momento de continuar con el presente informe se recomienda aprovechar las

funcionalidades ya desarrolladas y expandirlas de tal forma que los servicios
Web no solo proporcionen métodos de consulta sino también de
almacenamiento de los datos desde la presentación, este beneficio abre la
puerta a muchas ideas innovadoras que pueden ser aprovechadas por el
desarrollador de la presentación ya que puede almacenar cualquier tipo de
información suministrada por el visitante del sitio.

Implementar nuevos módulos a las funcionalidades que provee la integración de

las dos arquitecturas, módulos tales como administradores de encuestas,
graficadores, foros y demás utilidades características de los sitios Web,
orientándolos a un entorno gráfico más rico en dinamismo presentación.

14
ANEXOS

15
16
 BIBLIOGRAFÍA

herramientas de desarrollo web. (2016, 2 agosto). Recuperado 20 julio, 2017, de

scribbr.es
V. I. E. R. (2017, 24 julio). diseño web. Recuperado 1 febrero, 2015, de aula
Pineda, M. A. U. R. O. (2015, 10 marzo). diseño web. Recuperado 20 septiembre,
2014, de tutorialesenlinea.es

17