SlideShare ist ein Scribd-Unternehmen logo
1 von 74
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)
• Browser (Firefox mit Firebug, Chrome)
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
Modernizr
Generator unter http://modernizr.com
Modernizr


/js/modernizr-2.6.2.js
Modernizr
Modernizr
                  <html class=“no-js“>


<html class=" js no-flexbox canvas canvastext postmessage
no-websqldatabase indexeddb hashchange history
draganddrop websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow
textshadow opacity cssanimations csscolumns cssgradients
no-cssreflections csstransforms csstransforms3d
csstransitions fontface generatedcontent video audio
localstorage sessionstorage webworkers applicationcache">
Browserweiche
  <html class=“no-js“>
Twitter Bootstrap


http://twitter.github.com/bootstrap/
Twitter Bootstrap
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
Bootstrap Beispiel
     http://itr.im/2c7
Bootstrap
Voraussetzung

      jQuery



  http://jquery.com
PIE


     PIE.htc
http://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?

Weitere ähnliche Inhalte

Was ist angesagt?

Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Patrick Lauke
 
Wordpress Benutzerrollen und Eigenschaften
Wordpress Benutzerrollen und EigenschaftenWordpress Benutzerrollen und Eigenschaften
Wordpress Benutzerrollen und Eigenschaften
frankstaude
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Eric Eggert
 

Was ist angesagt? (20)

Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
 
Moderner Webentwicklungs-Workflow
Moderner Webentwicklungs-WorkflowModerner Webentwicklungs-Workflow
Moderner Webentwicklungs-Workflow
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
Qooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui ToolkitQooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui Toolkit
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Websemantik: Die nächsten Schritte
Websemantik: Die nächsten SchritteWebsemantik: Die nächsten Schritte
Websemantik: Die nächsten Schritte
 
Wordpress Benutzerrollen und Eigenschaften
Wordpress Benutzerrollen und EigenschaftenWordpress Benutzerrollen und Eigenschaften
Wordpress Benutzerrollen und Eigenschaften
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
JSF vs. GWT? JSF und GWT!
JSF vs. GWT? JSF und GWT!JSF vs. GWT? JSF und GWT!
JSF vs. GWT? JSF und GWT!
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
 
WordPress- eine Einführung
WordPress- eine EinführungWordPress- eine Einführung
WordPress- eine Einführung
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Spass mit Sass
Spass mit SassSpass mit Sass
Spass mit Sass
 

Ähnlich wie Blank Template für Joomla!

Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.
David Schneider
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Ulrich Schmidt
 

Ähnlich wie Blank Template für Joomla! (20)

Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
HTML5
HTML5HTML5
HTML5
 
Atlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-InfrastrukturAtlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-Infrastruktur
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site Generators
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 

Kürzlich hochgeladen

PETAVIT LIM TZE.pdfasasasasasaaaaaaaaaaaaa
PETAVIT LIM TZE.pdfasasasasasaaaaaaaaaaaaaPETAVIT LIM TZE.pdfasasasasasaaaaaaaaaaaaa
PETAVIT LIM TZE.pdfasasasasasaaaaaaaaaaaaa
lawrenceads01
 

Kürzlich hochgeladen (6)

"Team-Doing": Arbeiten, lernen, Spaß haben – alles gemeinsam und alles gleich...
"Team-Doing": Arbeiten, lernen, Spaß haben – alles gemeinsam und alles gleich..."Team-Doing": Arbeiten, lernen, Spaß haben – alles gemeinsam und alles gleich...
"Team-Doing": Arbeiten, lernen, Spaß haben – alles gemeinsam und alles gleich...
 
Das Experiment zu Gunsten der Metropol-Region Rhein-Neckar
Das Experiment zu Gunsten der Metropol-Region Rhein-NeckarDas Experiment zu Gunsten der Metropol-Region Rhein-Neckar
Das Experiment zu Gunsten der Metropol-Region Rhein-Neckar
 
Typische Engpässe im Projektmanagement.pdf
Typische Engpässe im Projektmanagement.pdfTypische Engpässe im Projektmanagement.pdf
Typische Engpässe im Projektmanagement.pdf
 
Die Rolle von Change Agents zwischen Schmuckeremiten und Rebellen
Die Rolle von Change Agents zwischen Schmuckeremiten und RebellenDie Rolle von Change Agents zwischen Schmuckeremiten und Rebellen
Die Rolle von Change Agents zwischen Schmuckeremiten und Rebellen
 
ICV Mediadaten 2024 - Ihre Möglichkeiten, auf den Plattformen des Internation...
ICV Mediadaten 2024 - Ihre Möglichkeiten, auf den Plattformen des Internation...ICV Mediadaten 2024 - Ihre Möglichkeiten, auf den Plattformen des Internation...
ICV Mediadaten 2024 - Ihre Möglichkeiten, auf den Plattformen des Internation...
 
PETAVIT LIM TZE.pdfasasasasasaaaaaaaaaaaaa
PETAVIT LIM TZE.pdfasasasasasaaaaaaaaaaaaaPETAVIT LIM TZE.pdfasasasasasaaaaaaaaaaaaa
PETAVIT LIM TZE.pdfasasasasasaaaaaaaaaaaaa
 

Blank Template für Joomla!

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n