Blank Template          für Joomla!Ein praktischer Einstieg in die Template-Entwicklung
Download• http://blank.vc
Features• CSS-Reset• Modernizr• Twitter Bootstrap• PIE• Compressor ...
Voraussetzung• Joomla! (lokal oder auf Webspace)• Editor (Notepad++, TextWrangler)• FTP-Client (WinSCP, Cyperduck)• Browse...
Skills?• PHP• HTML und CSS• JavaScript• J!-API• XML
Anfang• Download http://blank.vc• Entpacken
index.php
Quelltext
templateDetails.xml
• Infos• Dateien• Modulpositionen• Parameter
index.php erweitern
• Cascading Stylesheets• Modernizr• Browserweiche• Twitter Bootstrap• PIE
index.html<html><body bgcolor="#FFFFFF"></body></html>             Is‘n Sicherheitsding.
template.css.php• Parameterabfrage• Compressor• Dateienimplemetierung
template.css.php   Parameterabfrage
template.css.php    Compressor
template.css.php  Dateienimplemetierung
CSS-Reset   /* quick‘n‘dirty */* {margin:0; padding:0;}
CSS-Reset  reset.css
CSS Link
CSS Link
ModernizrGenerator unter http://modernizr.com
Modernizr/js/modernizr-2.6.2.js
Modernizr
Modernizr                  <html class=“no-js“><html class=" js no-flexbox canvas canvastext postmessageno-websqldatabase i...
Browserweiche  <html class=“no-js“>
Twitter Bootstraphttp://twitter.github.com/bootstrap/
Twitter Bootstrap
Bootstrap Components•   Button groups            •   Alerts•   Button dropdowns         •   Progress bars•   Tabs, pills, ...
Bootstrap Beispiel     http://itr.im/2c7
BootstrapVoraussetzung      jQuery  http://jquery.com
PIE     PIE.htchttp://css3pie.com
PIE
JavaScripte
template.js.php• Header• Parameterabfrage• Dateienimplementierung
template.js.php     Header
template.js.php   Parameterabfrage
template.js.php Dateienimplementierung
War‘s das?
Nö!• debug module• pageclass• generator tag• mobile addons
debug module                 index.php<jdoc:include type="modules" name="debug" />
debug module     templateDetails.xml<positions>	 <position>debug</position></positions>
pageclass  index.php
generator tag$this->setGenerator(null);
mobile addons
Und jetzt?• Overrides• Sprachdateien• Druckversion• Fehler- und Offline-Seite• Bilder und Icons
Overrides   /html/
Overrides
Overrides
Overrides
Overrides
Overrides
Overrides
Overrides
Sprachdateien
Sprachdateien
Sprachdateien
Sprachdateien
Sprachdateien
Sprachdateien
Druckversion  component.php     print.css
Fehlerseite   error.php   error.css
Offline-Seite   offline.php   offline.css
Bilder & Icons    /images/    /psd/
- ENDE -
Fragen?
Blank Template für Joomla!
Blank Template für Joomla!
Blank Template für Joomla!
Blank Template für Joomla!
Blank Template für Joomla!
Blank Template für Joomla!
Blank Template für Joomla!
Blank Template für Joomla!
Upcoming SlideShare
Loading in …5
×

Blank Template für Joomla!

4,188 views

Published on

Vorstellung des Blank Template für Joomla! (http://blank.vc) mit all seinen Features und Addons.

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,188
On SlideShare
0
From Embeds
0
Number of Embeds
104
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Blank Template für Joomla!

    1. 1. Blank Template für Joomla!Ein praktischer Einstieg in die Template-Entwicklung
    2. 2. Download• http://blank.vc
    3. 3. Features• CSS-Reset• Modernizr• Twitter Bootstrap• PIE• Compressor ...
    4. 4. Voraussetzung• Joomla! (lokal oder auf Webspace)• Editor (Notepad++, TextWrangler)• FTP-Client (WinSCP, Cyperduck)• Browser (Firefox mit Firebug, Chrome)
    5. 5. Skills?• PHP• HTML und CSS• JavaScript• J!-API• XML
    6. 6. Anfang• Download http://blank.vc• Entpacken
    7. 7. index.php
    8. 8. Quelltext
    9. 9. templateDetails.xml
    10. 10. • Infos• Dateien• Modulpositionen• Parameter
    11. 11. index.php erweitern
    12. 12. • Cascading Stylesheets• Modernizr• Browserweiche• Twitter Bootstrap• PIE
    13. 13. index.html<html><body bgcolor="#FFFFFF"></body></html> Is‘n Sicherheitsding.
    14. 14. template.css.php• Parameterabfrage• Compressor• Dateienimplemetierung
    15. 15. template.css.php Parameterabfrage
    16. 16. template.css.php Compressor
    17. 17. template.css.php Dateienimplemetierung
    18. 18. CSS-Reset /* quick‘n‘dirty */* {margin:0; padding:0;}
    19. 19. CSS-Reset reset.css
    20. 20. CSS Link
    21. 21. CSS Link
    22. 22. ModernizrGenerator unter http://modernizr.com
    23. 23. Modernizr/js/modernizr-2.6.2.js
    24. 24. Modernizr
    25. 25. Modernizr <html class=“no-js“><html class=" js no-flexbox canvas canvastext postmessageno-websqldatabase indexeddb hashchange historydraganddrop websockets rgba hsla multiplebgsbackgroundsize borderimage borderradius boxshadowtextshadow opacity cssanimations csscolumns cssgradientsno-cssreflections csstransforms csstransforms3dcsstransitions fontface generatedcontent video audiolocalstorage sessionstorage webworkers applicationcache">
    26. 26. Browserweiche <html class=“no-js“>
    27. 27. Twitter Bootstraphttp://twitter.github.com/bootstrap/
    28. 28. Twitter Bootstrap
    29. 29. Bootstrap Components• Button groups • Alerts• Button dropdowns • Progress bars• Tabs, pills, and lists • Modals• Navbar • Dropdowns• Labels • Tooltips• Badges • Popovers• Page headers • Accordion Thumbnails Carousel
    30. 30. Bootstrap Beispiel http://itr.im/2c7
    31. 31. BootstrapVoraussetzung jQuery http://jquery.com
    32. 32. PIE PIE.htchttp://css3pie.com
    33. 33. PIE
    34. 34. JavaScripte
    35. 35. template.js.php• Header• Parameterabfrage• Dateienimplementierung
    36. 36. template.js.php Header
    37. 37. template.js.php Parameterabfrage
    38. 38. template.js.php Dateienimplementierung
    39. 39. War‘s das?
    40. 40. Nö!• debug module• pageclass• generator tag• mobile addons
    41. 41. debug module index.php<jdoc:include type="modules" name="debug" />
    42. 42. debug module templateDetails.xml<positions> <position>debug</position></positions>
    43. 43. pageclass index.php
    44. 44. generator tag$this->setGenerator(null);
    45. 45. mobile addons
    46. 46. Und jetzt?• Overrides• Sprachdateien• Druckversion• Fehler- und Offline-Seite• Bilder und Icons
    47. 47. Overrides /html/
    48. 48. Overrides
    49. 49. Overrides
    50. 50. Overrides
    51. 51. Overrides
    52. 52. Overrides
    53. 53. Overrides
    54. 54. Overrides
    55. 55. Sprachdateien
    56. 56. Sprachdateien
    57. 57. Sprachdateien
    58. 58. Sprachdateien
    59. 59. Sprachdateien
    60. 60. Sprachdateien
    61. 61. Druckversion component.php print.css
    62. 62. Fehlerseite error.php error.css
    63. 63. Offline-Seite offline.php offline.css
    64. 64. Bilder & Icons /images/ /psd/
    65. 65. - ENDE -
    66. 66. Fragen?

    ×