Come trasformare un PSD in un sito web. Una breva guida illustrata.

E dopo la nostra raccolta di varie template nel formato psd non poteva mancare un esempio reale di come é possibile trasformare essi in una vera pagina Html con introduzione di varie effetti spettacolari che poi realizzare anche tu, se hai letto e hai eseguito i nostri corsi  ad eccezione di javascript che per un principiante puo essere una cosa abbastanza difficile da comprendere ed applicare, anche se nel fail js sono evidenziati varie sezioni che corrispondono per diversi effetti sulla nostra pagina web.

Oggi vediamo velocemente non entrando tanto nei detagli, come da un template PSD creare un sito web.

fimg 700x512

Oggi creeremo una pagina web del nostro portafoglio. Come sai, portafoglio nella versione web è  il  tuo biglietti da visita digitale molto capiente e informativo. Come regola generale, rispechia il carattere e originalità del individuo. Esso descrive i punti di forza (e talvolta di debolezza) nel suo contesto. E 'molto importante dimostrare qualcosa di originale che creerà un effetto wau. A volte  siti del genere sono noti anche come una biglieto da visita o  business-card. Tipicamente, tale sito è costituito da una (a volte più) pagina. Oggi noi vedimo  la creazione di una pagina che è composta dalle seguenti sezioni: intestazione (logo con menu), sezione promozionale con il slid show o in altre parole carosello , contenuto principale con finestre  pop-up (una finestra agiuntiva che si apre al clic), una sezione su di noi, sezione  contatti per contattarci con una forma a finestra e una sezione con indirizzo collegata a google maps.

Fail aggiuntivi per creare un sito web responsivo da un PSD

Come framework, utilizzeremo Bootstrap (v3). Anche perché vogliomo avere alla fine un sito responsivo.

Quindi, prima di tutto, dovremo creare alcune cartelle - 'css', 'font', 'immagini' e 'js'. Qui ci terremo i file appropriati: fogli di stile CSS, file di font, immagini e JavaScript . Dopo, dobbiamo   scaricare l'ultima versione di Bootstrap, ed estrarre i  file nella nostra cartella per js e css . Inoltre, dovrete  scaricare un archivio del demo della nostra pagina html pronta alla fine di questo articolo. Piu che altro per le immagini, fail css che non vedremo in questo articolo e cosi dettii fail svg che in realta non sono che le 'immagini vettoriali trasformatil nel codice  html con varie tag al iterno che ci aiutano di creare con esso varie effeti, qualsiasi imagine vettoriale puo essere convertita nel fail svg.

header

Menu di navigazione della pagina web

Vediamo di creare questo menu utilizzando il seguente codice

<!-- top navigation -->
<header id="headernav">
  <a href="#mslider" class="logo" data-scroll><span class="icon-logo"></span> Logo</a>
  <nav class="nav-collapse">
    <ul>
      <li class="menu-item"><a href="#mslider" data-scroll><span class="fa fa-user"></span>Home</a></li>
      <li class="menu-item"><a href="#services" data-scroll><span class="fa fa-cog"></span>Services</a></li>
      <li class="menu-item"><a href="#portfolio" data-scroll><span class="fa fa-eye open"></span>Portfolio</a></li>
      <li class="menu-item"><a href="#about" data-scroll><span class="fa fa-info sign"></span>About</a></li>
      <li class="menu-item"><a href="#contact" data-scroll><span class="fa fa-paper-plane"></span>Contact</a></li>
      <li class="menu-item"><a href="#" class="lang">EN</a></li>
      <li class="menu-item"><a href="#/de" class="lang">DE</a></li>
      <li class="menu-item"><a href="#/ru" class="lang">RU</a></li>
    </ul>
  </nav>
</header>
<!-- /top navigation -->

Sezione promo

promo   
Il monitor su questa immagine mostrerà un slidshow della presentazione. Ecco markup di questa sezione promo:

<!-- intro slider -->
<section id="mslider">
  <div id="wrap" class="wrap">
    <div class="mockup">
      <img class="mockup__img" src="/images/bg.jpg" alt="alt text" />
      <div class="screen">
        <ul id="slideshow" class="slideshow">
          <li class="slideshow__item"><img src="/images/slideshow/1.jpg" alt=""/></li>
          <li class="slideshow__item"><img src="/images/slideshow/2.jpg" alt=""/></li>
          <li class="slideshow__item"><img src="/images/slideshow/3.jpg" alt=""/></li>
          <li class="slideshow__item"><img src="/images/slideshow/4.jpg" alt=""/></li>
        </ul>
      </div>
      <header class="main-header">
        <h1 class="animated fadeInRight delay-1s">Here can be some intro information about the company</h1>
        <div class="learn-more-wrap">
          <a href="#services" class="animated fadeInUp delay-2s learn-more" data-scroll><span>Learn More</span></a>
        </div>
      </header>
    </div>
  </div>
</section>
<!-- /intro slider -->

Sezione Contenuto principale

Questa sezione è composta da  due parti: 'I nostri servizi' e 'Il nostro portfolio'.

services

Il seguente codice HTML mostra come è fatta la  sezione 'Servizi':

Codice della sezione cliccare la croce per vedere

<!-- services -->
<section class="text-center section-padding" id="services">
  <div class="container">
    <div class="row">
      <h1>Our Services</h1>
      <div class="services-wrapper">
        <div class="col-md-4 wp2">
          <div class="light-box box-hover">
            <div class="icon">
              <img src="/images/bulb.svg" alt="">
            </div>
            <h2>Lorem Ipsum 1</h2>
            <p>Aliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere.</p>
          </div>
        </div>
        <div class="col-md-4 wp2 delay-05s">
          <div class="light-box box-hover">
            <div class="icon">
              <img src="/images/printer.svg" alt="">
            </div>
            <h2>Lorem Ipsum 2</h2>
            <p>Aliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere.</p>
          </div>
        </div>
        <div class="col-md-4 wp2 delay-1s">
          <div class="light-box box-hover">
            <div class="icon">
              <img src="/images/browser.svg" alt="">
            </div>
            <h2>Lorem Ipsum 3</h2>
            <p>Aliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /services -->

 

portfolio

E qui sotto il codice HTML per la sezione 'Portfolio':

Codice della sezione cliccare la croce per vedere

<!-- portfolio -->
<section class="clearfix" id="portfolio" >
  <div class="text-center portfolioheader">
    <h1>Our portfolio</h1>
    <p>Browse our portfolio</p>
  </div>
  <div class="grid">
    <!-- project 0 -->
    <div id="project0" class="zoom-anim-dialog mfp-hide projects">
      <h1>Project 1</h1>
      <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
      <a href="#" target="_blank" class="projectlink">Visit Website</a>
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
    </div>
    <a class="popup-with-zoom-anim" href="#project0">
      <figure class="effect-portfolio wp4 delay-01s">
        <img src="/images/project-thumb.jpg" alt=""/>
        <figcaption>
          <h2>Project 1</h2>
          <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
          <span class="icon-project0_icon"></span>
        </figcaption>
      </figure>
    </a>
    <!-- /project 0 -->
    <!-- project 1 -->
    <div id="project1" class="zoom-anim-dialog mfp-hide projects">
      <h1>Project 2</h1>
      <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
      <a href="#" target="_blank" class="projectlink">Visit Website</a>
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
    </div>
    <a class="popup-with-zoom-anim" href="#project1">
      <figure class="effect-portfolio wp4 delay-01s">
        <img src="/images/project-thumb2.jpg" alt=""/>
        <figcaption>
          <h2>Project 2</h2>
          <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
          <span class="icon-project1-icon"></span>
        </figcaption>
      </figure>
    </a>
    <!-- /project 1 -->
    <!-- project 2 -->
    <div id="project2" class="zoom-anim-dialog mfp-hide projects">
      <h1>Project 3</h1>
      <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
      <a href="#" target="_blank" class="projectlink">Visit Website</a>
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
    </div>
    <a class="popup-with-zoom-anim" href="#project2">
      <figure class="effect-portfolio wp4 delay-05s">
        <img src="/images/project-thumb2.jpg" alt=""/>
        <figcaption>
          <h2>Project 3</h2>
          <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
          <span class="icon-project2-icon"></span>
        </figcaption>
      </figure>
    </a>
    <!-- /project 2 -->
    <!-- project 3 -->
    <div id="project3" class="zoom-anim-dialog mfp-hide projects">
      <h1>Project 4</h1>
      <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
      <a href="#" target="_blank" class="projectlink">Visit Website</a>
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
    </div>
    <a class="popup-with-zoom-anim" href="#project3">
      <figure class="effect-portfolio wp4 delay-05s">
        <img src="/images/project-thumb.jpg" alt=""/>
        <figcaption>
          <h2>Project 4</h2>
          <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
          <span class="icon-project3-icon"></span>
        </figcaption>
      </figure>
    </a>
    <!-- /project 3 -->
    <!-- project 4 -->
    <div id="project4" class="zoom-anim-dialog mfp-hide projects">
      <h1>Project 5</h1>
      <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
      <a href="#" target="_blank" class="projectlink">Visit Website</a>
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
    </div>
    <a class="popup-with-zoom-anim" href="#project4">
      <figure class="effect-portfolio wp4 delay-05s">
        <img src="/images/project-thumb.jpg" alt=""/>
        <figcaption>
          <h2>Project 5</h2>
          <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
          <span class="icon-project4-icon"></span>
        </figcaption>
      </figure>
    </a>
    <!-- /project 4 -->
    <!-- Project 5 -->
    <div id="project5" class="zoom-anim-dialog mfp-hide projects">
      <h1>Project 6</h1>
      <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
      <a href="#" target="_blank" class="projectlink">Visit Website</a>
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
      <img src="/images/project.jpg" alt="">
    </div>
    <a class="popup-with-zoom-anim" href="#project5">
      <figure class="effect-portfolio wp4 delay-05s">
        <img src="/images/project-thumb2.jpg" alt=""/>
        <figcaption>
          <h2>Project 6</h2>
          <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
          <span class="icon-project5-icon"></span>
        </figcaption>
      </figure>
    </a>
    <!-- /project 5 -->
  </div>
  <!-- /Grid -->
</section>
<!-- /portfolio -->

Quando si sposta il cursore su una delle imagini che rapresentano  progetti verranno visualizzate informazioni aggiuntive. E quando si fa clic si aprira  una finestra pop-up con maggiori informazioni sul progetto, qui puoi mettere quello che vuoi come contenuto  (qualsiasi codice html) - testo, immagini, video.

info

Sezione “Chi siamo”

about
Questa semplice sezione è costituita da due colonne: l'immagine  a sinistra e informazioni  sulla destra

<!-- about -->
<section class="light-bg text-center" id="about">
  <div class="container-fluid nopadding">
    <div class="wrapper">
      <div class="aboutimgwrap">
        <div class="wp3 aboutimg"></div>
      </div>
    </div>
    <div class="container about">
      <div class="row">
        <div class="col-md-5 col-md-offset-7">
          <h1>About Us</h1>
          <p>Vivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed.</p>
          <p>Vivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed.</p>
          <p>Vivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed.</p>
          <p>Vivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed.</p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /about -->

Sezione”Contataci”

contact

Questo è un elemento abbsatanza complesso che è costituito da una  piccola sezione con il tasto 'invia messaggio' e una forma che appare al clic fatta su bootstrap. Di seguito  riporto il codice HTML:

Codice della sezione cliccare la croce per vedere

<!-- contact -->
<section class="dark-bg text-center section-padding contact-wrap" id="contact">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Contact Us</h1>
        <h2>Want to discuss? Get in touch!</h2>
        <a id="trigger-overlay" class="animated fadeInDown delay-2s send-message" href="#contact" data-scroll><span>Send us a message</span></a>
      </div>
    </div>
  </div>
</section>
<!-- /contact -->
<!-- contact form -->
<div id="pro">
  <div class="overlay overlay-contentpush">
    <button type="button" class="overlay-close">Close</button>
    <div class="container">
      <div class="projectplanner">
        <h1>Want to discuss?</h1>
        <h2>We'd love to hear from you.</h2>
        <div class="container">
          <div class="col-sm-offset-3 col-sm-6">
            <form name="sentMessage" class="contactForm" id="contactForm" novalidate>
              <div class="control-group">
                <div class="controls">
                  <label for="name">Name</label>
                  <input type="text" class="form-control input-lg" placeholder="Name *" id="name" required data-validation-required-message="Please enter your name" />
                  <p class="help-block"></p>
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <label for="email">Email</label>
                  <input type="email" class="form-control input-lg" placeholder="Email address *" id="email" required data-validation-required-message="Please enter your email" />
                  <p class="help-block"></p>
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <label for="website">Website</label>
                  <input type="text" class="form-control input-lg" placeholder="Website" id="website" />
                  <p class="help-block"></p>
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <label for="message">Message</label>
                  <textarea rows="10" cols="100" class="form-control input-lg" placeholder="How can we help? *" id="message" required
                    data-validation-required-message="Please enter your message" minlength="5" 
                    data-validation-minlength-message="Min 5 characters" maxlength="999" style="resize:none"></textarea>
                  <p class="help-block"></p>
                </div>
              </div>
              <div id="success"> </div>
              <button type="submit" class="submit-btn center-block">Send Message</button><br />
              <span class="required">* required fields</span>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /contact form -->

Mapa e footer

map footer

Infine - due piccole sezioni della mappa in cui è possibile specificare la propria posizione e un footer classico della pagina.

<!-- Google map -->
<div id="cd-google-map">
  <div id="google-container"></div>
  <div id="cd-zoom-in"></div>
  <div id="cd-zoom-out"></div>
  <address>Our address</address>
</div>
<!-- /Google map -->
<!-- footer -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-6 copyright">
        <h1><span class="icon-logo"></span>Logo</h1>
        <p>Etiam at sapien eu lectus tempor nullam.</p>
        <p>&copy; 2015 Company</p>
      </div>
      <div class="col-md-6 footerlinks">
        <ul>
          <li><a class="up-btn2" href="#mslider">Back to Top</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>
<!-- /footer -->

La parte piu difficile, Javascript

Come avete capito per il nostro sito di portafoglio utilizzeremo javascript:

<script src="/js/jquery.min.js"></script>
<script src="/js/modernizr.custom.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/fastclick.js"></script>
<script src="/js/libraries.min.js"></script>
<script src="/js/overlay.js"></script>
<script src="/js/jqBootstrapValidation.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="/js/scripts.js"></script>

Questo codice inseriremo alla fine del nostro file 'index.html'. Quasi tutti sono varie biblioteche gia precompliati. Nel ultimo fail (scripts.js) abbiamo aggiunto impostazioni personalizzati per realizzare la navigazione, effetti di animazione (che vengono utilizzat nella sezione progetti), codice per il modulo di contatto con la validazione dei dati inseriti. Inoltre, qui troverai le impostazioni per la nostra galeria di immagini al interno del monitor nella prima scermata del sito

$(document).ready(function() {
  // waypoints
  $('.wp1').waypoint(function() {
    $('.wp1').addClass('animated fadeInLeft');
  }, {
    offset: '75%'
  });
  $('.wp2').waypoint(function() {
    $('.wp2').addClass('animated fadeInUp');
  }, {
    offset: '75%'
  });
  $('.wp3').waypoint(function() {
    $('.wp3').addClass('animated fadeInDown');
  }, {
    offset: '55%'
  });
  $('.wp4').waypoint(function() {
    $('.wp4').addClass('animated fadeInDown');
  }, {
    offset: '75%'
  });
  $('.wp5').waypoint(function() {
    $('.wp5').addClass('animated fadeInUp');
  }, {
    offset: '75%'
  });
  $('.wp6').waypoint(function() {
    $('.wp6').addClass('animated fadeInDown');
  }, {
    offset: '75%'
  });
  // Magnific Popup
  $('.popup-with-zoom-anim').magnificPopup({
    type: 'inline',
    fixedContentPos: false,
    fixedBgPos: true,
    overflowY: 'auto',
    closeBtnInside: true,
    preloader: false,
    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-zoom-in'
  });
  $('.popup-with-move-anim').magnificPopup({
    type: 'inline',
    fixedContentPos: false,
    fixedBgPos: true,
    overflowY: 'auto',
    closeBtnInside: true,
    preloader: false,
    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-slide-bottom'
  });
  // il resto del codice js nel fail da scaricare qui sotto...

E alla fine guarda cosa abiamo creato!

 

 

Letto 1161 volte