Please enable JavaScript.
Coggle requires JavaScript to display documents.
UNIDAD III - Coggle Diagram
UNIDAD III
FORMATOS DE IMAGEN Y SUS USOS
JPG (JPEG)
es un formato que reduce el tamaño pero puede bajar un poco la calidad
excelente para fotografias
no soporta transparencia
siempre tiene un fondo (blanco, gris, color)
usar este formao cuando quieras fotos que se carguen rapido pero mantengan buena calidad
PNG
comprime sin perder mucha calidad y permite transparencia
ideal para
logotipos
iconos con fondos transparentes
usar este formato cuando se necesite imagenes claras y con transparencia como logotipos o botones
GIF
formato muy comprimido y de baja calidad
y puede contener animaciones
se usa casi para
mini - animaciones
memes
banners
stickers
en redes sociales o apps de mensajeria
usa este formato para animaciones simples y cortas
SVG
es un formato vectorial (sin pixeles) basado en XML (codigo de texto)
al agrandarse no se pixela ya que se dibuja con matematicas, no con puntos
pesa menos que un PNG o JPG
perfectp para
logotipos
iconos de interfaz
elementos que deben verse bien en cualquier tamaño
LIENZO DE 2,5
<canvas> es un elemento HTML que permite dibujar graficos, animaciones e incluso juegos directamente con JavaScript
no es un archivo de imagen como JPG o PNG
es un lienzo dinamico que se genera y modifica con codigo
ejemplo
graficos animados
mapas interactivos
dibujos en tiempo real
IMPLEMENTACION TECNICA Y BUENAS PRACTICAS
ORGANIZACION DE ARCHIVOS
es mejor crear una carpeta dedicada a imagenes
ejemplo de carpetas
imagenes/
ejemplo de estructura
texto=
mi-sitio/
index.html
imagenes/
3 more items...
img/
assets/imagenes/
ejemplo de codigo
<img src="imagenes/logo.svg" alt="Logo de mi empresa">
PRECISION EN EL CODIGO (RUTA Y EXTENSIOM)
en el
<src>
debe escribirse exactamente
el nombre del archivo
si el servidor no encuentra el archivo con ese nombre exacta, se muestra la imagen rota (o el alt)
con la misma extension ( .jpg, .png, .svg)
y con las mismas mayusculas/minusculas que el archivo real
en algunos servidores; logo.jpg es diferente Logo.jpg
DIMENSIONES CON CSS (width y heigth)
una imagen se muestra a su tamaño original, segun las medidas del archivo descargado
para adaptarla al diseño, se usa en CSS
width
ancho
height
alto
ejemplo de forma tipica; CSS=
.logo {
width: 200px;
height: auto; /
mantiene la proporción
/
}
ejemplo con %; CSS=
.banner {
width: 100%; /
ocupa el 100% del contenedor
/
height: auto;
}
valores comunes
px
tamaño fijo
%
tamaño relativo al padre
OTROS ELEMENTOS GRAFICOS
<hr>
la etiqueta
<hr>
genera una linea horizontal gris que sirve como separador visual entre secciones de la pagina
ejemplo
XML=
<p>Primera sección</p>
<hr>
<p>Segunda sección</p>
EL PROTOCOLO FTP (FILE TRANSFER PROTOCOL)
QUE ES FTP
FTP= PROTOCOLO DE TRANSFERENCIA DE ARCHIVOS
es el servidor que permite mover los archivos desde tu computadora (cliente) al servidor donde se aloja tu sitio web
para que cualquiera pueda verlo en internet
ARQUITECTURA CLIENTE SERVIDOR
CLIENTE
programa que usas, ejemplo FileZilla
el cliente envia los archivos al servidor mediante el protocolo FTP y asi tu web se publica
SERVIDOR
computadora del hosting donde se guarda tu sitio
ACCESO Y CREDENCIALES
para usar FTP, tu empresa de hosting te da tres datos clave
DIRECCION FTP
es la direccion del servidor
ejemlo: ftp.tusitio.com
USUARIO FTP
un nombre de usuario especifico
puede ser el mismo que tu cuenta de hosting u otro
CONTRASEÑA FTP
la clave para esa conexion, distinto al inicio sesion nomal del panel
con estos datos te logueas desde el programa y ya puedes subir y administrar archivos
HERRAMIENTAS DE CONEXION
hay varias formas de usar FTP
PROGRAMAS ESPECIFICOS
Introduce dirección, usuario y contraseña → te aparecen las carpetas del servidor y las de tu PC, y puedes arrastrar archivos de uno a otro
SISTEMA OPERATIVO (EXPLORADOR DE WINDOWS)
En la barra de direcciones de Explorador de archivos escribe la dirección FTP:
ftp://ftp.tusitio.com
Te pide usuario y contraseña y te abre una ventana donde ves y subes archivos del servidor.
PANEL DE HOSTING (DASHBOARDS)
Plataformas como 000webhost incluyen un administrador de archivos en la web .
Hay una interfaz donde arrastras y sueltas archivos sin usar FTP externo.
PUBLICACION Y ESTRUCTURA EN EL SERVIDOR
CARPETAS DE DESTINO
htdocs/public_html
EN CASI TODOS LOS HOSTING , EXISTE UNA CARPETA RAIZ DONDE DEBE IR TU SITIO
suele llamarse
public_html (en muchos alojamientos)
o htdocs (en otros)
aca debe ir
index.html
index.php
tu carpeta imagenes/
tus archivos CSS y JS
EL ARCHIVO index.html
cuando alguien ingrresa al dominio (ejemplo tusitio.com) el servidor busca automaticamente el archivo index.html (o index.php)
el sitio no se carga correctamente cuando
el indice no esta
esta mal escrito
o esta dentro de una carpeta innecesaria
este archivo es tu pagina principal
ERROR COMUN AL SUBIR EL SITIO
ERROR TIPICO
cree una carpeta de llamada local mi-sitio/y suba toda esa carpeta al servidor, dejando que el index.htmlquede dentro (por ejemplo: mi-sitio/index.html)
Entonces el servidor no lo reconoce como la página principal
LA BUENA PRACTICA SERIA
solo subir los archivos internos (no la carpeta contenedora).
dejar que
index.htmlvaya directo dentro de public_html/htdocs
tus imágenes y otros recursos mantienen la misma estructura interna (ej. imagenes/logo.jpg).
GESTION DE RECURSOS (IMAGENES, CSS, ETC)
es importante subir todos los elementos precisos
HTML
CSS
IMAGENES
GUIONES, ETC
si te olvidas de subir la carpeta imagenes/
el navegador no encontraría las imágenes
verá solo el texto del alto el recuadro de “imagen rota”.
Si cambias la ruta en el código pero no en el servidor, o viceversa, el sitio se verá mal
CREACION Y OBTENCION DE IMAGENES
DE DONDE VIENEN LAS IMAGENES
las imagenes de tu sitio pueden venir de
FOTOGRAFIAS: tomadas con celulares o camaras
DISEÑO: creadas con programas con
PHOTOSHOP, ILLUSTRATOR, FIGMA
luego se guardan como archivos JPG, PNG, SVG, GIF, etc y se suben al hosting o a la carpeta del proyecto
PAINT
DESCARGAR IMAGENES DE INTERNET
hacer click derecho sobre la imagen y presionar Guardar imagen como
DERECHOS DE USO (COPYRIGHT)
no toda imagen de internet es libre usar
antes de usar imagen, se debe verificar
si esta protegido por derechos de autor
o si tiene licencia libre/uso gratuito
se recomienda ussar
UNSPLASH, fotos libres de uso
ICONFINDER, iconos SVG y PNG libres de pago
ESTRATEGIA Y MARKETING: REDES SOCIALES Y MARCA
REDES SOCIALES COMO HERRAMIENTA DE CONVERSION
las redes son
visibles
tambien consiguen acciones: ventas, contactos, suscripciones, etc
por eso se vinculan los perfiles de redes con
una pagina web propia
una tienda virtual (ecommerce)
para que el usuario vaya desde la red social hasta tu sitio y compre o se contacte
COHERENCIA DE MARCA
significa mantener la misma imagen, estilo y tono de voz en
tu web
asi el usuario reconoce tu marca en todas partes y confia mas
pagina de facebook
tu perfil de ig, linkedin, etc
ROL DEL COMMUNITY MANAGER
el community manager es
quien publica posteos
contar historias (storytelling)
conocer bien cada plataforma (face, ig, tiktok) para saber cuando y como publicar
analiza datos (inteeracciones, links) para mejorar la estrategia
IMPLEMENTACION DE VINCULOS SOCIALES
VINCULOS ABSOLUTOS
cuando el enlace lleva a una red social externa, debes usar un enlace absoluto
XML=
<a href="https://www.facebook.com/tupagina">Facebook</a>
<a href="https://www.instagram.com/tupagina">Instagram</a>
ABSOLUTO porque quiere decir que va con
el protocolo https://
el dominio completo
la ruta completa
ATRIBUTO
target="_blank"
sirve para que el enlace se abra en una pestaña nueva del navegador
ejemplo
XML=
<a href="https://www.facebook.com/tupagina" target="_blank">
Síguenos en Facebook
</a>
ATRIBUTO
"tittle"
texto de descripcion que aparece al pasar el raton por encima
ejemplo, XML
<a href="https://www.instagram.com/tupagina" target="_blank" title="Instagram oficial de mi marca">
Instagram
</a>
CONVERTIR ICONOS E IMAGENES EN VINCULOS SOCIALES
PROCEDIMIENTO ICONO COMO ENLACE
se coloca la imagen dentro del enlace <a> asi el icono (icono PNG O SVG) se vuelve seleccionable
EJEMPLO, XML=
<a href="https://www.instagram.com/tupagina" target="_blank">
<img src="imagenes/instagram.png" alt="Instagram">
</a>
entonces
<img>, muestra el icono
<a> lo convierte en enlace hacia tu red social
CONTROL CON CSS: TAMAÑO DE ICONOS
muchos iconos descargados son muy grandes y se ven desproporcionados
entonces el procedimiento para ajustar el tamaño
1- con CSS se ajusta el tamaño
ejemplo
CSS=
.icono-red {
width: 30px;
height: 30px;
}
2- Luegi se agrega en HTML
ejemplo
HTML=
<a href="https://www.instagram.com/tupagina" target="_blank">
1 more item...
</a>
asi se realiza para que queden todos del mismo tamaño y este proceso se usa para botones de contacto, enlaces a tiendas virtuales, etc
INTEGRACION DE CONTENIDO (COMPLEMENTOS SOCIALES)
QUE SON LOS COMPLEMENTOS SOCIALES?
muestran enlaces y son elementos vivos de redes sociales
ejemplo
muro de Facebook
estos se insertan con codigo por la propia red social
boton de mg
publicacion de ig
fans o seguidores, etc
COMO SE INSERTA EN EL HTML?
1- ingrese a la herramienta para desarrolladores de la red (ejemplo meta for developers en facebbok)
2- genera un codigo de widget o complemento (suele incluir HTML + JAVASCRIPT)
3- copias y pegas ese codigo en tu HTML, en:
justo despues de <body> o
dentro de la seccion donde quieras mostrar el contenido social
ejemplo
XML=
<body>
<!-- tu contenido -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/..."></script>
<div class="fb-page" data-href="https://www.facebook.com/tupagina" ... ></div>
</body>
PERSONALIZACION CON HTML/JS
se puede modificar
el ancho y alto del complemento
si se muestra la foto de portada
usando los atributos proporcionados por la plataforma
si se ven la cara de los fans o seguidores, etc
FUNCION PARA LA MARCA Y EL USUARIO
mostrar
comentarios
ayuda a generar confianza
sienten que el producto es real y confiable y se animan mas a comprar o contactarte
reacciones
me gusta y publicaciones reales
CONCEPTOS FUNDAMENTALES DE IMAGENES
QUE ES UNA IMAGEN EN EL CONTEXTO WEB?
en una pag web, una IMAGEN ES UN ELEMENTO GRAFICO (foto, logo, icono, dibujo) que se integra dentro de la interfaz para acompañar el contenido
se muestra con la etiqueta
<img>
en HTML
EJEMPLO
XML=
<img src="logo.jpg" alt="Logo de mi empresa">
ATRIBUTO
src
(Fuente)
src = fuente/origen
indica donde esta guardando el archivo de la imagen
dentro de tu carpeta: src="imagenes/logo.jpg"
sin este atributo, el navegador no sabe qué archivo mostrar , y la imagen no se ve
o en una URL externa: src="
https://tusitio.com/imagenes/logo.jpg
"
alt
(Texto alternativo)
es el texto descriptivo de la imagen
ACCESIBILIDAD
si una persona con alguna discapacidad, al usar el lector de pantalla, el lector dira el texto que dice en alt y asi entiende que hay en la imagen
ejemplo
XML=
<img src="gato.jpg" **alt="Gato negro durmiendo en el sofá">**
RESPALDO
si la ruta esta mal, ya sea porque la ruta est mal, la imagen no se cargo bien, fue borrado o se rompio la conexion, este
alt
posibilita aparezca el texto en el lugar del agujero vacio que dejo la imagen
ejemplo
XML=
<img src="imagen-rompa.jpg" alt="Error: imagen de producto no disponible">
DOMINIOS Y SUBDOMINIOS
QUE ES UN DOMINIO?
es el nombre unicio de tu sitio en la web
ej, tusitio.com
identifica tu marca o proyecto y permite que la gente te encuentre
se gestiona con
registradores (como GoDaddy, Namecheap)
o directamente con tu empresa de hosting (muchas ofrecen compras de hosting)
QUE ES UN SUBDOMINIO?
es como una seccion