Photoshop to Wordpress to Web - Teil 2 - Entwicklung, Version 2

Alte Version

Dies ist eine alte Version des Inhalts in unserem Archiv. Besuchen Sie die aktuelle Version dieser Seite.

Diese Version wurde von Andreas Braun am 11. July 2014 um 09:59 Uhr erstellt.
Bemerkung des Bearbeiters: weiter7

Änderungen gegenüber vorheriger Version anzeigen


Photoshop to Wordpress Template - Teil 2 - Entwicklung

Die Grobstruktur

Nach einigen Trial und Error Ansätzen, habe ich für mich eine Vorgehensweise erarbeitet, mit der ich in der Lage bin, auch komplizierte Layouts zu entwickeln. Die Idee des Zerlegens stammt dabei ursprünglich aus Vorlesungen der Informatik. Wir wollen versuchen, das Layout im Vorfeld sinnvoll in die einzelnen Teile aufzusplitten, die wichtigen Elemente zu extrahieren und diese dann getrennt in einer lokalen Entwicklungsumgebung (XAMPP) zu programmieren. Nachfolgend sind die extrahierten Teile meines Layouts zu sehen:

Gesamtüberblick:

Aufteilung der Seite in die drei Teile:

  • Header
  • Content
  • Footer
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Navbar
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
2-Spalten Inhalt
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
3-Spalten Inhalt
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Social Icon Bar
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Single Post Seite
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
UI Elemente
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Die Feinstruktur

Anstatt einfach die HTML Struktur während des Programmierens zu entwickeln, ist es eine bessere Idee, sich vorher das soeben aufgeteile Layout noch genauer anzuschauen, und sich eine Block-Level Struktur (Div Layout) zu überlegen, die funktioniert, übersichtlich ist und möglichst simpel bleibt. Eine endlose Verschachtelung bringt uns nämlich sonst schnell in die Prädullie. Für diesen Schritt ist eine gute Erfahrung im schreiben von HTML Code von Vorteil.

Navbar
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Farben, Schrift, Schriftgröße, Abmessungen, Styles

Um Informationen über diese Elemente eleganter zu extrahieren, bieten sich einige Plugins für Photoshop an, über das ich bereits in einem früheren Artikel berichtet habe. Bei Interesse einfach den Artikel “Photoshop to Web Pentalogie” durchlesen. Ich verzichte hier auf eine genaue Beschreibung der Techniken. Folgende Informationen habe ich mir abgespeichert:

  • Hintergrundfarben
    Dunkelblau(#306285),Hellblau(#4b84d0),Hellgrau(#f0f0f0),
    Dunkelgrau(#1a1a1a),Schwarz(#121212)
  • Schriftgrößen für H1,H2,H3,H4 usw
  • Fonts : Droid Serif und Droid Sans
  • Schriftfarben (#808080, #9920d7, #ffffff)

Coding Workbench

Der Begriff bedeutet, dass wir für jeden der Teile eine eigene HTML Seite erstellen. Der Vorteil ist, dass wir dadurch lokal sehr schnell arbeiten können und durch den reduzierten Code bleibt alles schön übersichtlich.

Anlegen der Workbench

Ich habe mir ein neues Projekt (einen neuen Ordner in htdocs) auf meinem Localhost erstellt und eine sehr einfache Dateistruktur aufgebaut.

  • index.html
  • style.css
  • script.js
  • jquery.js
Initial index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link href="font-awesome.min.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script type="text/javascript">
        $( document ).ready(function() {
            
        })
    </script>
</body>
</html>
Initial styles - clearfix und resets  
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

Initial Javascript

Um schneller mit Editor und Browser arbeiten zu können, habe ich die JQuery Bibliothek heruntergeladen und lokal im Workbench Verzeichnis gespeichert.

Navigations Leiste

Die Navleiste wird vom Header umschlossen und als <nav> Element erstellt. Die Buttons sind Anchor Tags in Listenelementen in einer Unordered List. Der Aufbau sieht dann so aus:

index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="header">
        <nav role='navigation' class="clearfix">
            <ul>
                <li class="active"><a href="#"><i class="fa fa-home"></i>Home</a></li>
                <li class=""><a href="#"><i class="fa fa-book"></i>Tutorials</a></li>
                <li class=""><a href="#"><i class="fa fa-user"></i>About</a></li>
                <li class=""><a href="#"><i class="fa fa-envelope"></i>Contact</a></li>
            </ul>
        </nav>
    </div>
style.css  
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
#header{
  position: absolute;
  top:50px;
  width:100%;
  z-index: 2;
  min-width: 480px;
  -webkit-transition:all 0.5s;
 -o-transition:all 0.5s;
 transition:all 0.5s;
}
@media only screen
and (max-width : 1296px) {
  #header{
    top:0px;
    width:100%;
    z-index: 2;
     position: relative;
    
  }
  #header *{
    -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  }
  
}
@media only screen
and (max-width : 1024px) {
 
}

nav{
  background-color:#fff;
  max-width:1280px;
  margin:0px auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-width: 507px;
}
nav ul{
  list-style-type: none;
  padding:0;
  margin:0;
}
nav ul li{
  float:left;
  border-right:1px solid #f6f0ec;
}
nav ul li:last-child{
  border-right:none;
  vertical-align: middle;  
}
nav ul li a{
  padding:15px 25px;
  display:inline-block;
  font-family: 'Droid Sans', sans-serif;
  font-size:15px;
  color:#868686;
  text-decoration: none;
}

nav ul li a i{
  margin-right:10px;

}
nav ul li span{
  padding:13px 25px;
  display:inline-block;
   font-family: 'Droid Sans', sans-serif;
    color:#868686;
    font-size:15px;
}
nav ul li span input{
  border:1px solid transparent;
  width:30px;
}
nav ul li span input:focus{
  border:1px solid #f6f0ec;
  width:200px;
}

Ergebnis im Browser

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Nun wirds etwas fortgeschrittener. Für den Carousel Slider habe ich ein Plugin geschrieben, damit ich den das Carousel sowohl für Bilder als auch für den “Recent-Posts” Bereich verwenden kann.

index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="pageblock clearfix imgwall">
            <a href="#" id="prev" class="csbtn_prev"></a>
            <a href="#" id="next" class="csbtn_next"></a>
        <div class="carousel" id="imgcarousel">

            <ul id="slides">
                <li class="slide" id="slide1">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                        <button class="actionbutton">Enter the trip</button>
                    </div>
                    <img src="slide1.png" alt="" />
                </li>
                <li class="slide" id="slide2">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                    </div>
                    <img src="slide2.png" alt="" />
                </li>
                <li class="slide" id="slide3">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                    </div>
                    <img src="slide3.png" alt="" />
                </li>
            </ul>
        </div>
    </div>

<script type="text/javascript">

$( document ).ready(function() {
    $('#imgcarousel').listCarousel({
        maxcarouselWidth: 1280,
        maxcarouselHeight: 720,
        slide_by: 1,
        showSlides: 1,
        scaleProp: 'true',
    }); 
});
</script>
style.css  
css
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
.imgwall{
 background:url(slider_bg.jpg) 0 0;
}
#latest-posts-title{
  float:left;
  margin-right:30px;
}
.carousel-parent{
  margin-left:50px;
  position:relative;
  margin-right:50px;
  overflow:hidden;

}
#recent-posts-ticker-list p{
  width:95%;
}
.carousel{
  /* width:100%; */
 position:relative;
 overflow:hidden;
 
  margin:0 auto;
}
.carousel img{
  max-width: 100%;
  max-height: 100%;
}
.carousel ul {
  list-style-type: none;
  padding:0;
  overflow: hidden;
  position:absolute;
  margin: 0;
  padding: 0;
}
.carousel ul li{
  float:left; 
  position: relative
}
.slideText{
  width:30%;
  height:50%;
  position: absolute;
  z-index: 2;
  color:#fff;
  font-weight:normal;
  top: 16%;
}
.slideText h2{
  font-size: 48px
}

@media only screen
and (max-width : 1296px) {
  .slideText{top:0;}
}

#prev:hover, #next:hover{
  width:90px; 
}

#prev {
  background:url(left.png) 0 0px no-repeat; 
  position:absolute;
  left:0;
  top: 50%;
  -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color:rgba(0,0,0,0.5);
background-position:center center;
  z-index: 5;
  margin-top: -53px;
   display:block; 
  width:61px; 
  height:107px;
  text-indent:-999em;
  outline:0;
  -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}
#next {
  background:url(right.png) 0 0 no-repeat; 
  position:absolute;
  right:0;
  top: 50%;
 -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color:rgba(0,0,0,0.5);
background-position:center center;
  z-index: 5;
  margin-top: -53px;
   display:block; 
  width:61px; 
  height:107px;
  text-indent:-999em;
  outline:0;
  -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}
jQuery.fn.listCarousel.js  
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
(function($){
    $.fn.listCarousel = function(options) {
         
        var
          defaults = {
              maxcarouselWidth: 1280,
              maxcarouselHeight: 720,
            slide_by: 1,
            showSlides: 3,
            scaleProp: 'false',
          },
          settings = $.extend({}, defaults, options);
           
          this.each(function() {
            var $this = $(this);
            //Anzahl der Slides
              var slides_count = $this.find('li').length;
              var slides = $this.find('li');
              var firstSlide = $this.find('li:first');
              var lastSlide = $this.find('li:last');
              var slidesUL = $this.find('ul');
            var prevBtn = $this.siblings('.csbtn_prev');
              var nextBtn = $this.siblings('.csbtn_next');
            

              $this.css('max-height', settings.maxcarouselHeight);
              $this.css('max-width', settings.maxcarouselWidth);
              var prop_scale_factor = settings.maxcarouselHeight/settings.maxcarouselWidth;
         
              currentCarouselWidth = $this.outerWidth();
              currentCarouselHeight = currentCarouselWidth*prop_scale_factor;
               if(settings.scaleProp === 'true'){
              $this.css('height',currentCarouselHeight +"px");
              slides.css("height", currentCarouselHeight +"px");
              slidesUL.css("height", currentCarouselHeight);
              }else{
            $this.css('height',settings.maxcarouselHeight +"px");
              slides.css("height", settings.maxcarouselHeight +"px");
              slidesUL.css("height", settings.maxcarouselHeight);
              }

            //Slides auf Breite des Wrappers skalieren
              slides.css("width", currentCarouselWidth/settings.showSlides +"px");
              //Setzen der UL Breite beim Site Load
              slidesUL.css("width", currentCarouselWidth * slides_count+"px");
              //Den letzten Slide vor den Ersten setzen
              firstSlide.before(lastSlide);
               //Die UL nach links verschieben um einen Slide
              slidesUL.css("left", currentCarouselWidth * (-1)+"px");

              
              //Previous Button Click
              prevBtn.click(function() {
                  currentCarouselWidth = $this.outerWidth();
                  firstSlide = $this.find('li:first');
                  lastSlide = $this.find('li:last');
                  var left_indent = parseInt(slidesUL.css('left')) + (currentCarouselWidth/settings.showSlides)*settings.slide_by;
                  slidesUL.animate({'left' : left_indent}, 200,function(){
                      firstSlide.before(lastSlide);
                      slidesUL.css("left", currentCarouselWidth * (-1)+"px");
                  });
                  return false;
              });

            //Next Button Click
            nextBtn.click(function() {
                firstSlide = $this.find('li:first');
                  lastSlide = $this.find('li:last');
                  currentCarouselWidth = $this.outerWidth();
                var left_indent = parseInt(slidesUL.css('left')) - (currentCarouselWidth/settings.showSlides)*settings.slide_by;
                slidesUL.animate({'left' : left_indent}, 200,function(){
                    lastSlide.after(firstSlide);
                    slidesUL.css("left", currentCarouselWidth * (-1)+"px");
                });
                return false;
            });

            $(window).resize(function(){
                currentCarouselWidth = $this.outerWidth();
                if(settings.scaleProp === 'true'){
                  currentCarouselHeight = currentCarouselWidth*prop_scale_factor;
                  $this.css('height',currentCarouselHeight +"px");
                  slides.css("height", currentCarouselHeight +"px");
                  slidesUL.css("height", currentCarouselHeight);}
                //Slides auf Breite des Wrappers skalieren
                  slides.css("width", currentCarouselWidth/settings.showSlides +"px");
                  //Setzen der UL Breite beim Site Load
                  slidesUL.css("width", currentCarouselWidth * slides_count+"px");
                //Die Linksverschiebung anpassen
                slidesUL.css("left", currentCarouselWidth * (-1)+"px");
                 });



          });
          return this;
    }
})(jQuery);

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Der Slider hat einige Optionsparameter u.a. proportionales Skalieren beim resizen des Browserfensters. Somit ist der Inhalt auch für mobile Geräte gut sichtbar, da die Bilder und die Steuerung skalieren.