Instituto Tecnológico Superior

de Nochistlán

Ingeniería en Sistemas Computacionales

Interfaces Web
Tarea:
“Reporte de Practicas 3 Creación de Interfaces
web herramientas”
Presenta:
Cristian Lozano María
17050200
Docente:
Jesús Damián López
Nochistlán de Mejía, Zacatecas. Junio de 2020
Índice
Introducción ...................................................................................................................................III

Practica 1 Logotipo, icono, tarjeta de presentación, Banner y Cartel publicitario ..................... IV

Diseño del Logo en Photoshop ................................................................................................... IV
Resultado final del logo .............................................................................................................. IV
Icono ............................................................................................................................................. V
Banner .......................................................................................................................................... V
Tarjeta de Presentación .............................................................................................................. V
Cartel Publicitario ......................................................................................................................... VI
Practica 2 Página web HTML5 y CSS3 ......................................................................................... VIII
Código HTML ............................................................................................................................ VIII
Código CSS .................................................................................................................................... X
Resultado final de la práctica ................................................................................................... XIV
Practica 3 Página web Bootstrap .................................................................................................. XV
Código ......................................................................................................................................... XV
Resultado de la Práctica ........................................................................................................... XVIII
Practica 4 Página web Materialize.................................................................................................. XIX
Código HTML: ................................................................................................................................. XIX
Código css: ................................................................................................................................... XXIII
Resultado de la Práctica: ............................................................................................................. XXVII

Conclusión ............................................................................................................................... XXVIII

II
Introducción
La interfaz de un sitio es algo muy importante, de eso depende la facilidad con la que los
usuarios podrán relacionarse a él sitio web, entre más fácil y de mayor utilidad sea nuestro
sitio podrá ser más exitoso. No olvidemos que como en software lo interior no lo es todo,
claro es muy importante, pero también lo exterior cuenta mucho, porque es la carta de
presentación de muchas industrias, empresas y negocios de la actualidad. Es decir
siempre que nuestra página web sea más bonita e intuitiva podemos llamar la atención
aún más de nuestros usuarios, con esto también se suman ventas, clientes a empresas y
negocios, influencers o bien visitas a nuestro sitio. De ahí parte lo interesante e importante
de la imagen o interfaz de un sitio web.

En este reporte de prácticas mi propósito es presentar algunas herramientas que nos

ayudan en el diseño, atreves de algunos ejercidos o ejemplos que realice en Photoshop
donde creo la identidad de una marca que es el logotipo, realizo un icono, una carta de
presentación y un cartel publicitario tipo poster. Así mismo en este reporte integro prácticas
que utilizan herramientas para la mejora del diseño web como lo es css combinado con
HTML, Boostrap. Con el propósito de incentivar el conocimiento acerca de la creación de
contenido web, así mismo integro un ejemplo de la aplicación de cada uno de estas
herramientas.

III
Practica 1 Logotipo, icono, tarjeta de presentación, Banner y
Cartel publicitario
Diseño del Logo en Photoshop:
Esta práctica es un logotipo realizado en adobe Photoshop con ayuda de pinceles, imágenes,
herramienta pluma, degradados, sobras y texturas y otras herramientas para así lograr el resultado
final que se puede apreciar en las siguientes imágenes.

Resultado final del logo:

IV
Icono:

Banner:

Tarjeta de Presentación:

V
Cartel Publicitario

VI
Cartel Publicitario:

VII
Practica 2 Página web HTML5 y CSS3
Código HTML:

VIII
IX
Código CSS:

X
XI
XII
XIII
Resultado final de la práctica:

XIV
Practica 3 Página web Bootstrap
Código:
En esta práctica presento una pequeña página web realizada con la ayuda de la herramienta
Bootstrap.

XV
XVI
XVII
Resultado de la Práctica:

XVIII
Practica 4 Página web Materialize

Código HTML:

XIX
XX
XXI
XXII
Código css:

XXIII
XXIV
XXV
Nota: si necesita que le comparta la práctica original me dice por favor.

XXVI
Resultado de la Práctica:

XXVII
Conclusión:
El hecho de utilizar Photoshop me gustó mucho realice un logo que lleva el nombre
“Tenamaxtli”, en mi concepto este logo lo he creado para ser la imagen de un video juego
de guerra, que en un futuro, es uno de mis propósitos crear este juego al cual le dará
identidad mi logotipo. De igual manera utilizando el mismo logo cree un icono, así mismo
cree una tarjeta de presentación y un poster o cartel publicitario. Esta práctica fue creada
con ayuda del software adobe Photoshop.

Quizás no es sorpresa que mencione que todas las practicas sobre páginas web estén echas
sobre un mismo tema, la razón fue que pretendía presentar los distintos estilos que pueden
nacer sobre una misma idea y comparar todas las diferentes utilidades y resultados que
cada una las herramienta utiliza y presenta al usarse.

La idea propia de que fuesen páginas sobre repostería, pero más especialmente sobre
galletas fue porque una tarde mientras hacia las tareas, mi madre estaba viendo muchos
videos sobre cómo hacer unas galletas de chispas de chocolate. En eso momento aún no
sabía de qué haría mis prácticas y bueno en ese momento nació la idea de que fuesen de
ese tema en especial.

El logo que aparece en las páginas fue creado por mí en adobe Photoshop.

XXVIII
XXIX