Imagen1. Diseño Web
El diseño y desarrollo de un sitio web implica un arduo trabajo, ya que además de tener conocimientos previos sobre lenguajes de programación, implica tiempo y recursos económicos. A lo largo del tiempo la tecnología ha ido creciendo exponencialmente, haciendo nuestras vidas más fáciles, ya que ha permitido la automatización de tareas o actividades. En la era digital un sitio web enfocado a un tema en particular determina el futuro de una organización, empresa, negocio o persona, debido a que se obtiene publicidad a gran escala, interacción con el público, reconocimiento, entre otras ventajas.
BOOTSTRAP TU MEJOR AMIGO PARA TU SITIO WEB
Imagen2. Bootstrap
De seguro te preguntaras: ¿Qué es Bootstrap? En resumen, Bootstrap es un framework, que te permitirá crear interfaces web estilizadas con CSS y JavaScript, pero la ventaja más importante o su particularidad es que tiene la capacidad de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta de manera automática al tamaño de una PC, celular u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo.
Si no conocías este framework, ahora ya lo conoces, sabes cómo te ayuda en el desarrollo de tu sitio web y si nunca lo has utilizado puedes revisar la documentación de como descargarlo o implementarlo en la página de Bootstrap (https://getbootstrap.com/docs/4.4/getting-started/download/). En la página oficial de Bootstrap puedes encontrar como implementar varios componentes a tu sitio web, ejemplos, iconos, temas, entre otros contenidos que facilitarán tu adaptación a este framework.
MDBOOTSTRAP EL ALIADO DE BOOTSTRAP
Imagen3. MDBootstrap
MDBOOTSTRAP (Material Design for Bootstrap) es un sitio web ( https://mdbootstrap.com/ ) que proporciona material para el diseño con el framework de Bootstrap y entre otra documentación, que incluye sus propias librerías. Este sitio web te permitirá mejorar la apariencia de tus páginas web, podrás encontrar diseños para tablas, layout, alertas, paneles, modals, carruseles de fotografías entre otros materiales, pero lamentablemente existen recursos que no son gratuitos, en su mayoría presenta excelentes materiales de diseños gratuitos, lo cual es una gran ventaja ya que no inviertes dinero y tienes material de calidad que en realidad ayudarán al diseño y desarrollo de tu sitio web, en base a tus necesidades.
NO EMPIECES DESDE CERO BOOTSTRAPMADE
Imagen4. MDBootstrap
No siempre empezar de cero es bueno, el tiempo es el mayor enemigo para el desarrollo de un sitio web ya que no conlleva unas horas, porque a veces obtienes errores que toman tiempo en solucionarlos y codificar lleva su debido tiempo. Tú puedes empezar tu sitio web con una guía es decir puedes utilizar las diversas plantillas existentes en la web, pero nada es tan sencillo. No es simplemente descargar una plantilla y adaptarlo a tus necesidades, sino que es necesario entender parte del código para configurarlo según lo que tú desees con éxito, caso contrario obtendrías errores, conflictos con los estilos, entre otros problemas.
Utilizar plantillas en mi opinión personal es una salvación porque ahorras tiempo, obtienes un sitio web con una apariencia profesional, siempre y cuando tengas los conocimientos previos para entender fácilmente parte del código, así no se vuelve complejo adaptarlo a la temática de tu sitio web. BOOTSTRAPMADE (https://bootstrapmade.com/ ) es un sitio web especializado en el diseño y creación de plantillas para sitios web gratuitas, elegantes, limpias y hermosas utilizando Bootstrap, el marco HTML, CSS y JS más popular.
ALOJAMIENTO EN LA WEB GRATUITO
Si quieres que tu sitio web se encuentre alojado en la web y que desde cualquier sitio sea accesible, hay que tomar en cuenta que para ello se necesitaría comprar un dominio, cumplir con los estándares web y comprar un hosting. Lo cual conlleva invertir dinero, muchas veces no se cuenta con el factor económico y es ahí donde surgen el alojamiento web gratuito; si investigas en internet existen varios sitios que ofrecen este servicio, cada uno con ventajas y desventajas. A continuación, podrás conocer dos sitios web que ofrecen este servicio, los cuales será descritos brevemente y se incluye la experiencia adquirida al utilizarlos.
HEROKU
Heroku ( https://www.heroku.com/ ) es un servicio que permite publicar aplicaciones en Internet sin necesidad de preocuparnos por configurar servidores, adquirir dominios, etc. Cuenta con un plan gratuito que, aunque tiene algunas limitaciones, es más que suficiente para empezar. También existen planes pagos para aplicaciones en producción que necesiten más procesamiento y/o memoria.
Imagen5. HEROKU
TONOHOST
Tonohost ( https://tonohost.com/ ) ofrece hosting gratuito, ilimitado, sin publicidad y de calidad, brinda un alojamiento web para que puedas subir tus páginas web. Puedes crear bases de datos con MySQL y subir tus sitios de PHP. Pero si necesitas hosting premium para un negocio también tienen varios planes para llevar tu empresa al éxito.
Ahora que conoces estos sitios web, en base a la experiencia vivida. Heroku al principio no es simple de implementar, tiene funcionalidades que permiten mejorar la experiencia del usuario, pero son pagadas, además la edición y administración de documentos no es tarea sencilla, sobre todo porque va de la mano con GitHub. Por otro lado, encontramos a Tonohost, que en una opinión personal es fácil de utilizar, únicamente se necesita registrarse y con ello se obtiene acceso al panel completo de herramientas donde podrás administrar la base de datos, editar tu sitio web, entre otras funcionalidades.
Imagen6. TONOHOST
DONARCOMPUPS – APLICACIÓN WEB
La Universidad Politécnica Salesiana juntamente con los estudiantes de las carreras de Ingeniería en Ciencias de la Computación e Ingeniería en Sistemas, llevan un proyecto enfocado la recolección de equipos tecnológicos, los cuales serán revisados, reparados y entregados a los estudiantes del Proyecto Salesiano Chicos de la Calle y en riesgo y de la Unidad Fisco-misional María Auxiliadora.
La recepción de donaciones requiere llevar a cabo un proceso de registro para lo cual se plantea la creación de una aplicación que permita automatizar dicho proceso y a su vez que los usuarios a cargo del proyecto sean capaces de controlar, administrar y visualizar cada una de las donaciones. Adicionalmente el usuario que aportó con algún dispositivo al proyecto, a través de un código enviado a su correo electrónico, podrá visualizar el Tracking de cada dispositivo, es decir que se proporcionará un detalle sobre el estado de su dispositivo.
Un proyecto interesante, ¿verdad? Ahora a continuación se presenta algunas páginas web que forman parte del sitio web Donar – CompUPS, las cuales fueron construidas utilizando las herramientas que se presentaron en este artículo. Se proyecta que a futuro la aplicación web crezca juntamente con las necesidades que surjan en el proyecto.
HOME PAGE - Donar CompUPS
Imagen7. Home Page
La mayoría de sitios web por no decir todos cuentan con un Home Page, el cual debe ser atractivo a la vista de los usuarios con la finalidad de dar una buena impresión. En la imagen se presenta el Home Page creado para el sitio web de Donar CompUPS.
QUIENES SOMOS – Donar CompUPS
Imagen8. Nosotros
Esta sección es muy importante para cualquier sitio web, como podrás imaginarte según en nombre de la sección o visualizar su contenido en la imagen, se trata de información sobre la empresa, entidad, tema específico, es decir que tiene como finalidad dar a conocer a una persona, empresa, negocio, etc. En el caso del sitio web dirigido al proyecto Donar CompUPS se presenta el objetivo del proyecto, a quien está dirigido, es decir todo acerca del proyecto.
GALERIA DE FOTOS - Donar CompUPS
Imagen9. Galería
Como puedes ver en la imagen, es posible implementar una galería de fotos con ayuda de Bootstrap. Para el proyecto esta galería está enfocado a mostrar al usuario la comunidad a la que se está ayudando y las donaciones que han sido recibidas.
FUNCIONALIDAD USUARIO INVITADO
Imagen10. Tracking donaciones
Como lo le liste anteriormente el usuario que realizó una donación podrá visualizar un Tracking de cada dispositivo donado, es decir verificar su estado. Puedes apreciar en las imágenes que el usuario accederá a su tracking solo si posee su código, el cual si es correcto lo enviará a una página donde se desplegará la información en formato de tabla.
En este artículo se mencionó algunas herramientas y recursos muy útiles para el desarrollo de un sitio web en base a las experiencias propias, de seguro existen muchas más en internet; si no las conocías pruébalas o puedes encontrar otras en internet. El proyecto presentado fue tomado como ejemplo, por ello se presentó algunas secciones del sitio web, para que puedas observar las páginas web estéticas que puedes construir utilizando Bootstrap y en sí que puedes implementar muchos componentes a tu sitio web.
Escrito por:
Andrea GonzálezAnthony Tandalla
No hay comentarios:
Publicar un comentario