Taller #7 - Manejo de imágenes

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: 975
Joined: Fri Jan 15, 2016 6:13 pm

Taller #7 - Manejo de imágenes

Post by xacarana » Mon Sep 25, 2017 5:25 pm

En este taller aprenderemos como usar imágenes teniendo en cuenta optimizar los recursos y combinar conceptos previos.

Debemos leer la presentación clic aquí
  1. Ejemplo con sprite, para crear un menú de navegación
  2. Crear mockups del sitio usando image map

Los referentes para las aplicaciones:






Referentes de juegos de escape


http://www.365escape.com/House-Arrest.html

Y les recomiendo este sitio con patrones


http://www.heropatterns.com/
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
mateoupb
Posts: 5
Joined: Mon Jul 17, 2017 2:59 pm

Re: Taller #7 - Manejo de imágenes

Post by mateoupb » Wed Oct 04, 2017 3:22 pm

Menú de navegación e image map :idea: :
Image
Algunas áreas :arrow: :
Image
Image
Código :?: : Botonera e image map

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>ejercicios</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="styles/ejercicios.css">
</head>
<body>
	<div id="envoltura">
	<header>
			<img src="images/Logo1.png" id="logo">
			<h1>-Publicaciones Digitales-</h1>
			<nav>
				<ul>
					<a href="index.html">
						<li>HOME</li>
					</a>
						<a href="videos.html">
						<li>VIDEOS</li>
					</a>
						<a href="imagenes.html">
						<li>IMAGENES</li>
					</a>
						<a href="ejercicios.html">
						<li id="articulos">EJERCICIOS</li>
					</a>
				</ul>
			</nav>
		</header>
		<article>
		<h4>Botonera</h4>
	<div id="boton1" class="botonn1"></div>
	<div id="boton2" class="botonn2"></div>
	<div id="boton3" class="botonn3"></div>
	</article>
	<section>
		<h4>Mapa Feria del Libro 2017 (image map)</h4>
		<img id="mapai" src="images/mapa.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="pagesmapa/parqueexplora.html" shape="poly" coords="77,233,43,263,140,339,218,361,248,334" />
    <area alt="" title="" href="pagesmapa/planetario.html" shape="poly" coords="438,435,375,483,434,524,493,522,528,484" />
    <area alt="" title="" href="pagesmapa/casamusica.html" shape="poly" coords="561,501,488,601,570,627,636,627,655,554" />
    <area alt="" title="" href="pagesmapa/udea.html" shape="poly" coords="291,627,307,541,452,553,448,628" />
    <area alt="" title="" href="pagesmapa/fiesta.html" shape="poly" coords="8,183,25,137,64,169,134,213,176,241,219,264,265,288,334,334,371,358,387,377,361,392" />
    <area alt="" title="" href="pagesmapa/orquideorama.html" shape="poly" coords="308,143,328,179,358,192,399,174,408,120,384,91,334,70,292,79,273,91,281,117" />
    <area alt="" title="" href="pagesmapa/primerosauxilios.html" shape="poly" coords="105,82,84,103,108,123,148,147,182,151,159,117,123,82" />
    <area alt="" title="" href="pagesmapa/lecturaviva.html" shape="poly" coords="596,101,563,112,576,149,611,180,635,149,619,119" />
    <area alt="" title="" href="pagesmapa/jardin.html" shape="poly" coords="473,237,437,266,445,287,484,298,527,272" />
    <area alt="" title="" href="pagesmapa/azaleas.html" shape="poly" coords="231,42,193,70,184,89,209,107,240,101,262,69" />
    <area alt="" title="" href="pagesmapa/infantil.html" shape="poly" coords="182,102,171,109,183,135,207,164,217,176,234,198,265,214,285,236,303,248,337,261,392,284,418,291,435,255,426,229,337,199,265,157" />
    <area alt="" title="" href="pagesmapa/lecturavivajardin.html" shape="poly" coords="507,101,474,118,461,148,531,160,518,111" />
    <area alt="" title="" href="pagesmapa/lago.html" shape="poly" coords="392,34,360,57,367,76,430,81,452,66" />
</map>
	</section>
		<footer>
		<h3>- 2017 -</h3>
		</footer>
	</div>
</body>
</html>
Código y estilos css areas :?: :
:arrow:

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>Jardin</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="estilos/planetario.css">
</head>
<body>
<div id="envoltura">
<header>
			<nav>
				<ul>
					<a href="../ejercicios.html">
						<li id="home">EJERCICIOS</li>
					</a>
				</ul>
			</nav>
		</header>
<h1>Jardin</h1>
<img src="img/jardin.jpg">
</div>
</body>
</html>
:arrow:

Code: Select all

 * { padding: 0px;
margin: 0px; }

body { font-family: arial;
	text-align: center;
	margin-top: 30px;
}
#envoltura { 	margin-left: auto;
 margin-right: auto;
 border-bottom-style: none;}


 nav { width: 500px;	 
  	background-color: red;
  margin-left: auto;
  margin-right: auto; 
padding: 10px;
border-radius: 15px;
margin-bottom: 30px;}

  li {display: inline-block;
   color: white;
font-family: arial;
font-size: 15px;
margin-left: 10px;
margin-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
letter-spacing: 5px;
border-style: solid;
border-color: red;}

li:hover {border-style: solid;
border-radius: 10px;
border-color: black;
background-color: white;
color: black; }

h1 {font-family: arial;
color: red;
font-variant: small-caps;}

img	{width: 1000px;
border-radius: 20px;}
Hello World

Post Reply