Taller #3 - Mejorando la visualización + registro tráfico

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Taller #3 - Mejorando la visualización + registro tráfico

Post by xacarana » Sun Jul 30, 2017 10:41 pm

Taller

Debe publicar las evidencias (url, pantallazos, etc) en este post
  1. Posicionamiento de elementos usando propiedad position (40%)
  2. Configuración de cuenta de google analytics y reporte próxima clase (30%)
  3. Subir primera versión al servidor (20%)
  4. Optimización de imágenes (png,spritesheet, jpg, gif)(10%)
Referencias

Configuración google analytics





Spritesheet photoshop



Posicionamiento, ejemplo







Optimización de imágenes



Recomendados

Publicidad



Sitio web
Image
CSS Design Awards

UX - Google I/O



Lectura recomendada

Image

https://techcrunch.com/2017/06/27/faceb ... ion-users/

No se le olvide leer los comentarios :)

Para el proyecto del epub, acá les pongo unas referencias de proyectos del semestre pasado
Enlaces recomendados
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Re: Taller #3 - Mejorando la visualización + registro tráfico

Post by xacarana » Mon Jul 31, 2017 5:35 pm

Ejercicio de posicionamiento de la clase de hoy

Html + analytics

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

<div id="contenedor_padre">
	
	<div id="montana"></div>
	<div id="sol">
		<img src="img/Bear-icon.png">
	</div>
	<div id="arbol"></div>
	<div id="nube_1"></div>
	<div id="nube_2"></div>

</div>


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-72587880-1', 'auto');
  ga('send', 'pageview');

</script>
</body>
</html>
Css

Code: Select all

#contenedor_padre{
	position: relative;
	width: 800px;
	height: 540px;
	/*background-color: #aa0022;
	background-color: rgb(255,0,0);*/
	background-color: rgba(0,255,0,0.5);
}
#montana{
	position: absolute;
	width: 800px;
	height: 200px;
	left: 0px;
	bottom: 0px;
	background-color: red;
}
#sol{
	position: absolute;
	width: 150px;
	height: 150px;
	top: 50px;
	left: 20px;
	background-color: yellow;
	border-radius: 75px;
}
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply