I joined the #jCycle #Joomla Challenge

Last week I joined the Joomla #jcycle challenge! It’s a kind of charity for the Joomla project.

Cycling is a great way to raise money for charity. Our season sponsor joins this effort and donates by tradition 1 cent for every km ridden.

If you like Joomla! and cycling, and you want to do something good, here is your chance!

I like #joomla and since Oktober 1th I have to commute from Bad Homburg to Frankfurt. Each ride is about 20km, which means 20 Euro Cents for the Joomla project.

The jCycle challenge happens on Endomondo, a platform to track your rides. Unfortunately I use Strava, so I thought it was not possible to join the challenge. But Radek Suski had an idea:

So I did!

https://tapiriik.com
https://tapiriik.com

This month I contributed 632 km …

Current month
Current month

which means, that the Joomla project will receive 6,32 Euro more. If it’s possible, I take a photo every day and tweet it

And I’m already at place 25 – I’m so proud!

Charts
Charts

Even your are (like me) a little bit late to the party, the challenge lasts until the end of 2016, so join us!

The post I joined the #jCycle #Joomla Challenge appeared first on Hagen Graf.

Don’t just code, solve problems

Joomla! Day Kenya happened this weekend on 17th Sept and I got to learn a lot, both as part of the organizing team and as an attendee listening to what the speakers had to offer. The importance of team work can not be understated when organizing such an event.Human interaction however simple can prove taunting […]

JoomlaDay Kenya 2016, a great

img_1042

Greetings from The Joomla! Community in Kenya. The fourth annual JoomlaDay Kenya hosted by the Joomla Community in collaboration with CMSAfrica was hosted by Strathmore University. @iLabAfrica is a Centre of Excel­lence in ICT innov­a­tion and Devel­op­ment based at Strath­more Uni­ver­sity. It was estab­lished to address the Mil­len­nium Devel­op­ment Goals(MDGs) and to con­trib­ute toward Kenya’s Vis­ion 2030. The research cen­ter is involved in inter­dis­cip­lin­ary research, stu­dents engage­ment, col­lab­or­a­tion with gov­ern­ment, industry and other fund­ing agen­cies.
Since the first in 2012, this conference has rapidly developed into an important forum where Joomla! ethosiasts can meet, have interactions and network with each other; where mattendees can cooparate and learn from tech exparts about the latest processes in technologies to deliever an even more efficient business. In today’s digital world, we download and upload tons of information from and to the internet. We visit millions of websites in our internet lifetime and sometimes, we even want to make one of our own. However, this could prove to be costly and you may not know how to go about it by yourself. This is where an immensely useful product called Joomla! comes into the picture. Put in simple terms, Joomla! is a software for making and updating a website in an easy way.

img_0888
The best part about Joomla! is that it requires no prior programming knowledge. This means that anyone can creat and develop a website in easiest possible manner. This is the massage we have tried to spread in all our Joomla! Events throughout East Africa. We have managed to bring enlightment on what joomla! can do and how the community work something that very few people know about. Among the topics where Joomla! 101, by Shadrack Serem, taking us through the Joomla!3.6 including the latest and greatest features from the developers supporting Joomla!, Creating a joomla component in 30 minutes, this was a practical talk which tusked the attendees to participate, learn and show their results, with two keynotes, Payments in Joomla! and Intergrating voice call API to Joomla!

We take this opportunity to thank our speakers who took their time to participate in this event and share their great knowledge to better others. Its a great sacrifice to make but for the community, it goes along way. In the same spirit, to our sponsors, the people who made this day a success, our host Open Source Matters, @iLabAfrica, CmsAfrica, Netrixs Business systems, NorrNext, Akeeba, Web357 and DJ-Extentions and Joomla Monsters. Your support has always gone a long way and we value your partinerships and hope that they will continue to grow and flourish. Joomla! Day may have ended, but the community is still active, look up for our meet-up, with our upcoming Joomla User Group coming in the early 2017. Its also important to announce that the 2017 CMS AFRICA SUMMIT will be held in Abuja Nigeria. for bookings please visit summit.cmsafrica.org. So see you in Abuja, Nigeria in 2017.

#jdayke16

@susumunyu

joomladay.or.ke


5. Create Content

Back to 4. It’s all about users, permissions, modules and articles

Creating content is hard! Every piece of content is a story. And a story can be good or not that good and thus attracting visitors or bore them. Thousands of books on the subject of writing stories have been published, a lot of people have taught the lore. 
I have a relatively easy task to cover just the technical part 🙂

What is an article in Joomla?

Technically, an article consists of

  • a title (headline) and an alias (in the url)
  • the text (a mixture of text, images, and other media)
  • a category where the article belongs to
  • additional tags to describe the article
  • an author and an alias for the author
  • access permissions
  • a language the article is written in
  • meta data for search engines and other robots

and a lot of options how, where, to whom and when the article is displayed.
 You already wrote an article in the last chapter and this was not complicated. Just a title is necessary, all the other fields have a default value or are optional.

Let’s go through this list 🙂

A Title

It’s a little, but an important part.

  • It needs to be crisp and short to attracts readers and it’s handy for you because the title appear in lists of articles on the website and as lists of articles in the control panel.
  • the title appears as the page title on top of your browser window and it can contain the site name too. You can configure this behaviour in 
System → Global Configuration → Site → SEO settings → Include Site Name in Page Titles
  • it can appear in the URL of that page and it’s up to you how to setup the URL
 System → Global configuration → Site → SEO settings.

The Text

In Joomla, the text of your article contains a part that is displayed in lists (teaser) and the rest of the article. This rest can be structured by page breaks, so that a long text results in 10 pages each with a table of content. But step by step :).

When you create an article you will do this with the help of an editor. Joomla uses a rich text editor (TinyMCE). That means, it is not necessary for you as the author to learn HTML tags. The editor looks like a text processor window on your PC (e.g. Word, LibreOffice) and it is easy to understand the icons (Figure 1).

Figure 1: Rich text editor
Figure 1: Rich text editor

 

If you hover over an icon with your mouse, there appears a tooltip with the description of the function the editor performs when the icon is clicked on

Note:

It is possible to install different editors, for example the Joomla Content Editor and it is also possible not to use any editor. Joomla itself comes with two editors and you can configure the default editor in System → Global Configuration → Site → Default Editor.

The default settings allow your users to choose between the available editors by themselves in their user account. You can disable this feature in Users → Manage → Options → Frontend User Parameters.  

Paste from Word

The worst case of editing happens, when people paste from programs like Microsoft Word. Even if the situation gets better there is still NO REAL WAY to get the same formats on a website that is based on HTML by pasting from a text processor like Microsoft Word that is based on binary formats or “complicated” XML. The editor offers a “Clean up messy code” icon but it will not clean up logical errors or differences in the markup. Please keep that in mind when you talk to your users 🙂

Insert Images

In the third row of the editor window you’ll find a button called images. It offers a dialog to choose existing images from your inbuild Joomla image library and it allows you to add images to this library by uploading them.

  • You can manage your library under Content → Media
  • You can drag images in the content window of the editor.
  • Joomla! will NOT resize your images, so be careful with big photos!
    The best solution: your images have exactly the size in pixel you want to have them on your site. There are several extensions available for solving the resize issue and the Twitter Bootstrap framework that is used in Joomla 3.x, is helpful for responsive images.

After you have inserted an image from the library, you can configure (add attributes to) that image by clicking the image icon on top of the rich text editor (Figure 2).

Figure 2: Using the rich text editor
Figure 2: Using the rich text editor

References to other articles

The button Article in the third row of the editor window allows to link from an article to another article which is quite useful. This feature requires the Editor group permission.

Read more

Articles will appear in lists and on an article details page. On lists, the text should be limited to avoid confusion. With the help of the Read More button you limit the article text. Set the cursor in your text where the Read More break should appear and click the Read More button (Figure 3).

Figure 3: Read More link
Figure 3: Read More link

Embed a YouTube video

This is not only about YouTube videos but it is a good example for text filters. If you try to embed a YouTube video with the typical code

<iframe width="420" height="315" src="https://www.youtube-nocookie.com/embed/UF8uR6Z6KLc" frameborder="0" allowfullscreen></iframe>

you notice that it is filtered by the editor and by Joomla. This is not a bug! It’s a feature 🙂


For security reasons

Joomla uses so-called text filters (System → Global Configuration → Text Filters) to filter the following tags: ‘applet’, ‘body’, ‘bgsound’, ‘base’, ‘basefont’, ’embed’, ‘frame’, ‘frameset’, ‘head’, ‘html’, ‘id’, ‘iframe’, ‘ilayer’, ‘layer’, ‘link’, ‘meta’, ‘name’, ‘object’, ‘script’, ‘style’, ‘title’, ‘xml’.

Unfortunately, we need to insert an <iframe> tag to embed videos from YouTube (and several other services).

So, how can the problem be solved?

One solution could be to trust your authors and create a White List (System → Global Configuration → Text Filters) for the authors, editors and publishers group (Figure 4) and then tell TinyMCE the <iframe> is not evil anymore (Extensions → Plug-in Manager → Editor-TinyMCE → Edit → Plugin → Prohibited Elements) by deleting the word iframe in the prohibited elements field.

Figure 4: White List for several user groups
Figure 4: White List for several user groups

 

After you have changed these filter mechanisms, it is possible to copy and paste the embed code into your article. Keep in mind that you need to switch the editor to the HTML view by clicking the HTML source code icon (<>). Afterwards, a popup window with the HTML code of the article appears. Now paste the embed code where the video should appear (Figure 5).

Figure 5: Inserting the iframe code into the article
Figure 5: Inserting the iframe code into the article

 

Click the Ok button and you already can see the video inside the editor window. After saving the article the video will appear on your website (Figure 6).

Figure 6: Article with iframe code
Figure 6: Article with iframe code

 

Now you can embed code from several platforms like Twitter, Facebook, Instagram and Flickr.

Using macros in a text

It is possible to use so called macros in your text. A macro is an expression or command that is replaced with something different (e.g the embed code of your YouTube video).
Theoretically, we could write in our article text (not in the HTML) something like this

and some magic could replace this with the appropriate embed code

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/rX372ZwXOEM [105]” frameborder=”0″ allowfullscreen></iframe>

The only problem is that this transformation is not a part of the Joomla core package. If you want to use macros, you need to install additional extensions, mostly so called plug ins.

Content in a module?

When we created an article, we used the content component of Joomla. Another possibility to create content can be a module.
A module is a content element that can be positioned on your website. A menu, for example, needs a module to be displayed. The Login box is also a module. You can create as many modules with predefined functions as you need and position them in the predefined area in the template. Joomla comes with 24 pre-installed modules. You can see them with descriptions under Extensions → Modules → New (Figure 7).

Figure 7: Available Modules
Figure 7: Available Modules

 

It is possible to create a module that contains HTML text like an article (Custom module). And it is also possible to upload e.g. a background image for each module and to publish the module time based. It is not intended that custom HTML content in modules is created by “normal” authors. Content creation in modules is more a “Manager” or “Administrator” task. Try out the Custom HTML module. Create one, add some content and choose a position (Figure 8).

Figure 8: Custom HTML module in control panel
Figure 8: Custom HTML module in control panel

 

You can use the rich text editor and all the features that are available to write, format and enhance article text. You can even configure on which page the module should appear (tab Menu Assignment) and when it should appear (time based publishing). 
After saving, your custom HTML module appears on your site (Figure 9).

Figure 9: Custom HTML module on website
Figure 9: Custom HTML module on website

Figure 9: Custom HTML module on website

If more than one module is located at the same position it is necessary to bring them into the desired order. You have to choose a filter and click the filter icons once. After that, just drag the modules in the module manager to the desired place (Figure 10).

Figure 10: Reordering of modules
Figure 10: Reordering of modules

 

 

The post 5. Create Content appeared first on Hagen Graf.

Joomla Day Kenya is here.

SAMSUNG CAMERA PICTURES
Hagen Graf has for a long time written Joomla Books and still participates in Joomla and Tech. He lives in Fitou, together with his wife Christine.

Nairobi is a tech hub, not like the big stuff we see in the US and UK, but its starting and we are on our way there. Big innovations have been born here, and had a great impact in the world and the society. Tech thrives, commands business, improves business. PAYING for a taxi ride using your mobile phone is easier in Nairobi than it is in New York, thanks to Kenya’s world-leading mobile-money system, M-PESA. Launched in 2007 by Safaricom, the country’s largest mobile-network operator, it is now used by over 17m Kenyans, equivalent to more than two-thirds of the adult population; around 25% of the country’s gross national product flows through it. M-PESA lets people transfer cash using their phones, and is by far the most successful scheme of its type on earth. “Why does Kenya lead the world in mobile money”? This was a question in The Economist.

Nairobi, the capital city of Kenya, has transformed into a technology epicentre. An agile mobile banking system has created new market opportunities for digital entrepreneurs. 4G internet connections became more and more affordable and still are mobile payment services are booming up and the promising startup scene and ecosystem constantly is reinventing their offerings. Silicon Savannah has positioned itself as an epicentre of startup weekends, innovations meet ups, accelerators, incubator events and investors get together. True to that form, Nairobi has one of East Africa’s highest concentrations of US dollar millionaires accounting for 8400 in number as of 2016.

Kenya government at the forefront of technology development – investors are being lured to invest in Nairobi, and are heeding the call positively so and the city has positioned itself as an investor friendly city by being open to aid agencies, development funds and foreign NGO’s. The birth of M-Pesa revolution by Vodafone in 2003 and subsequent launch by Safaricom in 2007. This revolution inspired many to be tech entrepreneurs and proactively launch startups. The launch of iHub in 2010 – as an open space for startups, positioned Kenya’s capital, Nairobi as the future of startups, technology and innovation. Since then, we have seen the growth in shared spaces around the city.

@iLabAfrica is a Centre of Excel­lence in ICT innov­a­tion and Devel­op­ment based at Strath­more Uni­ver­sity. It was estab­lished to address the Mil­len­nium Devel­op­ment Goals(MDGs) and to con­trib­ute toward Kenya’s Vis­ion 2030. The research cen­ter is involved in inter­dis­cip­lin­ary research, stu­dents engage­ment, col­lab­or­a­tion with gov­ern­ment, industry and other fund­ing agen­cies. With a cli­ent list that includes some of the largest soft­ware engin­eer­ing and tele­com­mu­nic­a­tions com­pan­ies in the world, you can rest assured that your product devel­op­ment endeavors are in good hands with @iLabA­frica Whether you’re look­ing to aug­ment your exist­ing engineering team, or com­pletely out­source your soft­ware engin­eer­ing, you’ll find that iLabA­frica provides cost-effective solu­tions, cus­tom tailored to meet the needs of your business.

This will be the home of our fourth edition of Joomla Day Kenya, #jdayke16 which will be on 17th September 2016. The Secretariat for JDKE is proud to be working with @iLabafrica in making this event a success. Jommla day events brings together tech enthusiasts, developers, programmers and designers to a table of networking, interaction and learning. With great support from OSM, joomla day events have thrived and increased in cities all over the world. We welcome you to this great event, and we would like to thank our great sponsors without them it will not be possible to have this event. Open source Matters for great leadership and support for our Joomla Day Event, Akeeba Backup, Web357, NorrNext and Joomlashacks. @iLabafrica our host and venue sponsors for their great support. For those out there who wish to partner with us, our door is still open for you.

See you at the #jdayke16


4. It’s all about users, permissions, modules and articles

Back to 3. Design, Layout, Colors

I know, we still have no content on our site but before we create it, let’s have a look on the user accounts of our new Joomla website.
When you installed Joomla, you created the Super Administrator account. This user is allowed to do anything. It is nice to be that user but it is dangerous too. You will probably have more than one user account on your website, e.g. authors who write articles.

To get more used to these topics, let’s build a platform for authors where they can post articles and upload images without the need to enter Joomla’s control panel. Follow the example and you’ll learn a lot about Joomla 🙂

About users, roles and permissions

Users are in general able to login on the frontend and/or the control panel just depending on their role permissions. A user account has to be a member of a user group. Instead of assigning access permissions to each user, they are assigned to a group. The individual user is then assigned to one or more groups. Imagine you have 10,000 users in four different groups. It’s very easy for the administrator to change the permissions for each of the groups. Without groups, you would have to change every user account manually. However, when using groups, you only have to change permissions once!

Joomla comes with predefined groups like author and publisher which are easy to understand. An author is able to create/write something, a publisher has the additional permission to publish content.

  • The predefined frontend user groups are: visitors, registered users, authors, editors, publishers.
  • The predefined control panel user groups are: manager, administrator, super administrator

Example: A website where authors can post articles

This is a very simple workflow but it covers some possibilities that exist in Joomla. I assume that you have a “naked” Joomla without sample data and you have a super administrator user account.

The desirable scenario

  • Admin user in control panel:

    – activates the admin notification when someone creates a new user account

    – creates a user menu for registered users with a link to create an article
  • Visitor on website:

    – registers as a new user
  • Admin user in control panel:
    – 
receives a notification and assigns the user to the authors group
  • Author user on website:

    – is able to create an article but is not allowed to publish it
  • Admin user in control panel:
    
- receives a notification that there is new content available

    – publishes the article on the frontpage

Parameter and user menu

We have to set a few switches in the user options. Go to Users → Manage → Options and activate Allow User Registration and Notification Mail to Administrators (Figure 1).

Figure 1: Notification Mail to Administrators
Figure 1: Notification Mail to Administrators

 

Then we need a menu for logged in Users. Go to Menus → Manage → Create new menu and create one:

  • Title: User
  • Menu Type: user
  • Description: A menu for a user with useful links

Save and close it. You have now created a kind of menu container. What’s missing is the links inside the menu container and a linked module that displays the new menu at a certain position in the template.
 To create and link the module, click on the link Add a module for this menu type (Figure 2).

Figure 2: Add a module
Figure 2: Add a module

In the module form you have to add a title (User Menu), the position (Right – Position-7 in the Protostar template), the access permission (registered users). Don’t forget to save & close it (Figure 3).

Figure 3: Creating the user menu module
Figure 3: Creating the user menu module

 

Now we need the “Create article” link in our menu that should be shown to authors. Go to Menus → User → Add New Menu Item (Figure 4).

Figure 4: Creating a link in the user menu
Figure 4: Creating a link in the user menu

 

In the following form you have to enter the name/description of the link (Menu Item Title), select a Menu Item Type (Figure 5) and restrict the access to registered. Each Joomla component can provide Menu Item Types. Our type (create article) is provided by the content component which is a part of Joomla core.


Figure 5: Select Menu Item Type
Figure 5: Select Menu Item Type

 

After you saved and closed the dialog a new menu item should be displayed in the list (Figure 6).

Figure 6: User Menu with the new menu item
Figure 6: User Menu with the new menu item

Test your work! Login on the frontend with your super administrator account. After the login, our new user menu with the create link appears (Figure 7).

Figure 7: User Menu after Login
Figure 7: User Menu after Login

 

Please log out after the test.

Registration as a new user

Now we create a new user account. Please access the website as any other visitor and click the Create an account link. Fill out the form and click the Register button (Figure 8).

Figure 8: Registration form
Figure 8: Registration form

 

If your server stack allows sending emails, a notification email will be send to the email address of the super administrator account.

Joomla offers a CAPTCHA to prevent spammers. To use it, activate the CAPTCHA plugin under Extensions → Plugins and select it in the options of the User Manager where you can configure the general behaviour of the login process too.

Assignment of the new user to the authors group

Log in with your Administrator account on the control panel, access Users → Users and click on the name of the new user (Hagen Graf). Check the Author group in the Assigned User Groups tab (Figure 9).

Figure 9: Assignment of a group to a user
Figure 9: Assignment of a group to a user

Depending on your environment it might be necessary to enable and activate the new user account. Just click on the red icons to do so (Figure 10).

 

Figure 10: Activate and enable user
Figure 10: Activate and enable user

Now we have a new author on our website.

The new author creates an article

Now switch your identity to the one of the new author, log in with your new user account on the website and click the create article link. Just add a title and a few words and click save (Figure 11).

Figure 11: Create an article
Figure 11: Create an article

 

The article is saved and submitted but the user (you) cannot see it, because it is not published. I configured this workflow intentionally as in some cases it is desired to have another person to edit the created content and then publish it.

Of course, it is also possible to skip that, add the user to the group Publisher and then the article would be published immediately.

The admin publishes the article on the frontpage

Joomla comes with a messaging system and this system creates a message when new content was created by a user. Depending on your settings (Components → Messaging → Options) the admin receives that message by email or via the screen. 
The admin has to go to Content → Article Manager and publish the new article. If the article should appear on the frontpage, click on the featured icon (Figure 12, Figure 13).

Figure 12: Publish an Article
Figure 12: Publish an Article

 

Figure 12: Featured Article
Figure 12: Featured Article

Tweaking the process

As we already noticed while following this example, many topics are covered and the configuration is easily done depending on your needs. There is a huge amount of permissions, options and settings to discover.
I’ll provide a few examples in the following chapters.

Hotel Alimara

We were all sitting on a round table, with our laptops open, Radek looked down on his screen, his fingers hung over the edge of his keyboard as if his wrists were broken. I couldn’t blame him, for days he had worked hard to make sure that the event JandBeyond was a success. His brilliance reflected this independence as he regularly found his way through challenges with grace matched by only a handful of engineers in the world. Radek is Polish, but his wife Sigrid, while having dinner narrated to me how they met. He was working for her, and they fell in love in the process……..and it was a good thing she says. They got married in Poland, but he, Radek had to wait three months to be able to travel to Germany and be with his wife, then, there was no European Union. They now live and work in Germany, and they keep bees.

 

We were five of us hard at work in the conference hall of the Hotel Alimara in Barcelona, Spain. Our team since I joined had been working well, and this was the first time we would be all of us in one room. We are called Joomla Event Team, one of many teams working with Joomla.org. This regular website where millions of websites are born and it’s among the most trafficked website on earth. Radek as now you know him is our team leader, but he is also a member of other teams including the Joomla Event Travel (JET) a program he pioneered and is now very proud of. His passion for Joomla is evident, every morning he would display his coffee on a table that in inhabited by everything Joomla, and the mug would be Joomla too. At least that’s how I came to know him.

 

We are all developers, Sigrid who works with her husband Radek in Germany, keeps us alive, she organizes our meetings and work schedules. Rowan, the lady with a big heart working from her London apartment with a great view of the London city-none like her in London, Carlos, the polite but strict Spanish guy who also loves running, through his company working on different successful project and then me, the guy who cycles daily in Nairobi Kenya doing design and enterprise consultancy. But all our work in Joomla was invisible, hidden inside the glowing screens of our laptops. What no one could possibly know is at the click of a button from any of our web browser, we would launch features that would instantly have an impact on millions of people around the world, yet to the person sitting near me, for all they care, I was playing solitaire. Rowan once told me-and I say this with a lot of love, that it took years for her mother to understand what it is she does, as far as she was concerned, her daughter stirred at a computer screen, like somebody who needs help.

 

The most amazing thing about our digital age is that the person next to you in a Starbucks might just be hacking into a Swiss bank or launching multiwarhead nuclear missiles continents away. Or maybe he’s just on Facebook. You can’t tell the difference unless you’re nosy enough to peek over his shoulder. Hidden behind our ordinary appearance were unusual facts. Although we were in the same team, our sitting together was a rare occurrence. Most of the time worked online. This meeting in Barcelona is the first we have all worked in the same room, but on a daily basis we are working in different countries and continents.

 

The very idea of working remotely seems strange to most people until they consider how much time at traditional workplace is spent working purely through computers. If 50 percent of your interaction with coworkers is online, perhaps through e-mail and web browsers, you’re not far from what Joomla.org does. The difference is that work at Joomla.org is done primarily, often entirely, online, and probably most important by a team of volunteers. Some people, most people, work together for months without even being on the same continent. Teams can organize to meet during world events, to recharge the intangibles that technology can’t capture, like sharing hii-fives with a bottle of beer. Which explains our trip in Barcelona.

 

Here is what you don’t expect to do on your first meeting, Budget and Budget cut, for the event team. Most people doubt that online meetings work, but they somehow overlook that most in-person meetings don’t work either. Being online does mean everyone might be distracted, but plenty of meeting today are filled with people with their laptops open, messaging each other about how bored they are.  My theory is if what is being discussed is important, people will pay attention and in our meeting, Budget seemed to be the only topic of discussion and after that, we talked about other things, other personal things.

 

Later that day we all took seats at the bar, enjoying the conversation and some drinks. Many people know my name, but its only today that they can put a face on the name. When we are working on Glip or on email, you don’t see people’s faces. During our meetings on Hangout, most people don’t show their faces too. It’s difficult to know how they have changed or what color of hat they are wearing. But this kind of meetings allow you to answer some of the most disturbing questions on how your team mates look.

 

When you tell your neighbor that you have a Job, then spent the rest of the day, week, months, or year indoors, it’s difficult for them to believe you. And that’s just how internet has changed the way we work. For the Joomla Event Team, office was Hotel Alimara, so was home. And when we are in our different continents, we still have our office open on Glip, our tasks remain the tickets we solve-a ticket is when somebody sends a request, like a problem. Our boardroom is Hangout and skype and we live and breathe GitHub. With the hundreds of volunteers involved in Joomla community, the designers, programmers, engineers, translators, the people who sit behind their computers and launch applications that impact millions of users in the world.

 

The biggest consumers of coffee, this for them is where their work is, their heart is and their commitment is. It’s important to say that for me, Joomla has been a home, a wonderful place to work, network, make friends, interact and create strong bond of friendship. And when I look at people in action, all under the leadership of Sarah Watz, the President of OSM the future has never been brighter.


3. Design, Layout, Colors

Back to: 2. A fresh Joomla Installation

The template is one of the most important pieces of a website. It provides the appearance, the design. The combination with relevant content motivates new visitors to stay on your site and explore. Regular visitors and users appreciate being on a site with a beautiful and useful design. Think of other products, for instance. A car needs a good engine and tires but one of the most important reasons for buying one is often the design.

Even if the design is not the main reason, it is often a trigger to contemplate the idea of purchasing and may cause a buyer to consider more tangible reasons. If the design is well-made, people expect the rest to be well-made, too (Figure 1, Figure 2)!

Figure 1: Pontiac Aztek (2005) https://en.wikipedia.org/wiki/Pontiac_Aztek
Figure 1: Pontiac Aztek (2005) https://en.wikipedia.org/wiki/Pontiac_Aztek
Figure 2: Fiat 500 (2007) https://en.wikipedia.org/wiki/Fiat_500_%282007%29
Figure 2: Fiat 500 (2007) https://en.wikipedia.org/wiki/Fiat_500_%282007%29

Both of these cars are made for different target groups and they come of course from different car makers in different countries. They are just an an example of different approaches in design.

A few definitions related to the design of your website

I just want to clarify a few terms to sensitize your thinking.

What is design?

  • The noun design stands for a plan or drawing which shows the function and the lookout of an object, to accomplish particular goals in a particular environment and to satisfy a set of requirements.
  • The verb “to design”stands for creating a design, in an environment (where the designer operates).

The term design can be used in

  • art (“almost instinctive”, “built-in”, “natural”, and part of “our sense of ‘rightness’),
  • engineering (product design of a new car)
  • production (planning and executing)
  • processes (business process modeling)

What is color?

Color is the visual perceptual property corresponding in humans to the categories called red, green, blue, and others. Individual colors have a variety of cultural associations such as national colors. There is great diversity in the use of colors and their associations between cultures and even within the same culture in different time periods.
 HTML colors and CSS colors can have 16 million different values. The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256).

Example:

BLACK = color HEX #000000 = color RGB rgb(0,0,0)

Several online tools like the one in (Figure 3) can help you to find the right colors for your website project .

Figure 3: Popular Color Combinations
Figure 3: Popular Color Combinations

Figure 3: Popular Color Combinations – http://www.colorcombos.com/popular-color-combinations

What is page layout?

Page layout is the part of “graphic” design that deals in the arrangement and style treatment of elements (content) on a page.
To speak in Joomla terms, it is the arrangement of Joomla modules and the components on predefined templates positions.

Templates

A template involves repeated elements visible to the visitors. Using a template to lay out elements usually involves less graphic design skill than that which was required to design the template. Templates are used for minimal modification of background elements and frequent modification (or swapping) of foreground content. Joomla! come with two site- and two administrator templates.

User Interface Design (UI) / User Experience Design (UX)

“User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing the user experience.” https://en.wikipedia.org/wiki/User_interface_design

“User Experience Design (UX) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.” https://en.wikipedia.org/wiki/User_experience_design

The connection between both types of design is fluent. A simple but quite good explanation is based on Ketchup bottles. The UI part focusses on the interface of the bottle, the UX part of the experience in the moment of engagement (Figure 4).

Figure 4: UI and UX https://twitter.com/markfidelman/status/651774238169272320
Figure 4: UI and UX https://twitter.com/markfidelman/status/651774238169272320

Web design

Web design is somewhat like a handcraft and a broad term covering many different skills and disciplines that are used in the production and maintenance of websites.
 Possessing skills in techniques like HTML, CSS, JavaScript, PHP, image editing, UI, UX and many others is imperative. Because it’s nearly impossible today to start from scratch, even the Joomla! default template Protostar uses the CSS/JavaScript Framework Bootstrap as a solid foundation.

Joomla! is only one more tool in the toolbox of a web designer.

A good Joomla template is not only about colors and graphics. The shape and positioning of the content is just as important. The website has to be user-friendly and reliable. Exactly this challenge reminds me of the two cars again.

Web design is still a young profession and it is starting to become an industry.

A web designer often has to deal with low bandwidth, incompatible browsers, inexperienced content editors and other people involved in the process of creating a ‘good’ website.

The creation of a Joomla! website is often a process, in which everyone involved learns a lot.

Good web design is hard work and everyone has to start somewhere!

After having your site up in the language you prefer, most people start tweaking the colors and want to upload e.g. a new logo, even if there is no content so far. Joomla comes with preinstalled templates and so called template styles. A template style is a set of options (color, logo, layout) for a template. The configuration possibilities are depending on the template. Some template have a huge variety of settings and some are quite limited.
 It is possible to create as many styles as you want and assign them to different pages of your website.

Structure

In Joomla a single page is generated by the HTML output of one component, several modules and the template. Each page is accessible via a unique URL. Take the front page as an example. The content component produces the HTML output for the articles in the middle. This screenshot is based on the Joomla Beez Template (Figure 5). The blocks next to the articles are different modules. You can combine the HTML output from one component with the HTML output of any number of modules. Existing modules can also be reused on other pages.

Figure 5: Joomla! front page
Figure 5: Joomla! front page

Positions

You must know, of course, at which point you can assign modules at all. For this purpose, each template provides so-called positions. In order to see these positions you have to enable the Preview Module Positions switch (Extensions → Template → Options). After that, you can access your website by using the parameter tp=1 (http://localhost/index.php?tp=1) or click the Preview link in Extensions → Templates (Figure 6).

Figure 6: Template Manager - Site Templates
Figure 6: Template Manager – Site Templates

You’ll see the emphasized module positions with their names (Figure 7).

Figure 7: Module positions - Protostar template
Figure 7: Module positions – Protostar template

In Extensions → Modules you can assign one of these positions to each module. If you need the module at different positions, you may also copy it.

Core Templates

To make things easier for you, Joomla! core comes with two site templates and two administrator templates. You can see a preview in Extensions → Templates → Tab Templates. You can filter between Site and Administrator templates by choosing the location filter (Figure 6 and Figure 8).

Figure 8: Templates - Administrator Templates
Figure 8: Templates – Administrator Templates

Styles

Styles offers the possibility to create and use different versions of one template. This is useful if you want to have different templates styles on different pages. A template has a minimum of one style. In this style, configurations can be made depending on the template, such as changing the colors or uploading the header logo. You may set the default style for your site in Extensions → Templates → Styles.

Example: An individual Style

Let’s create an individual style for our website:

  • Name: cocoate
  • Template Colour: #f88638
  • Fluid Layout

You can create additional styles by duplicating an existing style. For this example I duplicate the existing protostar style (Figure 9).

Figure 9 - Duplicate a style
Figure 9 – Duplicate a style

A new style appears, the name is protostar – Default (2). We’ll change the name in the next steps. Set it as the default style by clicking the star icon (Figure 10).

Figure 10 - Configuring a template style
Figure 10 – Configuring a template style

Check it and click the Edit Button. Enter the name for the style. In the Advanced tab you can choose colors, upload a logo and a few more parameters (Figure 12, Figure 13)

Figure 12 - Options tab - Style
Figure 12 – Options tab – Style
Figure 13 - Uploading a logo
Figure 13 – Uploading a logo

Each style can be assigned to a menu item (Menus asigment). If you would like a green background on your site when people click on menu item A, for example, and a blue background when they click on menu item B, you can assign the corresponding styles. In my case I have only one menu item and I already marked this style as default style, so it’s not necessary to assign it to a menu item

After saving the style, the website looks different (Figure 14) and because the Protostar template is fully responsive, the website is shown perfectly on a mobile device too (Figure 15).

Figure 14 - The website on a desktop PC
Figure 14 – The website on a desktop PC
Figure 15 - The website on a mobile device
Figure 15 – The website on a mobile device

Create your own template and customize it

A template in Joomla is the base of a style and consists of various files. It’s possible to edit the files of a template online.

BUT! You should NEVER change the source code of a core template. The reason is very simple. Your changed code will be overridden by the next Joomla! update!

It is possible too to copy an existing template, so let’s do that first.

Copy the Protostar template in Extensions → Templates → Protostar Details and Files by clicking the Copy Template button. Give your individual template it a name. I call mine “MyTemplate” (Figure 16).

Figure 16: Edit Template files online
Figure 16: Edit Template files online

Beside the new template Joomla creates a new template style too (have a look). It is possible now to work on the new template. You are able to create, delete and edit files (Figure 17).

Figure 17: Customize your template
Figure 17: Customize your template

It’s of course possible to edit the files in an external editor too.
 The site templates are located in the folder /templates. Each template has it’s own folder. There is now a mytemplate folder too. Under the /templates/systems folder you’ll find the template files to edit the Offline and the Error page templates.
 The admin templates are located in the folder /administrator/templates.

Template overrides

Overrides are a possibility to change the markup of an extension inside the template. The interesting point is, that your individual template is able to do that. Your template can even rewrite the output of third party extensions. A common use case is an alternative layout for an article in Joomla!.

In the template manager it is possible to create these overrides too.

Conclusion

There are by definition endless possibilities to design something creative. Joomla give you everything you need to build something amazing and hopefully you start to get more curious.

1. What is Joomla?

As promised last week (Iron Blogger & Joomla) I’ll start to write more about Joomla! The next articles are the chapters of the book I wrote in January 2016 for the upcoming Version 3.5.

Why should I get in contact with Joomla! and what is it all about.

Joomla! is a free system for creating websites. It is an open source project, which, like most open source projects, is constantly in motion. It has been extremely successful for ten years now and is popular with millions of users worldwide. It is easy to install, easy to manage, easy to enhance and very reliable. More and more people around the globe are able to make a living by using  Joomla.

History

The word Joomla! is a derivative of the word Jumla from the African language Swahili and means “all together”. The project Joomla! is the result of a heated discussion between the Mambo Foundation, which was founded in August 2005, and its then-development team. Joomla! is a development of the successful system Mambo. Today Joomla! is used all over the world to power websites of all shapes and sizes. The Joomla! team has organised and reorganised itself throughout the last 10 years to better meet the user demands.

Joomla! Version Strategy

The version strategy of Joomla! changed over the years. Today Joomla! versions numbers are spared by dots: [major].[minor].[patch]. For example, Joomla! 3.5.0 has a major number of 3, a minor number of 5 and a patch number of 0.

  • Major release (3):
    A release which increments the major number has a predictable end of life date of two years. After each minor version the two year phase starts again. A major release indicates a break in backward compatibility.
  • Minor release (5).
    A release which increments minor number resets the two years lifetime of the major release and indicates the addition of new features or a significant change to existing features.
  • Patch release (0):
    A release which increments the patch number has no influence on the end of life date and indicates that bugs have been fixed.

The complete changes in the Joomla! 3.x series can be seen at the projects website

The smart way of Joomla

The Joomla! Project is different from other projects like Drupal or WordPress. The Joomla! project is not backed a company. The only entity that serves the financial and legal interests of the Joomla! project is Open Source Matters, a not-for-profit organisation.

It is possible to build nearly every website you can imagine using Joomla! on your own with your own knowledge spending nothing but your time, but it’s possible too to download extensions like shopping carts to build your desired website in a much shorter time. The existence of this sustainable, flexible and very diverse network of service providers based on a free and open source foundation is unique and an opportunity to every person in the world to use Joomla! as a consumer and/or a producer.

Thousands of companies around the world are developing extensions for Joomla! which you can download in a kind of app store, the Joomla! Extensions Directory. There are free and paid extensions.

Additionally the use of the Joomla! extension directory is free of charge, so the Joomla! project is the base of a vibrant community of consumers and producers of smart software.

This mindset leads to an interesting community of people, involved in the project and who are working somehow together on the project. It is always possible to contribute to the project in the way you are able and willing to.

Websites made with Joomla

All kinds of dynamic websites can be created with Joomla. These websites consists of web pages containing content such as text, images, video and audio. The pages changes or customises themselves frequently and automatically, based on certain criteria. Take the front page as an example. Usually it displays the newest articles automatically on top.
As all the sites in the world wide web are based on the same principles websites can be roughly divided in

Weblogs

A blog is a discussion or informational site consisting of articles (posts, blog entries). The most recent articles appears first.

This is an example from Brasil (Figure 1)

Figure 1: blogdopaz.com.br
Figure 1: blogdopaz.com.br

The Eiffel Tower

The Eiffel Tower is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. Today they are using Joomla! (Figure 2).

Figure 2: www.toureiffel.paris
Figure 2: www.toureiffel.paris

Brochure websites

A brochure website include information about a company and its products and services through text, photos, animations, audio/video and interactive menus and navigation (Figure 3)

Figure 3: solesolutions.no
Figure 3: solesolutions.no

Electronic commerce sites

A site offering goods and services for online sale and enabling online transactions for such sales (Figure 4).

Figure 5: lola-barcelona.com
Figure4: lola-barcelona.com

Gallery websites

A website designed specifically for use as a Gallery, these may be an art gallery or photo gallery and of commercial or noncommercial nature (Figure 5).

Figure 6: www.mb-photography.com
Figure 5: www.mb-photography.com

Government sites

More than 3,000 government websites around the world are built with Joomla! (Figure 6).

Figure 7: joomlagov.info
Figure 6: joomlagov.info

News sites

Similar to an information site, but dedicated to dispensing news, politics, and commentary (Figure 7).

Figure 7: magazine.joomla.org
Figure 7: magazine.joomla.org

Personal websites

Websites about an individual or a small group that contains information or any content that the individual wishes to include (Figure 8).

Figure 8: seanoshea.com.au
Figure 8: seanoshea.com.au

Cars

Peugeot is a French cars brand, part of PSA Peugeot Citroën … and they are using Joomla! (Figure 9).

Figure 9: peugeot.com
Figure 9: peugeot.com

1,000,000,000 websites

Did you ever ask yourself for the total number of Websites? There are a lot, but nobody knows the exact answer to that question.

As you may have noticed, most of the example sites are not the big fishes in the world wide web but they fulfil the needs of their creators and their clients. This does not mean, that Joomla is only useful for smaller websites, it just means that most of the websites are made with limited resources on time and budget and for that reason people often build them with open source systems like Joomla, WordPress and Drupal.
 Bigger websites like Facebook, Flickr, YouTube, Google, Apple, or Microsoft are usually not using one open source content management system for their websites. These companies usually have thousands of developers that create often hundred of websites by selecting and combining all the ideas and solutions available on the market. It is usually not about the technique, it’s more about business models and ideas.

Amateurs vs. Professionals

The above listed websites are created by people that I want to divide in amateurs and professionals.

  • Amateurs are trying to get around. They usually do not want to know one’s stuff, they are happy if succeeded.
  • Professionals try to get to the ground of what they are doing to be able to provide solutions which can be optimised over time. They try to transfer knowledge to strengthen others and build their business around the topic.

For Joomla it doesn’t matter whether you are an amateur or a professional. Both can deal with Joomla and often amateurs become professionals over time and professionals start to get more involved to make Joomla CMS and Framework better and better.
 Time for the first and the last advice in this book!

“Ignore people talking about what you have to do. Focus on moving toward what you like to do instead.”

What are the common parts in all these websites?

Even if the listed example websites are all very different, they have a few things in common:

  • they are displaying content (text, images, video, audio)
  • they have individual designs, layouts and colours. Individual doesn’t mean perfect or tasteful or artistic. It just means “individual” 🙂
  • visitors can interact in some ways with the site. Sometimes they have to create a user account in advance
  • the common static words are available in different languages, sometimes the content too.

Joomla is the glue

All these websites are based on the ideas of their creators and the almost endless possibilities of the Joomla Content Management System. In this book, I want to cover the common parts of all these websites and some examples of paid and free services to enhance the Joomla core distribution. You’ll be able to create a quite nice looking website on your own after you have read the next chapters.

And it’s up to you, whether you do it in the amateur or in the professional way 🙂


Next: 2. A fresh Joomla Installation

Get The Jab

Ladies and Gentlemen. Welcome to JandBeyong. If I could offer you only one tip to a better life, JAB would be it, the long term benefits of JAB has been proved by Joomla scientists, whereas the rest of my advice, has no basis more reliable than my own meandering experience.

Robert Deutz the organizer for Jand Beyong, in his forward says “JAB is fun-and Iam not talking about the JOSCARS, JFACTOR or the time at the bar”. He should know better, am sure he does. The theme this year was; A FAMILY GATHERING. For sure you all know what happens in family gatherings. So you all see what am talking about. I will despense this advice now.

Enjoy the power and beauty of Joomlers, well never mind……….you will not understand the power and beauty of Joomlers until it has faded, that is if it will fade. But trust me….in twenty years you’ll look back at photos of yourself and recall in a way you can’t grasp now how much possibility lay before you and how fabulous you really looked. You are not as lonely as you thought.

Fly, Not like a bird but in an aeroplane. Most JAB event are a flight away, and when I say a flight away I mean, you might be on the train or a bus or something…. but to be honest, I havent met anyone who arrived at JAB in a bicycle, but in a minute or two, the hotel will be full of people. So if you are scared of flying, atleast do one thing that scares you.

Floss, dont waste your time on Jealousy, sometimes you are at JAB, sometimes you are not, so have a good camera, a good phone and if possible a selfie stick and have a good time. Take adverntage of crowds, thats where the action is always at. Take pictures at the lobby with other Joomlers and post them on your social media and forget that you have problems-if you succed doing this, tell me how. And when you fill you have something to tell the world, blog.

Run, Join the Jrunners at the hotel lobby at 7am, you will meet some cool people who love to do what you love to do. You will run to the streets, then decide to run to the hill, to Tibidabo, it will be difficult getting to the top and some will drop out of the race and some will push on and when you finally get there, you will see a beautiful view of the city de Barcelona. You will take salfies and you will have earned your breakfast, but not until you run back to the hotel before 9am.

Learn, Attend all the keynotes, Be(e) Community by Radek Suski, A day in the life of a UX designer by Chiara Aliotta, Would it be easier if we all spoke English by Brian Teeman-am sorry, I have to write this article in English. Be at the breakout rooms, there is always a reason why they are there, just as I said, so that you can learn something. Ask question and angage the audiance and much as you can, if possible, make your contributions.

Network, Look forward to the meals, the healthy break at the lobby, with snanks and drinks and Joomlers to interact with. Sit on a table with people you dont know, or havent talked to, or people you dont like, you never know, you might start liking them. Exchange contact at the table, talk about stuff, Joomla stuff you are doing in your country, and your families too. Laugh, laugh and laugh because you never know when you will meet them again. And when you meet them again somewhere, remember their names and continue talking.

Be Crazy, Dont miss the JOSCARS and JFACTOR, I mean, dont miss those two kids. They have a way of making you realise the talents you have, it maybe shouting, making faces, singing, magic, hitting drums like Cliff or bending metals and nails. If you are crazy enough, show your bad underwear, accomblanied with your bad dancing styles but remember, you will still have tomorrow to face the same crowd. Whatever it is, you will be glad that you tried it and if you win, you will brag for a whole year.

The Bar, Know that its always open at 5pm and everybody will be waiting for that moment. The people you want to meet will be there. You will not need your wallet am sure because Jab always has it sorted. There are soft drinka too, for Joomlars who dont drink, or you can try different cocktails by yourself. You can carry your beer from home too, and brag about how good it tastes. Dont be stationary, get to different table and feel different moods of Joomlers. Some beer makes them relaxed and some, it improves their energy, but for the noise, there is nothing we can do about the noise.

Tour, Get yourself a T10 metro ticket, you will have ten rides on the metro. Tour the Arena De Barcelona, Sadrida Familia, Rambla Street or Cathedral De Barcelona. Pick the maps, read direction even if you do not follow them, ask for a toilet-in Spanish and pray that you said the right words. If you like something, take photos, they will remind you when you are back home. Value every minute, be selfish with time, yea really, its those things you cant recover when they are gone. If its summer, you will enjoy long days and off course very short nights. Remember your way back home and the time the metro will go to sleep, if you miss both, you will destroy a whole days work.

Check-out, But don’t be in a harry to leave the hotel, there is always somebody who feels they should be around for a few more hours, or even days. Trust me, you will not be alone. You will find yourself in a group of Joomlers and you will creat some awosome memories. But if your cab shows-up, just leave, you might miss your flight back home, or whatever your next destination. When you are home, you will have alot to smile about.

Remember one fact, that Joomlers will always attend JAB, it will always be fun, the keynote will be always be great, you will be allowed to be crazy at the JFACTOR and JOSCARS, you will learn, network and interact alot, there will be great meals and the beer, the beer tap will keep running. Maybe some broken bottles, or glasses, but it will be worth the lose. And you will love your family gathering.

Gracias Barcelona