INSTITUTO TECNOLÓGICO SUPERIOR DE PÁNUCO

División de Ingeniería en
Sistemas Computacionales

PROGRAMACIÓN WEB AVANZADA

PRACTICA FOUNDATION.

UNIDAD II. INTRODUCCIÓN A LAS TECNOLOGÍAS WEB.

MELO HERNÁNDEZ JAIME JAVIER IS16CO324

Titular de la materia:

Dra. Julia Patricia Melo Morín

Pánuco, Ver. 02 de Octubre de 2019

INTRODUCCIÓN.

En base a la práctica de Foundation explicada por mi compañero Moíses Salazar

García, daré una breve explicación de los pasos que realizamos con ella.

Principalmente, debemos descargar la librería, en este caso nuestro compañero

nos la paso, es un archivo zip el cual descomprimimos y se extraerán estos
archivos.

Lo siguiente a realizar, será abrir nuestro editor de texto, el cual en este caso será
SublimeText. Y escribimos las etiquetas para nuestra página a elaborar.

Seguido de eso, se importan las librerias de Foundation con el Stylesheets y sus

respectivos scrips.
Aquí procedemos a utilizar algunas clases principales que maneja Foundation
según mencionaba nuestro compañero. Creamos un menú donde utilizamos la
clase row de foundation.css para darle una mejor presentación al menú que se va
a mostrar en la página.

Al mismo modo se insertarán imágenes para obtener una presentación más

formal.
Obteniendo como principal, este resultado.

Para el siguiente punto creamos un slider que lo tomamos de la clase orbit donde
utilizamos las etiquetas ul y li para insertar las imágenes.
Implementando la clase large se le da un tamaño de cuantas columnas se
requieren que abarquen los objetos y por ende se puede hacer separaciones del
código con el comando div para así facilitarnos la vista y a realizar el contenido.
Añadiendo como paso final un footer en la página para su diseño.

Como resultado final, el diseño de nuestra pagina sería el siguiente.

Y este es nuestro resultado final de la práctica. Como se ve, Foundation al igual
que Bootstrap es un framework de interfaz de usuario responsive. Foundation
proporciona una cuadrícula responsive e incluye componentes de interfaz de
usuario HTML y CSS, plantillas, y fragmentos de código, incluyendo tipografía,
formularios, botones, barras de navegación y otros componentes de interfaz
usuario, así como extensiones de JavaScript opcionales.

Que gracias a estos frameworks nos facilitan más nuestro desarrollo en el

diseño web de nuestros proyectos.