Perché odio i temi di WordPress

2,300 views
2,225 views

Published on

Le slide dell'intervento al WordCamp 2013 a Bologna

Published in: Self Improvement
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,300
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
48
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Perché odio i temi di WordPress

  1. 1. Perché odio i temi di WordPress di MATTEO CAVUCCI WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13lunedì 11 febbraio 13
  2. 2. È bello lavorare con Wordpresslunedì 11 febbraio 13
  3. 3. Perché è...lunedì 11 febbraio 13
  4. 4. Perché è... • Intuitivolunedì 11 febbraio 13
  5. 5. Perché è... • Intuitivo • Ben documentatolunedì 11 febbraio 13
  6. 6. Perché è... • Intuitivo • Ben documentato • Supportato dalla communitylunedì 11 febbraio 13
  7. 7. Drupal Joomla Wordpress Altri fonte: w3tech.comlunedì 11 febbraio 13
  8. 8. Drupal Joomla Wordpress Altri Drupal 7% Joomla Altri 27% 9% Wordpress 57% fonte: w3tech.comlunedì 11 febbraio 13
  9. 9. Anche i clienti amano WordPresslunedì 11 febbraio 13
  10. 10. Perché è...lunedì 11 febbraio 13
  11. 11. Perché è... • Facilelunedì 11 febbraio 13
  12. 12. Perché è... • Facile • Diffusolunedì 11 febbraio 13
  13. 13. Perché è... • Facile • Diffuso • Convenientelunedì 11 febbraio 13
  14. 14. Strumenti specializzati utili agli obiettivi di comunicazione del progettolunedì 11 febbraio 13
  15. 15. Strumenti specializzati utili agli obiettivi di comunicazione del progettolunedì 11 febbraio 13
  16. 16. Strumenti specializzati utili agli obiettivi di comunicazione del progettolunedì 11 febbraio 13
  17. 17. Prodotti che sono...lunedì 11 febbraio 13
  18. 18. Prodotti che sono... • Efficacilunedì 11 febbraio 13
  19. 19. Prodotti che sono... • Efficaci • Flessibililunedì 11 febbraio 13
  20. 20. Prodotti che sono... • Efficaci • Flessibili • Economicilunedì 11 febbraio 13
  21. 21. Questo è il mio problema.lunedì 11 febbraio 13
  22. 22. Matteo Cavucci • 30 anni • Developer • Front-endlunedì 11 febbraio 13
  23. 23. • Studio di progettazione • Roma • Enti&aziende mced.itlunedì 11 febbraio 13
  24. 24. lunedì 11 febbraio 13
  25. 25. Nessuno è ancorato al proprio ruolo.lunedì 11 febbraio 13
  26. 26. lunedì 11 febbraio 13
  27. 27. Non reinventare la ruota.lunedì 11 febbraio 13
  28. 28. lunedì 11 febbraio 13
  29. 29. • Cerca un theme (e cerca di capire se è buono...)lunedì 11 febbraio 13
  30. 30. • Cerca un theme (e cerca di capire se è buono...) • Decodificalunedì 11 febbraio 13
  31. 31. • Cerca un theme (e cerca di capire se è buono...) • Decodifica • Customizzalunedì 11 febbraio 13
  32. 32. Adattare il contenuto al themalunedì 11 febbraio 13
  33. 33. lunedì 11 febbraio 13
  34. 34. Framework themeslunedì 11 febbraio 13
  35. 35. Framework themeslunedì 11 febbraio 13
  36. 36. Framework themeslunedì 11 febbraio 13
  37. 37. Framework themeslunedì 11 febbraio 13
  38. 38. Framework themeslunedì 11 febbraio 13
  39. 39. Gli svantaggilunedì 11 febbraio 13
  40. 40. Gli svantaggi • Costanolunedì 11 febbraio 13
  41. 41. 200 US$ 197,00 US$ 174,00 150 US$ 164,00 US$ 127,00 100 50 US$ 59,95 0 Pagelines Thesis Genesis Headway Catalystlunedì 11 febbraio 13
  42. 42. Gli svantaggi • Costano • Curva di apprendimento ripidalunedì 11 febbraio 13
  43. 43. lunedì 11 febbraio 13
  44. 44. Genesis 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">; }lunedì 11 febbraio 13
  45. 45. Genesis WordPress function load_fonts() { add_action( genesis_meta,             load_fonts, 5); wp_register_style(googleFonts, function load_fonts() { http://fonts.googleapis.com/css?    echo <link rel="stylesheet" family=Lora|Oswald); type="text/css" href="http://             fonts.googleapis.com/css? wp_enqueue_style( googleFonts); family=Lora|Oswald"        } media="screen">;    add_action(wp_print_styles, } load_fonts);lunedì 11 febbraio 13
  46. 46. Gli svantaggi • Costano • Curva di apprendimento ripida • Un sacco di roba inutilelunedì 11 febbraio 13
  47. 47. Framework PageSize iThemes (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 mblunedì 11 febbraio 13
  48. 48. Framework LoadTime Headway 226 ms 964 ms Genesis 992 ms WooThemes (Canvas) 1.2 s Catalyst (w/Dynamik) 1.22 s Ultimatum 1.26 s iThemes (Builder) Pagelines 5.18 slunedì 11 febbraio 13
  49. 49. Un altro livello di complessità tra il progetto e WordPresslunedì 11 febbraio 13
  50. 50. lunedì 11 febbraio 13
  51. 51. Ecco perché io odio i themi di WordPresslunedì 11 febbraio 13
  52. 52. lunedì 11 febbraio 13
  53. 53. Ripartiamo! Mi serve uno strumento che sia...lunedì 11 febbraio 13
  54. 54. Ripartiamo! Mi serve uno strumento che sia... • Efficacelunedì 11 febbraio 13
  55. 55. Ripartiamo! Mi serve uno strumento che sia... • Efficace • Flessibilelunedì 11 febbraio 13
  56. 56. Ripartiamo! Mi serve uno strumento che sia... • Efficace • Flessibile • Economicolunedì 11 febbraio 13
  57. 57. •ilunedì 11 febbraio 13
  58. 58. Separare Funzioni View (Plugin) (Themes)lunedì 11 febbraio 13
  59. 59. Framework Front-Endlunedì 11 febbraio 13
  60. 60. Zurb Foundationlunedì 11 febbraio 13
  61. 61. Foundation è un framework (con licenza MIT) che comprendelunedì 11 febbraio 13
  62. 62. Foundation è un framework (con licenza MIT) che comprende • Una griglia responsive nidificabile agnostic devicelunedì 11 febbraio 13
  63. 63. Foundation è un framework (con licenza MIT) che comprende • Una griglia responsive nidificabile agnostic device • Stili mobile, bottoni e tipografialunedì 11 febbraio 13
  64. 64. Foundation è un framework (con licenza MIT) che comprende • Una griglia responsive nidificabile agnostic device • Stili mobile, bottoni e tipografia • Elementi di layout come tabs e paginationlunedì 11 febbraio 13
  65. 65. Foundation è un framework (con licenza MIT) che comprende • Una griglia responsive nidificabile agnostic device • Stili mobile, bottoni e tipografia • Elementi di layout come tabs e pagination • Formslunedì 11 febbraio 13
  66. 66. Foundation è un framework (con licenza MIT) che comprende • Una griglia responsive nidificabile agnostic device • Stili mobile, bottoni e tipografia • Elementi di layout come tabs e pagination • Forms • Plugin Javascriptlunedì 11 febbraio 13
  67. 67. Da dove viene Foundationlunedì 11 febbraio 13
  68. 68. Da dove viene Foundation • Zurb - product design in Campbell, Californialunedì 11 febbraio 13
  69. 69. Da dove viene Foundation • Zurb - product design in Campbell, California • Nato per creare rapidamente prototipi html/csslunedì 11 febbraio 13
  70. 70. Da dove viene Foundation • Zurb - product design in Campbell, California • Nato per creare rapidamente prototipi html/css • Progettato per diventare codice di produzionelunedì 11 febbraio 13
  71. 71. Mi piace perché...lunedì 11 febbraio 13
  72. 72. Mi piace perché... • Linguaggio semanticolunedì 11 febbraio 13
  73. 73. lunedì 11 febbraio 13
  74. 74. lunedì 11 febbraio 13
  75. 75. Mi piace perché... • Linguaggio semantico • Object oriented csslunedì 11 febbraio 13
  76. 76. 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
  77. 77. Separare container e content Usare poco stili dipendenti dalla posizione. Un oggetto deve mantenere le proprie caratteristiche, non importa dove lo mettiamo.lunedì 11 febbraio 13
  78. 78. Mi piace perché... • Linguaggio semantico • Object oriented css • Sass/Compass readylunedì 11 febbraio 13
  79. 79. Sass Syntactically Awesome Stylesheetslunedì 11 febbraio 13
  80. 80. Sass Syntactically Awesome Stylesheets • Nidificazionelunedì 11 febbraio 13
  81. 81. Nidificazionelunedì 11 febbraio 13
  82. 82. Nidificazione /* style.scss */ #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; a { font-weight: bold; } } }lunedì 11 febbraio 13
  83. 83. Nidificazione /* style.scss */ /* style.css */ #navbar { #navbar { width: 80%; width: 80%; height: 23px; height: 23px; } #navbar ul { ul { list-style-type: none; } list-style-type: none; } li { #navbar li { float: left; float: left; } a { font-weight: bold; } #navbar li a { } font-weight: bold; } }lunedì 11 febbraio 13
  84. 84. Sass Syntactically Awesome Stylesheetslunedì 11 febbraio 13
  85. 85. Sass Syntactically Awesome Stylesheets • Nidificazione • Variabililunedì 11 febbraio 13
  86. 86. Variabililunedì 11 febbraio 13
  87. 87. 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
  88. 88. Variabili /* style.scss */ $main-color: #ce4dd6; $style: solid; /* style.css */ #navbar { #navbar { border-bottom: { border-bottom-color: #ce4dd6; color: $main-color; border-bottom-style: solid; } style: $style; } a { } color: #ce4dd6; } a:hover { a { border-bottom: solid 1px; } color: $main-color; &:hover { border-bottom: $style 1px; } }lunedì 11 febbraio 13
  89. 89. Sass Syntactically Awesome Stylesheetslunedì 11 febbraio 13
  90. 90. Sass Syntactically Awesome Stylesheets • Nidificazione • Variabili • Mixinlunedì 11 febbraio 13
  91. 91. Mixinlunedì 11 febbraio 13
  92. 92. 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
  93. 93. Mixin /* style.scss */ /* style.css */ @mixin rounded-top-left { $vert: top; #navbar li { $horz: left; border-top-left-radius: 10px; $radius: 10px; -moz-border-radius-topleft: 10px; border-#{$vert}-#{$horz}- -webkit-border-top-left-radius: radius: $radius; 10px; } -moz-border-radius-#{$vert} #{$horz}: $radius; #footer { -webkit-border-#{$vert}- border-top-left-radius: 10px; #{$horz}-radius: $radius; -moz-border-radius-topleft: } 10px; -webkit-border-top-left-radius: #navbar li { @include rounded- 10px; } top-left; } #footer { @include rounded-top- left; }lunedì 11 febbraio 13
  94. 94. Sass Syntactically Awesome Stylesheets • Nidificazione • Variabili • Mixin • Controll directive: @if, @for, @each, @whilelunedì 11 febbraio 13
  95. 95. Control Directiveslunedì 11 febbraio 13
  96. 96. Control Directives $class-slug: for !default @for $i from 1 through 4 .#{$class-slug}-#{$i} width: 60px + $ilunedì 11 febbraio 13
  97. 97. Control Directives .for-1 { width: 61px; } .for-2 { $class-slug: for !default width: 62px; } @for $i from 1 through 4 .#{$class-slug}-#{$i} .for-3 { width: 60px + $i width: 63px; } .for-4 { width: 64px; }lunedì 11 febbraio 13
  98. 98. Da dove si comicia?lunedì 11 febbraio 13
  99. 99. Da dove si comicia? Riga di comando!lunedì 11 febbraio 13
  100. 100. Installo Foundation via Ruby gemlunedì 11 febbraio 13
  101. 101. Installo Foundation via Ruby gem [sudo] gem install zurb-foundationlunedì 11 febbraio 13
  102. 102. Installo Foundation via Ruby gem [sudo] gem install zurb-foundation Creiamo il progetto!lunedì 11 febbraio 13
  103. 103. Installo Foundation via Ruby gem [sudo] gem install zurb-foundation Creiamo il progetto! compass create <nomeprogetto> -r zurb-foundation --using foundationlunedì 11 febbraio 13
  104. 104. Struttura del folderlunedì 11 febbraio 13
  105. 105. 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
  106. 106. Struttura del folder @import "foundation/components/ modules/buttons"; // @import "foundation/ WordpCamp/ components/modules/tabs"; // @import "foundation/ sass-cache/ components/modules/ui"; config.rb @import "foundation/components/ humans.txt modules/topbar"; images/ // @import "foundation/ index.html components/modules/navbar"; javascript/ // @import "foundation/ MIT-LICENSE.txt components/modules/orbit"; robots.txt @import "foundation/components/ sass/ modules/reveal"; stylesheets/ // @import "foundation/ components/modules/offcanvas";lunedì 11 febbraio 13
  107. 107. Framework è metodolunedì 11 febbraio 13
  108. 108. Grazie al metodo holunedì 11 febbraio 13
  109. 109. Grazie al metodo ho • Codice coerentelunedì 11 febbraio 13
  110. 110. Grazie al metodo ho • Codice coerente • Codice scalabile e modularelunedì 11 febbraio 13
  111. 111. Grazie al metodo ho • Codice coerente • Codice scalabile e modulare • Consegne brevilunedì 11 febbraio 13
  112. 112. Grazie al metodo ho • Codice coerente • Codice scalabile e modulare • Consegne brevi • Formazione extra WordPresslunedì 11 febbraio 13
  113. 113. Grazie al metodo ho • Codice coerente • Codice scalabile e modulare • Consegne brevi • Formazione extra WordPress • Prodotti efficaci, flessibili ed economicilunedì 11 febbraio 13
  114. 114. “ Child themes and a framework are the only way you should build your WordPress site. Matt Mullenweg Founder, WordPresslunedì 11 febbraio 13
  115. 115. Grazie! Io sono Matteo Cavucci e questo intervento si chiama “Perché odio i temi di WordPress” mced.it - @MatteoMCEDlunedì 11 febbraio 13

×