Ejemplo Single app

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

Ejemplo Single app

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

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

Re: Ejemplo Single app

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

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

Re: Ejemplo Single app

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

Post Reply