Perché odio i temi di WordPress
-
Upload
magicodeselegantdesign -
Category
Self Improvement
-
view
2.016 -
download
1
description
Transcript of 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
È bello lavorare con Wordpress
lunedì 11 febbraio 13
Perché è...
lunedì 11 febbraio 13
Perché è...
• Intuitivo
lunedì 11 febbraio 13
Perché è...
• Intuitivo
• Ben documentato
lunedì 11 febbraio 13
Perché è...
• Intuitivo
• Ben documentato
• Supportato dalla community
lunedì 11 febbraio 13
Drupal Joomla Wordpress Altri
fonte: w3tech.com
lunedì 11 febbraio 13
Altri27%
Wordpress57%
Joomla9%
Drupal7%
Drupal Joomla Wordpress Altri
fonte: w3tech.com
lunedì 11 febbraio 13
Anche i clienti amano WordPress
lunedì 11 febbraio 13
Perché è...
lunedì 11 febbraio 13
Perché è...
• Facile
lunedì 11 febbraio 13
Perché è...
• Facile
• Diffuso
lunedì 11 febbraio 13
Perché è...
• Facile
• Diffuso
• Conveniente
lunedì 11 febbraio 13
Strumenti specializzati utili agli obiettivi di comunicazione
del progetto
lunedì 11 febbraio 13
Strumenti specializzati utili agli obiettivi di comunicazione
del progetto
lunedì 11 febbraio 13
Strumenti specializzati utili agli obiettivi di comunicazione
del progetto
lunedì 11 febbraio 13
Prodotti che sono...
lunedì 11 febbraio 13
Prodotti che sono...
• Efficaci
lunedì 11 febbraio 13
Prodotti che sono...
• Efficaci
• Flessibili
lunedì 11 febbraio 13
Prodotti che sono...
• Efficaci
• Flessibili
• Economici
lunedì 11 febbraio 13
Questo è il mioproblema.
lunedì 11 febbraio 13
Matteo Cavucci
• 30 anni
• Developer
• Front-end
lunedì 11 febbraio 13
• Studio di progettazione
• Roma
• Enti&aziende
mced.it
lunedì 11 febbraio 13
lunedì 11 febbraio 13
Nessuno è ancorato al proprio ruolo.lunedì 11 febbraio 13
lunedì 11 febbraio 13
Non reinventarela ruota.
lunedì 11 febbraio 13
lunedì 11 febbraio 13
• Cerca un theme(e cerca di capire se è buono...)
lunedì 11 febbraio 13
• Cerca un theme(e cerca di capire se è buono...)
• Decodifica
lunedì 11 febbraio 13
• Cerca un theme(e cerca di capire se è buono...)
• Decodifica
• Customizza
lunedì 11 febbraio 13
Adattare il contenuto al thema
lunedì 11 febbraio 13
lunedì 11 febbraio 13
Framework themes
lunedì 11 febbraio 13
Framework themes
lunedì 11 febbraio 13
Framework themes
lunedì 11 febbraio 13
Framework themes
lunedì 11 febbraio 13
Framework themes
lunedì 11 febbraio 13
Gli svantaggi
lunedì 11 febbraio 13
Gli svantaggi
• Costano
lunedì 11 febbraio 13
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
Gli svantaggi
• Costano
• Curva di apprendimento ripida
lunedì 11 febbraio 13
lunedì 11 febbraio 13
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
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
Gli svantaggi
• Costano
• Curva di apprendimento ripida
• Un sacco di roba inutile
lunedì 11 febbraio 13
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
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
Un altro livello di complessitàtra il progetto e WordPress
lunedì 11 febbraio 13
lunedì 11 febbraio 13
Ecco perchéio odio i themi di
WordPress
lunedì 11 febbraio 13
lunedì 11 febbraio 13
Ripartiamo!Mi serve uno strumento che sia...
lunedì 11 febbraio 13
Ripartiamo!Mi serve uno strumento che sia...
• Efficace
lunedì 11 febbraio 13
Ripartiamo!Mi serve uno strumento che sia...
• Efficace
• Flessibile
lunedì 11 febbraio 13
Ripartiamo!Mi serve uno strumento che sia...
• Efficace
• Flessibile
• Economico
lunedì 11 febbraio 13
• i
lunedì 11 febbraio 13
Separare
Funzioni(Plugin)
View(Themes)
lunedì 11 febbraio 13
FrameworkFront-End
lunedì 11 febbraio 13
Zurb Foundation
lunedì 11 febbraio 13
Foundation è un framework (con licenza MIT) che comprende
lunedì 11 febbraio 13
• Una griglia responsive nidificabile agnostic device
Foundation è un framework (con licenza MIT) che comprende
lunedì 11 febbraio 13
• Una griglia responsive nidificabile agnostic device
• Stili mobile, bottoni e tipografia
Foundation è un framework (con licenza MIT) che comprende
lunedì 11 febbraio 13
• 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
• 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
• 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
Da dove viene Foundation
lunedì 11 febbraio 13
• Zurb - product design in Campbell, California
Da dove viene Foundation
lunedì 11 febbraio 13
• Zurb - product design in Campbell, California
• Nato per creare rapidamente prototipi html/css
Da dove viene Foundation
lunedì 11 febbraio 13
• 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
Mi piace perché...
lunedì 11 febbraio 13
Mi piace perché...
• Linguaggio semantico
lunedì 11 febbraio 13
lunedì 11 febbraio 13
lunedì 11 febbraio 13
Mi piace perché...
• Linguaggio semantico
• Object oriented css
lunedì 11 febbraio 13
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
Separare container e content
Usare poco stili dipendentidalla posizione.Un oggetto deve mantenerele proprie caratteristiche,non importa dove lo mettiamo.
lunedì 11 febbraio 13
Mi piace perché...
• Linguaggio semantico
• Object oriented css
• Sass/Compass ready
lunedì 11 febbraio 13
SassSyntactically Awesome Stylesheets
lunedì 11 febbraio 13
SassSyntactically Awesome Stylesheets
• Nidificazione
lunedì 11 febbraio 13
Nidificazione
lunedì 11 febbraio 13
Nidificazione
/* style.scss */
#navbar { width: 80%; height: 23px;
ul { list-style-type: none; } li { float: left; a { font-weight: bold; } }}
lunedì 11 febbraio 13
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
SassSyntactically Awesome Stylesheets
lunedì 11 febbraio 13
SassSyntactically Awesome Stylesheets
• Nidificazione
• Variabili
lunedì 11 febbraio 13
Variabili
lunedì 11 febbraio 13
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
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
SassSyntactically Awesome Stylesheets
lunedì 11 febbraio 13
SassSyntactically Awesome Stylesheets
• Nidificazione
• Variabili
• Mixin
lunedì 11 febbraio 13
Mixin
lunedì 11 febbraio 13
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
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
SassSyntactically Awesome Stylesheets
• Nidificazione
• Variabili
• Mixin
• Controll directive: @if, @for, @each, @while
lunedì 11 febbraio 13
Control Directives
lunedì 11 febbraio 13
Control Directives
$class-slug: for !default
@for $i from 1 through 4 .#{$class-slug}-#{$i} width: 60px + $i
lunedì 11 febbraio 13
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
Da dove si comicia?
lunedì 11 febbraio 13
Da dove si comicia?
Riga di comando!
lunedì 11 febbraio 13
Installo Foundation via Ruby gem
lunedì 11 febbraio 13
Installo Foundation via Ruby gem
[sudo] gem install zurb-foundation
lunedì 11 febbraio 13
Installo Foundation via Ruby gem
[sudo] gem install zurb-foundation
Creiamo il progetto!
lunedì 11 febbraio 13
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
Struttura del folder
lunedì 11 febbraio 13
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
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
Frameworkè metodo
lunedì 11 febbraio 13
Grazie al metodo ho
lunedì 11 febbraio 13
Grazie al metodo ho
• Codice coerente
lunedì 11 febbraio 13
Grazie al metodo ho
• Codice coerente
• Codice scalabile e modulare
lunedì 11 febbraio 13
Grazie al metodo ho
• Codice coerente
• Codice scalabile e modulare
• Consegne brevi
lunedì 11 febbraio 13
Grazie al metodo ho
• Codice coerente
• Codice scalabile e modulare
• Consegne brevi
• Formazione extra WordPress
lunedì 11 febbraio 13
Grazie al metodo ho
• Codice coerente
• Codice scalabile e modulare
• Consegne brevi
• Formazione extra WordPress
• Prodotti efficaci, flessibili ed economici
lunedì 11 febbraio 13
“Child themes anda framework arethe only way you should build your WordPress site.
Matt MullenwegFounder, WordPress
lunedì 11 febbraio 13
Grazie!
Io sono Matteo Cavucci e questo intervento si chiama
“Perché odio i temi di WordPress”mced.it - @MatteoMCED
lunedì 11 febbraio 13