Wireframe Aplicaciones Móviles

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

User avatar
JuanRomeroL
Posts: 17
Joined: Mon Jan 22, 2018 11:41 am

Wireframe Aplicaciones Móviles

Post by JuanRomeroL » Fri Aug 10, 2018 8:23 am

Poner los Wireframe de Aplicaciones Móviles.
Juan Pablo Romero Londoño
Estudiante Ingeniería de Sistemas 8 semestre :geek:
Universidad Pontificia Bolivariana
ID: 000287960

User avatar
Valeriam04
Posts: 45
Joined: Tue Jan 17, 2017 8:55 am

Re: Wireframe Aplicaciones Móviles

Post by Valeriam04 » Fri Aug 10, 2018 8:40 am

Code: Select all

 CSS
body {
    *{
        margin: 0;
        padding: 0;
    }

    header {
        position: fixed;
        background: pink;
        width: 100%;
        position: fixed;
        z-index: 100;
        overflow: hidden;
    }

    nav {
        float: left; /* Desplazamos el nav hacia la izquierda */
    }

    nav ul {
        list-style: none;
        overflow: hidden; /* Limpiamos errores de float */
    }

    nav ul li {
        float: left;
        font-family: Arial, sans-serif;
        font-size: 20px;
    }

    nav ul li a {
        display: block; /* Convertimos los elementos a en elementos bloque para manipular el padding */
        padding: 20px;
        color: #fff;
        text-decoration: none;
    }

    nav ul li:hover {
        background: #FD6C9E;
    }

    .contenido {
        padding-top: 80px;
    }

    .wrapper {
        width: 80%;
        max-width: 3000px;
        margin: auto;
        overflow: hidden;
    }
}

Code: Select all

GENERO

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Genero Musical</title>

        <header>
            <nav>
                <ul>
                    <li> <a href="file:///Users/valeriamorenozapata/Documents/Plataformas2018/Musica/index.html">Genero</a> </li>
                    <li> <a href="file:///Users/valeriamorenozapata/Documents/Plataformas2018/Musica/artista.html">Artista</a> </li>
                    <li> <a href="file:///Users/valeriamorenozapata/Documents/Plataformas2018/Musica/top.html">Top 20</a> </li>
                </ul>
            </nav>
        </header>

        <style>
            h1 {
                color: black;
                text-align: center;
            }

            h2 {
                color: red;
                text-align: left;
            }

            #parrafo1 {
                color: black;
            }

            #parrafo2 {
                color: black;
            }
            #img1{
                float:right;
            }

            iframe{
                display:block;
                margin-left:auto;
                margin-right:auto;
            }
        
        </style>

    </head>
    <body>
        <br />
        <br />
        <br />
        <font face="arial" size="6">

            <h1> <b>Música Latina</b> </h1><br />

        </font>

        <p id="parrafo1">
            <section class=wrapper>
                <div>
                    <font face="arial" size="5">
                        <img id="img1" src="imagenes/musicalatina.jpg" aling="right" width="250" height="250" />

                        La música de América Latina, también llamada música latina, es la música cultivada en los países de América Latina.
                        Se empezó a utilizar a partir de los años 50 en los Estados Unidos para referirse a los ritmos musicales típicos de
                        América Latina, buscando una diferenciación entre los estilos de origen afroamericano de los afrolatinoamericanos.
                        En este sentido, se considera que hacen parte de la música latina un gran número de géneros: el merengue, la bachata, la salsa,
                        el dancehall, el Grimey, la bossa nova, la cumbia, el tango, el fado, la milonga, el rock latino; desde la música norteña de
                        México a la sofisticada habanera de Cuba, desde las sinfonías de Heitor Villa-Lobos a los sencillos sonidos de la quena.
                        El único elemento en común que tienen estas músicas es el uso de los idiomas latinos, predominantemente el español y el
                        portugués de Brasil, aunque en este último país se prefiere el término música de América Latina.

                    </font>
                </div>
            </section>
            <br />
            <br />
            <br />
            <br />
        </p>

        <section class=wrapper>
            <font face="arial" size="6">
                <h2> <b>Salsa</b> </h2>
            </font>

        </section>

        <p id="parrafo2">
            <section class=wrapper>
                <font face="arial" size="5">
                    Los mejores clásicos de la salsa

                </font>
                <br />
                <br />
                <iframe width="560" height="315"
                        src="https://www.youtube.com/embed/QRzybB_8LuE" target="_blank"
                        frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                <br />
                <br />
                <font face="arial" size="5">
                    Es género musical bailable resultante de la síntesis del son cubano, y otros géneros de música caribeña,
                    con el jazz y otros ritmos estadounidenses. La salsa tiene escenas regionales puertorriqueña, venezolana, dominicana,
                    colombiana y de otros países de América Latina. La salsa fue consolidada como un éxito comercial por músicos de origen
                    puertorriqueños en la ciudad de Nueva York en la década de 1960, si bien sus raíces se remontan a décadas anteriores en países
                    del Gran Caribe. La salsa abarca varios estilos como la salsa dura, la salsa romántica y la timba.
                </font>
            </section>
        </p>

    </body>
</html>

Code: Select all

ARTISTA

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Artista</title>

             <header>
                <nav>
                    <ul>
                        <li> <a href="file:///Users/valeriamorenozapata/Documents/Plataformas2018/Musica/index.html">Genero</a> </li>
                        <li> <a href="file:///Users/valeriamorenozapata/Documents/Plataformas2018/Musica/artista.html">Artista</a> </li>
                        <li> <a href="file:///Users/valeriamorenozapata/Documents/Plataformas2018/Musica/top.html">Top 20</a> </li>
                    </ul>
                </nav>
            </header>

            <style>
                h1 {
                    color: black;
                    text-align: center;
                }

                #parrafo1 {
                    color: black;
                }

                #parrafo2 {
                    color: black;
                }

                #parrafo3 {
                    color: black;
                }

            </style>

        </head >

    <body>
        <br />
        <br />
        <br>
        <font face="arial" size="6">
            <h1> <b> Artista</b> </h1> <br />
        </font>
        <p id="parrafo1">
            <section class=wrapper>
                <font face="arial" size="5">
                    La salsa es un género que se mantiene vigente en el gusto popular, tal vez por su ritmo pegajoso, su singular
                    sonido o su incomparable cadencia. Representaremos a los mejores exponentes de este género, músicos legandarios
                    que vale la pena conocer.
                    <br /> <br />
                    <img src="imagenes/HectorLavoe.jpg" aling="left" width="200" height="200" /> <b><u>Hector Lavoe</u></b> <br />
                    (Puerto Rico) <br />
                    Fue un cantante, compositor y productor musical de salsa durante los años 1970 y 1980. Considerado uno de los mejores
                    intérpretes de música caribeña de todos los tiempos y pionero en la introducción de la salsa neoyorquina a principios de
                    los años setenta. Formó parte de la mítica orquesta del trombonista Willie Colón y fue conocido por el sobrenombre de El
                    Cantante de los Cantantes.
                </font>
            </section>
        </p>
        <br /> <br />

        <p id="parrafo2">
            <section class=wrapper>
                <font face="arial" size="5">
                    <img src="imagenes/RubenBlades.jpg" aling="left" width="200" height="200" /> <b><u>Rubén Blades</u></b> <br />
                    (Panamá) <br />
                    Cantante, compositor, músico, actor, abogado , político y humanista Panameño. Ha desarrollado gran parte de
                    su carrera artística en la ciudad de Nueva York. Sus discos más exitosos los realizó junto a Willie Colón para
                    el sello discográfico Fania durante el boom de la salsa.
                    Su estilo ha sido calificado como "salsa intelectual" y en muchos países se le conoce como el «poeta de la salsa».
                    Sus canciones han alcanzado gran popularidad y es considerado uno de los cantautores más exitosos y prolíficos de
                    Latinoamérica.
                </font>
            </section>
        </p>
        <br /> <br />

        <p id=parrafo3>
            <section class=wrapper>
                <font face="arial" size="5">
                    <img src="imagenes/WillieColon.jpg" aling="left" width="200" height="200" /> <b><u>Willie Colón</u></b> <br />
                    (Estados Unidos) <br />
                    Es un músico de salsa, cantante, compositor y activista político estadounidense. Comenzó su carrera como
                    trombonista, y también canta, escribe, produce y actúa. También está involucrado en la política de Nueva York
                    y la política internacional.
                </font>
            </section>        
        </p>

    </body>
</html >

Code: Select all

TOP 20

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Top20</title>

        <header>
            <nav>
                <ul>
                    <li> <a href="file:///Users/valeriamorenozapata/Documents/Plataformas2018/Musica/index.html">Genero</a> </li>
                    <li> <a href="file:///Users/valeriamorenozapata/Documents/Plataformas2018/Musica/artista.html">Artista</a> </li>
                    <li> <a href="file:///Users/valeriamorenozapata/Documents/Plataformas2018/Musica/top.html">Top 20</a> </li>
                </ul>
            </nav>
        </header>

        <style>
            h1 {
                color: black;
                text-align: center;
            }

            #parrafo1 {
                color: black;
            }

        </style>

    </head>

    <body>
        <br />
        <br />
        <br />
        <font face="arial" size="6">
            <h1> <b>Top 20</b> </h1> <br />
        </font>
        <p id=parrafo1>
            <section class=wrapper>
                <font face="arial" size="5">
                    Se presenta el Top 20 de los mejores clásicos de la salsa.
                </font>
            </section>
        </p>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/9mMNnfh2vGo"
                                target="_blank" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
                        </iframe>
                    </td>
                    <td>
                        <font face="arial" size="5"
                              <div style="text-indent:1000px;">
                            
                                            Canción: Periódico de ayer <br />

                                            Artista: Hector Lavoe <br />

                                            Álbum: Hector Lavoe - Greatest Hits
                              </div>
                        </font>
                    </td>
                </tr>

            </table>

        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/RqaVPWmwglQ" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen>
                        </iframe>
                    </td>

                    <td>
                        <div style="text-indent:1000px;">
                            <font face="arial" size="5">
                                        Canción: Talento de televisión <br />
                                        Artista: Willie Colón <br />
                                        Álbum: Tras la tormenta
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/Jn-EKeSQH2w" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen>
                        </iframe>
                    </td>
                    <td>
                        <div style="text-indent:1000px;">
                            <font face="arial" size="5">
                                        Canción: El cantante <br />
                                        Artista: Hector Lavoe <br />
                                        Álbum: Salsa Party Vol. 2
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/uAVs0m3Xak4" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen>
                        </iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: El gran varón <br />
                                        Artista: Willie Colón <br />
                                        Álbum: Salsa Party Vol. 2
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/GyhwmZAQB-Y" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen>
                        </iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Decisiones<br />
                                        Artista: Rubén Blades<br />
                                        Álbum: Buscando America
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/eOU5B7sttHw" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen>
                        </iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Gitana<br />
                                        Artista: Willie Colón<br />
                                        Álbum: Tiempo Para Matar
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/4WG4SvyVss0" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen>
                        </iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Idilio<br />
                                        Artista: Willie Colón - Fonseca<br />
                                        Álbum: Idilio
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/dbRxse8MTlM" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: El día de mi suerte<br />
                                        Artista: Willie Colón - Hector Lavoe<br />
                                        Álbum: Hector Lavoe El Cantante -The Originals
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/bGizZTJs0Uo" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Pedro navaja<br />
                                        Artista: Rubén Blades<br />
                                        Álbum: Ruben Blades - Poeta Del Pueblo
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/9IVaSa0yKOQ" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Aguanile<br />
                                        Artista: Willie Colon - Hector Lavoe<br />
                                        Álbum: Fania Live 03
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/dhHh9cnmTOA" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Sabre olvidar<br />
                                        Artista: Joe Arroyo<br />
                                        Álbum: 10 De Colección
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/oReuYMzIokg" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Tal para cual<br />
                                        Artista: Joe Arroyo<br />
                                        Álbum: 10 De Colección
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/nyUadKczAu0" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Señora de Madrugada<br />
                                        Artista: Tito Rojas<br />
                                        Álbum: Los Rostros de la Salsa
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/IPdmdGOuAzY" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Señora de Madrugada<br />
                                        Artista: Joe Cuba<br />
                                        Álbum: HECHO Y DERECHO - DOIN' IT RIGHT
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/exPIkIkJ9dE" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Ana Milé<br />
                                        Artista: Grupo Niche<br />
                                        Álbum: Triunfo
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/KUxFg2tc6ug" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Vivir lo nuestro<br />
                                        Artista: Marc Anthony - La India<br />
                                        Álbum: Un poquito de' to (Salsa - Merengue - Bachata & Reggaeton)
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/n_HLc1QpkAU" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Dudo<br />
                                        Artista: Jose Machado<br />
                                        Álbum: La Verdad
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/Ns9YYSqLxyI" target="_blank" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Valio la Pena<br />
                                        Artista: Marc Anthony<br />
                                        Álbum: Locos X la Música Latina
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

        <section class=wrapper>
            <table>
                <tr>
                    <td>
                        <iframe width="450" height="250" src="https://www.youtube.com/embed/NVhWCAH5yV4" frameborder="0"
                                allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </td>
                    <td>
                        <div>
                            <font face="arial" size="5">
                                        Canción: Amores como el nuestro<br />
                                        Artista: Jerry Rivera<br />
                                        Álbum: Sabor A Salsa
                            </font>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <br />

    </body>
</html>


Wireframes manuales
Image

Wireframes digitales
Image
Image
Image

Navegación Wireframes digitales
Image

Image
Last edited by Valeriam04 on Mon Aug 13, 2018 6:38 pm, edited 6 times in total.
Valeria Moreno
Gestión de la calidad del Software

User avatar
JuAnDavid
Posts: 37
Joined: Thu Jul 26, 2018 12:13 pm

Re: Wireframe Aplicaciones Móviles

Post by JuAnDavid » Fri Aug 10, 2018 8:47 am

Wireframe
Image

Wireframe corregido
Image

Wireframes digitales
Image
Image
Image

index.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">
  <title>Music Life</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <!-- Add your site or application content here -->
  <div id="titleDiv">
    <h1>Sin música, la vida sería un error</h1>
  </div>

  <div id="tabsDiv">
    <button onclick="window.location.href='index.html';">Inicio</button>
    <button onclick="window.location.href='artistas.html';">Artistas</button>
    <button onclick="window.location.href='top.html';">Top</button>
  </div>

  <div id="headerImageDiv">
    <img src="img/index_image.jpg" alt="Hip Hop Is Life"/>
  </div>

  <br />
  <br />

  <div id="musicDescriptionDiv">
    <div id="rapDefinitionDiv">
      <p>
        Estilo de música de baile nacido en la década de 1980 en los barrios negros e hispanos de Nueva York y otras grandes urbes
        estadounidenses como derivación del funk y asociado a la cultura hip-hop; se caracteriza por su ritmo monótono y muy sincopado,
        sus largos textos cantados casi de manera monologada y sus letras radicales sobre temas como la violencia, la lucha contra el sistema
        establecido, el sexo, el machismo o el trabajo.
      </p>
    </div>
    <div id="musicImageDiv">
      <img src="img/rap_image.jpg" alt="90's Rap"/>
    </div>
  </div>
  <br />
  <div id="musicDescriptionDiv">
    <div id="musicImageDiv">
      <img src="img/reggae_image.png" alt="Reggae Music"/>
    </div>
    <div id="reggaeDefinitionDiv">
      <p>
        Estilo musical de origen jamaicano derivado del rock cuyas canciones se caracterizan por el ritmo alegre,
        repetitivo y marcado, las melodías suaves y las letras comprometidas en favor de la paz, de la ayuda al tercer mundo, etc.
        Uno de los grupos pioneros del reggae fue The Wailers, fundado en 1963 y con integrantes célebres como Peter Tosh y Bob Marley.
        Éste último es el mayor icono del reggae y de la música jamaiquina en general.
      </p>
    </div>
  </div>
  <br />
  <div id="musicDescriptionDiv">
    <div id="skaDefinitionDiv">
      <p>
        Ska es un género musical originado a finales de la década de 1950 y popularizado durante la primera mitad de los años 1960,
        que deriva principalmente de la fusión de la música afroamericana de la época, con ritmos populares propiamente jamaiquinos,
        siendo el precursor directo del rocksteady y más tarde del reggae. Al ser un género particularmente apto para fusiones ha sido incorporado,
        a través de distintas variantes, a los más diversos lenguajes musicales.
        Estuvo fuertemente asociado a los Rude Boy y a la independencia de Jamaica del Reino Unido, aunque se hizo popular en todo el mundo
        desde muy poco tiempo después de su nacimiento.
      </p>
    </div>
    <div id="musicImageDiv">
      <img src="img/ska_image.jpg" alt="Ska Music"/>
    </div>
  </div>
  <br />
  <div id="musicDescriptionDiv">
    <div id="musicImageDiv">
      <img src="img/punk_image.jpg" alt="Punk Music"/>
    </div>
    <div id="punkDefinitionDiv">
      <p>
        El punk, también llamado punk rock, es un género musical dentro del rock que emergió a mediados de los años 1970.
        Este género se caracteriza en la industria musical por su actitud independiente y contracultural.
        En sus inicios, el punk era una música muy simple y cruda, a veces descuidada: un tipo de rock sencillo,
        con melodías agresivas de duraciones cortas, sonidos de guitarras amplificadas poco controlados y ruidosos cargados de mucha distorsión,
        pocos arreglos e instrumentos y, por lo general, de compases y tempos rápidos.
      </p>
    </div>
  </div>

  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

</body>

</html>
artistas.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">
  <title>Music Life</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <!-- Add your site or application content here -->
  <div id="titleDiv">
    <h1>Sin música, la vida sería un error</h1>
  </div>

  <div id="tabsDiv">
    <button onclick="window.location.href='index.html';">Inicio</button>
    <button onclick="window.location.href='artistas.html';">Artistas</button>
    <button onclick="window.location.href='top.html';">Top</button>
  </div>

  <div id="headerImageDiv">
    <img src="img/artistas_image.jpg" alt="Music Is Life"/>
  </div>

  <br />
  <br />

  <div id="rowArtistDiv">
    <div id="artistLeftDiv">
      <img src="img/alcolirykoz.jpg" alt="Alcolirykoz"/>
      <p>
        AlcolirykoZ es una banda colombiana de hip hop originaria de Aranjuez (Medellín, Colombia). La banda se fundó en 1999 por
        Juan Carlos Fonnegra (alias "Gambeta") junto con su primo Carlos Andrés (alias "Kaztro") y su vecino Gustavo Adolfo (alias "Fazeta").
        Gambeta y Kaztro son los vocalistas y compositores, mientras que Faceta es el DJ. Sin embargo, hasta 2004 adquieren el nombre oficial de
        AlcolirykoZ, ya que, anteriormente, se llamaban Arnez. Son considerados una agrupación musical referente de rap en Colombia.​ Forman parte
        del listado de canciones de algunas emisoras nacionales y han participado en numerosos festivales musicales del país.​ En su trayectoria
        artística llevan produciendo aproximadamente durante 20 años. Su trabajo discográfico comienza con el demo En letras mayúsculas, publicado
        en el 2007.​ A continuación, en 2009, produjeron su primer disco: La revancha de los tímidos. Para 2011, realizaron el EP El despilfarro.
        Posteriormente apareció Viejas recetas, remixes y otras rarezas en 2012. Por último, en 2014 salió al mercado musical Efectos secundarios.
        Además, han producido 3 sencillos desde entonces: N.A.D.A (2015), Equipo de carretera (2016) y Changó (2016).
      </p>
    </div>
    <div id="artistRightDiv">
      <img src="img/mojiganga.jpg" alt="Mojiganga"/>
      <p>
        Mojiganga es un grupo colombiano de ska-core de Medellín, Antioquia formado en 1995.
        La propuesta del grupo es formar parte del movimiento underground del mundo y de la cultura musical de Colombia,
        plasmando con sus letras diferentes ideas, que van desde protestas sociales hasta acontecimientos de la vida diaria.
        En 1995 varios amigos del colegio deciden formar una banda, es entonces cuando nace Mojiganga, integrada en ese momento
        por: Miguel (batería), Guillo (guitarra y voz), Juan (bajo) y Mauro (saxofón). Al principio se dedicarían a tocar canciones
        que satirizaban y criticaban lo que no les gustaba, mezclando diferentes estilos de música, entre estos el ska y el punk, los
        cuales definirían su estilo. En 1996 ingresan al grupo Daniel (trompeta) y Natalia (saxofón). Ese mismo año comenzaron la grabación
        de su primer trabajo: “De las no alpacas”, en el que todavía tenían un sonido inmaduro. A finales de 1997 graban su segundo
        trabajo: “Estúpidas Guerras”, con el cual logran consolidarse en el movimiento underground de Colombia.
      </p>
    </div>
  </div>
  <br />
  <br />
  <div id="rowArtistDiv">
    <div id="artistLeftDiv">
      <img src="img/zg.jpg" alt="Zona Ganjah"/>
      <p>
        Zona Ganjah (también conocida como «La ZG») es una agrupación musical chilena de reggae . Fue iniciada en Antofagasta
        el año 2003 como un proyecto independiente. Su creador y líder es José Gahona, vocalista y compositor chileno.
        Las letras de sus canciones contienen un sentido espiritual y social con mensajes de conciencia hacia la naturaleza y
        hacia la esencia del ser. «Zona Ganjah» es un juego de palabras entre «Ganja» (marihuana), y «Jah» (Yahveh). La banda tiene
        discos editados para el mercado comercial; la difusión de su música se realiza a través de los recitales o Internet, en donde
        publican sus discos para descarga gratuita.
      </p>
    </div>
    <div id="artistRightDiv">
      <img src="img/nadie.jpg" alt="Nadie"/>
      <p>
        Nadie es un grupo colombiano de punk rock de la ciudad de Medellín, Antioquia, Colombia, formado en 1994. Su última producción
        fue grabada en el año 2009, y el grupo estuvo conformado por Julián Velásquez (guitarra y voz), Alejandro Duque (batería) y Carlos Pino (bajo).
        Temáticas universales de denuncia, amor y desahogo se reflejan en un compilado doble y cinco trabajos musicales: Nadie (1997),
        Carne trémula (2000), Me sabe a sangre El corazón (2003 ), Verdades y mentiras (2006), su nuevo trabajo Monólogos de un perro con bozal (2009)
        y el compilado Los mejores ruidos de los Nadie editado por Ramhaus Records (USA, 2006), en donde se nota cada vez más el profesionalismo,
        dedicación, creación y esfuerzo arduo que ha llevado a cabo la banda en todos estos años. Cada uno de estos trabajos ha tenido un fuerte
        impacto en el público lo que ha permitido visitar diferentes zonas del país: Manizales, Cali, Bucaramanga, Medellín, Bogotá. Festivales
        como el FFF (2006) en Ecuador, Rock al Parque (2005, 2007, 2009), Altavoz (2004, 2005, 2006), Cali Underground (2009),
        Manizales Grita Rock (2009) y una visita a Perú en donde compartieron tarima junto a Leusemia (Perú), Cadena Perpetua y
        Los Violadores (Argentina). A su vez la banda ha tocado junto a Attaque 77 (Argentina), Misfits (USA), Ilegales Ilegales (España) y
        diferentes bandas nacionales.
      </p>
    </div>
  </div>
  <br />
  <br />
  <div id="rowArtistDiv">
    <div id="artistLeftDiv">
      <img src="img/zpu.jpg" alt="ZPU"/>
      <p>
        Juan Prieto Sánchez, más conocido como ZPU, es un MC de rap en español. Es reconocido por ser uno de los raperos más profundos
        y comprometidos de la escena del hip hop de habla hispana. Es hermano de Soma, uno de los productores musicales más laureados del rap español.
        Su primer grupo fue Muerte Acústica (que más tarde pasaría a llamarse Magnatiz) allá por los años 1994 y 1995. En 1997, junto a
        Muerte Acústica, sacó su primera maqueta titulada "Las rimas escritas benditas", y en el 98 la segunda llamada "MAnada vamos A".
        Años más tarde, aprovechando un cambio de DJ en el grupo y la experiencia ganada, decidieron cambiar su nombre por Magnatiz,
        nombre con el que sacarían al mercado dos LP, realizando sus respectivas giras. Después de estos lanzamientos el grupo se disuelve
        y ZPU continúa su trabajo en solitario.
      </p>
    </div>
    <div id="artistRightDiv">
      <img src="img/skap.jpg" alt="Ska-P"/>
      <p>
        Ska-P es un grupo español de ska punk formado en Vallecas (Madrid) en 1993. Sus canciones se caracterizan por su rechazo e
        inconformismo con el sistema actual, con letras sobre anticapitalismo, antifascismo, antitauromaquia, antisionismo, antiimperialismo,
        críticas a los medios de comunicación y a la Iglesia católica. Cantan letras que apoyan los derechos de los animales, el veganismo,
        el ecologismo, el anarquismo y el anarcosindicalismo. Han compuesto canciones respaldando la lucha del Ejército Zapatista de Liberación Nacional,
        el Pueblo palestino y la Revolución Bolivariana, homenajeando en la canción "El libertador" al Libertador de América Latina Simón Bolívar.
        Su canción «Cannabis»,​ reivindica y apoya la legalización de la marihuana. Algunos de sus temas son "El vals del obrero", "Mis colegas",
        "Sexo y religión", "Niño soldado", entre otros. Aunque su principal género es el ska punk, en algunas de sus canciones también hay ritmos
        españoles, latinos, de días festivos como villancicos, y otros estilos jamaicanos como el reggae, que en varias ocasiones buscan enfatizar
        el tema de la canción. Otras también son de ska, sin casi ritmos de punk, y viceversa.
      </p>
    </div>
  </div>


  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

</body>

</html>
top.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">
  <title>Music Life</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <!-- Add your site or application content here -->
  <div id="titleDiv">
    <h1>Sin música, la vida sería un error</h1>
  </div>

  <div id="tabsDiv">
    <button onclick="window.location.href='index.html';">Inicio</button>
    <button onclick="window.location.href='artistas.html';">Artistas</button>
    <button onclick="window.location.href='top.html';">Top</button>
  </div>

  <div id="headerImageDiv">
    <img src="img/top_image.jpg" alt="Hip Hop Is Life"/>
  </div>

  <br />
  <br />
  <div id="topDiv">
    <ol>
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Tararea</h2>
            <h2>Alcolirykoz</h2>
            <a href="https://www.youtube.com/watch?v=nmFdyBUAsfQ" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
      <br />
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Juicio</h2>
            <h2>Zona Ganjah</h2>
            <a href="https://www.youtube.com/watch?v=U0a-LTacyWk" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
      <br />
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Siempre volveré</h2>
            <h2>Samurai</h2>
            <a href="https://www.youtube.com/watch?v=KI-RpK0S_lo" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
      <br />
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Cóctel espacial</h2>
            <h2>Lianna ft Gambeta</h2>
            <a href="https://www.youtube.com/watch?v=lvzsE__EaNM" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
      <br />
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Canto a la rebelión</h2>
            <h2>Ska-P</h2>
            <a href="https://www.youtube.com/watch?v=ym8hBDIAVY8" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
      <br />
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Género rural</h2>
            <h2>Alcolirykoz</h2>
            <a href="https://www.youtube.com/watch?v=wG1hIEfEw4E" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
      <br />
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Otra noche más</h2>
            <h2>Mojiganga</h2>
            <a href="https://www.youtube.com/watch?v=UhDD1y4AFaI" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
      <br />
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Aquí estamos</h2>
            <h2>Nadie</h2>
            <a href="https://www.youtube.com/watch?v=3-xlxA9oWns" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
      <br />
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Vos sos todo lo que quiero</h2>
            <h2>Mojiganga</h2>
            <a href="https://www.youtube.com/watch?v=1g9c6CcTIlY" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
      <br />
      <li>
        <div id="topItemDiv">
          <img src="img/audio_file.png" alt="Audio File"/>
          <div id="itemInformationDiv">
            <h1>Lo que no se olvida</h2>
            <h2>Nadie</h2>
            <a href="https://www.youtube.com/watch?v=boHeBWUt9JY" target="_blank">Ver video</a>
          </div>
        </div>
      </li>
    </ol>
  </div>

  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

</body>

</html>
main.css

Code: Select all

/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #000000;
    font-size: 1em;
    line-height: 1.4;
    background-color: lightgray;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


 #titleDiv {
   text-align: center;
   background-color: gray;
   font-size: 3em;
 }

 #tabsDiv {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100px;
 }

 #tabsDiv button {
   width: 200px;
   height: 60px;
   font-size: 40px;
   background-color: lightgray;
   border-width: 0;
 }

 #tabsDiv button:hover {
   background-color: gray;
 }

 #headerImageDiv img {
   width: 100%;
 }

 #musicDescriptionDiv {
   background-color: gray;
 }

 #musicImageDiv img {
   width: 450px;
   height: 300px;
   padding: 50px;
 }

 #rapDefinitionDiv p {
   font-size: 27px;
   text-align: justify;
   padding-left: 50px;
   color: #FFFFFF;
 }

 #musicDescriptionDiv {
   display: flex;
   align-items: center;
 }

 #reggaeDefinitionDiv p {
   font-size: 27px;
   text-align: justify;
   padding-right: 50px;
   color: #FFFFFF;
 }

 #skaDefinitionDiv p {
   font-size: 27px;
   text-align: justify;
   padding-left: 50px;
   color: #FFFFFF;
 }

 #punkDefinitionDiv p {
   font-size: 27px;
   text-align: justify;
   padding-right: 50px;
   color: #FFFFFF;
 }

 #rowArtistDiv {
   display: flex;
   background-color: gray;
 }

 #artistLeftDiv {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 #artistLeftDiv img {
   width: 420px;
   height: 300px;
   padding-top: 50px;
 }

 #artistLeftDiv p {
   text-align: justify;
   font-size: 20px;
   color: #FFF;
   padding-left: 50px;
   padding-right: 50px;
 }

 #artistRightDiv {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 #artistRightDiv img {
   width: 420px;
   height: 300px;
   padding-top: 50px;
 }

 #artistRightDiv p {
   text-align: justify;
   font-size: 20px;
   color: #FFF;
   padding-left: 50px;
   padding-right: 50px;
 }

 #topDiv {
   background-color: lightgray;
   display: flex;
   justify-content: center;
 }

 #topDiv ol {
   list-style-type: none;
   width: 80%;
   height: 900px;
   overflow: scroll;
   align-self: center;
   background-color: lightgray;
   margin: 0;
   padding: 0;
 }

 #topItemDiv {
   display: flex;
   background-color: #212121;
 }

 #topItemDiv img {
   width: 200px;
   height: 200px;
   padding-right: 50px;
 }

 #itemInformationDiv {
   flex: 1;
 }

 #itemInformationDiv h1, h2 {
   color: #FFF;
 }

 #itemInformationDiv a {
   color: #FFF;
   font-size: 25px;
 }






/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
Evidencia
Index
Image

Artistas
Image

Top
Image
Last edited by JuAnDavid on Fri Aug 10, 2018 12:22 pm, edited 2 times in total.
Juan David Cano Hernández
Gestión de la Calidad - Aplicaciones Móviles

User avatar
AndresArl
Posts: 24
Joined: Thu Jul 26, 2018 12:12 pm

Re: Wireframe Aplicaciones Móviles

Post by AndresArl » Fri Aug 10, 2018 9:14 am

Image

Image

Image

Image

Image

Codigo Top20.html

Code: Select all

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Top 20</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</head>

<body>
    <header id="topnav">
        <div class="inner">
            <div class="logo mb-2">
                <img src="imgs/music.jpg" alt="">
            </div>
            <nav role='navigation'>
                <ul>
                    <li>
                        <a href="Top20.html">Top 20</a>
                    </li>
                    <li>
                        <a href="Genders.html">Generos</a>
                    </li>
                    <li>
                        <a href="Artists.html">Artistas</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <section>
        <div class="inner">
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">1.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/afterglow.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Afterglow</li>
                                    <li class="list-group-item text-center">2017</li>
                                    <li class="list-group-item text-center">The fin.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">2.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/greenland.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Greenland</li>
                                    <li class="list-group-item text-center">2015</li>
                                    <li class="list-group-item text-center">Daily Holla</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">3.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/everything.png" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Everything</li>
                                    <li class="list-group-item text-center">2017</li>
                                    <li class="list-group-item text-center">EvenS</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">10.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/shoulderoforion.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Shoulder of Orion</li>
                                    <li class="list-group-item text-center">2016</li>
                                    <li class="list-group-item text-center">Maceo Plex</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">11.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/moon.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Moon</li>
                                    <li class="list-group-item text-center">2016</li>
                                    <li class="list-group-item text-center">Jimi Jules</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">12.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/midra.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Midra</li>
                                    <li class="list-group-item text-center">2017</li>
                                    <li class="list-group-item text-center">Gidge</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">13.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/secondlives.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Second Lives</li>
                                    <li class="list-group-item text-center">2009</li>
                                    <li class="list-group-item text-center">Vitalic</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">14.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/noreason.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">No Reason</li>
                                    <li class="list-group-item text-center">2017</li>
                                    <li class="list-group-item text-center">Bonobo</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">15.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/elias.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Elias</li>
                                    <li class="list-group-item text-center">2016</li>
                                    <li class="list-group-item text-center">Aparde</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">16.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/burnt.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Burnt</li>
                                    <li class="list-group-item text-center">2014</li>
                                    <li class="list-group-item text-center">Kiasmos</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">17.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/notgivenup.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Not Given Up</li>
                                    <li class="list-group-item text-center">2016</li>
                                    <li class="list-group-item text-center">Mona Vale</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">18.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/weneverchange.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">We Never Change</li>
                                    <li class="list-group-item text-center">2000</li>
                                    <li class="list-group-item text-center">Coldplay</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">19.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/foryou.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">For You</li>
                                    <li class="list-group-item text-center">2016</li>
                                    <li class="list-group-item text-center">Michael Mayer</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <label class="number align-middle mr-3">20.</label>
                <div class="card" style="width: 21rem;">
                    <div class="card-body">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="imgs/freedom.jpg" alt="Card image cap">
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item text-center">Freedom</li>
                                    <li class="list-group-item text-center">2016</li>
                                    <li class="list-group-item text-center">Wangel</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>
Codigo Artists.html:

Code: Select all

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Artistas</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</head>

<body>
    <header id="topnav">
        <div class="inner">
            <div class="logo mb-2">
                <img src="imgs/music.jpg" alt="">
            </div>
            <nav role='navigation'>
                <ul>
                    <li>
                        <a href="Top20.html">Top 20</a>
                    </li>
                    <li>
                        <a href="Genders.html">Generos</a>
                    </li>
                    <li>
                        <a href="Artists.html">Artistas</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <section>
        <div class="inner">
            <div class="input-group mb-5 w-50">
                <label id="label" class="mr-3">Buscar:</label>
                <input id="search" class="form-control" type="text" onkeyup="search()" placeholder="Busqueda de artista...">
            </div>
            

            <div class="card  mb-3" gender="pop" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/secondlives.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">Second Lives</li>
                                <li class="list-group-item text-center">2009</li>
                                <li class="list-group-item text-center artist">Vitalic</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card  mb-3" gender="punk" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/noreason.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">No Reason</li>
                                <li class="list-group-item text-center">2017</li>
                                <li class="list-group-item text-center artist">Bonobo</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card  mb-3" gender="electronic" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/elias.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">Elias</li>
                                <li class="list-group-item text-center">2016</li>
                                <li class="list-group-item text-center artist">Aparde</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card  mb-3" gender="rock" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/burnt.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">Burnt</li>
                                <li class="list-group-item text-center">2014</li>
                                <li class="list-group-item text-center artist">Kiasmos</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card  mb-3" gender="punk" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/notgivenup.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">Not Given Up</li>
                                <li class="list-group-item text-center">2016</li>
                                <li class="list-group-item text-center artist">Mona Vale</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card  mb-3" gender="metal" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/weneverchange.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">We Never Change</li>
                                <li class="list-group-item text-center">2000</li>
                                <li class="list-group-item text-center artist">coldplay</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card  mb-3" gender="metal" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/foryou.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">For You</li>
                                <li class="list-group-item text-center">2016</li>
                                <li class="list-group-item text-center artist">Michael Mayer</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card  mb-3" gender="electronic" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/freedom.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">Freedom</li>
                                <li class="list-group-item text-center">2016</li>
                                <li class="list-group-item text-center artist">Wangel</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <script src="main.js"></script>
</body>

</html>
Codigo Genders.html:

Code: Select all

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Generos</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</head>

<body>
    <header id="topnav">
        <div class="inner">
            <div class="logo mb-2">
                <img src="imgs/music.jpg" alt="">
            </div>
            <nav role='navigation'>
                <ul>
                    <li>
                        <a href="Top20.html">Top 20</a>
                    </li>
                    <li>
                        <a href="Genders.html">Generos</a>
                    </li>
                    <li>
                        <a href="Artists.html">Artistas</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <section>
        <div class="inner">
            <div class="input-group mb-5 w-50">
                <label class="mr-3">Genero:</label>
                <select class="form-control " id="genderSelect">
                    <option>Seleccione un genero</option>
                    <option value="rock">Rock</option>
                    <option value="electronic">Electronica</option>
                    <option value="punk">Punk</option>
                    <option value="metal">Metal</option>
                    <option value="pop">Pop</option>
                </select>
            </div>
            

            <div class="card genderSearch mb-3" gender="metal" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/weneverchange.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">We Never Change</li>
                                <li class="list-group-item text-center">2000</li>
                                <li class="list-group-item text-center">coldplay</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card genderSearch mb-3" gender="metal" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/foryou.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">For You</li>
                                <li class="list-group-item text-center">2016</li>
                                <li class="list-group-item text-center">Michael Mayer</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card genderSearch mb-3" gender="electronic" style="width: 21rem;">
                <div class="card-body">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="imgs/freedom.jpg" alt="Card image cap">
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item text-center">Freedom</li>
                                <li class="list-group-item text-center">2016</li>
                                <li class="list-group-item text-center">Wangel</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <script src="main.js"></script>
</body>

</html>
Image

Proyecto completo:
https://drive.google.com/file/d/1jOMZ6f ... sp=sharing
Last edited by AndresArl on Sun Aug 12, 2018 8:05 pm, edited 1 time in total.
Andres Arango Alvarez
Gestión de Calidad de Software

User avatar
JuanRomeroL
Posts: 17
Joined: Mon Jan 22, 2018 11:41 am

Wireframe Música

Post by JuanRomeroL » Fri Aug 10, 2018 9:48 am

Wireframe físico:

Image

Image

Image

Image

Wireframe digital:



Implementación del wireframe:

index.html

Code: Select all

<!DOCTYPE html>
<html>

<head>
	<title>Michael Jackson - All about him</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
	<header>

		<div id="headerTitle">Michael Jackson</div>
		<div class="headerSubtitle">“Me gusta mejorar, no me apetece dar un paso atrás”.</div>

		<a href="#biography" class="option"> Biografía </a>
		<a href="#album" class="option" >  Album's </a>
        <a href="#top" class="option"> Top Canciones </a>
        
	</header>

    <div id="biography"> 
        <a href="#" class="viewAlbum">^</a>
    	<div class="titleSection">Biografía</div>
        
    	<p class="paragraph">Su nombre completo es Michael Joseph Jackson, nació el 29 de agosto de 1958. Era el octavo de los diez hijos de la familia Jackson, una familia afroamericana de clase trabajadora que vivía en una casa de dos dormitorios en Jackson Street, en Gary, Indiana, una ciudad industrial en el área metropolitana de Chicago. Su madre, Katherine Esther Scruse, era una devota testigo de Jehová. Ella tocaba clarinete y piano y una vez aspiró a ser una artista country & western, pero trabajó a tiempo parcial en Sears para apoyar a la familia. El padre de Michael, Joseph Walter “Joe” Jackson, un ex boxeador, era un trabajador del acero en U.S. Steel. Joe actuaba como guitarrista en una banda local de rhythm and blues, los Falcons, para complementar los ingresos de la familia. Michael creció con tres hermanas (Rebbie, La Toya y Janet) y cinco hermanos (Jackie, Tito, Jermaine, Marlon y Randy). Un sexto hermano, el gemelo de Marlon, Brandon, murió poco después del nacimiento.</p>

        <p class="paragraph">
    	Jackson tenía una relación problemática con su padre. En 2003, Joe reconoció que él regularmente lo azotaba siendo niño. También se dijo que Joe había abusado verbalmente de su hijo, a menudo diciendo que tenía una “nariz gorda”. Jackson declaró que en su niñez fue abusado física y emocionalmente durante los ensayos incesantes, aunque acreditó que la disciplina terminante de su padre jugó un papel importante en su éxito. En una entrevista con Martin Bashir para el documental de 2003 Living with Michael Jackson, Jackson recordó que Joe a menudo se sentaba en una silla con un cinturón en la mano mientras él y sus hermanos ensayaban, y que «si no lo hacías de la manera correcta, te daba una paliza, realmente te azotaba». Los padres de Jackson han disputado las alegaciones de abuso durante mucho tiempo, con Katherine afirmando que mientras azotar es considerado abuso hoy en día, era una forma todavía común de disciplinar a los niños en la época. Jackie, Tito, Jermaine y Marlon también han dicho que su padre no era abusivo y que los azotes, más difíciles de afrontar para Michael porque era más joven, los mantuvieron disciplinados y fuera de problemas. Hablando abiertamente sobre su infancia en una entrevista con Oprah Winfrey transmitida en febrero de 1993, Jackson reconoció que su juventud había sido solitaria y aislada. Su profunda insatisfacción con su apariencia, sus pesadillas y sus problemas crónicos de sueño, su tendencia a permanecer hiperobediente, especialmente con su padre, y a permanecer infantil en la edad adulta, son consistentes como efectos del maltrato que sufrió cuando era niño. Su padre cometió adulterio varias veces, y fruto de una de estas relaciones extramatrimoniales tuvo una hija. Ese tipo de relación hizo que la pareja no se sintiese a gusto con su relación nupcial, por lo que desde 2005 la pareja decidió dejar de vivir junta y en agosto de 2010 anunciaron su separación después de 60 años de matrimonio.
    	</p>

        <p class="paragraph">
    	Desde temprana edad Michael demostró interés por la música cuando cantaba en las celebraciones navideñas del jardín de infancia al que asistía. En 1964, Michael y Marlon se unieron a los Jackson Brothers —una banda formada por su padre, que incluía a los hermanos Jackie, Tito y Jermaine— como músicos de reserva tocando congas y pandereta.
        </p>

        <p class="paragraph">
    	En 1965, Michael comenzó a compartir la voz principal con su hermano mayor Jermaine, y el nombre del grupo fue cambiado a los Jackson 5. Al año siguiente, el grupo ganó un importante show de talentos locales con Jackson interpretando el baile del éxito de 1965 de Robert Parker “Barefootin'”. De 1966 a 1968 realizaron una gira por el Medio Oeste, actuando frecuentemente en una cadena de clubes negros conocidos como el “chitlin' circuit” como teloneros de artistas como Sam & Dave, the O'Jays, Gladys Knight y Etta James. Los Jackson 5 también actuaban en clubes nocturnos y salas de fiesta, donde espectáculos de striptease y otros actos de adultos se realizaban, y en auditorios locales y bailes de la escuela secundaria. En agosto de 1967, mientras viajaban por la costa Este, el grupo ganó un concierto semanal de noche para amateurs en el Teatro Apollo en Harlem.
        </p>

        <p class="paragraph">
    	Los Jackson 5 grabaron luego varias canciones, incluyendo su primer sencillo «Big Boy» (1968), para Steeltown Records, una discográfica de Gary, antes de firmar con Motown en 1969. Rolling Stone describió más tarde al joven Michael como un “prodigio” con “abrumadores regalos musicales” que “rápidamente surgía como la principal atracción y cantante principal.” El grupo fijó un récord en las listas cuando sus primeros cuatro sencillos —“I Want You Back” (1969), “ABC” (1970), “The Love You Save” (1970) y “I'll Be There” (1970)— llegaron al número uno en el Billboard Hot 100. Con lo obtenido por las ventas, en mayo de 1971, la familia Jackson se pudo mudar a una gran casa en un terreno de dos acres en Encino, California. Durante este período, Michael evolucionó de niño intérprete a ídolo adolescente. Mientras Jackson comenzaba a emerger como solista en los tempranos años 70, él mantuvo lazos con los Jackson 5 y la Motown. Entre 1972 y 1975, Michael lanzó cuatro álbumes en solitario con Motown: Got to Be There (1972), Ben (1972), Music & Me (1973) y Forever, Michael (1975). “Got to Be There” y “Ben”, las canciones del título de sus dos primeros álbumes en solitario, se convirtieron en sencillos exitosos, al igual que una versión de “Rockin' Robin” de Bobby Day.
        </p>


		<p class="paragraph">
		Los Jackson 5 se describieron más adelante como “un ejemplo de vanguardia de artistas crossover negros.” Aunque las ventas del grupo comenzaron a declinar en 1973, y los miembros se irritaron ante la negativa de Motown en permitirles mayor creatividad, alcanzaron varios éxitos top 40, incluyendo el sencillo top cinco “Dancing Machine” (1974), antes de dejar Motown en 1975.
		</p>

        <p class="paragraph">1975-1981: Traslado a Epic y Off the Wall. </p>

        <p class="infoParagraph"> En junio de 1975, The Jackson 5 firmaron con Epic Records, una filial de CBS Records, y cambiaron su nombre por el de «The Jacksons». El hermano menor Randy se unió formalmente a la banda en esta época, mientras que Jermaine decidió quedarse con Motown y seguir una carrera en solitario. The Jacksons continuaron sus giras musicales, y lanzaron seis álbumes más entre 1976 y 1984. Michael, compositor principal del grupo durante este tiempo, escribió éxitos como «Shake Your Body (Down to the Ground)» (1979), «This Place Hotel» (1980) y «Can You Feel It» (1980). </p>

        <p class="infoParagraph"> En 1978, el cantante interpretó el papel de Espantapájaros en la película El mago, nueva versión del musical El mago de Oz (1939) realizada esta vez por actores de origen afroamericano. La película —dirigida por Sidney Lumet​ y coprotagonizada por Diana Ross, Nipsey Russell y Ted Ross ​— fue un fracaso en taquilla. Su score fue arreglado por Quincy Jones, a quien Jackson había conocido previamente cuando tenía 12 años en la casa de Sammy Davis Jr. Jones acordó producir el próximo álbum en solitario de Jackson. Durante su estancia en Nueva York, Jackson frecuentó la discoteca Studio 54 y fue expuesto al hip hop temprano, influenciando su beatboxing en futuras canciones como “Workin' Day and Night”. En 1979, Jackson se rompió la nariz durante una compleja rutina de baile. Su posterior rinoplastia no fue un éxito completo; se quejaba de dificultades respiratorias que afectarían su carrera. Fue enviado al Dr. Steven Hoefflin, quien realizó la segunda rinoplastia de Jackson y operaciones posteriores. </p>

        <p class="infoParagraph"> El quinto álbum en solitario de Jackson, Off the Wall (1979), coproducido por Jackson y Jones, estableció a Jackson como intérprete en solitario. El álbum ayudó a Jackson a pasar del bubblegum pop de su juventud a los sonidos más complejos que crearía como adulto. Los compositores del álbum incluían a Jackson, Rod Temperton, Stevie Wonder y Paul McCartney. Off the Wall fue el primer álbum en solitario que generó cuatro éxitos en los 10 mejores en Estados Unidos: “Off the Wall”, “She's Out of My Life” y los sencillos “Don't Stop 'Til You Get Enough” y “Rock with You”. El álbum alcanzó el número tres en el Billboard 200 y finalmente vendió más de 20 millones de copias en todo el mundo. En 1980, Jackson ganó tres premios en los Premios American Music por sus esfuerzos en solitario: Álbum Soul/R&B Favorito, Mejor Artista Masculino Soul/R&B y Sencillo Soul/R&B Favorito para “Don't Stop 'Til You Get Enough”. También ganó premios Billboard Year-End por Top Black Artist y Top Black Album, y un premio Grammy por Mejor Interpretación Vocal de R&B Masculina en 1979 con “Don't Stop 'Til You Get Enough”. En 1981 Jackson fue el ganador de los Premios American Music por Álbum Soul/R&B Favorito y Mejor Artista Masculino Soul/R&B. A pesar de su éxito comercial, Jackson sentía que Off the Wall debería haber tenido un mayor impacto, y estaba decidido a superar las expectativas con su próximo lanzamiento. En 1980, obtuvo la tasa de regalías más alta en la industria de la música: el 37 por ciento de los beneficios del álbum al por mayor. </p>

        <p class="infoParagraph"> Jackson grabó con el cantante de Queen Freddie Mercury de 1981 a 1983, incluyendo una maqueta de “State of Shock”, “Victory” y “There Must Be More to Life Than This”. Las grabaciones estaban destinadas a un álbum de duetos, pero, según el entonces manager de Queen, Jim Beach, la relación entre los cantantes se agrió cuando Jackson insistió en traer una llama al estudio de grabación. Las colaboraciones no fueron lanzadas oficialmente hasta 2014. Jackson pasó a grabar el sencillo “State of Shock” con Mick Jagger para el álbum de los Jacksons Victory (1984). Mercury incluyó la versión en solitario de “There Must Be More To Life Than This” en su álbum Mr. Bad Guy (1985). En 1982, Jackson combinó sus intereses en la composición y el cine cuando contribuyó con la canción “Someone in the Dark” al audiolibro para la película E. T., el extraterrestre. La canción, con Jones como su productor, ganó un Grammy al Mejor Álbum para Niños para 1983. </p>

        <p class="paragraph">1982-1983: Thriller y Motown. </p>

        <p class="infoParagraph"> Un éxito aún mayor vino con el sexto álbum de Jackson, Thriller, lanzado a finales de 1982. El álbum le valió a Jackson siete Grammys más y ocho premios American Music, entre ellos el Premio al Mérito, el artista más joven en ganarlo. Fue el álbum más vendido en todo el mundo en 1983, y se convirtió en el álbum más vendido de todos los tiempos en los Estados Unidos y el álbum más vendido de todos los tiempos en todo el mundo, vendiendo un estimado de 65 millones de copias. Encabezó la lista Billboard 200 durante 37 semanas y estuvo entre los 10 primeros de los 200 durante 80 semanas consecutivas. Fue el primer álbum en tener siete sencillos top 10 en el Billboard Hot 100, incluyendo “Billie Jean”, “Beat It” y “Wanna Be Startin' Somethin'”. En diciembre de 2015, Thriller fue certificado por 30 millones de copias equivalentes por la RIAA, convirtiéndolo en el único álbum en lograr esa hazaña en Estados Unidos. Según los herederos de Jackson, el álbum ha vendido más de 105 millones de copias, aunque es difícil calcular las cifras a nivel mundial. Thriller le valió a Jackson y Quincy Jones el premio Grammy para Productor del Año (No Clásica) para 1984. También ganó el Álbum del Año, con Jackson como el artista del álbum y Jones como su co-productor, y un premio a la Mejor Interpretación Vocal Pop Masculina, para Jackson. “Beat It” ganó la Mejor Grabación del Año, con Jackson como artista y Jones como co-productor, y un premio Mejor Interpretación Vocal de Rock Masculina, para Jackson. “Billie Jean” le valió a Jackson dos premios Grammy, Mejor Canción R&B, con Jackson como su compositor y Mejor Interpretación Vocal de R&B Masculina, como su artista. Thriller también ganó otro Grammy por Mejor Arreglo para Álbum – No Clásica en 1984, otorgando a Bruce Swedien por su trabajo en el álbum. Los Premios American Music de 1984 proporcionaron a Jackson un Premio al Mérito y el premio American Music al Mejor Artista Masculino Soul/R&B y Artista Pop/Rock Masculino Favorito. “Beat It” le valió a Jackson el premio American Music por Video Favorito de Soul/R&B, Video Favorito - Pop/Rock y Sencillo Pop/Rock Favorito. Thriller le valió el premio American Music para Álbum Soul/R&B Favorito y Mejor Álbum Pop/Rock. </p>

        <p class="infoParagraph"> Además del álbum, Jackson lanzó Thriller, un video musical de 14 minutos dirigido por John Landis, en 1983. El video con temas de zombis «redefinió los vídeos musicales y rompió las barreras raciales» en Music Television Channel (MTV), un canal de televisión de entretenimiento en ciernes en ese momento. En diciembre de 2009, la Biblioteca del Congreso seleccionó el video musical Thriller para su inclusión en el Registro Nacional de Cine. Fue una de las 25 películas nombradas ese año como «obras de gran importancia para la cultura estadounidense» que se «conservarían para siempre». A partir de 2009, Thriller es el único video musical que ha sido incluido en el registro. </p>

        <p class="infoParagraph"> Jackson tenía la tasa de regalías más alta en la industria de la música en ese momento, aproximadamente 2 dólares por cada álbum vendido, y estaba haciendo ganancias récord de las ventas de sus grabaciones. La cinta de video del documental The Making of Michael Jackson's Thriller vendió más de 350.000 copias en pocos meses. Se vio la llegada de novedades tales como muñecos modelados según el estilo de Jackson, que aparecieron en almacenes en mayo de 1984 a un precio de 12 dólares. El biógrafo J. Randy Taraborrelli escribe que «Thriller dejó de venderse como un artículo de ocio —como una revista, un juguete, boletos para una exitosa película— y comenzó a vender como un producto básico para el hogar». En 1985, The Making of Michael Jackson's Thriller ganó un Grammy por Mejor Video Musical de Formato Largo. Time describió la influencia de Jackson en ese momento como «estrella de discos, radio, video de rock, un equipo de rescate de un hombre para el negocio de la música. Un compositor que marca el ritmo durante una década. Cantante que atraviesa todos los límites del gusto y el estilo y el color también». The New York Times escribió que «en el mundo de la música pop, está Michael Jackson y están todos los demás».</p>

        <p class="paragraph">1984-1985: Pepsi, “We Are the World” y otros emprendimientos. </p>

        <p class="infoParagraph"> En noviembre de 1983, Jackson y sus hermanos se asociaron con PepsiCo en un acuerdo promocional de 5 millones de dólares que rompió todos los récords anteriores de una publicidad respaldada por celebridades. La primera campaña de Pepsi Cola, que se desarrolló en los Estados Unidos entre 1983 y 1984 y lanzó su icónico tema “Nueva Generación”, incluyó el patrocinio de giras, eventos de relaciones públicas y exhibiciones comerciales. Jackson, quien estuvo involucrado en crear el anuncio, sugirió usar su canción “Billie Jean” como su jingle con letras revisadas. Según un informe de Billboard en 2009, Brian J. Murphy, vicepresidente ejecutivo de gestión de marca de TBA Global, dijo: «No se podía separar la gira de la aprobación de la licencia de la música, y luego la integración de la música en la fábrica de Pepsi.» </p>

        <p class="infoParagraph"> El 27 de enero de 1984, Michael y otros miembros de los Jacksons filmaron un comercial de Pepsi supervisado por el ejecutivo Phil Dusenberry, ejecutivo de una agencia de publicidad de BBDO, y Alan Pottasch, Director Creativo Mundial de Pepsi, en el Shrine Auditorium de Los Ángeles. Durante un concierto simulado ante un pabellón lleno de aficionados, la pirotecnia accidentalmente prendió el pelo de Jackson en llamas, causándole quemaduras de segundo grado en el cuero cabelludo. Jackson fue sometido a tratamiento para ocultar las cicatrices y a una tercera rinoplastia poco después. Pepsi llegó a un arreglo extrajudicial, y Jackson donó el acuerdo de 1.5 millones de dólares al Brotman Medical Center en Culver City, California; Su Michael Jackson Burn Center se nombra en su honor. Dusenberry contó el episodio en autobiografía, Then We Set His Hair on Fire: Insights and Accidents from a Hall of Fame Career in Advertising. Jackson firmó un segundo acuerdo con Pepsi a finales de los ochenta por unos 10 millones de dólares reportados. La segunda campaña tenía un alcance global de más de 20 países y proporcionaría apoyo financiero para el álbum Bad de Jackson y la gira mundial de 1987-88. Aunque Jackson tenía promociones y acuerdos publicitarios con otras compañías, como LA Gear, Suzuki y Sony, ninguno fue tan importante como sus acuerdos con Pepsi, que más tarde firmaron otras estrellas de la música como Britney Spears y Beyoncé para promover sus productos. </p>

        <p class="infoParagraph"> El trabajo humanitario de Jackson fue reconocido el 14 de mayo de 1984, cuando fue invitado a la Casa Blanca para recibir un premio del presidente Ronald Reagan por su apoyo a organizaciones benéficas que ayudaban a las personas a superar el abuso de alcohol y drogas y en reconocimiento a su apoyo a la campaña de prevención de conducción en estado de ebriedad de Ad Council y la NHTSA. Jackson donó el uso de “Beat It” para los anuncios de servicio público de la campaña. </p>

        <p class="infoParagraph"> A diferencia de los últimos álbumes, Thriller no tuvo una gira oficial, pero el Victory Tour de 1984 encabezó a los Jacksons y mostró gran parte del nuevo material en solitario de Jackson a más de dos millones de estadounidenses. Fue la última gira que haría con sus hermanos. Jackson llevó a cabo una conferencia de prensa y anunció que él donaría su porción de los ingresos, un estimado 3 a 5 millones de dólares, a la caridad. </p>

        <p class="paragraph">1986-1990: Cambio de apariencia, tabloides, Bad, películas, autobiografía, y Neverland. </p>

        <p class="infoParagraph"> En 1986, a Jackson se le diagnosticó vitíligo, por lo que su piel fue perdiendo pigmentación. Esta enfermedad hizo que tuviera que evitar la exposición ante la luz solar. Para poder darle un tono más homogéneo a su piel, recurrió al maquillaje. </p>

        <p class="infoParagraph"> A principios de los años 1980, Jackson comenzó a realizar una estricta dieta vegetariana. En esa década, varios periódicos publicaron una foto en la que el artista estaba recostado dentro de una cámara de oxígeno y que según ellos dormía allí para evitar envejecer, rumor que luego fue desmentido por él mismo. También en esos años surgieron otros rumores que fueron negados por él, como por ejemplo que tenía intenciones de comprar los huesos del llamado hombre elefante. </p>

        <p class="infoParagraph"> Más tarde, protagonizó el cortometraje en 3D Captain EO, bajo la dirección de Francis Ford Coppola y George Lucas. Este filme contó con un gran presupuesto aproximadamente de 30 millones de dólares y fue distribuido de manera exclusiva en los parques temáticos de Disney, debutó en septiembre de 1986 tanto en el parque Magic Kingdom como en Epcot en Florida. Después lanzó Bad (1987), su primer álbum de estudio en cinco años. Esta producción fue un gran triunfo comercial, aunque no alcanzó las ventas logradas por su anterior trabajo discográfico, Thriller. De este disco se desprendieron siete exitosos sencillos, de los cuales cinco de ellos («I Just Can't Stop Loving You», «Bad», «The Way You Make Me Feel», «Man in the Mirror» y «Dirty Diana») alcanzaron el primer puesto del Billboard Hot 100 estableciendo así el récord de más sencillos en el número uno de un mismo álbum, el cual aún no ha sido superado. Desde su publicación, Bad ha vendido más de treinta y cuatro millones de copias en todo el mundo. </p>

        <p class="infoParagraph"> El 12 de septiembre de 1987 comenzó el Bad World Tour, gira que culminó el 27 de enero de 1989. Solo en Japón, la gira vendió la totalidad entradas en 14 ocasiones y congregó a 570.000 personas, casi triplicando el récord anterior de 200.000 en una sola gira. Jackson ingresó al Libro Guinness de los Récords cuando llenó por completo siete veces el estadio de Wembley, congregando a más de medio millón de espectadores. La gira constó de 123 conciertos y obtuvo una recaudación de 125 millones de dólares, con una audiencia de 4.4 millones de personas convirtiéndose así en una de las giras musicales más exitosas de la historia. Parte de las ganancias fueron donadas a hospitales, orfanatos y a entidades de beneficencia. </p>

        <p class="infoParagraph"> En 1988, publicó su primera autobiografía, titulada Moonwalk, donde describió su infancia, The Jackson 5, y el abuso que había sufrido.​ También escribió sobre los cambios en su aspecto facial, atribuyéndolo a la pubertad, pérdida de peso, una dieta vegetariana estricta, un cambio en el estilo de pelo, y la iluminación en el escenario, el libro llegó a ser un éxito y vendió quinientos mil ejemplares, además llegó a ser el libro más vendido en los EE. UU. en ese año según el periódico The New York Times. También en ese año, se presentó la película Moonwalker, que contiene los videos musicales que acompañaron el lanzamiento de sus sencillos «Bad», «Smooth Criminal», «Speed Demon» y «Leave Me Alone». Esta videocinta llegó a la cima de la lista Billboard Top Music Video Cassette, que agrupaba los videos más vendidos, permaneciendo allí durante veintidós semanas consecutivas. Finalmente fue eliminado de la primera posición por su predecesor Michael Jackson: La leyenda continúa. </p>

        <p class="paragraph">1991-1993: Dangerous, la fundación Heal the World y Super Bowl XXVII. </p>


        <p class="infoParagraph"> En marzo de 1991, renovó su contrato con Sony por 65 millones de dólares. En ese año publicó Dangerous, su octavo álbum de estudio. Dangerous vendió siete millones de copias en Estados Unidos y 32 millones de copias a nivel mundial. El primer sencillo del álbum fue «Black or White», el cual alcanzó el puesto número uno del Billboard Hot 100 y permaneció allí durante siete semanas consecutivas, con un éxito similar en otras partes del mundo. El segundo sencillo fue «Remember the Time» el cual llegó al puesto número 3 de la misma lista, su videoclip es reconocido por su baile, vestuario y escenografía ambientados en el Antiguo Egipto. «Heal the World», el tercer sencillo de Dangerous, contó con un videoclip en el que Jackson no aparece en ningún momento. </p>

        <p class="infoParagraph"> En 1992, el cantante creó la Heal the World Foundation para poder ayudar a través de ella a los niños más desamparados del mundo, víctimas de la violencia, la pobreza y las enfermedades terminales. El 27 de junio de 1992 comenzó el Dangerous World Tour, gira que finalizó el 11 de noviembre de 1993, recaudó un total de 100 millones de dólares y congregó a tres millones y medio de personas en 69 conciertos. Todas las ganancias de la gira fueron donadas a la fundación Heal the World. </p>

        <p class="infoParagraph"> Una de las actuaciones más aclamadas del artista fue su espectáculo de medio tiempo del Super Bowl XXVII. Cuando se presentó en el escenario, lo hizo vestido con una chaqueta militar de color dorado y negro y gafas oscuras; en la introducción del espectáculo, en cada una de las cuatro pantallas del estadio bailarines disfrazados de Michael Jackson salieron por encima de estas, creando así el efecto de que salían directamente del vídeo reproducido, luego Jackson permaneció casi inmóvil durante varios minutos ante la ovación del público presente. Después se quitó lentamente las gafas, para luego comenzar a cantar y bailar. El espectáculo contó con la participación del público, en las graderías con papeles de colores recrearon una imagen de muchos niños de diferentes partes del mundo cogidos de la mano, para finalizar en la mitad del campo fue colocado un globo terráqueo gigante, en la parte inferior Jackson cantó junto a decenas de niños en el escenario. En este espectáculo interpretó las canciones «Jam», «Billie Jean», «Black or White» y «Heal the World». </p>

        <p class="infoParagraph"> Este segmento fue seguido en vivo por más de 133,4 millones de espectadores solo en EE. UU, ​El espectáculo de medio tiempo de Michael Jackson provocó una tendencia en la contratación de artistas y personajes famosos por parte de la NFL para la diversión en los intermedios del Super Bowl. En el espectáculo de medio tiempo del Super Bowl 50, la cantante Beyoncé rindió homenaje a Jackson utilizando una versión femenina del traje con el que él había aparecido anteriormente en el mismo show. </p>

        <p class="paragraph">1993-1994: Primera acusación de abusos y primer matrimonio. </p>

        <p class="infoParagraph"> En febrero de 1993, Jackson accedió a ser entrevistado por Oprah Winfrey, en un reportaje que fue seguido en directo por aproximadamente 62 millones de televidentes. Allí habló acerca de su infancia, su adolescencia, la relación con sus padres y hermanos y su carrera profesional. También desmintió los rumores que señalaban que quería comprar los huesos del Hombre elefante, y que dormía en una cámara hiperbárica. Así mismo, ante los rumores y acusaciones de que había decidido despigmentarse las partes de su piel no afectadas por el vitíligo con uso de cremas blanqueantes, contestó que desconocía la existencia de cremas blanqueantes de piel y que disimulaba su apariencia con maquillaje en las zonas aún pigmentadas. Habló también de la serie de cirugías estéticas en su rostro (las cuales según él fueron tres: una para colocarse un hoyuelo y otras dos en su nariz). </p>

        <p class="infoParagraph"> En la entrevista Jackson afirmó que el vitíligo era genético, pues su abuelo también lo padecía. Después de su muerte, la autopsia corroboró que padecía la enfermedad, y se ha comprobado que su hijo mayor, Prince Michael, padece también vitíligo. </p>

        <p class="infoParagraph"> En el verano de 1993, el cantante fue acusado de haber abusado sexualmente de Jordan Chandler, uno de los muchos niños que solía acoger en su mansión de Neverland, por parte del niño y de su padre, Evan Chandler. Jordan, quien entonces tenía trece años de edad, lo acusó de haberlo besado, masturbado y de haberlo sometido a sexo oral; El consiguiente escándalo repercutió gravemente en el estado de ánimo y la imagen pública del cantante, y por tanto en su carrera. </p>

        <p class="infoParagraph"> Por petición de la justicia, su rancho de Neverland fue inspeccionado y varios niños y familias acusaron al cantante de ser un pedófilo. Su hermana mayor, La Toya, también insinuó creer en la veracidad de las acusaciones de que el artista molestó sexualmente a varios niños, aunque tiempo después se retractó de lo dicho. Entonces, Michael Jackson tuvo que someterse a una revisión para poder corroborar las descripciones que Jordan había hecho de los genitales del artista. A pesar de que se hallaron ciertas similitudes en las descripciones hechas por el acusador, esto no fue suficiente para que Jackson fuera declarado culpable. Pese a toda la repercusión mediática del caso, Jackson siguió sosteniendo su inocencia. </p>

        <p class="paragraph">1995-1999: History, segundo matrimonio y paternidad. </p>

        <p class="infoParagraph"> En 1995 publicó el álbum doble HIStory: Past, Present and Future, Book I. El primer disco, HIStory Begins, contenía los temas más exitosos de su carrera y luego fue reeditado con el nombre de Greatest Hits: HIStory, Volume I, en 2001; mientras que el segundo compacto, HIStory Continues, contenía quince nuevas canciones. Esta producción llegó al puesto número uno del Billboard 200. Vendió más de veinte millones de copias en todo el mundo y se convirtió así en el disco doble más vendido de todos los tiempos, Ha sido certificado por siete millones de ventas en Estados Unidos, y además HIStory recibió una nominación al Grammy por Álbum del Año. </p>

        <p class="infoParagraph"> Jackson fusionó su catálogo de ATV Music con la división de edición musical de Sony, la creación de Sony / ATV Music Publishing. Se conservó la propiedad de la mitad de la compañía, ganando $ 95 millones de la delantera, así como los derechos de las canciones. </p>

        <p class="infoParagraph"> El primer sencillo del disco, «Scream», grabado a dúo con su hermana Janet, alcanzó la posición número cinco del Billboard Hot 100 y fue nominado al Grammy como mejor colaboración pop. El segundo sencillo fue «You Are Not Alone», el cual ingresó al Libro Guinness de los Récords como la primera canción que debutó en el primer puesto de la lista Billboard Hot 100. Este tema tuvo un gran éxito comercial y de crítica, recibiendo una nominación al Grammy como mejor actuación vocal pop. A finales de 1995, Jackson fue hospitalizado debido a que sufrió un ataque de pánico durante un ensayo. El tercer sencillo de HIStory fue «Earth Song», el cual consiguió gran éxito en el Reino Unido donde permaneció en la cima de las listas de popularidad en ese año. Luego de esto, Jackson lanzó como sencillo la canción «They Don't Care About Us» que consiguió el primer puesto en países como Alemania, Italia, México, Turquía e Islandia; la canción sucitó polémicas por su fuerte lírica antisemitista, el video contó con dos versiones, una en la que jackson actúa de preso y otra que se sitúa en una favela de Río de Janeiro en Brasil. </p>

        <p class="infoParagraph"> En septiembre de 1996 se embarcó en el exitoso HIStory World Tour, gira que culminó en octubre de 1997. En este tour, Jackson realizó 82 conciertos en los cinco continentes, 35 países y 58 ciudades con una asistencia de más de 4,5 millones de personas, y recaudó un total de 165 millones de dólares convirtiéndose en su gira más exitosa en términos de índices de audiencia,y en una de las giras musicales más exitosas de la historia y la más exitosa por parte de un artista solista masculino hasta 2013. </p>

        <p class="paragraph">2000-2003: Disputa con Sony, Invincible y tercer hijo.  </p>

        <p class="infoParagraph"> En octubre de 2001 Jackson publicó el álbum Invincible, su primer trabajo discográfico en estudio en seis años. Antes del lanzamiento de este disco, en el año 2000, había ocurrido una disputa entre el cantante y su compañía discográfica: Jackson estaba a la espera del vencimiento del contrato que daba derecho a la distribución de su material a Sony para no depender de la discográfica y hacerse cargo personalmente de promover el material como quisiese y de los beneficios que traería en consecuencia, lo que vendría a ocurrir a comienzos de los años 2000. </p>

        <p class="infoParagraph"> El cantante buscó una salida anticipada a su contrato. Justo antes de la publicación del álbum, anunció al presidente de Sony, Tommy Mottola que dejaba la discográfica. En consecuencia, dos meses antes de su publicación, la promoción de los sencillos, vídeos musicales y todo lo relacionado con el álbum fue cancelado. </p>

        <p class="infoParagraph"> En septiembre de 2001, el cantante presentó el «Michael Jackson: Especial 30 Aniversario», una serie de conciertos en el Madison Square Garden para celebrar su trigésimo aniversario como solista, pocos días antes de los actos terroristas del 11 de septiembre, en esta ocasión apareció por primera vez desde 1984 junto a sus hermanos. El recital también contó con la participación de otros intérpretes como Mýa, Usher, Whitney Houston, 'N Sync, Destiny's Child, Monica, Luther Vandross y Slash, entre muchos otros. </p>

        <p class="infoParagraph"> En octubre de ese mismo año, Jackson completó su trabajo en el nuevo sencillo para fines benéficos, titulado «What More Can I Give», una respuesta a los ataques del 11 de septiembre. Al igual que había hecho años atrás con «We are the world», grabó la canción con la participación de varios artistas y con las expectativas de alcanzar una recaudación de cincuenta millones de dólares para las familias de las víctimas de los ataques; sin embargo, el sencillo no salió a la venta, debido al futuro abandono de Sony por parte del cantante. En la grabación, de la que también hubo una versión en español, participaron entre otros Mariah Carey, Céline Dion, Ricky Martin, Carlos Santana, Beyoncé Knowles (Destiny's Child), Nick Carter (Backstreet Boys), Aaron Carter, Mya, Luis Miguel, Gloria Estefan, Shakira, Usher, Julio Iglesias, Luther Vandross, John Secada, Alejandro Sanz, Cristian Castro, Olga Tañón, Anastacia, Juan Gabriel, Thalía, entre otros.</p>

        <p class="paragraph">2003-2005: Segunda acusación de abusos. </p>

        <p class="infoParagraph"> Desde enero de 2002 hasta mayo de 2003, Jackson accedió grabar un documental en el cual narraban su vida cotidiana, costumbres, vida pasada, etc. Se publicó bajo el nombre de Living With Michael Jackson y fue presentado por el periodista británico Martin Bashir quien entrevistó y acompañó a Jackson durante el reportaje, sin embargo antes de ser publicado el documental fue modificado por Bashir, tergiversando así la imagen verdadera de Jackson. El estreno fue seguido por más de 27 millones de televidentes. En uno de estos reportajes, el cantante apareció de la mano de un adolescente de trece años llamado Gavin Arvizo, uno de los tantos niños enfermos que visitaban con frecuencia su mansión, quien dijo que solía quedarse a dormir en la habitación del cantante sin que a él le molestara. Esto despertó una gran polémica y más tarde, la familia del joven acusó a Jackson de haber emborrachado y violado al adolescente. </p>

        <p class="infoParagraph"> El juicio se inició el 31 de enero de 2005 en Santa María, California, y finalizó en el mes de mayo. El 13 de junio del mismo año fue declarado inocente de todos los cargos. Después del veredicto, el cantante y sus hijos permanecieron temporalmente en Baréin como invitados de la familia real de ese país. </p>

        <p class="paragraph">2006-2009: Últimos años y This is It.</p>
            
        <p class="infoParagraph"> En marzo de 2006, las autoridades estadounidenses ordenaron el cierre de su rancho Neverland. Oficialmente fue debido a atrasos en el pago de salarios debido a problemas burocráticos ya solucionados, aunque también en este caso se difundió la idea de que la policía buscaba pruebas de sus supuestas relaciones con menores. </p>

        <p class="infoParagraph"> Posteriormente Michael Jackson ayudó en la composición de la canción «Don't Stop The Music» hecha para la cantante barbadense Rihanna, el tema contiene el estribillo «Mama-say, mama-sa, ma-ma-ko-ssa» que proviene de la canción de Jackson «Wanna Be Startin' Somethin'» la cual pertenece al disco Thriller (1982). </p>

        <p class="paragraph">Muerte y funeral. </p>

        <p class="infoParagraph"> En la mañana del 25 de junio de 2009, Michael Jackson sufrió un paro cardiorrespiratorio en su mansión alquilada de Holmby Hills. Los miembros del servicio llamaron al teléfono de emergencia 911 para solicitar auxilio a las 12:21 PDT (UTC-7). Los paramédicos, quienes llegaron nueve minutos después, lo encontraron sin pulso ni respiración, por lo que le aplicaron reanimación cardiopulmonar y lo trasladaron al Ronald Reagan UCLA Medical Center, ubicado en Los Ángeles a la 1:14 p. m. Pero a pesar de los esfuerzos de los médicos fue declarado muerto a las 2:26 p.m. </p>

    </div>

    <div id="album"> 
        <a href="#" class="viewAlbum">^</a>
    	<div class="titleSection">Album's</div>
        

    	<div class="card">
    		<div class="elementAlbum">Thriller</div>
    		<img class="elementAlbum" src="img/album/1.jpg">
            <div class="dateAlbum">Fecha de publicación: 30 de noviembre de 1982</div>
            <div class="oldAlbum">1982</div>
            <a href="html/album/1.html" class="viewAlbum" target="_blank">More</a>
            
    	</div>

	    <div class="card">
    		<div class="elementAlbum">Bad</div>
    		<img class="elementAlbum" src="img/album/2.jpg">
            <div class="dateAlbum">Fecha de publicación: 31 de agosto de 1987</div>
            <div class="oldAlbum">1987</div>
            <a href="html/album/2.html" class="viewAlbum" target="_blank">More</a>
    	</div>

        <div class="card">
            <div class="elementAlbum">Dangerous</div>
            <img class="elementAlbum" src="img/album/3.jpg">
            <div class="dateAlbum">Fecha de publicación: 26 de noviembre de 1991</div>
            <div class="oldAlbum">1991</div>
            <a href="html/album/3.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Off the Wall</div>
            <img class="elementAlbum" src="img/album/4.jpg">
            <div class="dateAlbum">Fecha de publicación: 10 de agosto de 1979</div>
            <div class="oldAlbum">1979</div>
            <a href="html/album/4.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">HIStory: Past, Present and Future, Book I</div>
            <img class="elementAlbum" src="img/album/5.jpg">
            <div class="dateAlbum">Fecha de publicación: 16 de junio de 1995</div>
            <div class="oldAlbum">1995</div>
            <a href="html/album/5.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Xscape</div>
            <img class="elementAlbum" src="img/album/6.jpg">
            <div class="dateAlbum">Publicación: 13 de mayo de 2014</div>
            <div class="newAlbum">2014</div>
            <a href="html/album/6.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Invincible</div>
            <img class="elementAlbum" src="img/album/7.jpg">
            <div class="dateAlbum">Fecha de publicación: 30 de octubre de 2001</div>
            <div class="oldAlbum">2001</div>
            <a href="html/album/7.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">This Is It</div>
            <img class="elementAlbum" src="img/album/8.jpg">
            <div class="dateAlbum">Fecha de publicación: 26 de octubre de 2009</div>
            <div class="oldAlbum">2009</div>
            <a href="html/album/8.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Got to Be There</div>
            <img class="elementAlbum" src="img/album/9.jpg">
            <div class="dateAlbum">Fecha de publicación: 24 de enero de 1972</div>
            <div class="oldAlbum">1972</div>
            <a href="html/album/9.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Music and Me</div>
            <img class="elementAlbum" src="img/album/10.jpg">
            <div class="dateAlbum">Fecha de publicación: 13 de abril de 1973</div>
            <div class="oldAlbum">1973</div>
            <a href="html/album/10.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Forever, Michael</div>
            <img class="elementAlbum" src="img/album/11.jpg">
            <div class="dateAlbum">Fecha de publicación: 16 de enero de 1975</div>
            <div class="oldAlbum">1975</div>
            <a href="html/album/11.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Immortal</div>
            <img class="elementAlbum" src="img/album/12.jpg">
            <div class="dateAlbum">Fecha de publicación: 18 de noviembre de 2011</div>
            <div class="newAlbum">2011</div>
            <a href="html/album/12.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Twelves</div>
            <img class="elementAlbum" src="img/album/13.jpg">
            <div class="dateAlbum">Fecha de publicación: 2003</div>
            <div class="oldAlbum">2003</div>
            <a href="html/album/13.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Ben</div>
            <img class="elementAlbum" src="img/album/14.jpg">
            <div class="dateAlbum">Fecha de publicación: 4 de agosto de 1972</div>
            <div class="oldAlbum">1972</div>
            <a href="html/album/14.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">E.T. the Extra-Terrestrial</div>
            <img class="elementAlbum" src="img/album/15.jpg">
            <div class="dateAlbum">Fecha de publicación: 7 de noviembre de 1982</div>
            <div class="oldAlbum">1982</div>
            <a href="html/album/15.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Bad 25</div>
            <img class="elementAlbum" src="img/album/16.jpg">
            <div class="dateAlbum">Fecha de publicación: 3 de mayo de 2012</div>
            <div class="newAlbum">2012</div>
            <a href="html/album/16.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Auckland 1996 (Live)</div>
            <img class="elementAlbum" src="img/album/17.jpg">
            <div class="dateAlbum">Fecha de publicación: 29 de abril de 2016</div>
            <div class="newAlbum">2016</div>
            <a href="html/album/17.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">One Night in Japan</div>
            <img class="elementAlbum" src="img/album/18.jpg">
            <div class="dateAlbum">Fecha de publicación: 10 de abril de 2009</div>
            <div class="oldAlbum">2009</div>
            <a href="html/album/18.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">The Bad Mixes</div>
            <img class="elementAlbum" src="img/album/19.jpg">
            <div class="dateAlbum">Fecha de publicación: 1988</div>
            <div class="oldAlbum">1988</div>
            <a href="html/album/19.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">La Légende de la Pop</div>
            <img class="elementAlbum" src="img/album/20.jpg">
            <div class="dateAlbum">Fecha de publicación: 2009</div>
            <div class="oldAlbum">2009</div>
            <a href="html/album/20.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Thriller 25</div>
            <img class="elementAlbum" src="img/album/21.jpg">
            <div class="dateAlbum">Fecha de publicación: 8 de febrero de 2008</div>
            <div class="oldAlbum">2008</div>
            <a href="html/album/21.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">The Medleys</div>
            <img class="elementAlbum" src="img/album/22.jpg">
            <div class="dateAlbum">Fecha de publicación: 1992</div>
            <div class="oldAlbum">1992</div>
            <a href="html/album/22.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Majesty 1992</div>
            <img class="elementAlbum" src="img/album/23.jpeg">
            <div class="dateAlbum">Fecha de publicación: 1994</div>
            <div class="oldAlbum">1994</div>
            <a href="html/album/23.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Pre-History: The Lost Steeltown Recordings</div>
            <img class="elementAlbum" src="img/album/24.jpg">
            <div class="dateAlbum">Fecha de publicación: 4 de junio de 1996</div>
            <div class="oldAlbum">1996</div>
            <a href="html/album/24.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">King of Pop</div>
            <img class="elementAlbum" src="img/album/25.jpg">
            <div class="dateAlbum">Fecha de publicación: 22 de agosto de 2008</div>
            <div class="oldAlbum">2008</div>
            <a href="html/album/25.html" class="viewAlbum" target="_blank">More</a>
        </div>

        <div class="card">
            <div class="elementAlbum">Michael</div>
            <img class="elementAlbum" src="img/album/26.jpg">
            <div class="dateAlbum">Fecha de publicación: 10 de diciembre de 2010</div>
            <div class="newAlbum">2010</div>
            <a href="html/album/26.html" class="viewAlbum" target="_blank">More</a>
        </div>
    </div>
    
 

    <div id="top"> 
        <a href="#" class="viewAlbum">^</a>
    	<div class="titleSection">Top 10 Canciones</div>


        <div class="card">
            <div class="elementAlbum">1 - Billie Jean</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/Zi_XLOBDo_Y" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">4:55</div>
        </div>

        <div class="card">
            <div class="elementAlbum">2 - Beat It</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/oRdxUFDoQe0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">4:58</div>
        </div>

        <div class="card">
            <div class="elementAlbum">3 - Thriller</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/sOnqjkJTMaA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">13:42</div>
        </div>

        <div class="card">
            <div class="elementAlbum">4 - The Way You Make Me Feel</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/HzZ_urpj4As" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">6:43</div>
        </div>

        <div class="card">
            <div class="elementAlbum">5 - Man In The Mirror</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/PivWY9wn5ps" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">5:03</div>
        </div>

        <div class="card">
            <div class="elementAlbum">6 - Remember The Time</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/LeiFF0gvqcc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">9:16</div>
        </div>

        <div class="card">
            <div class="elementAlbum">7 - Don't Stop 'Til You Get Enough</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/yURRmWtbTbo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">4:13</div>
        </div>

        <div class="card">
            <div class="elementAlbum">8 - P.Y.T. (Pretty Young Thing)</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/1ZZQuj6htF4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">4:00</div>
        </div>

        <div class="card">
            <div class="elementAlbum">9 - Wanna Be Startin' Somethin'</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/4Uj3zitETs4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">6:03</div>
        </div>

        <div class="card">
            <div class="elementAlbum">10 - Rock With You</div>
            <div class="dateAlbum"> </div>
            <iframe width="280" height="157,5" src="https://www.youtube.com/embed/5X-Mrc2l1d0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <div class="dateAlbum"> </div>
            <div class="dateAlbum">Duración</div>
            <div class="newAlbum">3:22</div>
        </div>

    </div>

    <footer>
		<div class="headerSubtitle">By Juan Pablo Romero Londoño :: Aplicaciones Móviles </div>
	</footer>

</body>
</html>
Para ver los estilos css, las imágenes y las otras paginas html descargar la carpeta del proyecto desde el siguiente enlace!

https://drive.google.com/drive/folders/ ... sp=sharing

La información de la biografía fue tomada de Wikipedia, la de los albums y el top de Google!
Last edited by JuanRomeroL on Fri Aug 10, 2018 5:18 pm, edited 19 times in total.
Juan Pablo Romero Londoño
Estudiante Ingeniería de Sistemas 8 semestre :geek:
Universidad Pontificia Bolivariana
ID: 000287960

User avatar
MariaIAF
Posts: 22
Joined: Thu Jul 26, 2018 12:12 pm

Re: Wireframe Aplicaciones Móviles

Post by MariaIAF » Fri Aug 10, 2018 9:56 am

Wireframes Corregidos
Image

Wireframes Digitales

Top 20
Image

Géneros
Image

Artistas
Image

Navegacion
Image

Implementación

Index.html

Code: Select all

<DOCTYPE <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Top 20 musical</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <!-- Custom styles for this template -->
        <link href="css/4-col-portfolio.css" rel="stylesheet">

      	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <link rel="stylesheet" href="css/custom.css">

        <script src="js/main.js"></script>
    </head>

    <body>
        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light ">
            <a class="navbar-brand" href="#">Top 20 Musical</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarColor03">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Top 20
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="generos.html">Géneros</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="artistas.html">Artistas</a>
                    </li>

                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search">
                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>

        <!-- Page Content -->
        <div class="jumbotron">

            <!-- Page Heading -->
            <h1 class="my-4" align="center">
                Top 20 Musical
            </h1>

            <ul class="list-group">
                <!-- Item 1 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>1</h2>
                        </div>
                        <div class="col-md-6">
                            <a href="#">
                                <iframe width="100%" height="150" src="https://www.youtube.com/embed/ozv4q2ov3Mk" frameborder="0" allow="autoplay; encrypted-media"
                                    allowfullscreen></iframe>
                            </a>
                        </div>
                        <div class="col-md-5">
                            <h3>Feels</h3>
                            <p>
                                Artistas:
                                <a href="artistas.html">Calvin Harris</a>,
                                <a href="artistas.html">Pharrel Williams</a>,
                                <a href="artistas.html">Katy Perry</a>,
                                <a href="artistas.html">Big Sean</a>
                                <br/> Género
                                <a href="generos.html">Dance/Electrónica</a>
                            </p>

                        </div>
                    </div>
                    <!-- /.row -->

                </li>
                <!-- ..Item1 -->
                <!-- Item 2 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>2</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/JRfuAukYTKg" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Titanium </h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">David Guetta</a>,
                                <a href="artistas.html">Sia</a>,

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">House</a>
                                <a href="generos.html">Dance/Electrónica</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 2 -->
                <!-- Item 3 -->
                <li class="list-group-item ">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>3</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/AJtDXIazrMo" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Love me like you do </h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Ellie Goulding</a>

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Electropop</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 3 -->
                <!-- Item 4 -->
                <li class="list-group-item ">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>4</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/T3E9Wjbq44E" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Stereo Hearts</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Gym Class Heroes</a>,
                                <a href="artistas.html">Adam Levine</a>

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Alternativo/Independiente</a>
                                <a href="generos.html">Pop</a>

                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 4 -->
                <!-- Item 5 -->
                <li class="list-group-item ">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>5</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/bTXJQ5ql5Fw" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Time of our Lives</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Pitbull</a>,
                                <a href="artistas.html">Ne-Yo</a>,

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Pop</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 5 -->
                <!-- Item 6 -->
                <li class="list-group-item ">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>6</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/oOAfz0H4f00" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Trumpets</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Json Derulo</a>

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">R & B Contemporáneo</a>,
                                <a href="generos.html">Pop</a>,
                                <a href="generos.html">Soul</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 6 -->
                <!-- Item 7 -->
                <li class="list-group-item">

                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>7</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/kn6-c223DUU" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Airplanes</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">B.o.B</a>,
                                <a href="artistas.html">Hayley Williams</a>

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html"></a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 7 -->
                <!-- Item 8 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>8</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/KEI4qSrkPAs" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Can't Feel My Face</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">The Weeknd</a>

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">R&B Contemporáneo</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 8 -->
                <!-- Item 9 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>9</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/CTFtOOh47oo" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Unforgettable</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">French Montana</a>,
                                <a href="artistas.html">Swae Lee</a>

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Hip-Hop/Rap</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 9 -->
                <!-- Item 10 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>10</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/NmugSMBh_iI" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Maps</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Maroon 5</a>

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Electropop</a>,
                                <a href="generos.html">Pop</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 10 -->
                <!-- Item 11 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>11</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/bpOR_HuHRNs" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Wild Ones</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Flo Rida</a>,
                                <a href="artistas.html">Sia</a>

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Pop</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 11 -->
                <!-- Item 12 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>12</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/bpOR_HuHRNs" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Can't Hold Us</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Macklemore & Ryan Lewis</a>,
                                <a href="artistas.html">Ray Dalton</a>

                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Pop</a>,
                                <a href="generos.html">Hip-Hop/Rap</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 12 -->
                <!-- Item 13 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>13</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/papuvlVeZg8" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Rockabye</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Clean Bandit</a>,
                                <a href="artistas.html">Sean Paul</a>,
                                <a href="artistas.html">Anne-Marie</a>
                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Dance</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 13 -->
                <!-- Item 14 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>14</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/IcrbM1l_BoI" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Wake Me Up</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Avicii</a>
                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Dance/Electrónica</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 14 -->
                <!-- Item 15 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>15</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/jGflUbPQfW8" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Cheerleader</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">OMI</a>
                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Pop</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 15 -->
                <!-- Item 16 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>16</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/nCkpzqqog4k" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>I'm not the Only One</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Sam Smith</a>
                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Pop</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 16 -->
                <!-- Item 17 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>17</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/EkHTsc9PU2A" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>I'm Yours</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Jason Mraz</a>
                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Pop</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 17 -->
                <!-- Item 18 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>18</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/ZSM3w1v-A_Y" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>Apologize</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Timbaland</a>,
                                <a href="artistas.html">One Republic</a>
                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Pop</a>,
                                <a href="generos.html">Hip-Hop/Rap</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 18 -->
                <!-- Item 19 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>19</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/RB-RcX5DS5A" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>The Scientist</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Coldplay</a>
                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Rock Alternativo</a>,
                                <a href="generos.html">Piano Rock</a>,
                                <a href="generos.html">Rock</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 19 -->
                <!-- Item 20 -->
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-md-1 badge-success">
                            <h2>20</h2>
                        </div>
                        <div class="col-md-6">
                            <iframe width="100%" height="150" src="https://www.youtube.com/embed/FM7MFYoylVs" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-5">
                            <h3>The Scientist</h3>
                            <p>
                                Artista(s):
                                <br/>
                                <a href="artistas.html">Coldplay</a>,
                                <a href="artistas.html">The Chainsmokers</a>
                            </p>
                            <br/> Género:
                            <p>
                                <a href="generos.html">Dance/Electrónica</a>
                            </p>

                        </div>
                    </div>
                </li>
                <!-- ..Item 20 -->
            </ul>

        </div>
        <!-- /.container -->
        

    </body>

    </html>
generos.html

Code: Select all

<DOCTYPE <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Top 20 musical</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <script src="js/main.js"></script>
        <link rel="stylesheet" href="css/custom.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
            crossorigin="anonymous">

    </head>

    <body>
        <!-- navbar navbar-default navbar-fixed-top -->
        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Top 20 Musical</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarColor03">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Top 20 </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Géneros
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="artistas.html">Artistas</a>
                    </li>

                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search">
                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
        <!-- Page Heading -->
        <div class="jumbotron">
            <h1 class="my-4" align="center">
                Feels
            </h1>
            <h5 align="center">
                <a href="artistas.html">Calvin Harris</a>,
                <a href="artistas.html">Pharrel Williams</a>,
                <a href="artistas.html">Katy Perry</a>,
                <a href="artistas.html">Big Sean</a>
            </h5>
            <br/>
            <iframe class="center" width="560" height="315" src="https://www.youtube.com/embed/JRfuAukYTKg" frameborder="0" allow="autoplay; encrypted-media"
                allowfullscreen></iframe>
            <div class="center">
                <i class="far fa-star"></i>
                <i class="far fa-star"></i>
                <i class="far fa-star"></i>
                <i class="far fa-star"></i>
                <i class="far fa-star"></i>
            </div>

            <br/>

            <div class="row">
                <!-- Card 1 -->
                <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                    <div class="card border-success mb-3" style="max-width: 20rem;">
                        <div class="card-header">Wake Me Up</div>
                        <iframe src="https://www.youtube.com/embed/IcrbM1l_BoI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        <div class="card-body">
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <h6 class="card-title">
                                <a href="generos.html">Dance/Electrónica</a>
                            </h6>
                            <p>
                                <a href="artistas.html">Avicii</a>
                                <br/> 2013
                            </p>

                        </div>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                    <div class="card border-success mb-3" style="max-width: 20rem;">
                        <div class="card-header">Summer</div>
                        <iframe src="https://www.youtube.com/embed/ebXbLfLACGM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        <div class="card-body">
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <h6 class="card-title">
                                <a href="generos.html">Dance/Electrónica</a>
                            </h6>
                            <p>
                                <a href="artistas.html">Calvin Harris</a>
                                <br/> 2014
                            </p>

                        </div>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                    <div class="card border-success mb-3" style="max-width: 20rem;">
                        <div class="card-header">Let Me Love You</div>
                        <iframe src="https://www.youtube.com/embed/euCqAq6BRa4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        <div class="card-body">
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <h6 class="card-title">
                                <a href="generos.html">Dance/Electrónica</a>
                            </h6>
                            <p>
                                <a href="artistas.html">Dj Snake</a>,
                                <a href="artistas.html">Justin Bieber</a>
                                <br/> 2016
                            </p>

                        </div>
                    </div>
                </div>
                <!-- Card 4 -->
                <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                    <div class="card border-success mb-3" style="max-width: 20rem;">
                        <div class="card-header">Lonely Togeher</div>
                        <iframe src="https://www.youtube.com/embed/vQ3XgMKAgxc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        <div class="card-body">
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <h6 class="card-title">
                                <a href="generos.html">Dance/Electrónica</a>
                            </h6>
                            <p>
                                <a href="artistas.html">Avicii</a>,
                                <a href="artistas.html">Rita Ora</a>
                                <br/> 2017
                            </p>

                        </div>
                    </div>
                </div>
            </div>
            <!-- End row -->
        </div>
        <!-- End Container -->
        

    </body>

    </html>
artistas.html

Code: Select all

<DOCTYPE <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Top 20 musical</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <script src="js/main.js"></script>
        <link rel="stylesheet" href="css/custom.css">
    </head>

    <body>
        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light ">
            <a class="navbar-brand" href="#">Top 20 Musical</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarColor03">
                <ul class="navbar-nav mr-auto">

                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Top 20</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="generos.html">Géneros</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Artistas
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>

                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search">
                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
        <!-- Page Content -->
        <br/>
        <div class="jumbotron">
            <div class="row">
                <div class="col-md-4">
                    <img src="http://www.bristolbrewing.com/wp-content/uploads/2017/08/default-avatar.png" />
                </div>
                <div class="col-md-8">
                    <h3 class="my-4">Calvin Harris</h3>
                    <p>
                        <br/> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime consequuntur, vel nam a natus aut
                        voluptates perspiciatis reiciendis voluptatem architecto facilis eius perferendis velit id cum dicta
                        explicabo, iste asperiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel numquam
                        temporibus laudantium minus molestias commodi aliquam, fugit autem inventore at quos iste, amet hic
                        quia quidem architecto quam eum odio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos
                        eaque, temporibus deleniti tempora, quibusdam provident non ipsa omnis sed tempore, alias ad deserunt
                        mollitia! Optio commodi suscipit nisi fugit maxime.

                    </p>

                </div>
            </div>
            <br/>
            <h4>Canciones del artista </h4>
            <br/>
            <div class="row">
                <!-- Card 1 -->
                <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                    <div class="card border-success mb-3" style="max-width: 20rem;">
                        <div class="card-header">Feel so Close</div>
                        <iframe src="https://www.youtube.com/embed/dGghkjpNCQ8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        <div class="card-body">
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <h6 class="card-title">
                                <a href="generos.html">Dance/Electrónica</a>
                            </h6>
                            <p>
                                2012
                                <br/> Álbum: 18 Months
                            </p>

                        </div>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                    <div class="card border-success mb-3" style="max-width: 20rem;">
                        <div class="card-header">Summer</div>
                        <iframe src="https://www.youtube.com/embed/ebXbLfLACGM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        <div class="card-body">
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <h6 class="card-title">
                                <a href="generos.html">Dance/Electrónica</a>
                            </h6>
                            <p>
                                2014
                                <br/> Álbum: Summer
                            </p>

                        </div>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                    <div class="card border-success mb-3" style="max-width: 20rem;">
                        <div class="card-header">One Kiss</div>
                        <iframe src="https://www.youtube.com/embed/DkeiKbqa02g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        <div class="card-body">
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <h6 class="card-title">
                                <a href="generos.html">Dance/Electrónica</a>
                            </h6>
                            <p>

                                2016
                                <br/> Álbum:
                            </p>

                        </div>
                    </div>
                </div>
                <!-- Card 4 -->
                <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                    <div class="card border-success mb-3" style="max-width: 20rem;">
                        <div class="card-header">Let's Go</div>
                        <iframe src="https://www.youtube.com/embed/LYZ6gXWZfZM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        <div class="card-body">
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <h6 class="card-title">
                                <a href="generos.html">Dance/Electrónica</a>
                            </h6>
                            <p>

                                2012
                                <br/> Álbum: 18 Months
                            </p>

                        </div>
                    </div>
                </div>
            </div>

            <!-- /.row -->

        </div>
        <!-- /.container -->
       
    </body>

    </html>
4-col-portfolio.css

Code: Select all

/*!
 * Start Bootstrap - 4 Col Portfolio (https://startbootstrap.com/template-overviews/4-col-portfolio)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-4-col-portfolio/blob/master/LICENSE)
 */

body {
  padding-top: 54px;
}

@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

.portfolio-item {
  margin-bottom: 30px;
}

.pagination {
  margin-bottom: 30px;
}

custom.css

Code: Select all

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

Gif
Index
Image

Artistas
Image

Géneros
Image
Last edited by MariaIAF on Sat Aug 11, 2018 3:59 pm, edited 4 times in total.
Maria Isabel Arcila Franco
maria.arcilaf@upb.edu.co

Gestión de Calidad de Software
Aplicaciones Móviles

User avatar
Sergio Rodríguez
Posts: 15
Joined: Thu Jul 26, 2018 12:12 pm

Re: Wireframe Aplicaciones Móviles

Post by Sergio Rodríguez » Fri Aug 10, 2018 10:02 am

Wireframes manuales
Image

Wireframe Digitales

Página Géneros
Image

Página Top 20
Image

Página Artistas
Image

Navegación
Image

Géneros-html

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Bailalo</title>
    

    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">Music</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Género</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="top20.html">Top 20</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="artistas.html">Artistas</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <header>
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
                
                <div class="carousel-item active" style="background-image: url('https://www.imer.mx/wp-content/uploads/sites/36/pst_musicaDelMundo.jpg')">
                </div>
            </div>
        </div>
    </header>
    
    <div class="container">
        <h1 class="my-4">Música para todos</h1>
        
        <div class="row">
            <div class="col-lg-6 mb-6">
                <div class="card h-100">
                    <h4 class="card-header">Top 20</h4>
                    <div class="card-body">
                        <p class="card-text">Mejores canciones de la semana</p>
                    </div>
                    <div class="card-footer">
                        <a href="top20.html" class="btn btn-success">TOP 20</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-6">
                <div class="card h-100">
                    <h4 class="card-header">Artistas</h4>
                    <div class="card-body">
                        <p class="card-text">Mejores artistas de la semana</p>
                    </div>
                    <div class="card-footer">
                        <a href="artistas.html" class="btn btn-success">Artistas</a>
                    </div>
                </div>
            </div>
        </div>
        <br />

        <h2>Géneros Musicales</h2>
        <div class="row">
            <div class="col-lg-4 col-sm-6 portfolio-item">
                <div class="card h-100">
                    <a href="#"><img class="card-img-top" src="https://darbaculture.com/wp-content/uploads/2015/08/REGGAETON-MOLABA-M%C3%81S.jpg" alt=""></a>
                    <div class="card-body">
                        <h4 class="card-title">
                            <a href="top20.html">Reggaeton</a>
                        </h4>
                        <p class="card-text">Conoce las mejores canciones de reggaeton</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 portfolio-item">
                <div class="card h-100">
                    <a href="#"><img class="card-img-top" src="img/carlos.jpg" alt=""></a>
                    <div class="card-body">
                        <h4 class="card-title">
                            <a href="top20.html">Pop en español</a>
                        </h4>
                        <p class="card-text">Conoce las mejores canciones de Pop en español</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 portfolio-item">
                <div class="card h-100">
                    <a href="#"><img class="card-img-top" src="http://musicandote.com/wp-content/uploads/2014/04/salsa.jpg" alt=""></a>
                    <div class="card-body">
                        <h4 class="card-title">
                            <a href="top20.html">Salsa</a>
                        </h4>
                        <p class="card-text">Conoce las mejores canciones de Salsa</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <h2>Canción de la semana</h2>
                <ul>
                    <li>Género: Salsa</li>
                    <li>Cantante: Gente de Zona</li>
                    <li>Año lanzamiento: 2016</li>
                </ul>
                <br />
                <audio controls>
                    <source src="audio/gozadera.ogg" type="audio/ogg" />
                </audio>
            </div>

            <div class="col-lg-6">
                <img class="img-fluid rounded" src="https://zachary-jones.com/zambombazo/wp-content/uploads/2015/05/gente_de_zona_-_la_gozadera-f.jpg" alt="">
            </div>


        </div>

        <hr>

    </div>

    <footer class="py-5 bg-dark">
        <div class="container">
            <p class="m-0 text-center text-white">Copyright &copy; Aplicaciones Móviles 2018 - Sergio Andrés Rodríguez Galeano</p>
        </div>
    </footer>
</body>
</html>
Top20

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TOP 20</title>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    <br />
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">Music</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Género</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="top20.html">Top 20</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="artistas.html">Artistas</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container">

        <h1 class="my-4">
            TOP 20
        </h1>
 
        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://zachary-jones.com/zambombazo/wp-content/uploads/2015/05/gente_de_zona_-_la_gozadera-f.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>1. La gozadera</h3>
                <h3><em>Artista: Gente de zona</em></h3>
                <audio controls>
                    <source src="audio/gozadera.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
 
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://www.elpais.com.co/files/article_main/uploads/2017/09/22/59c5310496f30.jpeg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>2. Pescaito</h3>
                <h3><em>Artista: Carlos Vives</em></h3>
                <audio controls>
                    <source src="audio/pescaito.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
  
        <hr>
   
        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://i.ytimg.com/vi/RqaVPWmwglQ/maxresdefault.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>3. Talento de Televisión</h3>
                <h3><em>Artista: Wilie Colon</em></h3>
                <audio controls>
                    <source src="audio/talento.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="http://los40co00.epimg.net/los40/imagenes/2017/11/03/musica/1509741485_317947_1509741685_noticia_normal.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>4. Besos en Guerra</h3>
                <h3><em>Artista: Morat-Juanes</em></h3>
                <audio controls>
                    <source src="audio/besos.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://images.genius.com/872c727dee967bcfff0d4a570e827748.1000x1000x1.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>5. Bailando</h3>
                <h3><em>Artista: Enrique Iglesias</em></h3>
                <audio controls>
                    <source src="audio/bailando.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://i0.wp.com/www.revistaescenarios.mx/wp-content/uploads/2017/01/image004.png?fit=599%2C335" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>6. Al filo de tu amor</h3>
                <h3><em>Artista: Carlos Vives</em></h3>
                <audio controls>
                    <source src="audio/alfilo.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://files.lafm.com.co/assets/public/styles/image_631x369/public/2018-05/vives-hoy-tento-tiempo-pinta-sensual.jpg?itok=PgHkneea" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>7. Hoy tengo tiempo</h3>
                <h3><em>Artista: Carlos Vives</em></h3>
                <audio controls>
                    <source src="audio/tiempo.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://www.elheraldo.co/sites/default/files/styles/width_860/public/articulo/2015/08/01/carlos_vives_0.jpg?itok=9TNnS5kC" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>8. La tierra del olvido</h3>
                <h3><em>Artista: Carlos Vives</em></h3>
                <audio controls>
                    <source src="audio/tierra.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
       
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://buenavibra.es/wp-content/uploads/2018/05/mudnial.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>9. Live it up</h3>
                <h3><em>Artista: Nicky Jam</em></h3>
                <audio controls>
                    <source src="audio/live.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://www.elpais.com.co/files/article_main_small/uploads/2017/06/29/595588591796a.jpeg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>10. El orgullo de mi patria</h3>
                <h3><em>Artista: Carlos vives</em></h3>
                <audio controls>
                    <source src="audio/orgullo.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
       
        <hr>
       
        <hr>
        
        <ul class="pagination justify-content-center">
            <li class="page-item">
                
            </li>
            <li class="page-item">
                <a class="page-link" href="top20.html">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="top202.html">2</a>
            </li>
            <li class="page-item">
            </li>
        </ul>
    </div>
    <footer class="py-5 bg-dark">
        <div class="container">
            <p class="m-0 text-center text-white">Copyright &copy; Aplicaciones Móviles 2018 - Sergio Andrés Rodríguez Galeano</p>
        </div>
    </footer>
</body>
</html>
Top202

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TOP 20</title>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    <br />
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">Music</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Género</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="top20.html">Top 20</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="artistas.html">Artistas</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container">
        <!-- Page Heading -->
        <h1 class="my-4">
            TOP 20
        </h1>
        <!-- Project One -->
        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://coubsecure-s.akamaihd.net/get/b4/p/coub/simple/cw_timeline_pic/d863c49d826/b2f2d25ebbdace5dcf308/big_1488334301_image.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>11. Reggaeton Lento</h3>
                <h3><em>Artista: CNCO</em></h3>
                <audio controls>
                    <source src="audio/cnco.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>
        <!-- Project Two -->
        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://spinlyrics.com/pics/song/large/melendi-el-arrepentido-lyrics-2b96cb.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>12. El arrepentido</h3>
                <h3><em>Artista: Carlos Vives</em></h3>
                <audio controls>
                    <source src="audio/arrepentido.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>
        <!-- Project Three -->
        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://is4-ssl.mzstatic.com/image/thumb/Music/15/7b/e9/mzi.zzpfqrtf.jpg/268x0w.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>13. Danza Kuduro</h3>
                <h3><em>Artista: Don Omar</em></h3>
                <audio controls>
                    <source src="audio/danza.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>
        <!-- Project Four -->
        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://i.ytimg.com/vi/lzGA9ma3u9M/maxresdefault.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>14. La bicicleta</h3>
                <h3><em>Artista: Carlos Vives</em></h3>
                <audio controls>
                    <source src="audio/bicicleta.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://cde.publimetro.e3.pe/ima/0/0/1/3/3/133374.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>15. Dura</h3>
                <h3><em>Artista: Daddy Yankee</em></h3>
                <audio controls>
                    <source src="audio/dura.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="http://images.ipautainc.netdna-cdn.com/wp-content/uploads/2017/01/Nicky-Jam-El-Amante-Prod.-By-Saga-WhiteBlack.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>16. El amante</h3>
                <h3><em>Artista: Nicky Jam</em></h3>
                <audio controls>
                    <source src="audio/amante.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://is2-ssl.mzstatic.com/image/thumb/Music122/v4/d9/42/de/d942de3f-8b3d-4adc-e8d8-f03a7eae2168/886446345000.jpg/268x0w.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>17. Subeme la radio</h3>
                <h3><em>Artista: Enrique Iglesias</em></h3>
                <audio controls>
                    <source src="audio/subeme.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/4b/Imagine_Dragons_-_%22On_Top_of_the_World%22.jpg/220px-Imagine_Dragons_-_%22On_Top_of_the_World%22.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>18. On top of the world</h3>
                <h3><em>Artista: Imagine Dragons</em></h3>
                <audio controls>
                    <source src="audio/ontop.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://images-eu.ssl-images-amazon.com/images/I/619fzjO1rmL._SS500.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>19. Despacito</h3>
                <h3><em>Artista: Luis Fonsi</em></h3>
                <audio controls>
                    <source src="audio/despacito.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>

        <div class="row">
            <div class="col-md-3">
                <a href="#">
                    <img class="img-fluid rounded mb-3 mb-md-0" src="https://images-eu.ssl-images-amazon.com/images/I/51Bj-1UNoPL._SS500.jpg" alt="">
                </a>
            </div>
            <div class="col-md-9">
                <h3>20. Mi verdad</h3>
                <h3><em>Artista: Maná</em></h3>
                <audio controls>
                    <source src="audio/miverdad.ogg" type="audio/ogg" />
                </audio>
            </div>
        </div>
        <!-- /.row -->
        <hr>
        <!-- /.row -->
        <hr>
        <!-- Pagination -->
        <ul class="pagination justify-content-center">
            <li class="page-item">
            </li>
            <li class="page-item">
                <a class="page-link" href="top20.html">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="top202.html">2</a>
            </li>
        </ul>
    </div>
    <footer class="py-5 bg-dark">
        <div class="container">
            <p class="m-0 text-center text-white">Copyright &copy; Aplicaciones Móviles 2018 - Sergio Andrés Rodríguez Galeano</p>
        </div>
        <!-- /.container -->
    </footer>
</body>
</html>
Artistas

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Artistas</title>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">Music</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Género</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="top20.html">Top 20</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="artistas.html">Artistas</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <br />
    <section class="portfolio" id="portfolio">
        <div class="container">
            <h2 class="text-center text-uppercase text-secondary mb-0">Artistas</h2>
            <hr class="star-dark mb-5">
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 order-lg-2">
                    <div class="p-5">
                        <img class="img-fluid rounded-circle" src="https://media.diariolasamericas.com/adjuntos/216/imagenes/000/788/0000788952.jpg" alt="">
                    </div>
                </div>
                <div class="col-lg-6 order-lg-1">
                    <div class="p-5">
                        <h2 class="display-4">Carlos vives</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
                        <a href="top20.html" class="btn btn-success">TOP 20</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="p-5">
                        <img class="img-fluid rounded-circle" src="http://co.emedemujer.com/wp-content/uploads/sites/15/2017/07/Nicky-Jam.png" alt="">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="p-5">
                        <h2 class="display-4">Nicky Jam</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
                        <a href="top20.html" class="btn btn-success">TOP 20</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 order-lg-2">
                    <div class="p-5">
                        <img class="img-fluid rounded-circle" src="https://i.ytimg.com/vi/RqaVPWmwglQ/maxresdefault.jpg" alt="">
                    </div>
                </div>
                <div class="col-lg-6 order-lg-1">
                    <div class="p-5">
                        <h2 class="display-4">Willie Colon</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
                        <a href="top20.html" class="btn btn-success">TOP 20</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="py-5 bg-dark">
        <div class="container">
            <p class="m-0 text-center text-white">Copyright &copy; Aplicaciones Móviles 2018 - Sergio Andrés Rodríguez Galeano</p>
        </div>
        
    </footer>
</body>
</html>
css

Code: Select all

body {
  padding-top: 54px;
}



.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.portfolio-item {
  margin-bottom: 30px;
}

#lista2 {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

#lista2 ol {
    margin: 0 0 0 2em;
}

#lista2 li {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
}

#lista2 li:hover {
    background: #eee;
}

#lista2 li:hover:before {
    transform: rotate(360deg);
}

#lista2 li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

Evidencias
Image
Last edited by Sergio Rodríguez on Fri Aug 10, 2018 11:41 pm, edited 2 times in total.
Gestión de Calidad de Software
Sergio Andrés Rodríguez Galeano
sergio.rodriguezg@upb.edu.co

User avatar
MarteloKpoper
Posts: 10
Joined: Thu Jul 26, 2018 12:12 pm

Re: Wireframe Aplicaciones Móviles

Post by MarteloKpoper » Fri Aug 10, 2018 10:17 am

Image
Image
Image
Image

yeralcano
Posts: 2
Joined: Fri Aug 10, 2018 9:51 am

Re: Wireframe Aplicaciones Móviles

Post by yeralcano » Fri Aug 10, 2018 10:18 am

1
Last edited by yeralcano on Mon Aug 13, 2018 9:16 pm, edited 2 times in total.

User avatar
AndresCallejasG
Posts: 18
Joined: Mon Jul 18, 2016 8:17 am

Re: Wireframe Aplicaciones Móviles

Post by AndresCallejasG » Fri Aug 10, 2018 11:18 am

Aplicación Música

Wireframes Manuales:
Image
Image

Wireframes Digitales:
Image
Image
Image
Andrés Callejas González.
Estudiante Ingeniería de Sistemas e Informática.

Post Reply