Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es Full Stack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Web fonts

43/55
Recursos

Aportes 128

Preguntas 34

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Hola!! otra forma de tener varias fuentes para nuestro proyecto sin tener que importarlas desde un link externo es descargado la fuente directamente de google fonts, crear una carpeta fonts en el proyecto almacenar alli los archivos .ttf y luego en el archivo de css importarlas desde alli. el atributo font-family le pondremos el nombre de la fuente y en el src: la ruta donde esta almacenado el archivo .ttf

@font-face{
font-family: ‘ChakraPetch-Regular’;
src: url(…/fonts/ChakraPetch-Regular.ttf);
}

Según conceptos de diseño hay varias recomendaciones para elegir la fuente / tipografía:

  • Para textos en digital (Como páginas web) usamos fuente sans-serif sin esas terminaciones (setifas).
  • Las fuentes con Serifa se recomiendan para impresas o en digital para titulos.

Para calcular el interlineado usamos la siguiente regla:

“2 puntos más que la fuente (Fuente de 8px pues interlineado de 10px)”

Esta pagina llamada FontPair Te muestra ejemplos de Fuentes que puedes combinar en tus proyectos para que estos tengan sentido!
Dale una checadita, Saludos compañeros.

Varios puntos interesantes a sumar:

  1. La “puntitas al final” en la tipografias serif se llaman serifas.

  2. En realidad al grosor no se le dice muy gorditas 😁, se le dice peso de la tipografía.

  3. Tal como indicó Diego en la clase, no es bueno cargar muchas tipografías, normalmente se usan un máximo de 2 tipografías. Pero también es bueno no cargar muchos pesos distintos de una tipografía porque eso compromete el rendimiento, solo agrega a la importación los pesos que necesites.

  4. Para que el renderizado de la tipografía sea mas eficiente es buen practica colocarlo en el head antes de cargar el CSS, de modo que cuando el CSS cargue ya tiene disponible las tipografías.

NOTA: He estado haciendo algunas pruebas y a pesar de no tener una información oficial creo que Google esta haciendo algunas pruebas con sus tipografías en Google Chrome. He creado proyectos donde no importo la tipografía, pero si llamo a la fuente en el CSS y se renderizan correctamente, claro, solo en Google Chrome…

Son grupos familiares de fuentes, los navegadores web poseen fuentes predeterminadas y dependiendo del mismo cada uno de ellos posee estilos diferentes.

Algunas Generic Families

  1. serif: Son un tipo de fuente de estilo formal o clásico como Times New Roman.
  2. sans-serif: No tienen acabado en las puntas, como: Verdana.
  3. cursive: Son las que tienen estilo cursivo.
  4. monospace: Son tipos de fuentes con espaciado entre las letras, como: Roboto mono.

¿Como puedo saber que tipo de fuente tengo instaladas en mi navegador?

Menú>Configuración>Diseño>Personalizar Fuentes>Fuente Serif/Fuente Sans-serif

¿Como puedo importar tipos de fuentes a mi proyecto?

  • Ir a Google Fonts.
  • Seleccionar la fuente.
  • Seleccionar Estilo de fuente.
  • Agregar al proyecto, se considera buena práctica agregar las fuentes utilizando la etiqueta <link>, ya que la fuente cambia la fuente una vez que se haya cargado la página.

Buenas Prácticas
Cargar una sola fuente.
Importarlas siempre en la etiqueta del head.

Un resumen de casi todo.

  1. Selectores . # p *
  2. Psudoclases y psudoelementos :class ::element
  3. Regla de CSS selector + {} + declaración(propiedad: valorPropiedad;)
  4. Modelo de caja: content + padding + border + margin
    NOTA: para no generar scroll, usamos la siguiente regla:
    *{box-sizing: border-box;
  5. Herencia en CSS: el código que se le va a pasar de un "padre"
    a un “hijo”
  6. Orden de declaración y especificidad en selectores:
    6.1 Importancia
    6.2 Especificidad
    6.3 Orden en las fuentes
    6.1: 6.1.1 Hoja de estilo de agente usuario(navegador)
    6.1.2 Declaraciones normales en hojas del autor (.css)
    6.1.3 Declaraciones importantes (!important)
    6.2: Especificidad:
    !important
    inline styles
    #id
    .class
    tag
    6.3: En tus estilos, las declaraciones al final del documento
    anularán a las que sucedan antes en caso de conflicto.
  7. Combinadores:
    7.1 Adjacent Sibling
    div + p {Aplica una regla al selector indicado cercano}
    7.2 General Sibling div ~ p {Aplica el mismo estilo
    siempre y cuando existan como hermanos en la misma
    linea}
    7.3 Child
    div > p {El padre que sea mayor, a su hijo directo}
    7.4 Descendant
    div p {todas las etiquetas que estén en el contenedor}
  8. Medidas
    8.1 Absolutas: No va a cambiar sin importar el tamaño del dispositiva.
    8.1.1: px
    8.2 Relativas: El tamaño varia según el dispositivo.
    8.2.1 em: es un acrónimo de element y lo que hace es
    tomar el tamaño de fuente que tenga el padre
    directo.
    8.2.2 rem: Rem hace referencia al font-size declarado en
    la etiqueta HTML (62.5%).
    8.2.3 Max-width/Max-height: Define el ancho y alto que un
    elemento puede tener.
    8.2.4 Min-width/Min-height: Define el ancho y el alto
    mínimo, que un elemento
    puede tener.
    8.2.5 Porcentaje % : Designa el porcentaje a usar, en el
    espacio en uso.
    8.2.6 vw y vh: view width y view height usan de 1% a
    100% del tamaño del viewport.
  9. Position: Modifica el lugar en el que se encuentran las
    cajas etiquetas, por defecto todos tiene como
    valor predeterminado static.
    9.1 static, relative, absolute, fixed, sticky
    las propiedades botton left right top, no están
    disponibles en el valor static.
  10. Display: La propiedad display especifica como se muestra
    un elemento html. Todos los elementos tienen
    algún tipo de display. Si un elemento no se ve
    en pantalla, es porque seguramente su display
    es none.
    10.1 Block: siempre comienza en una nueva linea y
    ocupa 100% el espacio del width.
    10.2 Inline: no comienzan en una nueva linea y solo
    ocupan el ancho necesario. no se le puede
    agregar margin.
    10.3 inline-block: Combinación de los 2 anteriores.
  11. Display: flex (flexbox):https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  12. Display: grid https://css-tricks.com/snippets/css/complete-guide-grid/
  13. Variables: Permiten asignar cualquier valor a una
    propiedad cuyo nombre podemos elegir
    libremente.
    Ejemplo: :root{–nombre-variable: valor;}
    ejemplo: var (–nombre-variable);
  14. Web fonts: Buena práctica
    *solo cargar 1 fuente por proyecto.
    *importarlas siempre en la etiqueta head.

NOTA: Es buena practica antes de iniciar mis estilos:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5% /Esto si quieres usar Rem como medida/
}

¿Les ha pasado que encuentran fuentes hermosas y quieres saber cuales son?
Les recomiendo la app Adobe Capture. Tomas una foto y detecta que fuente es. Además también puede calcular la paleta de colores.
Una buena app para Fronted’s

Platzi tiene un curso de tipografía que tomaré muy pronto. ✨✨✨ https://platzi.com/clases/diseno-tipografia/

Anatomía de la letra

¿Qué pasa cuando descargamos nuestra propia fuente?

Lo instalé así en el CSS, pero ¿es la mejor manera? y ¿cómo implemento el &display=swap?

@font-face {
  font-family: Levenim MT Regular; /* Esta al estar primera se pone por defecto si no se indica el bold */
  src: url(./fonts/lvnm_1.ttf);
  font-family: Levenim MT Bold;
  src: url(./fonts/lvnmbd_1.ttf);
}
html {
  font-size: 24px;
}
.uno {
  font-family: 'Levenim MT Regular', sans-serif;
}
.dos {
  font-family: 'Levenim MT Bold', sans-serif;
}

Consejo de un diseñador, nunca usen fonts descargadas de DaFont, siempre estan mal construidas y funcionan mal. 😃

Les dejo una página que sugiere colores y fuentes 😉

https://typespiration.com

Para descargar fuentes para tus proyectos https://fonts.google.com/ copiar el link, usamos una por buenas practicas e importarla siempre en la etiqueta <head> no poner el @import en el .CSS (mala practica)

En la clase anterior nos dejó los enlaces a páginas donde podemos importar nuestras fuentes, les dejo los links de igual forma por aquí:

https://material.io/resources/icons/?style=baseline

https://fontawesome.com

https://fonts.google.com/?preview.text=&preview.text_type=custom

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

Espero les sea de ayuda.

Web Fonts


Google fonts

Una herramienta muy útil es Google Webfonts Helper, que toma la fuente que quieras de Google Fonts y te la genera en formatos eot, ttf, svg, woff, woff2, para mayor compatibilidad. También te muestra el CSS para importarlos.

Wow todo esto que hemos visto en css está para repasarlo muuuchas veces. Por lo menos tengo uqe ver unas 2 o 3 veces más el módulo. Excelente maestro Degranda!

Para usar iconos y los mismos como fuente en tu web site recomiendo usar icomoon , siempre me a resultado muy útil.

Tome el curso de Introducción al diseño.
Todas las Serif son para papel e impresión.
Para digital son sans-serif. Podría utilizarce en el digitalas las Serif siempre que tenga una justificación por diseño.
Les recomiendo aprobar el curso de Introducción al diseño, les dará una visión más clara para elección de colores, como maquetar, alinear, lo fundamental para un diseño balanceado.

Excelente Diego, este curso me ha llevado de solo imaginarme a como se podria crear una pagina web, a conocer todos los conceptos y las buenas practicas … Ahora lo que queda es comenzar a crear nuestros propias paginas para ir ganando experiencia poco a poco.

Performance: La velocidad a la que las páginas web se descargan y se muestran en el navegador web del usuario

Supongo que puedo descargar la fuente e integrarla a los directorios de mi proyecto. Esto evitaría el problema del performance con el uso de import?

WEBFONT

  • Una webfont te va a permitir utilizar mas recursos de fuentes que disponemos en sitios como googlefon.

  • Tenemos dos forma de añadir estas fuentes directo de googlefon con:

    • @import

      style>
      @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
      </style>
      

      Mediante esto, importamos la fuente a nuestro css para después llamarla bajo el nombre de dicha fuente, sin embargo, no es tan buena practica por la forma en la que se carga.

    • <link>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    

    De esta forma añadimos la fuente a nuestro head del documento html, y con esto conseguiremos que la carga sea más optima, posterior a eso utilizamos la regla de css para llamar a nuestra fuente.

    font-family: 'Nunito', sans-serif
    

    NOTA: la forma “@import” y “<link>” usan la misma regla css.

Si quieren ver las fuentes que tienen instaladas en su computadora pueden ir a https://wordmark.it/

Al trabajar con fuentes locales, cuando nuestro proyecto incluye fuentes que nos entregaron los diseñadores en un archivo, el procedimientos que implemente seria el siguiente:
En el HEAD de HTML:

<link rel="stylesheet" href="./fonts/SoberTexto-Regular.otf">
    <link rel="stylesheet" href="./fonts/SoberTitular-Regular.otf">

Y en CSS

@font-face {
    font-family: Sober;/* Aquí yo le estoy asignado este nombre a la familia */
    src: url(./fonts/SoberTitular-Regular.otf), url(./fonts/SoberTexto-Regular.otf);
    /* Estas ultimas son la ubicación del archivo en el proyecto local */


html {
       font-family: Sober;
  }

Y así cargaría en el proyecto la fuente.

Me faltaría ver como llamar cada tipo de fuente específicamente, trabajare en eso 😃

Muy práctico, aunque tengo una duda. ¿Si selecciono varias alternativas de la misma fuente, cómo cambio entre una y otra? Ejemplo: Si aplico la Roboto light, y quiero cambio a Roboto Black 700 en otra área

En el curso de introducción al diseño se menciona que se recomienda tener 2 fuentes como mínimo y 3 como máximo. También que al hacer textos largos digitales usar una fuente sans-serif ya que es menos cansado a la vista.

Hola!

Solo era para comentar que en el quiz de CSS en la pregunta de cuáles son los elementos de una caja CSS, la respuesta correcta tiene un typo en Content, quedó como Context.

Un saludo! 🌙

El diablo está en los detalles. Hagamos primero lo fácil (poner la fuente en el head, por ejemplo) y luego ataquemos lo complejo.

Recomiendo checar la propiedad font-display es genial 😃
como buenas prácticas, no tener demasiadas fuentes en el proyecto.

para usar lasfuentes y variar en la misma fuente se usa

font-weight :

de acuerdo a esto:
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold

Que bueno que ya tenemos los Quiz en Desktop, todos los cursos deberían tener xD

Como sugerencia, procuren usar fuentes en formato woff o convertir sus fuentes existentes a dicho formato. Son más ligeras, por lo que mejora el tiempo de carga.

Recomiendo el curso de Lettering aquí en Platzi, donde se explica muy bien el tema de las fuentes y su impacto visual, los distintos elementos que las componen, etc.

Dejo un artículo sobre el uso de web fonts super bueno! 😄

Google Fonts (anteriormente llamado Google Web Fonts) es un directorio interactivo de uso libre bajo la aplicación que programa interfaces para fuentes de la web. Fue lanzado en 2010, y renovado en 2011.

BUENAS PRACTICAS

Importar las fuentes en el head del html:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;900&display=swap" rel="stylesheet">

En lugar:

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;900&display=swap');

Acá dejaré mi resumen de clase con 3 incisos:

  1. Realicé con HTML el cuadro de fuentes presentado en el video, aprendí css básico para tablas y como ejercicio para colocar fuentes.
  2. Se alcanza a notar lo dicho sobre ‘display=swap’ al cargar la página. Verifiquenlo desde aqui presionar F5 (recargar) con intervalos de 2 seg para notar el cambio.
  3. Hay una explicación sobre rel=“preconect” comantariado en el HTML, pueden verlo con el inspeccionador de elementos o en el código siguiente.


HTML

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>WebFonts</title>
	<link rel="stylesheet" href="./style.css" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
		href="https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected];500;700&family=Great+Vibes&family=Roboto+Mono:[email protected];500;700&display=swap"
		rel="stylesheet"
	/>
	<!--
		Este último link trae las fuentes de google fonts, para este caso trae 3 fuentes en diversos tamaños (grueso de fuente / font-weight)
		Dancing Script: 400,500,700
		Roboto Mono: 300,500,700
		Great Vibes (ancho único o normal)
		&display=swap es una propiedad anidada desde google fonts que le permite al navegador cargar y renderizar todo el contenido de la página con la fuente predeterminada del navegador y cuando el proyecto completo esté listo realizar el cambio de fuente.

		link rel="preconnect" se utiliza para realizar una conexión previa a un servidor sin llamar datos, abre la conexión. El atributo 'crossorigin' realiza una conexión segura (adicional) a un servidor para obtener los datos
	-->
</head>
<body>
	<header class="main-header">
		<h1 class="main-header__title">WebFonts</h1>
	</header>
	<section class="generic-fonts">
		<p class="generic-fonts__description">Aqui verás una relación de fuentes genéricas y como lucen</p>
		<table class="fonts-table">
			<thead class="fonts-table__header">
				<tr class="fonts-table__row">
					<th class="fonts-table__cell fonts-table__cell--header">Nombre genérico</th>
					<th colspan="2" class="fonts-table__cell fonts-table__cell--header">Ejemplos de fuente</th>
				</tr>
			</thead>
			<tbody class="fonts-table__body">
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__serif--serif">serif</td>
					<td class="fonts-table__cell font__serif--times-new-roman">Times New Roman</td>
					<td class="fonts-table__cell font__serif--georgia">Georgia</td>
				</tr>
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__sans-serif--sans-serif">sans-serif</td>
					<td class="fonts-table__cell font__sans-serif--helvetica">Helvetica</td>
					<td class="fonts-table__cell font__sans-serif--verdana">Verdana</td>
				</tr>
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__cursive--cursive">cursive</td>
					<td class="fonts-table__cell font__cursive--dancing-script">Dancing Script</td>
					<td class="fonts-table__cell font__cursive--great-vibes">Great Vibes</td>
				</tr>
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__monospace--monospace">monospace</td>
					<td class="fonts-table__cell font__monospace--courier-new">Courier New</td>
					<td class="fonts-table__cell font__monospace--roboto-mono">Roboto Mono</td>
				</tr>
			</tbody>
			<tfoot class="fonts-table__footer">
				<tr class="fonts-table__row">
					<td colspan="3" class="fonts-table__cell">
						Muestra de fuentes tomada del
						<a href="https://platzi.com/clases/2008-html-css/31229-web-fonts/" target="_blank">gráfico en el curso</a>
					</td>
				</tr>
			</tfoot>
		</table>
		<article class="explanation">
			<h2 class="explanation__title">Buenas practicas al incrsutar fuentes</h2>
			<ol class="best-practices">
				<li class="best-practices__element">Solo cargar una fuente por proyecto</li>
				<li class="best-practices__element">Importar siempre las fuentas desde la etiqueta head</li>
			</ol>
		</article>
	</section>
</body>


CSS

/*
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected];500;700&family=Great+Vibes&family=Roboto+Mono:[email protected];500;700&display=swap');

Es una mala practica, las fuentes deben cargarse desde el la etiqueta head en el documento HTML

*/

:root {
	--border-table-color: #cfcfcf;
	--header-bg-color: darkgreen;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-family: sans-serif;
}

a {
	color: blue;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.main-header {
	padding: 0.5em;
}

.main-header__title {
	text-align: center;
	font-size: 2em;
}

.generic-fonts {
	padding: 1em;
	margin: 0 auto;
	max-width: 38em;
}

.generic-fonts__description {
	text-align: center;
	padding: 1em;
}

.fonts-table {
	margin: 0 auto;
	width: 100%;
	border-spacing: 0;
	text-align: center;
	border-collapse: separate;
}

.fonts-table__header {
	background-color: var(--header-bg-color);
	border: 2px solid var(--header-bg-color);

	color: white;
}

.fonts-table__row .fonts-table__cell:last-child {
	border-left: none;
}

.fonts-table__row .fonts-table__cell:nth-child(2) {
	border-right: none;
	border-left: none;
}

.fonts-table__header .fonts-table__cell {
	border: none;
}

.fonts-table__header .fonts-table__cell--header {
	padding: 0.75em 1em;
}

.fonts-table__cell {
	padding: 0.25em 0.5em;
	border: 1px solid var(--border-table-color);
	border-top: none;
	width: 33.33%;
}

.fonts-table__body {
	border-top: none;
}

.font__serif--serif {
	font-family: serif;
}

.font__serif--times-new-roman {
	font-family: "Times New Roman", serif;
}

.font__serif--georgia {
	font-family: Georgia, serif;
}

.font__sans-serif--sans-serif {
	font-family: sans-serif;
}

.font__sans-serif--helvetica {
	font-family: Helvetica, sans-serif;
}

.font__sans-serif--verdana {
	font-family: Verdana, sans-serif;
}

.font__cursive--cursive {
	font-family: cursive;
}

.font__cursive--dancing-script {
	font-family: "Dancing Script", cursive;
}

.font__cursive--great-vibes {
	font-family: "Great Vibes", cursive;
}

.font__monospace--monospace {
	font-family: monospace;
}

.font__monospace--courier-new {
	font-family: "Courier New", monospace;
}

.font__monospace--roboto-mono {
	font-family: "Roboto Mono", monospace;
}

.fonts-table__footer {
	font-size: 0.75em;
	text-align: right;
}

.fonts-table__footer .fonts-table__cell {
	border: none;
}

.explanation {
	padding: 0.5em;
}

.explanation__title {
	margin: 1em auto;
}

.best-practices {
	padding-left: 1.25em;
}

.best-practices__element {
	line-height: 1.5em;
}

Generic-Families:

Mi novia es arquitecta, y me enseño una pagina donde puedes configurar letras para sus diseños del trabajo, y la verdad me gusto mucho, esta es la pagina:

https://www.dafont.com/es/

Lol, toda mi vida creí que la serif y sans-serif eran fuentes y no categorías de fuentes y que de ellas partían muchísimas más.

Una consulta es buena practica cargar un tipo de fuente. Y después si quiero modificar fuentes en CSS a alguna de mis etiquetas podría hacerlo? cual predominaría en el renderizado? gracias!

Recomiendo fontSquirrel, es muy util también para el tema de generar y descargar fuentes para la web 😃

Les comparto una pagina donde es bueno buscar fuentes:

Si estás en un sitio web y ves una fuente que te gusta, puedes usar esta extensión de Chrome para saber cual es 😃

Es correcto usar google fonts para hacer import o font-face de una fuente en CSS o link en HTML: [https://fonts.google.com/]https://fonts.google.com/

La mejor práctica es hacer el link en HTML, por defecto google fonts pone display=swap.

Les dejo otro link también muy bueno para elegir fuentes.
https://es.bestfonts.pro/

chrome-extension://ohcpnigalekghcmgcdcenkpelffpdolg/mobile_app.html

esta extension te permite saber el codigo de cualquier color que este en tu navegador, es super util para practicar cuando uno quiere compiar un color que le gunto en una foto o una pag web

¿Cuál sería la mejor practica para colocar una única fuente, en el selector universal, el html o body?

Swap le da a la fuente un período de bloque de cero segundos y un período de intercambio infinito. Esto significa que el navegador dibuja texto inmediatamente con un respaldo si la fuente de la fuente no está cargada, pero cambia la fuente tan pronto como se carga. Similar al bloque, este valor solo debe usarse cuando la representación de texto en una fuente en particular es importante para la página, pero la representación en cualquier fuente seguirá transmitiendo un mensaje correcto. El texto del logotipo es un buen candidato para el intercambio, ya que mostrar el nombre de una empresa con una alternativa razonable transmitirá el mensaje, pero eventualmente utilizará el tipo de letra oficial.

display=swap ; signinfica que primero carga todo el contenido de la página y luego cambia el tipo de letra. Importarlo en el head es buena práctica.

Los import no son buenas practicas porque nos pegan en performance. La mejor practica es no importar tus fuentes en tus estilos sino ponerlas adentro del head.
Como buena practica no es bueno cargar más de una fuente externa. Porque pega en performance. Si tenemos que cargar 2 fuentes que este bien justificado esta perfecto pero si tenemos mas de 2 ya es un problema para nuestro performance se puede convertir un problema a la hora de renderizar.
Importarla siempre en la etiqueta head.

Una vez que efectuado el enlace de la fuente con la etiqueta link, usar la propiedad: font-weight para utilizar los diferentes tamaños seleccionados en google fonts.
Ejemplo:
.nueve {
font-family: ‘Roboto’, sans-serif;
font-weight: 900;
}

¿Por que existen paginas que cargan en segundos y otras en varios?
Pues existen varios factores, pegar un import de las fuentes es uno de ellos

fuentes - Sans Serif sin linea al final estilo plano usada en Google Docs y similares

Qué forma tan sencilla de explicar esto. En otro curso hicieron un enredo de esta parte.

En el quiz que viene a continuación se debe corregir un textico:

Ok, entendido el Display=Swap.
Eso me va a ayudar para un par de proyectos. Eso de sentir que se detiene la carga del sitio para que las fuentes se terminen de cargar es muy peye.

Por que no es buena practica importar las fuentes en el CSS con el @import ??

📝 Las tipografías web permiten especificar los archivos de tipo de letra.

Tremenda clase, brutal la verdad en la forma como interactuamos con paginas externas, mas para fuentes nuevas

Buenas prácticas a prácticar e.e

Buenas noches, colegas, así voy avanzando y aplicando lo nuevo sobre lo anterior aprendido en las primeras clases.

Encontré una FUENTE Sans-serif con puntas en las esquinas de las letras como las fuentes Serif*

La fuentes es:
Cambria Math

Home Platzi 2020

Home Platzi Junio 2022

RESUMEN CLASE 43:
WEB FONTS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web FontsS</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Roboto+Mono&family=Shadows+Into+Light&display=swap" rel="stylesheet">
</head>
<body>
    <main>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur commodi laborum explicabo ipsum tempora nesciunt aliquid facere tenetur veritatis consequuntur reprehenderit molestiae qui, consectetur, labore maxime minima sapiente, doloribus esse!
        </p>
    </main>
</body>
</html>

CSS

html {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.2rem;
}

buenas practicas solo cargar 1 fuente externa e importarla en la etiqueta head

Información resumida de esta clase
#EstudiantesDePlatzi

  • Existen fuentes ya instaladas en tu computadora por defecto

  • En google font puedo descargar muchísimas fuentes

  • Los import en CSS no son buenas prácticas, lo mejor es importarla en html y en la etiqueta de head

  • Como buena práctica es solo importar 1 o 2 fuentes por proyecto, ya que si tenemos más de 2 fuentes podemos tener problemas en el tiempo de renderizado

https://type-scale.com/ les recomiendo esta web para setear los estilos de las fuentes. Es muy buena! saludos

google fonts chicos!

  • Para buenas prácticas solo usar una fuente.
  • Si cargamos dos tienen que estar bien justificados.
  • Más de dos puede generar problemas.
  • Importarlas siempre en la etiqueta head.

Excelente clase, muy clara y útil.
La verdad una buena fuente bien escogida le da mucha personalidad a tu página.

Súper interesante esta clase.

Para elegir la fuente / tipografía:
🤖🤖🤖

  • Para textos en digital (Como páginas web) usamos fuente sans-serif sin esas terminaciones (setifas).

  • Las fuentes con Serifa se recomiendan para impresas o en digital para titulos.
    Para calcular el interlineado usamos la siguiente regla:
    “2 puntos más que la fuente (Fuente de 8px pues interlineado de 10px)”

MEJOR USO DE FUENTES EXTERNAS

personalizar fuentes en navegador chrome:
***En google chrome, 2021, dice ASPECTO, no DISEÑO, y se encuentra dentro de la opción “google y tu” ***

Despues de tanto tiempo de desarrollo web vine a aprender que tipos de fuentes hay 😮

Tu computadora ya tiene fuentes genéricas

Seleccionar fuente para tu proyecto, insertandola con un link en HTML

  • Está muy bueno esto de las fuentes

GRACIAS

43.-Web fonts

Los import de google fonts no son tan buenas prácticas porque pegan en el performance, a pesar del display=swap que agregó google para mitigar el daño aún así es mejor hacerlo en el head de html usando el link que nos proporciona.

Es una buena práctica cargar solo una fuente por proyecto.

Navegador. ver fuentes instaladas

Muy buena toda esta clase de CSS

Rendimiento Web se refiere a la velocidad a la que las páginas web se descargan y se muestran en el navegador web del usuario . La optimización del rendimiento web (WPO) u optimización del sitio web es el campo de conocimiento sobre cómo aumentar el rendimiento web.

¿Hay algún curso sobre performance en Platzi?

Acá les dejo una guía de tips para elegir su tipografía para web.

Buenas prácticas 😀💚

Genial, personalmente prefiero cargar desde Google fonts ya que eso aliviana la carga y acelera el performance según percibo

Muy bueno google fonts, es mejor personalizar la pagina a nuestro gusto, acá esta el enlace de google fonts:
https://fonts.google.com/
😃

Fuentes

Generic families


Hay 4 grupos de fuentes denominadas familias.

  • Serif:Tienen un toque elegante como la fuente New Times Roman.
  • Sans-serif: son fuentes de “palo seco” como la Verdana.
  • Cursive: tienen estilos cursivos como hechas a mano.
  • Monospace: todos los caracteres tiene el mismo ancho. Ideal para escribir código.

Puede encontrar más información en Tipografías CSS