Joomla ! 3.1 Templating

What is Joomla! ?

Joomla! & Joomla! 3.1 Templating CMS Course Telerik Software Academy April-May 2013

Evgeni Leshtanski @Leshtanski

Questions Feel free to ask at any time or Tweet your question to #j3template

Lecture Highlights (Plan) 1. Introduction into Joomla! 2. Joomla! 3.1 Templating Timeframe: Three Sessions x 50 minutes Two 15 min. break in between

1

Part 1: Introduction into Joomla! 1.1 The Joomla! Project 1.2 Joomla! Core Features 1.3 Requirements for Joomla! 3.x 1.4 Development Tools 1.5 Joomla! 3.1. Installation: Live Demos Local Web Server Install Joomla! 3.1 Local Install

Joomla! 3.1 Install in a Web Hosting Environment

1.6 JUI and Twitter Bootstrap

1.1 The Joomla! Project

1.1.1. Glimpse of History: Joomla! 1.0, 9/16/ 2005

Winning logo contest submission by Alan Urquhart, Sept. 2005

www.joomla.org

Joomla! Development Strategy Bring People Together!

Joomla! Development Strategy Objectives:

●

Continue to offer a stable and reliable platform for our current and future user base.

● ●

Make innovation available to users and developers on a more timely basis. Make it easy for developers to contribute code to the project at any time.

Major principles:

● ● ● ● ●

Maintain a stable trunk; Predictable, incremental software releases; Strong backward compatibility support; Sound security policy; and Open development process.

1.1.2 Joomla! the Content Management System ● Web-based CMS . Content and data collaboratively shared and created.

● Allows people with or without technical knowledge of coding to have dynamic Web sites that they can easily manage.

● Very high level of extendability to create very complex Web sites and information systems.

Joomla! Release Cycle Each major release supported for 4+ years and includes one-click upgrades. ● 2.x series (1.6 + 1.7): Jan. 2011 - Dec. 2014 ■ v 2.5 January 2012 (LTS) ■ v 2.5.11 April 2013 (STS)

Joomla! Release Cycle ● 3.x series: Sept. 2012 - Dec. 2016 ■ v. 3.1. April 2013: STS ■ v. 3.2. September 2013: STS ■ v. 3.5. March 2014: LTS

Infographic by ThemePartner

1.1.3 Joomla! the Framework

Since Joomla1.5, Jan. 2011 Since July 2011: The Joomla! Platform (11.4), now (May 2012) - 12.1

1.1.4 The Joomlasphere

Joomla! is the People!

Joomla! Forum: 350,000 reg. users, 440,000 topics, approx. 2 million post

Joomla! Community Joomla! User Groups Joomla! Days Joomla! Developer Conferences and Summits Joomla! World Conferences

Joomla! Demo Site Joomla! Extension Directory (JED) Joomla! Resources Directory (JRD)

The Joomla! Project Team Joomla Leadership Team: leaders from Production Working Group and Community Working Group Michael Babker, Brad Baker, Isidro Baquero, Chris Davenport, Mark Dexter, Peter Martin, Olaf Offick, Sander Potjer, Nick Savov, Ron Severdia, Andrea Tarr Public Discussion Group of Joomla! Leadership Team: http://goo.gl/anJEr Public Discussion Group of Production Working Group: http://goo.gl/VoCMZ Public Discussion Group of Community Working Group: http://goo.gl/me7sa

Open Source Matters A not-for-profit formed under United States and New York state law

III.6.1. Mission, Vision & Values Mission

Vision

Our mission is to provide a flexible platform for digital publishing and collaboration.

In our vision, we see: People publishing and collaborating in their communities and around the world

Key Values

Software that is free, secure, and high-quality

Freedom

A community that is enjoyable and rewarding to participate in

Equality Trust

People around the world using their preferred languages

Community

A project that acts autonomously

Collaboration

A project that is socially responsible

Usability

A project dedicated to maintaining the trust of its users

Software License: ● Joomla! software and default templates are copyright 2005-2012 Open Source Matters, Inc. ● Terms of the GNU General Public License - GNU General Public License FAQ

Platinum Global Sponsors

Joomla! Project in Bulgaria: Джумла! България, http://www.joomla-bg.com/ Joomla! Day Bulgaria, http://joomladay.bg/

Learn More about Joomla! Joomla! Developer Network Joomla! Official Documentation The Joomla! Resource Directory™ The Joomla! Community Portal™

Joomla! Press (Official Books)

Joomla! Press (Official Books)

Contribute to Joomla! ○ ○ ○ ○

Answer Questions in the Joomla! Forums Write or Translate a Tutorial or Doc Develop an Extension or Template Test or Add a Comment to an Issue Report ○ Join a Joomla! Working Group (Joomla! Bug Squad ...) ○ Help Out at a Joomla! Event ○ Contribute in Other Ways

Contribute to Joomla! Join Joomla! Bug Squad ...

David Hurley [email protected] Joomla! Community Development Manager

Joomla! Vulnerable Extension List Since 2010: hosted on the docs.joomla.org From May 1, 2013: New subdomain vel.joomla.org

Where next Joomla! Extendable, RESTful, hypermedia web services API

WSWG

Kickstarter Project by Chris Davenport

Extendable, RESTful, hypermedia web services Possibilities that will be opened up: ● Much easier to create client code that accesses data in the CMS ● Services can be hierarchical so you can create new services ● Straightforward to offer users access to your content using a modern hypermedia-based API with only minimal coding ● API key management capabilities ● Hypermedia-based web services can be added by 3party developers to their extensions; new installable services ● Breaking down information silos; getting a step closer to point-and-click EDI (Electronic Data Interchange)

Taptheme.com

1.2 Joomla! Core Features

Joomla! Core Features User Management

Search

Media Manager

Web Link Management

Integrated Help System System Features

Language Manager Banner Management

Content Management

Contact Management

Syndication and Newsfeed Management

Polls

Menu Manager

Web Services (Remote procedure Calls XML / HTTP Blogger) Powerful Extensibility ●

Template Management

Joomla! Extensions Directory

New features of the Joomla! 3 series ● Incorporation of Twitter Bootstrap into a jui media package. ● A new responsive administrator template--Isis-- and interface. ● A new front end template--Protostar-- built using Twitter Bootstrap ● Updated accessible template called Beez3 ● PostgreSQL Driver. You will be able to run Joomla 3.0 sites using the PostgreSQL database. ● PHP Memcached Driver ● Use of JFeed for feed management rather than SimplePie ● Installation of language packages directly from the extension manager ● Guest user group present by default ● Saving blank articles allowed ● New administrator statistics module

New features of the Joomla! 3 series ● Update TinyMCE to version 3.5.6 ● Continued clean up of older unused code, files and database fields and tables and improved standardization of tables. ● Improvements to Smart Search ● Extensive work on code style standardisation and consistency ● Unit testing in the CMS ● Updated system tests in the CMS ● Multilanguage: adding items associations in remaining core components. ● Language Installation tool for the Joomla Installer. ● Items associations in multi-language ● Allow different update packages for different version dev levels

Joomla! Glossary Article

Jdoc statement

Patch

Category

LDAP

SEF URLs

Chrome

Module Positions

SVN

Extensions Component Module Plugin Template Language + Library Package

MVC

Suffixes Module Page

1.3 Requirements for Joomla! 3.x

Requirements for Joomla! 3.x Software PHP (Magic Quotes GPC off)

Recommended

Minimum

5.3.1 +

5.3.1 +

5.1 +

5.1 +

10.50.1600.1+

10.50.1600.1+

8.3.18 +

8.3.18 +

2.x +

2.x +

1.1

1.0

7

7

Supported Databases: MySQL (InnoDB support required) MSSQL PostgreSQL

Supported Web Servers: Apache (with mod_mysql, mod_xml, and mod_zlib) Nginx Microsoft IIS

1.4 Development Tools

1. Local Web Server Bundle: Linux

Windows

Mac OS X

Lamp Bundle

EasyPHP

MAMP & MAMP Pro

XAMPP for Linux

WampServer

XAMPP for Mac OS X

Zend Server Community Ed.

Zend Server Community Ed.

Zend Server Community Ed.

XAMPP for Windows

Mac Port

2. Browsers: Firefox 4+ ; Safari 5+ ; Google Chrome 10+ ; Opera 10+ ; Internet Explorer 8(?/9)+

3. IDE: 2.1. Eclipse, Netbeans, PHPStorm, Zend Studio 2.2. Sublime Text 2 (3) 4. Joomla_CodeSniffer (PHP CodeSniffer) ○ Joomla! Standards Github Repo

5. File/folder difference tool: WinMerge, Meld 6. Adobe Edge Reflow CC New!

1.5 Joomla! 3.1. Installation: Live Demos

Joomla 3.1.1 Stable 26 April 2013

New features of Joomla! 3.1 ● ● ● ● ● ● ● ● ● ● ● ●

Tags Added Added note form field Show logs in debug console Refactor installation to use new application and MVC classes Added pagination in COM_SEARCH component Added triggers on save for com_config JPlugin autoloadLanguage property Added SQL Server subclass for FinderIndexer Media wiki package OpenStreetMap package UNION ALL feature Removed the GeSHi plug-in

Joomla 3.1 is Here with Tags! Joomla 3.1 is Here with Tags!

Joomla 3.1 is Here with Tags!

1.6. Installation of Joomla! 3.1

Live Demo A Local Web Server Install Joomla! 3.1 Local Install

1.6. Installation of Joomla! 3.1 Contd. 2 Live Demo B Joomla! 3.1 Install in a Web Hosting Environment

Joomla! 3 Mobile Ready

1.6 JUI and Twitter Bootstrap

Joomla User Interface (JUI): Joomla! JUI Site: Main Goal JUI Media Package Kyle Ledbetter

Bootstrap 2.3.1 : GetBootstrap.com - Mark Otto, @mdo - Jacob Thornton, @fat Bootstrap 3.0 ○ Early look, RC.GetBootstrap.com ○ Mobile First ○ Mobile Only Layouts: at screen sizes of 767px or less (.col-small-span-*)

Bootstrap Expo: Beautiful and inspiring uses of Bootstrap

2

Don't hack the Joomla! core! Extend and override instead!

Part 2: Joomla! 3.1 Templating 2.1 Our Joomla! 3.1. Template Project 2.2 Joomla! 3.1 Template Creation in Steps 2.3 Fine-Tuning and Creating an Installable Zip Archive

2.1 Our Joomla! 3.1. Template Project

What we have: Bootstrapped static website: HTML5 + CSS3 PSD/fw.PNG + Bootstrap 2.3.1 : GetBootstrap.com

Refreshers: ● HTML5 Element Flowchart in HTML5 Doctor ● CSS3 Refresher in Slideshare ● Adding WAI-ARIA Landmarks to Joomla, PB Web Dev

What we need to do: ● Convert the Bootstrapped static website (HTML5+CSS3, fluid layout + RWD) into a Joomla! 3.1 Template, fluid layout + RWD utilizing the Core Joomla! 3.1 + default Protostar Template ● Install and style the new Joomla! 3.1 Template ● Package the new Joomla! 3.1 Template for delivery

2.2 Joomla! 3.1 Template Creation in Steps

Step One: Assessing (Creating) the Prototype The Bootstrapped static website (HTML5+CSS3, fluid layout + RWD)

Refreshers: ● A Beginner’s Guide to Wireframing, Webdesigntuts+ (part of UX Foundations) ● Twitter Bootstrap GUI & Wireframe Toolbox, Speckyboy.com ● Quick and Easy Interactive Wireframes with Bootstrap, Webdesigntuts+ ● Bootstrap Toolkit for Adobe Fireworks, FireworksToolkits.com

Designing Your Process

Focus 1: Analysing the .PSD / .FW.PNG

Focus 1: Analysing the "castlitestatic" Prototype

Bootstrap 2.3.1 + HTML5 + CSS3 + WAI

Focus 1: Analysing the Wireframes of "castlitestatic" Prototype via Wirify

Focus 2: In search of Module Positions A. The Protostar Template

Focus 2: In search of Module Positions B. YooTheme / Warp6

Focus 2: In search of Module Positions C. RocketTheme / Gantry - 1 Demo.RocketTheme.com

Focus 2: In search of Module Positions C. RocketTheme / Gantry - 2 Demo.RocketTheme.com

Focus 2: In search of Module Positions castlitetemplate mosdulepositions.odt

Focus 3: Supported Devices

Media queries /* Large desktop */ @media (min-width: 1200px) { ... }

/* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phones and down */ @media (max-width: 480px) { ... }

Focus 4: Grid Layout, responsive + fluid Responsive grid of 12 columns adapting to be 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

Fluid grid system: Percents for column widths.

Focus 5: Icons 140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

Step Two: Joomla! 3.1 Template File Structure

The Protostar Template

Step Three: Create a "castlitetemplate" Project (IDE) or Folder Create "index.html" (HTML5): ○ + Google Fonts ○ Fluid layout + Fluid Grid: ○ "custom.css" and link it in "index.html"

mosdulepositions.odt Add folders: css, html, images (c+p from Protostar first) ---> step3_index.html

Step Four: Joomla! "index.php" step4_protostar_index.php + Conversion: "index.html" -> "index.php" step4_index.php

Step Four:

step4_index.php



Jdoc statements

Step Four: jdoc:include

Type

Style

Additional Attributes

head component message modules

none

name

html5

name

table

name

horz

name

html

name

rounded

name

outline

name

Step Four: Helpful Functions

Step Five: Create

Zip an Install package

templateDetails.xml (step5_templateDetails.xml) favicon.ico template_preview.png template_thumbnail.png

castlitetemplate.zip

Step Five: Install castlitetemplate.zip Review module positions and paths

One 3rd-party extensions to be installed: ● Admin Forever plugin

Step Six: "Optional regions" in castlitetemplate Protostar code: lines 168 -162 Additional Code: