SlideShare une entreprise Scribd logo

Blank Template für Joomla!

•Télécharger en tant que KEY, PDF•
•
Alexander Schmidt
Alexander Schmidt

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

BusinessTechnologie
1  sur  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?

Recommandé

Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSF
Christian Kaltepoth
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
Dirk Ginader
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012
Daniel Havlik
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascript
Andy Bosch
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
DeveloperConference
 
XHTML
XHTMLXHTML
XHTML
Hans Mittendorfer
 

Recommandé

Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSF
Christian Kaltepoth
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
Dirk Ginader
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012
Daniel Havlik
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascript
Andy Bosch
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
DeveloperConference
 
XHTML
XHTMLXHTML
XHTML
Hans Mittendorfer
 
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
 
Moderner Webentwicklungs-Workflow
Moderner Webentwicklungs-WorkflowModerner Webentwicklungs-Workflow
Moderner Webentwicklungs-Workflow
PLUSPOL interactive GbR
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
jan_mindmatters
 
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
Fabian Jakobs
 
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
Christian Heilmann
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Websemantik: Die nächsten Schritte
Websemantik: Die nächsten SchritteWebsemantik: Die nächsten Schritte
Websemantik: Die nächsten Schritte
Michael Jendryschik
 
Wordpress Benutzerrollen und Eigenschaften
Wordpress Benutzerrollen und EigenschaftenWordpress Benutzerrollen und Eigenschaften
Wordpress Benutzerrollen und Eigenschaften
frankstaude
 
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
Martin Leyrer
 
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)
André Krämer
 
JSF vs. GWT? JSF und GWT!
JSF vs. GWT? JSF und GWT!JSF vs. GWT? JSF und GWT!
JSF vs. GWT? JSF und GWT!
Christian Kaltepoth
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
Christoph Hautzinger
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Yves Hoppe
 
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
SEARCH ONE
 
WordPress- eine Einführung
WordPress- eine EinführungWordPress- eine Einführung
WordPress- eine Einführung
Johannes Fruth
 
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
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
Torsten Landsiedel
 
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
Benjamin Schmid
 
Spass mit Sass
Spass mit SassSpass mit Sass
Spass mit Sass
Heiko Mamerow
 
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
Martin Leyrer
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
Francesco Schwarz
 

Contenu connexe

Tendances

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
 
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
Martin Leyrer
 
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)
André Krämer
 
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
 
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
Benjamin Schmid
 

Tendances (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
 

Similaire à Blank Template für Joomla!

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
Martin Leyrer
 
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
 

Similaire à 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
 

Blank Template für Joomla!

Notes de l'éditeur

  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