Diseño y

tecnologías UX

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022
 Diseño y tecnologías UX

CONTENIDO
1. Logro de aprendizaje ............................................................................................................................................03

2.Definiciones ...............................................................................................................................................................03

3. Reflexión ......................................................................................................................................................................16

4. Conclusiones .............................................................................................................................................................17

5. Bibliografía .................................................................................................................................................................17

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 2
 Diseño y tecnologías UX

1. Logro de aprendizaje

Al finalizar la semana, aplicarás CSS a tu diseño front end, reconociendo

los criterios de evaluación dentro del proceso de validación de usabilidad
aplicados en un proyecto web/mobile.

2. Definiciones
2.1. ACTIVIDAD

Introducción al Cascading Style Sheets e

importancia de su uso.

2.2. preguntas de reflexión

Antes de iniciar con las definiciones, te invito a responder las siguientes preguntas:

? ¿Qué es CSS y por qué es tan importante en estos días?

? ¿Puedo crear un CSS sin JavaScript?

? ¿Toda web debe tener CSS?

2.3. Cascading Style Sheets (CSS)

Es un lenguaje para definir la presentación de un documento

estructurado escrito en HTML o XML. Además, su desarrollo es
dirigido por la W3C.
HTML = contenido

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 3
 Diseño y tecnologías UX

CSS es un lenguaje de hojas de estilo que describe la apariencia y formato de HTML

un documento escrito en el lenguaje de markup. Su propósito es enriquecer CSS

la apariencia de los documentos HTML.

HTML Only HTML + CSS El lenguaje HTML no estaba pensado para contener tags y dar formato
a una página web. Es por ello que la World Wide Web Consortium (W3C)
creó CSS.
HTML = contenido
CSS = layout

2.3.1. ventajas

• Estandarizar la presentación de un sitio web completo, haciéndola

fácil de mantener.

• Diferentes usuarios pueden contar con diferentes estilos acordes a

sus necesidades. Ejemplos:

1. Estilos para personas con dificultades visuales

2. Estilos para dispositivos móviles
3. Estilos para dispositivos monocromos
4. Estilos para impresión, entre otros

• Los documentos HTML se reducen en tamaño y complejidad.

2.3.2. Sintaxis

La sintaxis básica de CSS incluye los siguientes elementos:

• Selector, que apunta hacia el

elemento HTML al que se desea
aplicar estilos.

• Declaration Block, que contiene una

o más declaraciones separadas por
punto y coma. El declaration block
está delimitado por llaves y cada
declaration contiene una propiedad
y un valor.

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 4
 Diseño y tecnologías UX

SELECTOR Modificar propiedad

Selector

Valor

Propiedad

// Los selectors se utilizan para ubicar o // En este ejemplo, todas las etiquetas h1 en el
seleccionar el elemento HTML sobre el que se documento HTML tendrán la propiedad color
desea aplicar un estilo. en rojo.

Modificar propiedades sub-selector

Parent tag
Children tag

// Un bloque de declaraciones puede incluir // Los sub-selectors permiten aplicar un

varias declaraciones. En este caso, las bloque de declaraciones, en este caso, a los
etiquetas h1 tendrán color rojo y subrayado. tags li que se encuentren encerradas en un
tag ul.

Pseudo - selector

Unvisited link
Visited link
Mouse over
// Los pseudo-selectors se utilizan para aplicar Active link
un bloque declaraciones de estilo sobre un
elemento en un estado en particular. Por
ejemplo, aquí el bloque de declaración de // En este ejemplo, se aprecia la asignación de
estilos se está aplicando a las etiquetas a estilos para diferentes estados del anchor tag.
(anchor) cuando el mouse pasa por encima del
hipervínculo.

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 5
 Diseño y tecnologías UX

PSEUDO-SELECTOR
// Los pseudo-selectors permiten establecer
declaraciones de estilos a elementos en
Primer li tag particular. Por ejemplo, en este caso se aplica al
primer elemento li encerrado en un tag ul.

color
#FFFF00

#000000 negro
#FF0000 rojo

// CSS soporta la especificación de colores para // Aquí puedes apreciar la especificación de

los elementos, pudiendo expresarse estos como color en formato hexadecimal.
nombres predefinidos, valores hexadecimales,
valores en RGB, RGBA, HSL, HSLA y opacity.

2.3.3. FORMAS DE INSERCIÓN

Existen tres formas de inserción del código de CSS para aplicar declaraciones de estilo a elementos de
un documento HTML.

External Style sheets Internal Style sheets

(Hojas de estilo externas) (Hojas de estilo internas)
/* index.html */ /* index.html */

/* mystyle.css */

// Las hojas de estilo internas permiten que se

incluyan declaraciones de estilo exclusivas
// Las hojas de estilo externas se ubican en del documento HTML actual. Ello se puede
archivos que pueden ser referenciados especificar mediante el tag style en la sección
mediante el tag link en la sección head del head del documento HTML.
documento HTML.

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 6
 Diseño y tecnologías UX

Inline Styles (Estilos en línea)

/* index.html */ Es posible aplicar declaraciones de estilo a
HTML tags en particular. Por ejemplo, aquí se
está aplicando las declaraciones de estilo a un h1
tag en particular dentro del documento HTML.

2.4. Backgrounds
Las propiedades de fondo CSS se utilizan para definir los efectos de fondo para los elementos.

2.4.1. Background Shorthand

Para acortar el código, también es posible especificar todas las propiedades en segundo plano en una
sola propiedad. Esto se denomina propiedad abreviada.

• background-color
Cuando se utiliza la • background-image
propiedad abreviada,
el orden de los valores
• background-repeat
de propiedad es: • background-attachment
• background-position

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 7
 Diseño y tecnologías UX

2.5. Box Model

Margin
Border

El CSS Box Model es esencialmente un cuadro Padding

que se ajusta alrededor de cada elemento Contect

HTML.
Consta de márgenes, bordes, relleno y el
contenido real.
La imagen a la derecha ilustra el box model.

2.6. BORDERs
Las propiedades de borde CSS permiten especificar el estilo, el ancho y el color del borde de un elemento.

2.7. Borders Width, Color, Sides

La propiedad border-width especifica el

ancho de los cuatro bordes.

<HTML>
<DIV>

La propiedad border-color se utiliza para

establecer el color de los cuatro bordes.

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 8
 Diseño y tecnologías UX

2.8. Shorthand Border Property

Para acortar el código, también es posible especificar todas las propiedades de bordes individuales
en una propiedad.

La propiedad border es una propiedad

abreviada para las siguientes propiedades
de bordes individuales:
• border-width
• border-style (required)
• border-color

2.9. Rounded Borders

La propiedad border-radius se utiliza para agregar bordes

redondeados a un elemento.
The border-radius Property

Round border

Rounder border

Roundest border

2.10. Margins

Las propiedades de margen CSS se utilizan para

crear espacio alrededor de los elementos, fuera de
los bordes definidos.
CSS tiene propiedades para especificar el margen
para cada lado de un elemento:
• margin-top
• margin-right
• margin-bottom
• margin-left
La propiedad margin es una propiedad abreviada.

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 9
 Diseño y tecnologías UX

2.11. Padding

Las propiedades padding de CSS se usan para generar

espacio alrededor del contenido de un elemento,
dentro de los bordes definidos.
CSS tiene propiedades para especificar el padding
para cada lado de un elemento:
• margin-top
• margin-right

The padding property is a shorthand • margin-bottom

property. • margin-left

2.12. flexbox
Método de diseño unidimensional para diseñar elementos en filas o columnas. Los elementos se flexionan
para llenar espacio adicional y se encogen para caber en espacios más pequeños.

cross start cross axis

main axis

main size cross size

main start cross end main end

Flex container: el parent element que tiene Cross axis: el eje perpendicular a la dirección
display: flex establecido. en que los flex items están siendo ubicados.

Main axis: el eje en la dirección en la que los Flex items: los ítems que están siendo
flex items están siendo ubicados. ubicados como flexible boxes dentro del flex
container.

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 10
 Diseño y tecnologías UX

section {
Ejemplo display: flex;
}

Sample flexbox example

First article Second article Third article
Tacos actually Tacos actually Tacos actually microdosing,
microdosing, pour- microdosing, pour- pour-over semiotics banjo
over semiotics banjo over semiotics banjo chicharrones retro Fanny pack
chicharrones retro chicharrones retro portland everyday carry vinyl
Fanny pack portland Fanny pack portland typewriter. Tacos PBR&B pork
everyday carry vinyl everyday carry vinyl belly, everyday carry ennui
typewriter. Tacos PBR&B typewriter. Tacos PBR&B pickled sriracha normcore
pork belly, everyday pork belly, everyday hashtag polaroid single-origin
carry ennui pickled carry ennui pickled coffee cold-pressed. PBR&B
sriracha normcore sriracha normcore tattoed trust fund twee, leggins
hashtag polaroid hashtag polaroid salvia iPhone photo booth health
single-origin coffee cold- single-origin coffee cold- goth gastropub hammock.
pressed. PBR&B tattoed pressed. PBR&B tattoed Cray food truck brunch, XOXO
trust fund twee, leggins trust fund twee, leggins +1 keffiyeh pickled chambray
salvia iPhone photo salvia iPhone photo waistcoat ennui. Organic small
booth health goth booth health goth batch paleo 8-bit. Intelligentsia
gastropub hammock. gastropub hammock. umami wayfarers pickled,
a s y m m e t r i c a l ko m b u c h a
letterpress kitsch leggins cold-
pressed squid chartreuse put a
bird on it. Listicle pickled man
bun cornhole heirloom art party.

2.12.1. Flexbox direction

Por defecto es row flex-direction: column;

2.12.2. Flexbox wrapping

En caso de overflow en el container, se puede usar flex-wrap, como puedes

observar en los siguientes ejemplos:

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 11
 Diseño y tecnologías UX

section { article {
display: flex; flex: 200px;
flex-wrap: wrap; }
}

2.13. Height and Width

Las propiedades height y width se utilizan para establecer la altura y ancho de un elemento, con los
siguientes valores:

• auto: por defecto, el browser calcula la altura

y ancho.
• length: define la altura/ancho en px, cm, etc.
• %: define la altura/ancho en términos porcentuales con respecto al bloque que lo contiene.
• initial: establece la altura/ancho con su valor por defecto.
• inherit: la altura/ancho se hereda del valor de su elemento contenedor.

Dimension properties Property Description

height Establece la altura de un elemento

max-height Establece el ancho mínimo de un elemento

max-width Establece el ancho máximo de un elemento

min-height Establece la altura mínima de un elemento

min-width Establece el ancho mínimo de un elemento

width Establece el ancho de un elemento

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 12
 Diseño y tecnologías UX

2.14. Fonts
Las CSS font properties definen las font family, boldness, size y the style de un texto.

Property Description
font Establece todas las font properties en una sola declaración

font-family Especifica el font family para el texto

font-size Especifica el font size del texto

font-style Especifica el font style para el texto

font-variant Especifica si un texto debería o no mostrarse con small-caps font

font-weight Especifica el peso de un font

En el ejemplo, puedes apreciar el uso de atributos de Font.

2.15. Text formatting

En el siguiente ejemplo, puedes observar el uso de atributos para el formato de texto:

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 13
 Diseño y tecnologías UX

Table properties

Property Description
border Sets all the border properties in one declaration

border-collapse Specifies whether or not table borders should be collapsed

border-spacing Specifies the distance between the borders of adjacent cells

caption-side Specifies the placement of a table caption

empty-cells Specifies whether or not to display borders and background on empty cells in a table

table-layout Sets the layout algorithm to be used for a table

Fuente: Delgado, H. (22 de agosto de 2022). Diseño Web Responsive – Tutorial con ejemplos
adaptables. akus.net. https://disenowebakus.net/diseno-web-responsive.php

2.16. Responsive Web Design

Responsive Design es la estrategia para hacer que un sitio “responda” al navegador y

dispositivo en el que se muestra, haciendo que se vea increíble pase lo que pase.

Fuente: Delgado, H. (22 de agosto de 2022). Diseño Web

Responsive – Tutorial con ejemplos adaptables. akus.net.
https://disenowebakus.net/diseno-web-responsive.php

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 14
 Diseño y tecnologías UX

2.17. MEDIA QUERY

/* Los media queries son la herramienta más

poderosa para hacer esto. Toma la estructura
donde usas porcentajes y transfórmala en una
columna cuando la ventana del navegador
sea muy pequeña para mantener el menú en
la barra lateral. */

Fuente: Mozilla Corporation. (2022). CSS media queries. mdn web docs. https://developer.
mozilla.org/es/docs/CSS/Media_queries

2.18. View Port

Viewport es la etiqueta que mejor representa la web en movilidad, ya que te indica cómo se
verá un proyecto web en los dispositivos móviles.

Apple la creó para decirle al iPhone cómo debería renderizar el documento,

convirtiéndose desde entonces en un estándar que ya está soportado por
la mayoría de dispositivos.

Fuente: LinkedIn. (22 de junio de 2016). CSS: Diseño web responsive. https://www.linkedin.com/
learning/css-diseno-web-responsive

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 15
 Diseño y tecnologías UX

2.19. Responsive Text Size - Media Queries

With media queries you can define completely different styles for different browser sizes.

Fuente: Delgado, H. (22 de agosto de 2022). Diseño Web Responsive – Tutorial con ejemplos
adaptables. akus.net. https://disenowebakus.net/diseno-web-responsive.php

3. reflexión
Las métricas permiten identificar necesidades y métodos de recopilación de
información. Logran plantear escenarios adecuados para comprender usuario
final y así obtener la máxima comprensión de su necesidad.

<HTML>
<DIV>

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 16
 Diseño y tecnologías UX

4. CONCLUSIONES
• Siempre deben investigarse diferentes formas de capturar las
necesidades del usuario. Al revisar las técnicas como user scenarios,
user stories, impact mapping, user testing, se puede dar énfasis a
las necesidades visuales del usuario que lograrían una mejor UX.

• User experience / journey map es una excelente técnica para lograr

un correcto design thinking.

5. Bibliografía

• Attardi, J. (2020). Modern CSS. Apress L.P.

Material producido por la Universidad Peruana de Ciencias Aplicadas

Autor: Jaime Coronado | UPC, 2022 17
Material producido por la Universidad Peruana de Ciencias Aplicadas
Autor: Jaime Coronado | UPC, 2022