Herramientas de Desarrollo Web Informe

 

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………………………  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 mu chas 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 ccolumnas olumnas de ccontenido ontenido y alterar la tipografía utilizada, 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 C CSS SS para poder utilizar 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 de decidir cidir la tipografía que que utilizaremos e en n 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 revolucio revolucionado nado en el mundo de las las aplicaciones de representac representación ió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 p permite ermite compartir un mismo proyecto ccon on cuánta g gente ente 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 l os 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 util izació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 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 ti po 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 i nteresado en crear un negocio online y no se titienen enen 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 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 admin istrador de contenidos. • Proporcionar flexibilidad en la l a 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 c onstante 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 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 neg ocio 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 continuar con el present presente e informe se recomien recomienda da aprovechar la lass 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