Assets de nuestro proyecto

5/31
Recursos

Aportes 57

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Vine a ahorrarles un poquito el tiempo, ac谩 sub铆 los assets.

https://drive.google.com/file/d/1Jg6m-DyDNPlsPc6HgzJFdwmJH3-BYC-z/view?usp=sharing

Los assets son todos los recursos est谩ticos que utilizaremos en nuestro proyecto, tales como:

Im谩genes
Logotipos/Isotipos (Si el logotipo y el nombre de la empresa/marca se encuentran en elementos separados, es preferible descargarlos agrupados)
脥conos
PRO TIP: podemos descargar varios assets simult谩neamente. Solo debemos seleccionar varios elementos, presionando CTRL + Clic sobre el elemento, y luego presionamos Export seleccionamos el formato, 隆y Listo! nuestros assets se descargaran en un archivo .zip

Clasificamos los assets seg煤n el tipo de recurso (imagen, 铆cono, etc鈥), adem谩s es recomendble que sigamos un est谩ndar para nombrar nuestros archivos (nombre corto, desciptivo, en min煤sculas, sin espacios) .
Finalmente la estructura de carpetas de nuestro proyecto deber铆a quedar de esta forma:

- assets
	- icons
	- img
		bitcon.svg
		logo.svg
	index.html

Para los que hacen el proyecto en un repositorio de Git, como no es recomandable poner binarios directamente en tu proyecto, pueden subir sus imagenes ac谩. Espero les sirva!

La recomendacion es la siguiente es:

  • .jpg para fotos
  • .gif para ilustraciones
  • .svg y png para iconos o logos

Comparto Tabla de Diferencias del curso definitivo de HTML y CSS

Formatos de im谩genes:

Link correcto del proyecto (a mi me sale cualquier cosa con el que esta en los 鈥渞ecursos鈥 de la clase): https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-bit?node-id=44%3A593

Encontr茅 que hay iconos que solo cambia su rotaci贸n, hay que evitar que el sitio se sature en descargar imagenes y lo que se pueda remplazar con CSS implementarlo.
En este caso para rotar una imagen usaremos:
.miImagen{
transform: rotate(-10deg);
}

Donde el valor positivo gira a la derecha, el negativo a la izquierda seguido por un numero que indica los grados de rotaci贸n con s prefijo deg.

馃Amigos para que no tengan que descargar im谩genes (especialmente si usan Git), les sub铆 todo lo necesario al siguiente link: 鉁ˋlbum batatabit鉁

.

  • Pueden copiar links directos para html desde esa p谩gina ^^

Las im谩genes est谩n en png porque no se pueden subir en svg, pero pr谩cticamente su uso es el mismo :3

Me quedaron as铆 mis assets y a ustedes?

Recuerden que los archivos .svg son c贸digo, para verlos como im谩genes en VSCode pueden usar esta extensi贸n: https://marketplace.visualstudio.com/items?itemName=jock.svg

Platzi sab铆a del cryptoboom de esta semana 馃憖锔

Para los que no saben, si quieren tener los iconos como salen en la imagen pueden descargar la extensi贸n pkief.material-icon-theme.

Se me hizo mucho m谩s f谩cil exportar las im谩genes e iconos en Figma que en Adobe XD.

Recuerden usar .svg para las im谩genes que no contengan tantos detalles o colores, mientras que los .png sirve por ejemplo para la foto de la mujer dentro del dise帽o de Batatabit ya que tiene un cierto n煤mero de detalles aunque maneje principalmente tonos naranjas.

bro el profe tiene
el profe tiene 7 navegadores![](

Creo que es una buena forma de organizar los assets del proyecto 馃 驴Qu茅 opinan?

Recomiendo que descarguen el programa PowerToys para desplegar la vista rpevia de los archivos SVG (Scalable vector graphics), PDF (Portable Document Format) y MD (MarkDown; el de los readmes). Es de Microsoft, est谩 en GitHub bajo la licencia MIT y es f谩cil de usar, s贸lo siguen al mago instalador y abren la aplicaci贸n, buscan, dentro de PowerToys, el men煤 del explorador de archivos, y le dan los ajustes que digo. Les ser谩 煤til 馃槈

Importante repasar

Para los que como yo est谩bamos perdidos con el link de figma:

https://www.figma.com/proto/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=44%3A594&scaling=scale-down

Eleg铆 todo en SVG salvo el banner principal que lo puse en JPG. Ustedes?

驴Cuando dice 鈥渄ragarla鈥 se refiere a 鈥渁rrastrarla鈥, cierto?

Lo genial de diego, es que en verdad se interesa porque aprendamos, loamamos

Si alguien quiere experimentar cambiando algunos iconos, pueden encontrar bastantes aqu铆 馃憠锔 Flaticon

Mas facil descargar directamente desde el enlace que nos da el profe en github.

驴Qu茅 significa asset?
El t茅rmino assets hace referencia a los recursos que utiliza una aplicaci贸n o un sitio web y que forman parte de 茅l en el momento de su creaci贸n. 驴Qu茅 quiere decir esto exactamente? Que los assets de un proyecto son los videos, las animaciones, los paquete de sonido, las imagenes鈥 Es decir鈥βodo!

Para poner el logo en el <title> de la pagina usen esto:

<link rel="shortcut icon" href="Aqu铆 la url donde guardaron el icono">

Esta l铆nea la agregan en el <head>

Alguien me aclara cuando usar SVG y cuando JPG? Si SVG escala sin perder detalles o resolucion?
Peso de la misma imagen en SVG y JPG (la de la chica)

Se puede clonar el proyecto entero con Git pero solo para bajar las im谩genes a una carpeta. Un compa帽ero ya les facilito una carpeta pero si es que les interesar谩 como hacerlo con Git para quienes no saben d铆ganme y lo pongo por aqu铆 (銆滐浚鈻斤浚)銆

Compa帽eros si desean subir su repositorio a github, usando la git bash pero sin subir sus archivos binarios, siempre recuerden que existe 鈥.gitignore鈥.
Crear este archivo al inicio de su repositorio siempre permite que puedas tener en local todo en la misma carpeta, sin que se carguen autom谩ticamente tus archivos binarios!

No se si ya hab铆an dejado esta herramienta por ac谩 (para los que usan mac) organizar el escritorio con conmandos y dividir pantalla.

https://www.spectacleapp.com

aca el profesor muestra descargar el dise帽o en figma.

En Figma puedo ver los cursores de las personas q est谩n trabajando en este mismo proyecto 馃槂

Lo que m谩s me gusto de esta clase es la alacarion de Diego sobre la repo !!! todo un campe贸n!

Good class.

El orden es clave

Tengo una pregunta. 驴Por qu茅 en figma me aparece la imagen svg con los bordes perfectos y cuando lo exporto y lo muestro en mi web aparece los bordes mas delgados? 驴 es por que las dimensiones del svg en figma son mas grandes y eso hace que en el portal se vea un pco diferente ?

que buena practica, separar en una carpeta las im谩genes y en otra los iconos para no confundir y tambi茅n los nombres de las im谩genes no deber谩n llevar espacios en blanco.

la tarea era que por nuestra propia cuenta identificaramos iconos e imagenes. Asi aprendemos a identificar entre ambos elementos, es facil cuando alguien nos pasa la tarea. Vamos gente un poco de esfuerzo no mata a nadie

Para el peso : https://tinypng.com/

Fitma no me permite descargar los archivos, por alguna razon solo me permite descargar la imagen completa y no cierta selecci贸n, 驴Alguna soluci贸n?

Cuando cre茅 la cuenta e ingres茅, solo me salio una imagen mas no el proyecto completo, como lo puedo visualizar completo.

ahhh que buneo esta figma jamas lo habia visto algo nuevo para mi

Estructura de la carpeta de assets.

-assets
-icons
logo.svg
-img
bitcon.png
index.html

Hola. Les comparto este repositorio que sirve de gu铆a para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificaci贸n y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 馃槃.
Platzi-Test

Muchas gracais por los aportes en los omentarios

gracias

馃憣

Les comparto la p谩gina: Material Design ( https://material.io/ )

Estupenda clase, el curso definitivo de HTML y CSS ayud贸 much铆simo para comprender esta clase.

no se les olvide poner los assets en el gitignore

Ya lo hice, todo lo descargu茅 en SVG salvo la imagen de la chica, ahora a darle ! 馃槂.

Buen curso

quien mas esta haciendo este proyecto con React

Genial se pone hot este curso

Gracias

Buena recomendaci贸n de implementaci贸n de carpetas.