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
-
xacarana
- Site Admin
- Posts: 1248
- Joined: Fri Jan 15, 2016 6:13 pm
Post
by xacarana » Mon Oct 24, 2016 3:43 pm
Recuerden para optimizar imagenes png, les recomiendo esta pagina
https://tinypng.com/
Code: Select all
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<script src="js/vendor/jquery-1.11.2.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez
-
xacarana
- Site Admin
- Posts: 1248
- Joined: Fri Jan 15, 2016 6:13 pm
Post
by xacarana » Mon Oct 24, 2016 3:49 pm
Crear las secciones que va a tener la aplicación
Code: Select all
<section class="seccion" id="seccion_1">
<nav class="menu">
<button class="btn active">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</nav>
<div class="contenido"></div>
</section>
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez
-
xacarana
- Site Admin
- Posts: 1248
- Joined: Fri Jan 15, 2016 6:13 pm
Post
by xacarana » Mon Oct 24, 2016 5:43 pm
Actualización código html
Code: Select all
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<section class="seccion" id="seccion_1">
<nav class="menu">
<button class="btn btn-primary btn-lg active">1</button>
<button class="btn btn-danger btn-lg">2</button>
<button class="btn btn-info btn-lg">3</button>
</nav>
<div class="contenido"></div>
</section>
<section class="seccion hidden" id="seccion_2">
<nav class="menu">
<button class="btn btn-primary btn-lg">1</button>
<button class="btn btn-danger btn-lg active">2</button>
<button class="btn btn-info btn-lg">3</button>
</nav>
<div class="contenido"></div>
</section>
<section class="seccion hidden" id="seccion_3">
<nav class="menu">
<button class="btn btn-primary btn-lg">1</button>
<button class="btn btn-danger btn-lg">2</button>
<button class="btn btn-info btn-lg active">3</button>
</nav>
<div class="contenido"></div>
</section>
<script src="js/vendor/jquery-1.11.2.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Actualización CSS (main.css)
Code: Select all
/* ==========================================================================
Author's custom styles
========================================================================== */
.seccion{
width: 640px;
height: 480px;
margin: 0 auto;
}
#seccion_1{
background-color: #ff0000;
}
#seccion_2{
background-color: #ffaa00;
}
#seccion_3{
background-color: #ff5500;
}
Programación en javascript (main.js)
Code: Select all
window.onload = function(){
$(".btn").click(function(event){
var seccion = "#seccion_"+event.target.innerHTML;
$(".seccion").removeClass("hidden");
$(".seccion").hide();
$(seccion).slideDown();
});
}
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez
