Page 1 of 1

Taller #7 - Manejo de imágenes

Posted: Mon Sep 25, 2017 5:25 pm
by xacarana
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/

Re: Taller #7 - Manejo de imágenes

Posted: Wed Oct 04, 2017 3:22 pm
by mateoupb
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;}