Perché odio i temi di WordPress

115
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13 Perché odio i temi di WordPress di MATTEO CAVUCCI lunedì 11 febbraio 13

description

Le slide dell'intervento al WordCamp 2013 a Bologna

Transcript of Perché odio i temi di WordPress

Page 1: Perché odio i temi di WordPress

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

Perché odio i temi di WordPress

di MATTEO CAVUCCI

lunedì 11 febbraio 13

Page 2: Perché odio i temi di WordPress

È bello lavorare con Wordpress

lunedì 11 febbraio 13

Page 3: Perché odio i temi di WordPress

Perché è...

lunedì 11 febbraio 13

Page 4: Perché odio i temi di WordPress

Perché è...

• Intuitivo

lunedì 11 febbraio 13

Page 5: Perché odio i temi di WordPress

Perché è...

• Intuitivo

• Ben documentato

lunedì 11 febbraio 13

Page 6: Perché odio i temi di WordPress

Perché è...

• Intuitivo

• Ben documentato

• Supportato dalla community

lunedì 11 febbraio 13

Page 7: Perché odio i temi di WordPress

Drupal Joomla Wordpress Altri

fonte: w3tech.com

lunedì 11 febbraio 13

Page 8: Perché odio i temi di WordPress

Altri27%

Wordpress57%

Joomla9%

Drupal7%

Drupal Joomla Wordpress Altri

fonte: w3tech.com

lunedì 11 febbraio 13

Page 9: Perché odio i temi di WordPress

Anche i clienti amano WordPress

lunedì 11 febbraio 13

Page 10: Perché odio i temi di WordPress

Perché è...

lunedì 11 febbraio 13

Page 11: Perché odio i temi di WordPress

Perché è...

• Facile

lunedì 11 febbraio 13

Page 12: Perché odio i temi di WordPress

Perché è...

• Facile

• Diffuso

lunedì 11 febbraio 13

Page 13: Perché odio i temi di WordPress

Perché è...

• Facile

• Diffuso

• Conveniente

lunedì 11 febbraio 13

Page 14: Perché odio i temi di WordPress

Strumenti specializzati utili agli obiettivi di comunicazione

del progetto

lunedì 11 febbraio 13

Page 15: Perché odio i temi di WordPress

Strumenti specializzati utili agli obiettivi di comunicazione

del progetto

lunedì 11 febbraio 13

Page 16: Perché odio i temi di WordPress

Strumenti specializzati utili agli obiettivi di comunicazione

del progetto

lunedì 11 febbraio 13

Page 17: Perché odio i temi di WordPress

Prodotti che sono...

lunedì 11 febbraio 13

Page 18: Perché odio i temi di WordPress

Prodotti che sono...

• Efficaci

lunedì 11 febbraio 13

Page 19: Perché odio i temi di WordPress

Prodotti che sono...

• Efficaci

• Flessibili

lunedì 11 febbraio 13

Page 20: Perché odio i temi di WordPress

Prodotti che sono...

• Efficaci

• Flessibili

• Economici

lunedì 11 febbraio 13

Page 21: Perché odio i temi di WordPress

Questo è il mioproblema.

lunedì 11 febbraio 13

Page 22: Perché odio i temi di WordPress

Matteo Cavucci

• 30 anni

• Developer

• Front-end

lunedì 11 febbraio 13

Page 23: Perché odio i temi di WordPress

• Studio di progettazione

• Roma

• Enti&aziende

mced.it

lunedì 11 febbraio 13

Page 24: Perché odio i temi di WordPress

lunedì 11 febbraio 13

Page 25: Perché odio i temi di WordPress

Nessuno è ancorato al proprio ruolo.lunedì 11 febbraio 13

Page 26: Perché odio i temi di WordPress

lunedì 11 febbraio 13

Page 27: Perché odio i temi di WordPress

Non reinventarela ruota.

lunedì 11 febbraio 13

Page 28: Perché odio i temi di WordPress

lunedì 11 febbraio 13

Page 29: Perché odio i temi di WordPress

• Cerca un theme(e cerca di capire se è buono...)

lunedì 11 febbraio 13

Page 30: Perché odio i temi di WordPress

• Cerca un theme(e cerca di capire se è buono...)

• Decodifica

lunedì 11 febbraio 13

Page 31: Perché odio i temi di WordPress

• Cerca un theme(e cerca di capire se è buono...)

• Decodifica

• Customizza

lunedì 11 febbraio 13

Page 32: Perché odio i temi di WordPress

Adattare il contenuto al thema

lunedì 11 febbraio 13

Page 33: Perché odio i temi di WordPress

lunedì 11 febbraio 13

Page 34: Perché odio i temi di WordPress

Framework themes

lunedì 11 febbraio 13

Page 35: Perché odio i temi di WordPress

Framework themes

lunedì 11 febbraio 13

Page 36: Perché odio i temi di WordPress

Framework themes

lunedì 11 febbraio 13

Page 37: Perché odio i temi di WordPress

Framework themes

lunedì 11 febbraio 13

Page 38: Perché odio i temi di WordPress

Framework themes

lunedì 11 febbraio 13

Page 39: Perché odio i temi di WordPress

Gli svantaggi

lunedì 11 febbraio 13

Page 40: Perché odio i temi di WordPress

Gli svantaggi

• Costano

lunedì 11 febbraio 13

Page 41: Perché odio i temi di WordPress

0

50

100

150

200

Pagelines Thesis Genesis Headway Catalyst

US$ 127,00

US$ 174,00

US$ 59,95

US$ 164,00

US$ 197,00

lunedì 11 febbraio 13

Page 42: Perché odio i temi di WordPress

Gli svantaggi

• Costano

• Curva di apprendimento ripida

lunedì 11 febbraio 13

Page 43: Perché odio i temi di WordPress

lunedì 11 febbraio 13

Page 44: Perché odio i temi di WordPress

add_action( 'genesis_meta', 'load_fonts', 5);function load_fonts() {   echo '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">';}

Genesis

lunedì 11 febbraio 13

Page 45: Perché odio i temi di WordPress

add_action( 'genesis_meta', 'load_fonts', 5);function load_fonts() {   echo '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">';}

Genesis

function load_fonts() {           wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Lora|Oswald');           wp_enqueue_style( 'googleFonts');       }   add_action('wp_print_styles', 'load_fonts');

WordPress

lunedì 11 febbraio 13

Page 46: Perché odio i temi di WordPress

Gli svantaggi

• Costano

• Curva di apprendimento ripida

• Un sacco di roba inutile

lunedì 11 febbraio 13

Page 47: Perché odio i temi di WordPress

Framework PageSizeiThemes (Builder) 299kb

Headway 1.1 mb

Genesis 1.1 mb

Catalyst (w/Dynamik) 1.6 mb

WooThemes (Canvas) 1.7 mb

Ultimatum 1.8 mb

Pagelines 5.2 mb

lunedì 11 febbraio 13

Page 48: Perché odio i temi di WordPress

Framework LoadTimeHeadway 226 ms

Genesis964 ms

WooThemes (Canvas)992 ms

Catalyst (w/Dynamik)1.2 s

Ultimatum1.22 s

iThemes (Builder)1.26 s

Pagelines 5.18 s

lunedì 11 febbraio 13

Page 49: Perché odio i temi di WordPress

Un altro livello di complessitàtra il progetto e WordPress

lunedì 11 febbraio 13

Page 50: Perché odio i temi di WordPress

lunedì 11 febbraio 13

Page 51: Perché odio i temi di WordPress

Ecco perchéio odio i themi di

WordPress

lunedì 11 febbraio 13

Page 52: Perché odio i temi di WordPress

lunedì 11 febbraio 13

Page 53: Perché odio i temi di WordPress

Ripartiamo!Mi serve uno strumento che sia...

lunedì 11 febbraio 13

Page 54: Perché odio i temi di WordPress

Ripartiamo!Mi serve uno strumento che sia...

• Efficace

lunedì 11 febbraio 13

Page 55: Perché odio i temi di WordPress

Ripartiamo!Mi serve uno strumento che sia...

• Efficace

• Flessibile

lunedì 11 febbraio 13

Page 56: Perché odio i temi di WordPress

Ripartiamo!Mi serve uno strumento che sia...

• Efficace

• Flessibile

• Economico

lunedì 11 febbraio 13

Page 57: Perché odio i temi di WordPress

• i

lunedì 11 febbraio 13

Page 58: Perché odio i temi di WordPress

Separare

Funzioni(Plugin)

View(Themes)

lunedì 11 febbraio 13

Page 59: Perché odio i temi di WordPress

FrameworkFront-End

lunedì 11 febbraio 13

Page 60: Perché odio i temi di WordPress

Zurb Foundation

lunedì 11 febbraio 13

Page 61: Perché odio i temi di WordPress

Foundation è un framework (con licenza MIT) che comprende

lunedì 11 febbraio 13

Page 62: Perché odio i temi di WordPress

• Una griglia responsive nidificabile agnostic device

Foundation è un framework (con licenza MIT) che comprende

lunedì 11 febbraio 13

Page 63: Perché odio i temi di WordPress

• Una griglia responsive nidificabile agnostic device

• Stili mobile, bottoni e tipografia

Foundation è un framework (con licenza MIT) che comprende

lunedì 11 febbraio 13

Page 64: Perché odio i temi di WordPress

• Una griglia responsive nidificabile agnostic device

• Stili mobile, bottoni e tipografia

• Elementi di layout come tabs e pagination

Foundation è un framework (con licenza MIT) che comprende

lunedì 11 febbraio 13

Page 65: Perché odio i temi di WordPress

• Una griglia responsive nidificabile agnostic device

• Stili mobile, bottoni e tipografia

• Elementi di layout come tabs e pagination

• Forms

Foundation è un framework (con licenza MIT) che comprende

lunedì 11 febbraio 13

Page 66: Perché odio i temi di WordPress

• Una griglia responsive nidificabile agnostic device

• Stili mobile, bottoni e tipografia

• Elementi di layout come tabs e pagination

• Forms

• Plugin Javascript

Foundation è un framework (con licenza MIT) che comprende

lunedì 11 febbraio 13

Page 67: Perché odio i temi di WordPress

Da dove viene Foundation

lunedì 11 febbraio 13

Page 68: Perché odio i temi di WordPress

• Zurb - product design in Campbell, California

Da dove viene Foundation

lunedì 11 febbraio 13

Page 69: Perché odio i temi di WordPress

• Zurb - product design in Campbell, California

• Nato per creare rapidamente prototipi html/css

Da dove viene Foundation

lunedì 11 febbraio 13

Page 70: Perché odio i temi di WordPress

• Zurb - product design in Campbell, California

• Nato per creare rapidamente prototipi html/css

• Progettato per diventare codice di produzione

Da dove viene Foundation

lunedì 11 febbraio 13

Page 71: Perché odio i temi di WordPress

Mi piace perché...

lunedì 11 febbraio 13

Page 72: Perché odio i temi di WordPress

Mi piace perché...

• Linguaggio semantico

lunedì 11 febbraio 13

Page 73: Perché odio i temi di WordPress

lunedì 11 febbraio 13

Page 74: Perché odio i temi di WordPress

lunedì 11 febbraio 13

Page 75: Perché odio i temi di WordPress

Mi piace perché...

• Linguaggio semantico

• Object oriented css

lunedì 11 febbraio 13

Page 76: Perché odio i temi di WordPress

Separare struttura e skin

Ripetere caratteristiche visive (background e stili border) come skin separate che si possono aggiungere ed espandere tra loro per ottenere molta varietàcon poco codice.

lunedì 11 febbraio 13

Page 77: Perché odio i temi di WordPress

Separare container e content

Usare poco stili dipendentidalla posizione.Un oggetto deve mantenerele proprie caratteristiche,non importa dove lo mettiamo.

lunedì 11 febbraio 13

Page 78: Perché odio i temi di WordPress

Mi piace perché...

• Linguaggio semantico

• Object oriented css

• Sass/Compass ready

lunedì 11 febbraio 13

Page 79: Perché odio i temi di WordPress

SassSyntactically Awesome Stylesheets

lunedì 11 febbraio 13

Page 80: Perché odio i temi di WordPress

SassSyntactically Awesome Stylesheets

• Nidificazione

lunedì 11 febbraio 13

Page 81: Perché odio i temi di WordPress

Nidificazione

lunedì 11 febbraio 13

Page 82: Perché odio i temi di WordPress

Nidificazione

/* style.scss */

#navbar { width: 80%; height: 23px;

ul { list-style-type: none; } li { float: left; a { font-weight: bold; } }}

lunedì 11 febbraio 13

Page 83: Perché odio i temi di WordPress

Nidificazione

/* style.scss */

#navbar { width: 80%; height: 23px;

ul { list-style-type: none; } li { float: left; a { font-weight: bold; } }}

/* style.css */

#navbar { width: 80%; height: 23px; } #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; }

lunedì 11 febbraio 13

Page 84: Perché odio i temi di WordPress

SassSyntactically Awesome Stylesheets

lunedì 11 febbraio 13

Page 85: Perché odio i temi di WordPress

SassSyntactically Awesome Stylesheets

• Nidificazione

• Variabili

lunedì 11 febbraio 13

Page 86: Perché odio i temi di WordPress

Variabili

lunedì 11 febbraio 13

Page 87: Perché odio i temi di WordPress

Variabili/* style.scss */

$main-color: #ce4dd6;$style: solid;

#navbar { border-bottom: { color: $main-color; style: $style; }}

a { color: $main-color; &:hover { border-bottom: $style 1px; }}

lunedì 11 febbraio 13

Page 88: Perché odio i temi di WordPress

Variabili/* style.scss */

$main-color: #ce4dd6;$style: solid;

#navbar { border-bottom: { color: $main-color; style: $style; }}

a { color: $main-color; &:hover { border-bottom: $style 1px; }}

/* style.css */

#navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; }

a { color: #ce4dd6; } a:hover { border-bottom: solid 1px; }

lunedì 11 febbraio 13

Page 89: Perché odio i temi di WordPress

SassSyntactically Awesome Stylesheets

lunedì 11 febbraio 13

Page 90: Perché odio i temi di WordPress

SassSyntactically Awesome Stylesheets

• Nidificazione

• Variabili

• Mixin

lunedì 11 febbraio 13

Page 91: Perché odio i temi di WordPress

Mixin

lunedì 11 febbraio 13

Page 92: Perché odio i temi di WordPress

Mixin/* style.scss */

@mixin rounded-top-left { $vert: top; $horz: left; $radius: 10px;

border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

#navbar li { @include rounded-top-left; }#footer { @include rounded-top-left; }

lunedì 11 febbraio 13

Page 93: Perché odio i temi di WordPress

Mixin/* style.scss */

@mixin rounded-top-left { $vert: top; $horz: left; $radius: 10px;

border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

#navbar li { @include rounded-top-left; }#footer { @include rounded-top-left; }

/* style.css */

#navbar li { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }

#footer { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }

lunedì 11 febbraio 13

Page 94: Perché odio i temi di WordPress

SassSyntactically Awesome Stylesheets

• Nidificazione

• Variabili

• Mixin

• Controll directive: @if, @for, @each, @while

lunedì 11 febbraio 13

Page 95: Perché odio i temi di WordPress

Control Directives

lunedì 11 febbraio 13

Page 96: Perché odio i temi di WordPress

Control Directives

$class-slug: for !default

@for $i from 1 through 4 .#{$class-slug}-#{$i} width: 60px + $i

lunedì 11 febbraio 13

Page 97: Perché odio i temi di WordPress

Control Directives

$class-slug: for !default

@for $i from 1 through 4 .#{$class-slug}-#{$i} width: 60px + $i

.for-1 { width: 61px;}

.for-2 { width: 62px;}

.for-3 { width: 63px;}

.for-4 { width: 64px;}

lunedì 11 febbraio 13

Page 98: Perché odio i temi di WordPress

Da dove si comicia?

lunedì 11 febbraio 13

Page 99: Perché odio i temi di WordPress

Da dove si comicia?

Riga di comando!

lunedì 11 febbraio 13

Page 100: Perché odio i temi di WordPress

Installo Foundation via Ruby gem

lunedì 11 febbraio 13

Page 101: Perché odio i temi di WordPress

Installo Foundation via Ruby gem

[sudo] gem install zurb-foundation

lunedì 11 febbraio 13

Page 102: Perché odio i temi di WordPress

Installo Foundation via Ruby gem

[sudo] gem install zurb-foundation

Creiamo il progetto!

lunedì 11 febbraio 13

Page 103: Perché odio i temi di WordPress

Installo Foundation via Ruby gem

[sudo] gem install zurb-foundation

Creiamo il progetto!

compass create <nomeprogetto> -r zurb-foundation --using foundation

lunedì 11 febbraio 13

Page 104: Perché odio i temi di WordPress

Struttura del folder

lunedì 11 febbraio 13

Page 105: Perché odio i temi di WordPress

Struttura del folder

WordpCamp/

sass-cache/ config.rb humans.txt images/ index.html javascript/ MIT-LICENSE.txt robots.txt sass/ stylesheets/

lunedì 11 febbraio 13

Page 106: Perché odio i temi di WordPress

Struttura del folder

WordpCamp/

sass-cache/ config.rb humans.txt images/ index.html javascript/ MIT-LICENSE.txt robots.txt sass/ stylesheets/

@import "foundation/components/modules/buttons";// @import "foundation/components/modules/tabs";// @import "foundation/components/modules/ui";@import "foundation/components/modules/topbar";// @import "foundation/components/modules/navbar";// @import "foundation/components/modules/orbit";@import "foundation/components/modules/reveal";// @import "foundation/components/modules/offcanvas";

lunedì 11 febbraio 13

Page 107: Perché odio i temi di WordPress

Frameworkè metodo

lunedì 11 febbraio 13

Page 108: Perché odio i temi di WordPress

Grazie al metodo ho

lunedì 11 febbraio 13

Page 109: Perché odio i temi di WordPress

Grazie al metodo ho

• Codice coerente

lunedì 11 febbraio 13

Page 110: Perché odio i temi di WordPress

Grazie al metodo ho

• Codice coerente

• Codice scalabile e modulare

lunedì 11 febbraio 13

Page 111: Perché odio i temi di WordPress

Grazie al metodo ho

• Codice coerente

• Codice scalabile e modulare

• Consegne brevi

lunedì 11 febbraio 13

Page 112: Perché odio i temi di WordPress

Grazie al metodo ho

• Codice coerente

• Codice scalabile e modulare

• Consegne brevi

• Formazione extra WordPress

lunedì 11 febbraio 13

Page 113: Perché odio i temi di WordPress

Grazie al metodo ho

• Codice coerente

• Codice scalabile e modulare

• Consegne brevi

• Formazione extra WordPress

• Prodotti efficaci, flessibili ed economici

lunedì 11 febbraio 13

Page 114: Perché odio i temi di WordPress

“Child themes anda framework arethe only way you should build your WordPress site.

Matt MullenwegFounder, WordPress

lunedì 11 febbraio 13

Page 115: Perché odio i temi di WordPress

Grazie!

Io sono Matteo Cavucci e questo intervento si chiama

“Perché odio i temi di WordPress”mced.it - @MatteoMCED

lunedì 11 febbraio 13