Una vez que tenemos nuestra plantilla de Bootstrap, es hora de empezar a programar nuestra Web. Modificaremos el código de nuestra plantilla para adaptar su diseño a lo que queremos de nuestra Web. Usaremos muchas funcionalidades que nos proporciona la plantilla, creando y eliminando contenidos a nuestro gusto y haciendo uso de los plugins JQUERY para dotar de cierto dinamismo a nuestra Web.
El resultado final de nuestra Web se puede ver en
http://construccionesenessa.tk. A continuación, explicaremos paso a paso como hemos programado el código para obtener nuestro resultado.
En la presentación de la página Web vamos a ver 3 elementos distintos: el encabezado informativo, el menú y el contenedor de presentación con el carrusel de noticias.
Observamos que se trata de una fila (row), que se divide en 2 partes de 6 columnas, es responsive ya que se adapta dependiendo del tamaño del dispositivo. El primer contenedor de la fila contiene el teléfono de contacto y el fax de la empresa en una lista y el segundo un botón de contacto y el botón de búsqueda.
Vemos que se trata de otra fila que se subdivide en un contenedor alineado en la parte izquierda que contiene el logotipo empresarial y otro contenedor alineado en la parte derecha que contiene el menú implementado mediante el plugin superfish. Una característica importante de este menú es su adaptabilidad a los dispositivos, podemos observar que para dispositivos grandes se muestra el menú completo mientras que para dispositivos móviles o más pequeños se muestra un menú desplegable.
Se muestra la implementación del primer elemento del menú "La Empresa" que además es desplegable y contiene 3 sub-elementos: "Información Corporativa", "Nuestro Equipo" y "Filosofía". El resto de elementos del menú se implementan de forma análoga.
Cabe destacar que en esta primera versión de la Web la mayoría de los enlaces no están operativos, en un futuro se implementarían redirigiendo los elementos a otras páginas html de la propia Web.
Este contenedor es lo primero que vemos al entrar en la página, su función es ser llamativo y causar una buena primera impresión. Consta de 2 elementos un contenedor informativo y un carrusel de noticias.
El contenedor informativo es simple, vemos un título dando la bienvenida a la página web y un subencabezado con un slogan. Destacamos el uso del plugin JQUERY stellar.js que dota de un cierto dinamismo a la imagen de fondo cuando nos desplazamos.
El Carrusel de noticias se implementa haciendo uso del plugin owl-carousel de la manera que vemos, se ha añadido a modo de ejemplo la implementación del primer elemento de noticias, el resto siguen el mismo esquema análogo.
Para hacer uso del carrusel se añade a la lista que contiene los elementos de las noticias el id="pm-presentation-owl" para posteriormente haciendo uso de JQUERY activarlo en el main.js siguiendo la documentación de owl-carousel de la siguiente manera.
Después se añaden las funcionalidades que queramos, en este caso, la fecha de publicación de la noticia, una breve introducción a la noticia, una imagen de fondo y un hover que al situar al ratón encima de la noticia nos muestre una descripción más detallada sobre ella.
Seguimos navegando por la página web y lo siguiente que nos encontramos es un panel que describe los servicios ofrecidos por la empresa y otro panel que explica la filosofía, los valores morales y éticos de la empresa. Vamos a analizarlos más en detalle:
Vemos como se implementa el primer elemento o servicio, el resto se programan de la misma forma. Dentro de la misma fila, dividimos el espacio en 3 contenedores de tamaño 4 filas y situamos el icono deseado y los comentarios que queremos que aparezcan.
- Panel "Filosofía de Empresa"
Vemos que este panel esta implementado mediante el plugin wow.js que hace que cuando llegas al punto de visibilidad del panel, los elementos aparezcan dinámicamente, vemos que podemos cambiar la velocidad, duración, etc.
En la parte superior del panel observamos un ejemplo de uso de icono a través de la tipografía Font-Awesome y su inclusión siguiendo la documentación que ofrece el plugin.
A continuación vemos un panel de estadísticas de la empresa y otro carrusel que muestra una serie de clientes importantes para los que trabaja la empresa. Vamos a analizarlo:
Vemos otro vez el uso de los plugins stellar.js y wow.js para dar dinamismo a este panel. Consta de un icono de Font-Awesome que delimita el panel, un contenedor informativo que te introduce las estadísticas y vemos un elemento de los 4 que proporcionan las estadísticas. El resto siguen el mismo esquema.
Las cajas de estadísticas se muestran dinámicamente al llegar a la sección mediante Wow, como ya hemos visto anteriormente. Se muestran dentro de un div en el que en el CSS se ha añadido una imagen triangular. En otro div añadimos una pequeña descripción de la estadística mostrada.
La implementación del carrusel es idéntica a la realizada anteriormente en el carrusel de noticias, y su activación en main.js es igual que la del carrusel de noticias. Vemos el primer elemento del carrusel, consta de la imagen de la empresa y un enlace a su página web. Cabe la posibilidad de añadir una pequeña reseña para destacar el cliente como importante, implementada en el CSS.
Llegamos a uno de los elementos operativos de la página, un formulario para poder solicitar un puesto de trabajo en la empresa. Su implementación HTML es la siguiente:
Se trata de un formulario estándar HTML, donde hemos dividido el espacio en 2 contenedores de 6 columnas. En el primer contenedor se sitúan los datos personales requeridos agrupados bajo un fieldset. En el segundo se solicitan los datos profesionales tales como el CV o el puesto de trabajo solicitado bajo un selector.
Una vez introducidos los datos correctamente y pulsado sobre el botón de enviar, la web nos redirige a una página html fija, que es la siguiente:
Vemos que esta página sigue el formato de la página principal, mismo estilo, mismo menú y mismo pie de página. El contenido de la página es una tabla a la que se ha añadido el CSS apropiado para que sea acorde con el estilo de la página. Esta tabla recoge los puestos vacantes que se ofertan en la empresa así como una breve descripción sobre el perfil profesional que se busca. Si hay plazas vacantes existe la opción de Solicitar una entrevista para ese puesto, si no los hubiese se da la opción de inscribirse en una base de datos de la empresa, para si en un futuro quedase una plaza vacante poder contar con el solicitante.
El código HTML es sencillo, posteriormente lo complementamos con el CSS.
Vemos el encabezado de la tabla y la primera fila, siguiendo el esquema de tabla HTML normal. Una parte del CSS de la tabla lo vemos a continuación:
Observamos que se aprovecha el pie de página, para introducir gran cantidad de información. Volvemos a ver una breve descripción de la empresa acompañada de unos enlaces a los servicios ofrecidos. También se ha aprovechado el pie de página para introducir todas las redes sociales en las que la empresa es activa, vemos los últimos tweets publicados por la cuenta de la empresa y más abajo los enlaces a las diferentes redes sociales.
También se incluye un formulario para subscribirse a la newsletter de la empresa. Por último al final se incluyen los derechos de CopyRight de la página Web y un pequeño menú.
La implementación es sencilla, vemos el uso de Font-Awesome una vez más y el carácter responsive y adaptativo de los contenedores.
Haciendo uso del plugin Twitterfeed y del CSS del mismo, es sencillo añadir unos tweets a la página Web. El plugin es proporcionado por Twitter.
Vemos la implementación de los enlaces a las redes sociales haciendo uso de Font-Awesome y el posterior formulario para solicitar inscribirse a la newsletter.
Por último añadimos el copyright en el que detallamos el diseñador web que ha desarrollado la página, en este caso nosotros mismos, y un enlace en este caso de la ETSIT, marco donde se ha desarrollado el proyecto. No nos olvidamos de hacer alusión a quien nos ha brindado la plantilla de Bootstrap.
Asimismo, la implementación del menú se realiza de forma normal.
Con esto damos por finalizada la construcción de la página Web, en lo referente a la estructura y el estilo que sigue. Más adelante introduciremos mejoras haciendo uso de formularios dinámicos, bases de datos, etc.
Espero que este ejemplo y tutorial hayan servido de ayuda para ilustrar el procedimiento de la construcción de una página Web.
