Cartera de línea de tiempo

Timeline es un complemento de jQuery especializado en mostrar una serie cronológica de eventos. Puede incrustar todo tipo de medios, incluidos tweets, videos y mapas, y asociarlos con una fecha. Con algunos ajustes de diseño, será perfecto para un portafolio en el que muestres tu trabajo e intereses.

El HTML

La línea de tiempo viene con un tema de color claro por defecto. Es perfectamente utilizable y en la mayoría de los casos sería exactamente lo que necesita. Sin embargo, para nuestra cartera, un diseño oscuro encajaría mejor, así que lo personalizaremos a nuestro gusto.

Primero, veamos el diseño básico de la página:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Timeline Portfolio | Tutorialzine Demo</title>

        <!-- The default timeline stylesheet -->
        <link rel="stylesheet" href="assets/css/timeline.css" />
        <!-- Our customizations to the theme -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- Google Fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script|Antic+Slab" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="timeline">
            <!-- Timeline will generate additional markup here -->
        </div>

        <!-- JavaScript includes - jQuery, turn.js and our own script.js -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/js/timeline-min.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

En la sección principal, tenemos la hoja de estilo del complemento:timeline.css y styles.css, que contendrá nuestras personalizaciones. En el pie de página tenemos la biblioteca jQuery, el complemento de línea de tiempo y script.js que lo inicializa.

Cuando llamamos al complemento, buscará un div en su página con la ID de línea de tiempo . En su interior, insertará todo el marcado que necesita para presentar la línea de tiempo:

<div class="container main" id="timeline">
    <div class="feature slider" style="overflow-y: hidden;">
        <div class="slider-container-mask slider-container slider-item-container">

            <!-- The divs below are the events of the timeline -->

            <div class="slider-item content">
                <div class="text container">

                    <h2 class="start">Johnny B Goode</h2>
                    <p><em><span class="c1">Designer</span> &amp; <span class=
                    "c2">Developer</span></em></p>

                </div>

                <div class="media media-wrapper media-container">
                    <!-- Images or other media go here -->
                </div>
            </div>

            <div class="slider-item content content-container">
                <div class="text container">

                    <h2 class="date">March 2009</h2>
                    <h3>My first experiment in time-lapse photography</h3>
                    <p>Nature at its finest in this video.</p>

                </div>

                <div class="media media-wrapper media-container">
                    <!-- Images or other media go here -->
                </div>
            </div>

            <!-- More items go here -->
        </div>

        <!-- Next arrow -->
        <div class="nav-next nav-container">
            <div class="icon"></div>
            <div class="date">March 2010</div>
            <div class="title">Logo Design for a pet shop</div>
        </div>

        <!-- Previous arrow -->
        <div class="nav-previous nav-container">
            <div class="icon"></div>
            <div class="date">July 2009</div>
            <div class="title">Another time-lapse experiment</div>
        </div>
    </div>

    <div class="navigation">

            <!-- The navigation items go here (the tooltips in the bottom)
                one for each of the events -->

            <div class="time">
                <!-- The timeline numbers go here -->
            </div>
        </div>

        <div class="timenav-background">
            <div class="timenav-line" style="left: 633px;"></div>

            <div class="timenav-interval-background top-highlight"></div>
        </div>

        <div class="toolbar" style="top: 27px;">
            <div class="back-home icon" title="Return to Title"></div>
            <div class="zoom-in icon" title="Expand Timeline"></div>
            <div class="zoom-out icon" data-original-title="Contract Timeline"></div>
        </div>
    </div>
</div>

Como modificaremos el CSS de la línea de tiempo, el fragmento anterior le dará una mejor idea de las personalizaciones. Tenga en cuenta que no recrearemos la hoja de estilo del complemento desde cero, solo anularemos algunas de las reglas en nuestro propio archivo css. Esto tiene la ventaja de hacer que las futuras actualizaciones del complemento sean sencillas, sin mencionar que será mucho más fácil.

Escribir el CSS mirando solo el marcado sería una tarea difícil, dado que nuestras reglas deben tener prioridad sobre las que se usan en timeline.css . Afortunadamente, existe una forma mucho más sencilla, como verá en la sección CSS de este tutorial.

JQuery

Para inicializar el complemento, debemos llamar al método VMM.Timeline() en el documento listo:

$(function(){

    var timeline = new VMM.Timeline();
    timeline.init("data.json");

});

El método init toma un solo argumento:la fuente de datos. Puede ser un archivo json como el anterior o una hoja de cálculo de Google (que recuerda a nuestro tutorial de preguntas frecuentes de Spredsheet Powered).

El CSS

Usé el Inspector HTML de Firebug para obtener los selectores correctos para los elementos que estamos a punto de personalizar. En la pestaña HTML, es fácil ver qué reglas se han aplicado a cada elemento por timeline.css . Para anularlos, copié los mismos selectores en styles.css que es donde se llevarán a cabo nuestras modificaciones. En varias ocasiones, sin embargo, he usado el !important bandera para hacer mi trabajo más fácil.

Todas las personalizaciones que ve a continuación anulan solo un puñado de estilos CSS. El resto son heredados por la hoja de estilo predeterminada. ¡Empecemos!

Lo primero que haremos en styles.css , después de diseñar la página en sí, es cambiar los fondos de la línea de tiempo:

#timeline{
    background:none;
}

/* The individual events in the slider */
.slider .slider-container-mask .slider-container{
    background:none;
}

/* Setting a custom background image */
#timeline div.navigation{
    background: url('../img/timeline_bg.jpg') repeat;
    border-top:none;
}

Para crear el efecto 3D de la navegación de la línea de tiempo, necesitaremos usar elementos adicionales. Pero el complemento Timeline no lo incluye en su marcado. Una solución fácil es usar :before / :después pseudo elementos. El elemento :after es la parte superior más oscura y utiliza un degradado lineal para mejorar el efecto.

#timeline div.navigation:before{
    position:absolute;
    content:'';
    height:40px;
    width:100%;
    left:0;
    top:-40px;
    background: url('../img/timeline_bg.jpg') repeat;
}

#timeline div.navigation:after{
    position:absolute;
    content:'';
    height:10px;
    width:100%;
    left:0;
    top:-40px;
    background:repeat-x;

    background-image: linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%);
}

Luego agregamos un fondo oscuro a la navegación de la línea de tiempo (la sección con la pequeña información sobre herramientas en la que se puede hacer clic que representan los eventos):

#timeline div.timenav-background{
    background-color:rgba(0,0,0,0.4) !important;

}

#timeline .navigation .timenav-background .timenav-interval-background{
    background:none;
}

#timeline .top-highlight{
    background-color:transparent !important;
}

Más tarde, diseñamos los botones y la barra de herramientas para acercar/alejar:

#timeline .toolbar{
    border:none !important;
    background-color: #202222 !important;
}

#timeline .toolbar div{
    border:none !important;
}

La escala numérica en la parte inferior viene a continuación:

#timeline .navigation .timenav .time .time-interval-minor .minor{
    margin-left:-1px;
}

#timeline .navigation .timenav .time .time-interval div{
    color: #CCCCCC;
}

Las flechas anterior y siguiente:

.slider .nav-previous .icon {
    background: url("timeline.png") no-repeat scroll 0 -293px transparent;
}

.slider .nav-previous,.slider .nav-next{
    font-family:'Segoe UI',sans-serif;
}

.slider .nav-next .icon {
    background: url("timeline.png") no-repeat scroll 72px -221px transparent;
    width: 70px !important;
}

.slider .nav-next:hover .icon{
    position:relative;
    right:-5px;
}

.slider .nav-previous:hover, .slider .nav-next:hover {
    color: #666;
    cursor: pointer;
}

#timeline .thumbnail {
    border: medium none;
}

La pantalla de carga:

#timeline .feedback {
    background-color: #222222;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
    border:none;
}

#timeline .feedback div{
    color: #AAAAAA;
    font-size: 14px !important;
    font-weight: normal;
}

Luego pasamos a las diapositivas:

#timeline .slider-item h2,
#timeline .slider-item h3{
    font-family:'Antic Slab','Segoe UI',sans-serif;
}

#timeline .slider-item h2{
    color:#fff;
}

#timeline .slider-item p{
    font-family:'Segoe UI',sans-serif;
}

#timeline .slider-item img,
#timeline .slider-item iframe{
    border:none;
}

Finalmente, personalizaremos la apariencia de la página principal. Estoy usando nth-child(1) para apuntar solo al primer elemento deslizante, que contiene el nombre y la descripción de la línea de tiempo que se han definido en la fuente de datos JSON.

/* Customizing the first slide - the cover */

#timeline .slider-item:nth-child(1) h2{
    font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
    background:rgba(0,0,0,0.3);
    white-space: nowrap;
    padding:10px 5px 5px 20px;
    position:relative;
    right:-60px;
    z-index:10;
}

#timeline .slider-item:nth-child(1) p i{
    font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
    background:rgba(0,0,0,0.3);
    white-space: nowrap;
    padding:5px 20px;
    position:relative;
    right:-60px;
    z-index:10;
}

#timeline .slider-item:nth-child(1) p .c1{
    color:#1bdff0;
}

#timeline .slider-item:nth-child(1) p .c2{
    color:#c92fe6;
}

#timeline .slider-item:nth-child(1) .media-container {
    left: -30px;
    position: relative;
    z-index: 1;
}

#timeline .slider-item:nth-child(1) .credit{
    text-align: center;
}

Lo único que queda es abrir timeline.psd que se incluye con la descarga del complemento y cambiar el color de algunos de los iconos en Photoshop. He incluido los archivos necesarios en la descarga zip para este tutorial. ¡Con esto, nuestro portafolio de línea de tiempo está completo!

¡Listo!

Puede usar este portafolio para mostrar no solo sus proyectos recientes, sino también intereses y momentos importantes de su carrera. Comparte tus pensamientos y sugerencias en la sección de comentarios.