Ejercicio de composición y diagramación

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

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

Ejercicio de composición y diagramación

Post by xacarana » Mon Feb 13, 2017 2:06 pm

Crear un landing page, para promocionar un producto, donde se evidencie el uso de posicionamiento, fijo, relativo y absoluto. Tenga en cuenta el ejemplo del siguiente enlace:

Ejemplo posicionamiento y diagramación HTML

Se debe publicar:
  • Wireframe (manual y digital)
  • Se debe usar border redondeados, degradados y efecto hover (ver enlaces de recursos)
  • Código html y css
  • Gif con la muestra final
Recursos
Ejemplo de posicionamiento

Hoja de estilos - (main.css)

Code: Select all

section{
			position: relative;
			width: 960px;
			height: 540px;
			background: green;
			margin:0 auto;
		}
		.ruedas{
			background-color: black;
			width: 100px;
			height: 100px;
			border-radius: 100px;
			z-index: 10;
		}
		#rueda_izquierda{
			left: 321px;
			top: 401px;
		}
		#rueda_derecha{
			left: 551px;
			top: 401px;
		}
		section div{
			position: absolute;
		}
		#chasis{
			top: 261px;
			left: 281px;
			width: 400px;
			height: 200px;
			background-color: red;
		}
		#capota{
			top: 161px;
			left: 331px;
			width: 300px;
			height: 100px;
			border:1px solid black;
		}
		#carita{
			top: 91px;
			left: 421px;
			width: 200px;
			height: 200px;
			background-color: yellow;
			border-radius: 100px;
			z-index: 1;
		}
		.ojos{
			width: 50px;
			height: 50px;
			background-color: black;
			border-radius: 50px;
			z-index: 2;
		}
		#ojo_izquierdo{
			top: 50px;
			left: 30px;
		}
		#ojo_derecho{
			top: 50px;
			left: 110px;
		}
		#boca{
			top: 121px;
			left: 41px;
			width: 120px;
			height: 50px;
			background-color: black;
			border-radius: 0px 0px 120px 120px;
			z-index: 3;
		}
		#sombrero{
			top: 50px;
			left: 450px;
			width: 142px;
			height: 70px;
			background-color: brown;
			border-radius: 50px 50px 0px 0px;
			z-index: 4;
		}
		#visera{
			top: 51px;
			left: 142px;
			width: 52px;
			height: 19px;
			background-color: black;
			border-radius: 0px 50px 0px 0px;
		}
Código html - (index.html)

Para lograr un efecto de animación se uso el framework animate css, que se puede descargar de acá y si necesita intrucciones de su configuración se recomienda ver el siguiente video.


Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" type="text/css" href="css/mian.css">
</head>
<body>
<section>
	<div id="carro" class="animated bounceInRight">
		<div class="animated infinite tada">
			<div id="sombrero">
				<div id="visera"></div>
			</div>
			<div id="carita" >
				<div id="boca"></div>
				<div id="ojo_izquierdo" class="ojos"></div>
				<div id="ojo_derecho" class="ojos"></div>	
			</div>
		</div>
	<div id="capota"></div>
	<div id="chasis"></div>
	<div id="rueda_izquierda" class="ruedas"></div>
	<div id="rueda_derecha" class="ruedas"></div>
	</div>
	
</section>
</body>
</html>
Resultado

Image
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
Daniel Zapata
Posts: 4
Joined: Mon Jan 16, 2017 2:18 pm

Re: Ejercicio de composición y diagramación

Post by Daniel Zapata » Mon Feb 13, 2017 3:39 pm

:geek: Wireframe a mano :geek:
Image

:ugeek: Wireframe digital :ugeek:
Image

:idea: Html de la página :idea:

Code: Select all

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">

<title>Reborn Tour</title>
</head>

<body class="contenedor">
<div >
	<div class="divredes">	
		<div class="contenedor_redes">
			
				<a href="https://www.facebook.com/" target="_blank"><div id="icon-01"></div>
				</a>
			
				<a href="https://www.twitter.com/" target="_blank"><div id="icon-02"></div>
				</a>
						
				<a href="https://www.instagram.com/" target="_blank"><div id="icon-03"></div>
				</a>
			</div>
	</div>
	
	<div class="fondo1">
		<div id="imglogo">
			<img src="img/logotour.png">
		</div>
		<div class="btndiv" >
			<a href="http://ticketexpress.com.co/" target="_blank">
				<button class="btn">Boletas Disponibles!</button>
			</a>
		</div> 
	</div>
	<div id="fondo2" class="animated fadeInDownBig">
		<div class="texto_concierto">
			<h1>NIRVANA</h1>
			<p>Para hacer renacer esta banda y tenerla presente en el reborn tour contamos con la alegría de presentar varios grupos paisas que le haran tributo durante más de 4 horas de concierto seguido.</p>
		</div>
	</div>
</div>
</body>

</html>
:P Css de la página :P

Code: Select all

#icon-01{
	background: url(../img/logofb.png) no-repeat;
	height: 30px;
	width: 30px;
	float: left;
	margin-left: 5px;
	z-index: 10;
}
#icon-01:hover {

	background: url(../img/logofbhover.png) no-repeat;
	transition-duration: 0.4s;
	z-index: 10;
	}

#icon-02{
	background: url(../img/logotw.png) no-repeat;
	height: 30px;
	width: 30px;
	float: left;
	margin-left: 5px;
	z-index: 10;
}
#icon-02:hover {

	background: url(../img/logotwhover.png) no-repeat;
	transition-duration: 0.4s;
	z-index: 10;
	}

#icon-03{
	background: url(../img/logoig.png) no-repeat;
	height: 30px;
	width: 30px;
	float: left;
	margin-left: 5px;
	z-index: 10;
}
#icon-03:hover {

	background: url(../img/logoighover.png) no-repeat;
	transition-duration: 0.4s;
	z-index: 1;
	}
.contenedor{
	width: 960px;
	min-height: 480px;
	margin: 0 auto;
	background: 
    linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
    
    url(../img/bkgall.jpg);


}
 

.divredes{
padding-left: 15px;

}
.contenedor_redes{
	position: fixed;
	width: 120px;
	height: 43px;
background: -moz-linear-gradient(top,  rgba(125,126,125,0.85) 49%, rgba(75,75,75,0.85) 72%, rgba(14,14,14,1) 100%); 
background: -webkit-linear-gradient(top,  rgba(125,126,125,0.85) 49%,rgba(75,75,75,0.85) 72%,rgba(14,14,14,1) 100%); 
background: linear-gradient(to bottom,  rgba(125,126,125,0.85) 49%,rgba(75,75,75,0.85) 72%,rgba(14,14,14,1) 100%); /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d97d7e7d', endColorstr='#0e0e0e',GradientType=0 ); 



	padding-left: 10px;
	padding-top: 5PX;
	border-radius: 0px 0px 8px 8px;
	z-index: 5;
}


.fondo1{
	background-image: url(../img/bkg1.jpg);
	height: 560px;
	background-repeat: no-repeat;
	z-index: -2;
}

#imglogo{
	position: relative;
	padding-left: 50%;
	margin-left: -286px;
	padding-top: 115px;
	

}

.btndiv{
	position: relative;
	padding-left: 50%;
	margin-left: -100px;
}


.btn{
	position: relative;
	background-color: #333;
	font-size: 16px;
	border-radius: 8px;
	width: 200px;
	height: 50px;
	color: white;
	border:none;
	text-decoration: none;
	transition-duration: 0.4s;
}

.btn:hover{
	background-color:gray;
	}
	
h1{
    margin-top: 0px;
    margin-bottom: 0px;
    text-shadow: 2px 2px 5px #000000;
}	

p{text-shadow: 1px 1px 4px #000000 ,0px 0px 10px #000000 ,1px 1px 15px #000000;
font-size: 18px;
margin-top: 0px;
    margin-bottom: 0px;
}
#fondo2{
	position: relative;
	background-image: url(../img/bkg2.jpg);
	height: 400px;
	background-repeat: no-repeat;
}

.texto_concierto{
	position: absolute;
	width: 550px;
	height: 120px;
	color: #ffffff;
	border-radius: 5px;
	top: 250px;
	left:50%;
	margin-left:-275px;
}

@font-face {
    font-family: 'Antonio-Regular';
    src: url('../font/Antonio-Regular/Antonio-Regular.eot');
    src: url('../font/Antonio-Regular/Antonio-Regular.eot?#iefix') format('embedded-opentype'),
         url('../font/Antonio-Regular/Antonio-Regular.woff2') format('woff2'),
         url('../font/Antonio-Regular/Antonio-Regular.woff') format('woff'),
         url('../font/Antonio-Regular/Antonio-Regular.ttf') format('truetype'),
         url('../font/Antonio-Regular/Antonio-Regular.svg#Antonio-Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

p{
	font-family: Antonio-Regular;
	font-size:20px;
	color:white;
}

@font-face {
    font-family: 'AbrilFatface-Regular';
    src: url('../font/AbrilFatface-Regular/AbrilFatface-Regular.eot');
    src: url('../font/AbrilFatface-Regular/AbrilFatface-Regular.eot?#iefix') format('embedded-opentype'),
         url('../font/AbrilFatface-Regular/AbrilFatface-Regular.woff2') format('woff2'),
         url('../font/AbrilFatface-Regular/AbrilFatface-Regular.woff') format('woff'),
         url('../font/AbrilFatface-Regular/AbrilFatface-Regular.ttf') format('truetype'),
         url('../font/AbrilFatface-Regular/AbrilFatface-Regular.svg#AbrilFatface-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1{
	font-family: AbrilFatface-Regular;
	font-size:40px;
	color:white;
	letter-spacing:3px;
}

@font-face {
    font-family: 'AnuDaw';
    src: url('../font/AnuDaw/AnuDaw.eot');
    src: url('../font/AnuDaw/AnuDaw.eot?#iefix') format('embedded-opentype'),
         url('../font/AnuDaw/AnuDaw.woff2') format('woff2'),
         url('../font/AnuDaw/AnuDaw.woff') format('woff'),
         url('../font/AnuDaw/AnuDaw.ttf') format('truetype'),
         url('../font/AnuDaw/AnuDaw.svg#AnuDaw') format('svg');
    font-weight: normal;
    font-style: normal;
}

.btn{
	font-family: AnuDaw;
	font-size:14px;
	color:white;
	letter-spacing:-1px;
}
:o Gif de la página :o
Image
picture snapper
Last edited by Daniel Zapata on Mon Feb 27, 2017 2:44 pm, edited 2 times in total.

User avatar
santiggz
Posts: 3
Joined: Mon Jan 16, 2017 2:19 pm

Re: Ejercicio de composición y diagramación

Post by santiggz » Mon Feb 13, 2017 4:03 pm

Image

Código HTML

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>Ejercicio Landing Page</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,700,700i,500,500i" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

</head>

<body>
	
	<div id="background">
		<div id="texto1">
			<h1>“En la victoria lo mereces y en la derrota lo necesitas”</h1>
			<p>Napoleón Bonaparte</p>
		</div>
		
		<div id="texto2">
			<p>Disfruta nuestra amplia variedad de vinos  y licores en nuestra tienda virtual.</p>
		</div>
		<div class="menu">
			<div id="menu1">
				<p>Home</p>
			</div>
			<div id="menu2">
				<p>Vinos</p>
			</div>
			<div id="menu3">
				<p>Contacto</p>
			</div>
		</div>
		<div id="boton">
			<a href="http://www.thewinestore.com.co/catas/" id="texto3">More Info</a>
		</div>
		<div id="recuadro">
		</div>
		<img src="img/fondovinos.jpg" id="fondo">
		<img src="img/logovinos.png" id="logo">
	</div>

	

</body>
Código CSS

Code: Select all

body{
	margin:0;
}
@font-face {
	font-family: 'Great Day Personal Use';
	src: url('GreatDayPersonalUse.eot');
	src: url('GreatDayPersonalUse.eot?#iefix') format('embedded-opentype'),
		url('../font/birds/GreatDayPersonalUse.woff') format('woff'),
		url('../font/birds/GreatDayPersonalUse.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Birds of Paradise';
	src: url('BirdsofParadise.eot');
	src: url('BirdsofParadise.eot?#iefix') format('embedded-opentype'),
		url('../font/birds/BirdsofParadise.woff') format('woff'),
		url('../font/birds/BirdsofParadise.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
a{
	text-decoration: none;
	color:white;
}
#background{
	position:relative;
}

#fondo{
	position:absolute;
	width:1905px;
	z-index: 1;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}
#logo{
	position: absolute;
	width: 600px;
	z-index: 2;
	margin-left: 1200px;
	margin-top: 100px;


}
#texto1{
	z-index: 4;
	position:absolute;
	margin-left: 1150px;
	margin-right:60px;
	margin-top: 400px;
	font-family: 'Great Day Personal Use';
	font-size: 22pt;
	text-align: center;
	color: white;
	letter-spacing: 2px;

}

#texto2{
	z-index: 4;
	position: absolute;
	margin-left: 1170px;
	margin-right: auto;
	margin-top: 775px;
	text-align: center;
	color:#F7D5D5;
	font-family: 'Roboto', sans-serif;
	font-size: 16pt;
	font-style: italic;
	font-weight: 300;


}

#recuadro{
	position: absolute;
	z-index: 2;
	width: 810px;
	height: 1070px;
	background: #8E5959;
	margin-left: 1090px;
	margin-right: 10px
	opacity: 0.7;

}

#boton{
	position: absolute;
	z-index: 4;
	width: 250px;
	height: 50px;
	background: rgba(0,0,0,.5);
	color: white;
	text-align: center;
	margin-left: 1374px;
	margin-top: 880px;
	margin-right: auto;
    border-radius: 15px;
    font-family: 'Roboto', sans-serif;
	font-size: 25pt;
	font-style: italic;
	font-weight: 500;
	padding-top: 40px;
	line-height: 3px;

}
#boton:hover{
	position: absolute;
	z-index: 4;
	width: 250px;
	height: 50px;
	background: #ED6B6B;
	color: white;
	text-align: center;
	margin-left: 1374px;
	margin-top: 880px;
	margin-right: auto;
    border-radius: 15px;
    font-family: 'Roboto', sans-serif;
	font-size: 25pt;
	font-style: italic;
	font-weight: 500;
	padding-top: 40px;
	line-height: 3px;
}
.menu{
	position: absolute;
	z-index: 4;
	color: white;
	font-family: 'Kaushan Script', cursive;
	letter-spacing: 2px;
	font-size: 15pt;
	font-style: italic;
	line-height: 8px;


}

#menu1{
	margin-left: 490px;
	width: 350px;
	height: 50px;
	background: #771E48;
	color: white;
	text-align: center;
	padding-top: 3px;
}

#menu1:hover{
	margin-left: 490px;
	width: 350px;
	height: 50px;
	background: white;
	color: #DB6565;
	text-align: center;
	padding-top: 3px;
}

#menu2{
	margin-left: 840px;
	margin-top: -60px;
	width: 350px;
	height: 50px;
	background: #CE8686;
	color: white;
	text-align: center;
	padding-top: 10px;
}

#menu2:hover{
	margin-left: 840px;
	margin-top: -60px;
	width: 350px;
	height: 50px;
	background: white;
	color: #DB6565;
	text-align: center;
	padding-top: 10px;
}

#menu3{
	margin-left: 1190px;
	margin-top: -60px;
	width: 350px;
	height: 50px;
	background: #771E48;
	color: white;
	text-align: center;
	padding-top: 10px;
}

#menu3:hover{
	margin-left: 1190px;
	margin-top: -60px;
	width: 350px;
	height: 50px;
	background: white;
	color: #DB6565;
	text-align: center;
	padding-top: 10px;
}






Image
Last edited by santiggz on Sat Mar 04, 2017 4:31 pm, edited 1 time in total.

User avatar
Sofía Mejía
Posts: 3
Joined: Mon Jan 16, 2017 2:19 pm

Re: Ejercicio de composición y diagramación

Post by Sofía Mejía » Mon Feb 13, 2017 4:06 pm

Producto: Spa
Wireframe Manual
Image
Wireframe Digital
Image

Gif:
Image

Código HTML:

Code: Select all

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<head>
   <link rel="stylesheet" type="text/css" href="css/animate.css">
   <link rel="stylesheet" type="text/css" href="css/mian.css">
	<title>BONOS SPA</title>
</head>
<body>
 <div class="bg"> <img src="img/fondo.png"></div>

<section>

 <div id="contenido" class="animated bounceInLeft">
  
   <div class="bono"><strong> bonos spa <br> PARA REGALOS </strong></div>

   <div class="parrafo" >  
   <p> Para celebrar las fechas especiales a tus seres queridos compra un bono de regalo en cualquiera de nuestros servicios de relajación, estética facial, corporal o depilación con cera y permite que tengan un recuerdo inolvidable en Banja Spa.</p></div>

   

<a href="http://www.google.com.co">
    REGALA TU BONO
</a>
</div>
</section>
<div class="logo"> <img src="img/logo.png"></div>

</body>
</html>

Código CSS:

Code: Select all

body{
	font-family: sans-serif;
	margin: 0;
	padding: 0;
}

#contenido{
	position: relative;

	width: 800px;
	height: 600px;
}

.bono{
	font-size: 2.2em;
	position: absolute;
	text-align: right;
	color: white;
	top: 33%;
	left: 55%;
	z-index: 10;
	text-transform: uppercase; 
	
}

.logo{
	top:0;
	left:0;
	position: fixed;
}


.bg {
	top:0;
    min-height: 100%;
    background-position: center;
    background-size: cover;
    position: fixed;
}



.parrafo{
	font-size: 15pt;
	width:500px;
	text-align: right;
	color: #252d1d;
	top: 45%;
	left: 28%;
	position: absolute;
	z-index: 9;

}

a{
	background-color: white;
	text-decoration: none;
	color: black;
	padding: 20px;
	border-radius: 30px 30px 10px 40px;
	width: 200px;
	text-align: center;
	top:70%;
	position: absolute;
	left: 47%;
	margin-left: 14%;
}

a:hover{
	background-color: #d8ded6;
}

Last edited by Sofía Mejía on Tue Mar 28, 2017 5:06 pm, edited 1 time in total.

paulicuadros
Posts: 2
Joined: Mon Feb 13, 2017 3:05 pm

Re: Ejercicio de composición y diagramación

Post by paulicuadros » Mon Feb 13, 2017 4:07 pm

WIREFRAME A MANO Y DIGITAL

Image

Image

HTML:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Adopción Springer Spaniel</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>

<div id="springer">
	<h1>Adopción de <br> Springer Spaniels</h1>
	<h2>Conoce los 3 springer spaniels que tenemos <br> en adopción: Jero, Jero II y Jero III.</h2>
	<a href="https://www.petfinder.com/petdetail/26727333" id="boton">CONÓCELOS YA</a>
	<img src="img/1.jpg" id="img1">
	<img src="img/2.jpg" id="img2"> 
	<img src="img/3.jpg" id="img3">
	<img src="img/4.jpg" id="img4">
</div>	

</body>
</html>
CSS:

Code: Select all

@font-face {
    font-family: 'GeosansLight';
    src: url('GeosansLight.eot');
    src: url('GeosansLight.eot?#iefix') format('embedded-opentype'),
        url('../font/geosans_light/GeosansLight.woff2') format('woff2'),
        url('../font/geosans_lightGeosansLight.woff') format('woff'),
        url('../font/geosans_lightGeosansLight.ttf') format('truetype'),
        url('../font/geosans_lightGeosansLight.svg#GeosansLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Westmeath';
    src: url('Westmeath-Italic.eot');
    src: url('Westmeath-Italic.eot?#iefix') format('embedded-opentype'),
        url('../font/westmeath/Westmeath-Italic.woff2') format('woff2'),
        url('../font/westmeathWestmeath-Italic.woff') format('woff'),
        url('../font/westmeathWestmeath-Italic.ttf') format('truetype'),
        url('../font/westmeathWestmeath-Italic.svg#Westmeath-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}


h1 {
    font-family: 'Westmeath', sans-serif, bold;
    font-size: 66px;
    color: #6BC9C9;
    line-height: 85%;
    position: absolute;
    top: 100px;
    left: 322px;
}

h2 {
    font-family: 'GeosansLight', sans-serif;
    font-size: 25px;
    color: #C6CCCC;
    position: absolute;
    top: 255px;
    left: 326px;
}

#boton{
    position: absolute;
    top: 375px;
    left: 325px;
    background: #6BC9C9;
  background-image: -webkit-linear-gradient(top, #6BC9C9, #438f8f);
  background-image: -moz-linear-gradient(top, #6BC9C9, #438f8f);
  background-image: -ms-linear-gradient(top, #6BC9C9, #438f8f);
  background-image: -o-linear-gradient(top, #6BC9C9, #438f8f);
  background-image: linear-gradient(to bottom, #6BC9C9, #438f8f);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: 'Westmeath';
  color: #ffffff;
  font-size: 20px;
  padding: 11px 19px 10px 20px;
  text-decoration: none;
}

#boton:hover{
    background: #fcf23c;
  background-image: -webkit-linear-gradient(top, #fcf23c, #968b15);
  background-image: -moz-linear-gradient(top, #fcf23c, #968b15);
  background-image: -ms-linear-gradient(top, #fcf23c, #968b15);
  background-image: -o-linear-gradient(top, #fcf23c, #968b15);
  background-image: linear-gradient(to bottom, #fcf23c, #968b15);
  text-decoration: none;
}

#springer{
	position: relative;
    margin: 0 auto;
	width: 905px;
}

#img1{
	position: absolute;
    top: 150px;
    left:-1px;
}

#img2{
	position: absolute;
    top: 475px;
    left: -1px;
}

#img3{
	position: absolute;
    top: 475px;
    left: 326px;
}

#img4{
	position: absolute;
    top: 475px;
    left: 654px;
}
GIF LANDING:

Image
Last edited by paulicuadros on Mon Feb 27, 2017 4:34 pm, edited 1 time in total.

User avatar
juanzv03
Posts: 3
Joined: Mon Jan 16, 2017 2:19 pm

Re: Ejercicio de composición y diagramación

Post by juanzv03 » Mon Feb 13, 2017 4:15 pm

:D Wireframe manual:

Image

:shock: Wireframe digital:

Image

:roll: .gif de la Web

Image

:idea: html

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>Trekking en los Alpes</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	
</head>


<body>

<header>

	<div id="entrada" class="animated bounceInLeft">
		<p>Son 7 días de senderismo y montañismo por los Alpes que nos dejarán boquiabiertos por la magnitud de sus glaciares, largos valles y caudalosos y blanquecinos ríos. Tendremos la oportunidad de observar la segunda  montaña más alta de Europa y que fue un referente de lo que hoy conocemos como Alpinismo, el Mont Blanc. </p>
	</div>

	
	 <a class="btn" href="http://www.danitguia.com/trekking-rutas-montana-alpes-miradores-del-mont-blanc/" target="_blank"> I a la web </a> 

</header>

<div id="producto">
	
	<div id="imagen"> 

		<img src="img/product.jpg"> 

	</div>

	<div id="descripcion" class="animated fadeIn"> 

		<h3>Servicios incluidos: </h3>

Guía acompañante.(Socio Asociación Española de Guías de Montaña) y miembro de la UIMLA (Unión Internacional de Guías Acompañantes)
Asesoramiento técnico.
Seguro de accidentes y de responsabilidad  civil.
Material de seguridad.

<h3>Servicios no incluidos: </h3>

Gastos de alojamiento y comidas de los participantes.
Transporte de los participantes.
Gastos imprevistos.</p>

	</div>

</div>

<div class="redes_sociales1">
	<a href="https://www.facebook.com/" target="_blank"><div id="icon-01"></div></a>
	<a href="https://www.twitter.com/" target="_blank"><div id="icon-02"></div></a>
	<a href="https://www.instagram.com/" target="_blank"><div id="icon-03"></div></a>
</div>

<footer> 

	<p>Copyright © Todos los Derechos Reservados - 2017</p>

</footer>

</body>
</html>
:mrgreen: css

Code: Select all

@font-face {
    font-family: 'JosefinSlab';
    src: url('../fonts/JosefinSlab/JosefinSlabRegular/JosefinSlab.eot');
    src: url('../fonts/JosefinSlab/JosefinSlabRegular/JosefinSlab.eot?#iefix') format('embedded-opentype'),
         url('../fonts/JosefinSlab/JosefinSlabRegular/JosefinSlab.woff2') format('woff2'),
         url('../fonts/JosefinSlab/JosefinSlabRegular/JosefinSlab.woff') format('woff'),
         url('../fonts/JosefinSlab/JosefinSlabRegular/JosefinSlab.ttf') format('truetype'),
         url('../fonts/JosefinSlab/JosefinSlabRegular/JosefinSlab.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlab-Bold';
    src: url('../fonts/JosefinSlab/JosefinSlab-Bold/JosefinSlab-Bold.eot');
    src: url('../fonts/JosefinSlab/JosefinSlab-Bold/JosefinSlab-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/JosefinSlab/JosefinSlab-Bold/JosefinSlab-Bold.woff2') format('woff2'),
         url('../fonts/JosefinSlab/JosefinSlab-Bold/JosefinSlab-Bold.woff') format('woff'),
         url('../fonts/JosefinSlab/JosefinSlab-Bold/JosefinSlab-Bold.ttf') format('truetype'),
         url('../fonts/JosefinSlab/JosefinSlab-Bold/JosefinSlab-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'JosefinSlab-SemiBold';
    src: url('../fonts/JosefinSlab/JosefinSlab-SemiBold/JosefinSlab-SemiBold.eot');
    src: url('../fonts/JosefinSlab/JosefinSlab-SemiBold/JosefinSlab-SemiBold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/JosefinSlab/JosefinSlab-SemiBold/JosefinSlab-SemiBold.woff2') format('woff2'),
         url('../fonts/JosefinSlab/JosefinSlab-SemiBold/JosefinSlab-SemiBold.woff') format('woff'),
         url('../fonts/JosefinSlab/JosefinSlab-SemiBold/JosefinSlab-SemiBold.ttf') format('truetype'),
         url('../fonts/JosefinSlab/JosefinSlab-SemiBold/JosefinSlab-SemiBold.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}


h3 {
	font-family: 'JosefinSlab-Bold';
	font-size: 20px;
	
}

header a {
	font-family: 'JosefinSlab-SemiBold';
	font-size: 18px;
	
}

header {

	position: relative;
	height: 400px;
	background-image: url(../img/fondo.jpg);
	width: 100%;
	font-family: 'JosefinSlab';
	font-size: 18px;


}

#entrada {
position: absolute;
background-color: rgba(0, 0, 0, .5);
width: 500px;
height: 150px;
left: 50%;
margin-left: -250px;
top:100px;
color: white;
padding-right: 20px;
padding-left: 20px;

}

#producto {
	
	position: relative;
	width: 800px;
	height: 400px;
	margin: 0 auto;
	

}

#imagen {

	position: absolute;
	top: 50px;

}

#descripcion {
position: absolute;
background-color: rgba(0, 0, 0, .0);
width: 400px;
height: 350px;
left:450px;
top:80px;

}




p {
	text-align: center;
	
	
} 


.btn {
  position: absolute;
  background: #000000;
  background-image: linear-gradient(to bottom, #000000, #636363);
  border-radius: 15px;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  bottom: 75px;
  left: 50%;
transform: translateX(-50%);

}

.btn:hover {
  background: #e6e6e6;
  background-image: linear-gradient(to bottom, #e6e6e6, #c2c2c2);
  text-decoration: none;
  color: black;

}

#icon-01{
	background: url(../img/icon-01.jpg) no-repeat;
	height: 30px;
	width: 30px;
	float: left;
	margin-left: 5px;
}
#icon-01:hover {

	background: url(../img/icon-01-hover.jpg) no-repeat;
	transition-duration: 0.4s;
	
}





#icon-02{
	background: url(../img/icon-02.jpg) no-repeat;
	height: 30px;
	width: 30px;
	float: left;
}
#icon-02:hover {

	background: url(../img/icon-02-hover.jpg) no-repeat;
	transition-duration: 0.4s;
	
}

#icon-03{
	background: url(../img/icon-03.jpg) no-repeat;
	height: 30px;
	width: 30px;
	float: left;
}
#icon-03:hover {

	background: url(../img/icon-03-hover.jpg) no-repeat;
	transition-duration: 0.4s;
	
}


.redes_sociales1 {
	position: fixed;
	right: 20px;
	top: 0px;
	width: 100px;
	height: 40px;
	background-color:white;
	border-radius: 0px 0px 10px 10px;
	padding-top: 10px;

}



footer {
	padding-top: 20px;
	font-family: 'JosefinSlab-SemiBold';
	font-size: 14px;
}
Last edited by juanzv03 on Mon Feb 27, 2017 2:40 pm, edited 3 times in total.

mariaf castro
Posts: 1
Joined: Tue Jan 24, 2017 1:41 pm

Re: Ejercicio de composición y diagramación

Post by mariaf castro » Mon Feb 13, 2017 4:20 pm

Image
Image

User avatar
Valeria.torres
Posts: 3
Joined: Mon Jan 16, 2017 2:21 pm

Re: Ejercicio de composición y diagramación

Post by Valeria.torres » Mon Feb 13, 2017 4:25 pm

Wireframe manual:
Image

Wireframe digital:
Image

Gif:
Image

Código HTML:

Code: Select all

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
<head>
	<title>Chameleon</title>
</head>
<body>

	<div class="imagenes animated bounceInLeft">
		<img src="img/marcadoresex.jpg"/>
 	</div>

 	<div class="imagenes2">
 		<img src="img/puntas.png"/>
 	</div>

 	<div class="imagenes3 animated bounceInDown">
 		<img src="img/logo.png">
 	</div>

<div class="texto">
	<p>Chameleon Art Products is not just “another marker company”. We pride ourselves on developing real innovation that enhances our end users ability to maximize their creativity in all aspects of their artwork. </p>
 <br>
	<p>Our markers bring colour control and simplicity to your art. Create stunning 3D effects, smooth transitions, highlighting, shading, gradations and blending, ALL WITH ONE PEN. </p>

 <a class="animated bounceInUp" href="http://store.chameleonpens.com/?utm_source=maindotcom&utm_medium=banner&utm_campaign=buyNA">
     <strong>  BUY </strong>
</a>


</div>

</body>
</html>
Código CSS:

Code: Select all

body {
	background-color: #252525

}

.imagenes{
	position: absolute;
	top: 40px;
	left: 110px;
}

.imagenes2{
	position: absolute;
	top: 720px;
	left: 205px;
}

.imagenes3{
	position: fixed;
	top: 130px;
	left: 1200px;
}

.texto{ 
	width: 500px;
	color: #ffffff;
	position: fixed;
	top: 290px;
	left: 1100px;
	right: 110px;
	text-align: justify-all;
}

a{
	font-family: sans-serif;
	font-size: 2em;
	text-decoration: none;
	background-color: #FCBE31;
	color:black;
	padding: 10px;
	border-radius: 10px 50px;
	width: 200px;
	text-align: center;
	top: 240px;
	position: absolute;
	left:50%;
	margin-left: -110px;
}

a:hover{
	color: white;
}
Last edited by Valeria.torres on Tue Mar 28, 2017 8:11 pm, edited 1 time in total.

User avatar
Cristina Fontan
Posts: 3
Joined: Mon Jan 16, 2017 2:18 pm

Re: Ejercicio de composición y diagramación

Post by Cristina Fontan » Tue Feb 14, 2017 6:57 pm

Producto: evento en Jardín Botánico

:geek: Wireframes a mano y digital
Image
Image

:geek: HTLM del proyecto

Code: Select all

<!DOCTYPE html>
<html>

<head>
	<title> Tarde de Jardín</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">

</head>

<body>

<img src="img/rojoOpt.jpg" id="fondo">

<div class="centrar" >

	<img src="img/Logo.png" id="tardedejardin">
	
	<div id="entrada">
		<h1> Disfruta de una tarde rodeado de jardín, aire fresco, música y sabores del mundo en compañía de tus personas más queridas.</h1>
	</div>
	
	<div id="info">
		<a href="http://vive.tuboleta.com/" id="boton" class="animate pulse"> COMPRA TUS BOLETAS</a>

		<p> LUGAR: Jardín Botánico <br>Joaquín Antonio Uribe <br> FECHA: 23 de junio de 2017 <br> HORA: 8 a.m. a 6 p.m.
		<br>
		<i>¡ven a disfrutar!</i>
		</p>
	</div>
	
</div>

<div> 
<p id="iniciativa"> Una iniciativa de la Alcaldía de Medellín</p>
</div>

<p id="creds"> fotografía: tomada de Pexels.com </p>


</body>

</html>

:geek: CSS del proyecto

Code: Select all

@font-face {
	font-family: 'GeosansLight';
	src: url('../fonts/geo_sans/GeosansLight.eot');
	src: url('../fonts/geo_sans/GeosansLight.eot?#iefix') format('embedded-opentype'),
		url('../fonts/geo_sans/GeosansLight.woff2') format('woff2'),
		url('../fonts/geo_sans/GeosansLight.woff') format('woff'),
		url('../fonts/geo_sans/GeosansLight.ttf') format('truetype'),
		url('G../fonts/geo_sans/eosansLight.svg#GeosansLight') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Great Day Personal Use';
	src: url('../fonts/great_day/GreatDayPersonalUse.eot');
	src: url('../fonts/great_day/GreatDayPersonalUse.eot?#iefix') format('embedded-opentype'),
		url('../fonts/great_day/GreatDayPersonalUse.woff2') format('woff2'),
		url('../fonts/great_day/GreatDayPersonalUse.woff') format('woff'),
		url('../fonts/great_day/GreatDayPersonalUse.ttf') format('truetype'),
		url('../fonts/great_day/GreatDayPersonalUse.svg#GreatDayPersonalUse') format('svg');
	font-weight: normal;
	font-style: normal;
}


#fondo{
	position:absolute;
	z-index: 1;
	width: 1905px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

body{
	margin: 0;
}


.centrar{
	position: relative;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	z-index: 2;
}

#entrada{
	position:absolute;
	width:270px;
	margin-left: 20px;
	left:0px;
	text-align: right;
	font-family: 'GeosansLight';

}

#info{
	position:absolute;
	width:280px;
	right:0px;
	text-align: left;
	margin-top:19px;
	font-size: 15px;
	color:white;
	line-height: 20px;
	font-family: 'GeosansLight';
}


#tardedejardin{
	margin-top: 141px;
}


h1{
	color: white;
	font-size: 26px;
	line-height: 29px;
}

#boton{
			
	background: #e0d0ed;
	background-image: linear-gradient(to bottom, #e0d0ed, #946fd9);
	border-radius: 23px;
	box-shadow: 3px 4px 9px #5c445c;
	color: #6b2f6b;
	font-size: 15px;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
}

#boton:hover {
  background: lightpink;
  text-decoration: none;
}

#iniciativa{
	margin-left:-280px;
	left:50%;
	z-index: 3;
	position: absolute;
	margin-top: 185px; 
	font-size: 25px;
	color: #e0d0ed;
	text-decoration: all;
	text-shadow: 3px 3px 5px #333333;
	font-family: 'Great Day Personal Use';
	letter-spacing: 2px;
}

#creds{
	position:fixed;
	bottom:0px;
	width:280px;
	height: 20px;
	z-index: 4;
	padding: 5px;
	margin-left: -150px;
	left:50%;
	margin-bottom: 0px;
	background-color: white;
	color: DarkSlateBlue;
	text-align: center;
	font-family: 'GeosansLight';
}

:geek: GIF del proyecto terminado
Image
Last edited by Cristina Fontan on Mon Feb 27, 2017 4:19 pm, edited 1 time in total.

ErikaVasquezG
Posts: 3
Joined: Mon Jan 16, 2017 2:23 pm

Re: Ejercicio de composición y diagramación

Post by ErikaVasquezG » Sun Feb 19, 2017 12:34 pm

Wireframe manual
Image

Wireframe Digital
Image

Código Html

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
	<title></title>
</head>
<body>

<div id="portada">
 <div id="cabe">
  <img src="img/cabezote1.jpg"/></div>
 <div id="logo"> 
   <img src="img/logo.png"></div>
 <div id="promo">
 <h4>Regístrate y disfruta de nuestros descuentos</h4></div>
 <div id="boton"> <a href="#">Regístrate</a></div>
 </div>
 <div id="contacto"> <a href="#">contacto</a></div>

<div id="titulo">
  <h1>NUESTROS SERVICIOS</h1>
</div>

<div id="numeros">
  <div id="uno"><img src="img/uno.png"></div>
  <div id="dos"><img src="img/dos.png"></div>
  <div id="tres"><img src="img/tres.png"></div>
</div>

 <div id="servicios">
 	<div id="mesa"><p> Mesa de dulces:

  contamos con la mejor selección de cheese cake para endulzar todas tus celebraciones.</p>
    </div>
  <div id="domicilio"><p> Postres a domicilio:

    donde estes y donde nos necesites, llevamos tus postres a domicilio para que te concientas.</p>
    </div>
  <div id="fechas"><p> Fechas especiales: 

    sorprende a quien amas con nuestros deliciosa línea de cheese cakes hechos especialmente para ti.</p>
    </div>
   
 </div>
 <div id="redes-sociales">
 	<div id="red"><img src="img/iconos.png"/></div>
 	<div id="copy"><p> Copyright © 2017 / Calle 22 # 22-22 Medellín - Colombia</p></div>
 </div>




</body>
</html>
Código css

Code: Select all

body{
	background-color: #FFFFFF;
}

@font-face {
	font-family: 'Arcon';
	src: url('../fonts/arcon/Arcon-Regular.eot');
	src: url('../fonts/arcon/Arcon-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/arcon/Arcon-Regular.woff2') format('woff2'),
		url('../fonts/arcon/Arcon-Regular.woff') format('woff'),
		url('../fonts/arcon/Arcon-Regular.ttf') format('truetype'),
		url('../fonts/arcon/Arcon-Regular.svg#Arcon-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Bebas Neue';
	src: url('../fonts/bebas/BebasNeue.eot');
	src: url('../fonts/bebas/BebasNeue.eot?#iefix') format('embedded-opentype'),
		url('../fonts/bebas/BebasNeue.woff2') format('woff2'),
		url('../fonts/bebas/BebasNeue.woff') format('woff'),
		url('../fonts/bebas/BebasNeue.ttf') format('truetype'),
		url('../fonts/bebas/BebasNeue.svg#BebasNeue') format('svg');
	font-weight: normal;
	font-style: normal;
}

p{
	font-family: 'Arcon';
	color; black;
	font-size: 18px;
	
}

h1{
	font-family:'Bebas Neue';
	color:black;
	font-size: 50px;

}
h4{
	font-family: 'Arcon';
	color: #AE5121 ;
	font-size: 20px;

}

#portada{
	position: relative;
	top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	height: 447px;
	z-index: 1;
}
#cabe{
	position: absolute;
	z-index: 1p;
	top: 0px;
	left: 0px;
}
#logo{
	position: absolute;
	z-index: 20;
	top: 15px;
}
#promo{
	position:absolute;
	z-index: 30;
	top:350px;
	left:480px;
}
#boton{
	position: absolute;
	z-index: 40;
	background-color: #AE5121;
	border-radius: 5px 5px 5px 5px;
	width:111px;
	height: 34px;
	text-align: center;
	right: 110px;
	top: 390px;
	line-height: 30px;
}
#contacto{
	position: fixed;
	z-index: 50;
	background-color: #AE5020;
	width: 134px;
	height: 42px;
	text-align: center;
	top:0px;
	border-radius: 0px 0px 5px 5px;
	right: 200px;
	line-height: 40px;

}

#titulo{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	top: 80px;
	width: 960px;
	height: 
}
a{
	color: white;
}

#numeros{
	position: relative;
	width: 960px;
	height: 160px;
	margin: 0 auto;
	top: 100px;
}

#uno{
	position:absolute;
	top:30px;
	left: 56px;
	width: 100px;
	height: 94px;
}
#dos{
	position:absolute;
	top:30px;
	left: 50%;
	width: 220px;
	height: 94px;
	margin-left: -110px;
	
}
#tres{
	position:absolute;
	top:30px;
	right: 156px;
	width: 100px;
	height: 94px;
}

#servicios{
	position: relative;
	width: 960px;
	height: 160px;
	margin: 0 auto;
    top: 90px;
}
#mesa{
	position:absolute;
	top:30px;
	left: 50px;
	width: 220px;
	height: 94px;
	text-align: center;
}
#domicilio{
	position:absolute;
	top:30px;
	left: 50%;
	width: 220px;
	height: 94px;
	margin-left: -110px;
	text-align: center;
	
}
#fechas{
	position:absolute;
	top:30px;
	right: 45px;
	width: 220px;
	height: 94px;
	text-align: center;
	
}

#redes-sociales{
	position: relative;
	width: 1300px;
	height: 100px;
	background-color: #AE5020;
	margin-left: auto;
	margin-right: auto;
	top:200px;
	bottom: 0px;
	}

#red{
	position: absolute;
	right: 180px;
	top:10px;
}

#copy{
	position:absolute;
	left: 180px;
	top:45px;
	color: white;
}

Gif del landing
Image
Last edited by ErikaVasquezG on Sat Mar 04, 2017 10:35 pm, edited 2 times in total.

Post Reply