DESIGN YOUR JOB I I

education program
education manual
program
DISCLAIMER:
“Any communication or publication related to the action, made by the benefi-
cieries jointly or individually in any form and using any means, shall indicate that
it reflecst only on author’s view and that the Agency or Commission are not re-
sponsible for any use that may be made from information it contains.”

“Пројекат „Дизајнирај свој посао 2“, спроводи ЦОДР „RES POLIS“,

суфинансира Министарство омладине и спорта РС.”

PROJECT IMPLEMENTED BY:

VERY NICE
99
VERY VERY NICE
VERY VERY very NICE
...AND ITS PARTNERS:
VERY VERY very very NI
VERY VERY very very ver
y NICE very very very66ver
y very very very nice
Mihael Nikolić
half of a charismatic duo/
prince of room no. 308
 W1
Introduction:
- to best UI/UX practices
- to HTML and CSS
Aims:

Hello ! Presenting to students what is good and what is bad UI/UX,

focus on user experience for disabled people. UI/UX P r a c t i c e s
HTML and CSS
Title of the sessions: Timeframe & Methods:
Workshop 1 Introduction of the program, and asking participants about their expectations - 10min
INTRO TO UI/UX & HTML and CSS......................................................page 5-9 Introduction to best UI/UX practices - 15min
Workshop 2 Showing good and bad UI/UX by examples - 15min
WORDPRESS/Intro - basic set up & settings Introduction to HTML and CSS - 15 min
/Working - pages, posts & categories..........................................page 11-15
Questions/Answers - 10min
Expected workshop duration: 70min
Workshop 3
WORDPRESS/Working - menus, navigation, media, users...................................page 17-19 Recommended reading:
Workshop 4 https://www.sitepoint.com/5-ways-get-better-ux-disabled-users/
WORDPRESS/Working - plugins, widgets, themes, forms & social media.............page 21-24 https://developer.apple.com/design/tips/
Workshop 5 https://www.smashingmagazine.com/usability-and-user-experience/
WORDPRESS/Working - fine tuning / intro to WP SEO, maintenance & security.....page 25-28 https://medium.com/goodux-badux
https://developer.mozilla.org/en-US/docs/Web/HTML
Workshop 6 https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5
Developing in local environment: Installing MAMP......................page 29-33 https://www.html5rocks.com/en/
Workshop 7 https://developer.mozilla.org/en-US/docs/Learn/
Presentation of the websites.................................................................page 35 CSS/Introduction_to_CSS/How_CSS_works
https://www.youtube.com/watch?v=bWPMSSsVdPk
Used symbols: https://www.youtube.com/watch?v=0afZj1G0BIE
https://www.codecademy.com/learn/learn-html
https://www.codecademy.com/learn/learn-css
Recommended reading/New resources
LECTURE:
Balance between features and user experience. Do not clutter Wordpress
Important points/Info with plugins and themes that will slow down how Wordpress works.
Basic UI/UX principles are:
1.Clean and fast home page
2.Simple and clean design
Apps/Tools
3.Quick and easy to understand navigation
4.Display items without clutter and avoid pop ups, loaders etc.
5.Display content so it is easy to read and available for everyone
Place to take notes In order to have big picture regarding previous remarks we need to look
at few examples so we can have idea about good and bad UI/UX.

Good Examples: Bad examples:

https://protonmail.com/ https://www.lingscars.com/
https://www.smashingmagazine.com/ http://www.suzannecollinsbooks.com/
https://sidebar.io/ http://art.yale.edu/ 5
http://youth-work.me/
1 Introduction:
- to best UI/UX practices
- to HTML and CSS
UI/UX P r a c t i c e s
HTML and CSS
Introduction:
- to best UI/UX practices
- to HTML and CSS
HTML (HyperText Markup Language) is the most basic building block
of the Web. It describes and defines the content of a webpage.
W1
UI/UX P r a c t i c e s
HTML and CSS
Other technologies besides HTML are generally used to describe a
webpage’s appearance /presentation (CSS) or functionality (JavaScript).
All things above are important but we will focus on last one because it affects who HyperText refers to links that connect webpages to one another, either within a single
and how can access and use our Wordpress web site. website or between websites. Links are a fundamental aspect of the Web.
Displaying content for regular users is no brainer but when we need By uploading content to the Internet and linking it to pages created by
to make it usable for disabled people things can get tricky. other people, you become an active participant in the World Wide Web.
As our design and content are influenced by the theme we use, it is im- Most of web apps are done in HTML5 however there are still apps that are made with
portant to choose one that can be used and modified with ease. HTML4. On images below you can see the difference in declaration of HTML type.

Accessibility enables people with disabilities to perceive, understand, nav-

igate, interact with, and contribute to the web. We will cover most import-
ant things to have our Wordpress web site accessible to wide audience.

1.Accessibility is not a barrier to innovation

2.Do not use color as the only visual mean of conveying information Html 4 Html 5
3.Ensure enough contrast between text and its background
4.Provide visual focus indication for keyboard focus HTML5 is the latest evolution of the standard that defines HTML.
5.Make clean and easy to understand forms The term represents two different concepts:
6.Avoid component identity crises
7.Do not make people hover to find things 1. It is a new version of the language HTML,
with new elements, attributes, and behaviors,
2. and a larger set of technologies that allows more
diverse and powerful Web sites and
applications. This set is sometimes called HTML5 & friends
and often shortened to just HTML5.

Entities in HTML are tags and atributes.

Most common tags are: <div> <p> <h1> <span> <li> <img> <form> <table>
Most common atributes are: href, src, style, alt

Why HTML5 ?
Semantics, offline storage, device access, multimedia, 3d graphics.

6 7
1
UI/UX P r a c t i c e s
HTML and CSS
Introduction:
- to best UI/UX practices
- to HTML and CSS
Introduction:
- to best UI/UX practices
- in to HTML and CSS W1 UI/UX P r a c t i c e s
HTML and CSS
A document is usually a text file structured using a markup language And this is what we get in browser:
— HTML is the most common markup language,
but you will also come across other markup languages such as SVG or XML.
Presenting a document to a user means converting it into a usable form for your audience.
Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents
visually, for example, on a computer screen, projector or printer.

Web browsers apply CSS rules to a document to affect how they are displayed.
A CSS rule is formed from:
A set of properties, which have values set to update how the HTML content is displayed,
for example I want my element’s width to be 50% of its par-
ent element, and its background to be red.

A selector, which selects the element(s) you want to apply the updated property values
to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document.
A set of CSS rules contained within a stylesheet determines how a webpage should look.
How CSS look like: CSS3 is current impletementation that is widely used
although in some cases we can see older variants as well.

Search engine optimization (SEO) is the process of affecting the visibility of a website
or a web page in a web search engine’s unpaid results—often referred to as natural,
organic, or earned results.
In general, the earlier (or higher ranked on the search results page),
and more frequently a site appears in the search results list, the more visitors it will
receive from the search engine’s users; these visitors can then be converted into customers.

Basic division in SEO are onpage and offpage optimization.

We will focus on onpage optimization as it is our primary goal to fine tune our
WordPress presentation within itself. Offpage optimization is promotion of your web page
with incoming links, reviews, articles, social media etc.

Basic principles of onpage optimization are:

good semantic html code
mobile (as many) device ready web pages
title, keyword and description attributes
8 9
2 W2
Introduction to WordPress
[ basic set up & settings ]
Working on WordPress
[ pages, posts & categories ]
HTML/CSS/SEO WORDPRESS 1
Aims:
In this session we will set up online hosting and Wordpress, and give
an Intro of the dashboard. Also, we will explain and show practical
examples of pages, posts and categories.
Timeframe & Methods:
Recalling what we did last time - 5min
Setting up hosting and WordPress - 15min
Explanation of the WordPress dashboard - 5min
Theoretical intro and practical examples of pages - 10min
Theoretial intro and practical examples of posts and categories - 20min
Practical work - 10min
Q’s and A’s - 5min
Expected workshop duration: 70min

LECTURE:

Recommended reading:
https://www.youtube.com/watch?v=D5KYLmXzuhU&feature=youtu.be

http://www.wpbeginner.com/beginners-guide/what-is-the-dif-
ference-between-posts-vs-pages-in-wordpress/

http://www.wpbeginner.com/glossary/page/

http://www.wpbeginner.com/beginners-guide/how-to-add-a-
new-post-in-wordpress-and-utilize-all-the-features/

http://www.wpbeginner.com/glossary/category/

10 11

*Live a Less Electrical Life by Hudson-Powell

2 W2
Introduction to WordPress Introduction to WordPress
[ basic set up & settings ] [ basic set up & settings ]
Working on WordPress Working on WordPress
[ pages, posts & categories ] [ pages, posts & categories ]
WORDPRESS 1 WORDPRESS 1

We have a link in the additional reading section, that explains how to Basic entities in WordPress: categories, pages, posts, links
set up online hosting. We play the video on the projector
and the participants follow the instructions and set up everything. Category is predefined taxonomy in Wordpress.
After we filled required fields we can log on to our fresh WordPress installation. It is used to sort and group content into different sections.
In order to have good organization of our content we need Default category in Wordpress is Uncategorized.
to know which pages we want to create.
Adding category
For start we will need: HOME, NEWS(blog), ABOUT, CONTACT. We can add category in Wordpress in a few ways. We can create categories before
Now we can create pages that we are going to use. adding posts or during post creation we can select created categories or add new one.

Edit category
We can edit category in Wordpress when we navigate to
Next we need to do are basic settings.
Posts > Categories and when we mouse over one of them edit link will appear.
We will go to Settings tab and finish basic set up there.
After we are done click on Save Changes button.

Next steps are cleaning up new WordPress installation:

1. Delete default post, page and comment

2. Set up WordPress permalinks
3. Set our timezone
4. Enable or disable user registration
5. Set up WordPress Comments settings
6. Wordpress Media settings – put all dimensions to 0 to prevent Wordpress from
creating multiple copies of same media file and reduce load on our hard drive.
7. Disable directory browsing (security measure) – we need to edit
Worpress.htaccess file and add new line: Options All -Indexes
8. Add current year list to Wordpress Ping List (Google latest list)

12 13
2 W2
Introduction to WordPress Introduction to WordPress
[ basic set up & settings ] [ basic set up & settings ]
Working on WordPress Working on WordPress
[ pages, posts & categories ] [ pages, posts & categories ]
WORDPRESS 1 WORDPRESS 1
Page in WordPress refers to the page post type. Posts are content entries listed in reverse chronological order on your blog’s
Key differences between pages and posts are: home page. Due to their reverse chronological order, your posts are
meant to be timely.
Older posts are archived based on month and year.
Posts are timely content part of a series of posts in a blog. Pages are static one-off type As the post gets older, the deeper the user has to dig to find it.
of documents which are not tied to the blog’s reverse chronological order of content. Posts encourage conversation.
They have a built-in commenting feature that allows users to
Pages can be hierarchical, which means a page can have sub pages, for comment on a particular topic.
example, a parent page titled About us can have a sub-page called Our history.
On the other hand posts are not hierarchical. Creating Post
Posts are created under Posts > Add New
By default posts in WordPress can be sorted into taxonomies Categories and Tags.
Pages do not have categories or tags. Editing Post
When we are on Posts tab mouseover post that we want to edit and click on edit.
Pages can utilize custom page templates. Posts can not utilize this feature
by default in WordPress. Post types:

WordPress posts are displayed in RSS feeds while Pages are excluded from feeds. Standard – The default post format

Aside – A note like post, usually styled without title

There is no limit on how many pages you create in WordPress and it is possible to
create a website with only pages and not using posts at all. Even though pages are
Gallery – A gallery of images
supposed to have static content, but that does not mean users can not update them.
Pages can be updated as often as user want to update them.
Link – A link to another site
Users can also use a page to be the static front page of their
Image – An image or photograph
web-site and have their blog posts displayed on another page of the site.
To choose static front page and blog page, a user need to enable static front page on
Quote – A quotation
Settings > Reading under ‘Front page displays’ option.
Status – Twitter like short status update
Adding Page
Creating a new page is easy. Just navigate to pages and click on add new button.
Video – A post containing video
(From WordPress 3.6 there is support for native video upload and playback)
Editing Page
Editing page is also simple, just mouseover page you want to edit and click on edit.
Audio – An audio file

Chat – A chat transcript.

14 15
 W3
Working on WordPress
[ menus, navigation, media, users ]

Aims: WORDPRESS 2
Learning to create and position Menus;

60sec
Add and use media and create and manage users.

Timeframe & Methods:

Recalling what we did last time - 5min
Introduction to menus and navigation - 10min
Introduction to media / practical examples of uploading files- 10min

of
Intro to website hierarchy - 10min
Creating a new user - 5min
Practical work with the participants - 35min
Q’s and A’s - 10min

PLANKs
Expected workshop duration: 85min

Homework explanation - 10min

LECTURE:

Recommended reading:
Boris Negeli https://codex.wordpress.org/WordPress_Menu_User_Guide
reflection&energizer expert http://www.wpbeginner.com/glossary/media/
http://www.wpbeginner.com/beginners-guide/where-
does-wordpress-store-images-on-your-site/
http://www.wpbeginner.com/beginners-guide/
wordpress-user-roles-and-permissions/
https://codex.wordpress.org/Roles_and_Capabilities

We can start to organize content when it is added.

We can create, edit and arrange menus in WordPress dashboard under
Appearance > Menus

We will create our main menu now.

We need to have pages created in order to create our main menu.
When we are in Menus tab in dashboard we can go and create new menu
give it a name and select Top Menu checkbox. Add pages and catego-
ries that we want in our menu and click on Save Menu button. Items in
menu can contain sub items that will create nested drop down menu.

17
3
WORDPRESS 2
Working on WordPress
[ menus, navigation, media, users ]
Working on WordPress
[ menus, navigation, media, users ]
W3 WORDPRESS 2
Media is part of WordPress dashboard which is used to manage user uploads
In our current theme we can add Menus to two locations: (images, audio, video, and other files).
Under the Media menu, there are two screens. The first screen Library lists all the
1. Top Menu files in the media library. These files can be edited and deleted from the library.
2. Social Links Menu (it is intended for social links) The second screen is Add New, which allows users to upload files.
Remember users can also upload media (images, videos, etc) while
Also we have option in menus to automatically add new top-level pages. writing a post or page. However, the Add New link under allows
If we want that just check the checkbox and we are done. users to upload files without attaching them to a specific post or page.

We can also add custom links or posts to our menus. All media files are stored and organized based on the year and month
they were uploaded in a folder called /wp-content/uploads/.
Also we can add Menus in Sidebar and other widget areas it is just a matter of You can search the media files by using your WordPress admin menu,
options of theme that we currently use. We need to go to Appearance > Widgets and but there is no way to store media files in specific folders.
add Custom Menu item that will appear wherever we have that widget field active.
Removing and editing menu is simple just select menu that we want Wordpress has powerfull user management system already built in.
to edit or delete and edit or delete items or whole menu. This means that we can define what specific user can and can not do on our website.
Defining user permissions on our website means we need to define a role
for specific user. WordPress comes with five default user roles:

Administrator
Editor
NOTES: Author
Contributor
Subscriber

Since we installed Wordpress we are Administrator of our web site.

Administrator has ultimate power on WordPress site and can edit, add,
delete almost any part of Wordpress (yes even other administrators).
Administrator role is for site owners or for person that is as-
signed by owner to handle Wordpress site.

User management is easy in WordPress. We can enable for users to register

themselves or we can add them using Add New button under Users tab in dashboard.
When we mouseover user under Users tab we have Edit and Delete options.

18 19
 W4
Working on WordPress
[ plugins, widgets, themes,
forms & social media ]

B E H o L D Aims:
Learning how to install and use plugins, widgets, themes,
including adding style and functionality to a website
Timeframe & Methods:
Recall of the last day lesson - 5min
Introduction to Wordpress plugins and widgets - 10min
WORDPRESS 3

Theoratical and practical (in Laptops)

presentation in WordPress for WordPress plugins - 25min
Intro to WordPress themes, forms and social media - 10min
Theoratical and practical (in Laptops)
presentation in WordPress for WordPress themes - 10min

STUDENTS ARE
Theoratical and practical (in Laptops)
presentation in WordPress for WordPress forms and social media - 20min
Q’s and A’s - 10min
Expected workshop duration: 90min

BECOMING LECTURE:

Recommended reading:
http://www.wpbeginner.com/glossary/plugin/

THE
http://www.wpbeginner.com/category/plugins/
https://wordpress.org/plugins/
https://codex.wordpress.org/WordPress_Widgets
http://www.wpbeginner.com/beginners-guide/how-
to-add-and-use-widgets-in-wordpress/
http://www.wpbeginner.com/showcase/25-most-use-

TEACHERS !
ful-wordpress-widgets-for-your-site/
https://wordpress.org/themes/browse/popular/
http://www.wpbeginner.com/showcase/best-free-wordpress-blog-themes/
http://www.wpbeginner.com/beginners-guide/how-to-install-a-wordpress-theme/

20 21
4
WORDPRESS 3
Working on WordPress
[ plugins, widgets, themes,
forms & social media ]
Working on WordPress
[ plugins, widgets, themes,
forms & social media ] W4WORDPRESS 3

A plugin is a piece of software containing a group of functions that can be added Theme decides how our WordPress will look and feel. So choosing right theme
to a WordPress website. They can extend functionality or add new features to your for our Wordpress web site is crucial. In most cases themes that you get with Wordpress
WordPress websites. will do the job but you can always try new themes and make even better product.
WordPress plugins are written in the There are thousands and thousands of themes available online.
PHP programming language and integrate seamlessly with WordPress. There are free and premium themes. Free themes will be good for most cases but
if you need extra customization and support check out premium themes (paid).
As a site administrator, you can install/uninstall plugins from the admin area.
You can also download and manually install them using an FTP client. Installing themes is easy in Wordpress. There are few ways to do this.
Because the vast majority of plugins are free, it is important to note that they usually First one is easy and we need to navigate to Appearance > Themes and click
do not come with tech support. For this reason it is important to be on Add New button. After install is complete we can activate new theme.
careful when choosing which ones you want to install on your site. Second option is to upload theme throug WordPress dashboard.
Although there are plugins that can do virtually anything, some are much Download theme to your computer and navigate to Appearance > Themes
higher quality than others. In order to choose the right ones, you should ask and click on Upload Theme button.
yourself a few questions. How long has it been since it was updated? Third way is copying theme to our theme directory but for this we need
Is it compatible with the latest version of WordPress? to have FTP access to our server which is not always the case.
Are people getting answers to their support questions?
What type of rating does it have? WordPress does not have form management built in out of the box.
Widgets in WordPress are designed to add new features to our sidebars. For that we need to install plugin which will take care of that. We will
We can see that with default widgets that we get when we install WordPress. take a look on several plugins that are known to work well.

Widgets were originally designed to provide a simple and easy-to-use way of 1. WPForms
giving design and structure control of the WordPress Theme to the user, 2. Gravity Forms
which is now available on properly widgetized WordPress Themes to include 3. Pirate Forms
the header, footer, and elsewhere in the WordPress design and structure. 4. Ninja Forms
Widgets require no code experience or expertise. 5. Formidable Pro
They can be added, removed, and rearranged in 6. Contact Form 7
Appearance > Widgets in the WordPress dashboard. Choice which to use depends what we need out of forms on our WordPress web site.
We will introduce Pirate Forms as it is easy to use and set up.
We can add new widgets in form of plugin and there are First we need to install plugin from Plugins tab in dashboard.
many to explore and use for all kind of situations. After installation we can proceed to settings of our plugin which can
Widgets usually live in WordPress sidebar but they can be also be accessed from Plugins tab or Settings tab in dashboard.
used in footer like in our Twenty Seventeen theme.
When we are on settings page for our forms we can see ways how to
add contact form to our page. We will use shortcode method to add contact form.
Just copy and paste shortcode to desired page and we have working nice contact form.
22 23
4
WORDPRESS 3
Working on WordPress
[ plugins, widgets, themes,
forms & social media ]
Working on WordPress fine tuning
[ intro to Wordpress SEO,
maintenance & security ]

Aims:
W5 WORDPRESS 4
Learning basics of WordPress SEO, maintenance and security.
Additional settings are available on other tabs on Pirate Forms Settings page.

Forms are used in number of situations: for subscription, registration, e-commerce etc.
Timeframe & Methods:
Recall of the last day lesson - 5min
Every web site should have social media presence.
Introduction to WordPress SEO - 10min
That does not mean just creating social media profiles for your web site.
Theoratical and practical (in Laptops)
We need to have our WordPress connected and communicating with social
presentation in WordPress for WordPress SEO - 10min
media profiles. WordPress has limited options regarding social media out of the box.
Intro to WordPress maintenance - 10min
We have mostly options in theme to add links to our social profiles.
Practical examples - 10min
Intro to WordPress security - 10min
Most of time it is enough but there are other things that we can do.
Practical examples - 10min
Social media connection to our WordPress also has big influence on our SEO.
Q’s and A’s - 10min
So if we want to have best results we need to add Social media plugin.
Expected workshop duration: Homework
75min explanation - 10min
Expected workshop duration: 110min
Main issue with most of social media plugins is performance. Like all plugins they need
omework review - 15min
to load additional resources like style sheets, scripts etc. which can slow down web site
response. So we need to have a balance between features and user experience.
LECTURE:
Good practice is to use only few social media profiles connected to Wordpress.

Social media plugins allow you to show social icons in sidebar, below
article, before article, etc. so we need to decide how we would like to
display them on our site and if the plugin supports that option. Recommended reading:
http://www.wpbeginner.com/wordpress-seo/
https://moz.com/blog/optimizing-your-wordpress-blog-posts
https://yoast.com/wordpress-seo/
1.EA Share Count
https://static.googleusercontent.com/media/www.google.com/en//
2.Sassy Social Share
webmasters/docs/search-engine-optimization-starter-guide.pdf
3.AddtoAny https://blog.kissmetrics.com/simple-guide-to-seo
4.Wordpress to Buffer https://www.sitepoint.com/definitive-guide-to-wordpress-maintenance/
5.Simple Social Icons http://www.wpbeginner.com/plugins/how-to-put-
6.Social Icons Widget by WPZoom your-wordpress-site-in-maintenance-mode/
7.WordPress Social Login https://codex.wordpress.org/WordPress_Backups
8.Revive Old Post https://yoast.com/wordpress-security/
9.Instagram Feed https://codex.wordpress.org/Hardening_WordPress
http://www.wpbeginner.com/wordpress-security/

24
5 Working on WordPress fine tuning
[ intro to Wordpress SEO,
maintenance & security ]
Working on WordPress fine tuning
[ intro to Wordpress SEO,
maintenance & security ] W5 WORDPRESS 4
WORDPRESS 4
WordPress maintenance is often seen as waste of time and resources.
It is extremely important to keep your Wordpress up to date, clean, secure and fast.
We were already talk about SEO optimization in our starting chapters. Regular maintenance is essential for stable and fast WordPress web site.
SEO is broad subject and there are many tools that can reduce time and effort. When dealing with maintenance in Wordpress we assume that you have Administrator
There are several plugins for SEO however our focus will be on Yoast SEO plugin. access to WordPress.
We need to install Yoast SEO plugin in Plugins tab and activate plugin itself.
After that we will get new things in our dashboard. WordPress maintenance include:
1. Maintenance mode
SEO is important for static pages and for our posts on blog. There is a subtle difference 2. Backups
between these two and we will focus on our blog posts SEO. 3. WordPress updates
4. Comment spam
Basic WordPress SEO: 5. Database maintenance and optimization
6. Health and security monitoring
7. Centralized management (for mutltiple WordPress instances/sites)
1.Permalink structure
2.www vs non-www
Maintenance mode should be used whenever there are some changes done that can af-
3.Stop words
fect user experience. WordPress has native maintenance mode when updates are being
4.SSL or no SSL
applied however there are plugins that can inform users even better than native solution.
5.Optimize titles for SEO
Backups are very important and they are frequently negclected.
6.Optimize descriptions
Using automatic solutions for backup is way to go as it can save time and money.
7.Image optimization
Manual backups are also recommended when you have time to do so.
8.XML sitemaps
There are many plugins that do the job so it depends what type of backup we need.

Wordpress updates are released in a timely manner and major release updates
must be applied especially if they fix security issues. Updates are available on:
1. WordPress core
2. Plugins
3. Themes
NOTES:
And so every time we want to update we need to check will it work with our current setup.
Comment spam is something that need your attention because
without moderation it can start to affect your Wordpress speed.
Best antispam tool is Akismet and it is present with WordPress core installation.

27
5
WORDPRESS 4
Working on WordPress fine tuning
[ intro to Wordpress SEO,
maintenance & security ]
Developing in
local environment:
Installing MAMP
Aims:
W6
MAMP
Teaching participants how to set up an environment
WordPress security is process that can be done in few stages depending on for local development.
what are we holding as data. So there is a difference between security on
personal blog and ecommerce web site with thousands of users and their data. Timeframe & Methods:
Basic security in WordPress is easy and it is recommended to take some time for that. Recall of the last day lesson - 5min
Basic security consists of few things that become best practic- Introduction to MAMP and what we get by installing it - 5min
es long time ago when there was no good plugins for security. Downloading, Installing MAMP- 20min
Configuring MAMP - 20min
1. Do not use admin as username Downloading, configuring WordPress - 20min
2. Use strong password Configuring WordPress - 20min
3. Stay up to date Q’s and A’s - 10min
Expected workshop duration: 100min
Other things that are also good practice and can be done are:

1. Give permissions to users with care LECTURE:

2. Protect wp-config.php and .htaccess
3. Limit login attempts
4. Use only well known security plugins! Recommended reading:
5. Use Two-Factor Authentication http://webcraft.tools/3-easy-steps-for-install-
ing-wordpress-on-your-local-machine/
For basic security we do not need plugins but for additional level we need to use them. https://wordpress.org/download/
We will mention Sucuri Security which is free. http://webcraft.tools/3-easy-steps-for-install-
After installing and activating plugin first we need to generate API ing-wordpress-on-your-local-machine/
Key and then we can dig into setting up security in Sucuri.

For two factor authentication we can use Google Authenticator plugin or smiliar. NOTES:

Keep your WordPress and add ons up to date!

Google is your friend :)

28 29
6 MAMP
Developing in
local environment:
Installing MAMP
Developing in
local environment:
Installing MAMP
4. Enter name for database that is going to be used by
W6 MAMP
WordPress and under Collation dropdown select utf8_unicode_ci
We have two main enviroments in which we run WordPress.
Those are development(local) and production(server) enviroment. We will focus on
local enviroment as it is more safe to develop, modify and change WordPress without
consequences. Also we can work in local enviroment even without internet connection.
We need to know requirements for our local enviroment.
Requirements are: Apache, PHP and MySQL
We will use MAMP as it is easy to use solution for Windows and MAC OS X.
MAMP takes the role of a server in our local enviroment.

1. Download MAMP
2. Install MAMP
3. Start MAMP
4. Configure MAMP

Last task to complete our local enviroment set

up is to create a database for WordPress.
Next few steps show us how to create database for WordPress:
1. Open MAMP start page in browser
2. Go to Tools > phpMyAdmin

Last step is to click on Create button

and we have our database ready.
Tools and Apps:
3. Go to Databases tab in phpMyAdmin Text editor (Notepad++, TextEdit, Sublime Text)
Web browser (Mozilla, Chrome, Edge)
https://www.mamp.info/en/

30 31
6 MAMP
Developing in
local environment:
Installing MAMP
Developing in
local environment:
Installing MAMP
W6 MAMP

Our enviroment is ready and we can proceed with Wordpress installation. Now we can check that our MySQL and Apache servers are running under
First we need to download latest stable version of Wordpress from wordpress.org. MAMP and we can go to url of our WordPress: localhost:80/wordpress/ ,
if everything went well we will have welcome screen to continue with WordPress
After download we can unpack content of archive and copy it to proper location for local installation in our browser tab. We need to finish installation in order to access WordPress
development. In our case since we use MAMP that location is: dashboard where we will do most of our setup and work.
C > MAMP > htdocs
After we filled required fields we can log on to our fresh WordPress installation.
When copy is finished we need to configure In order to have good organization of our content we need to know which pages we
WordPress to use database that we created eariler. want to create. For start we will need: HOME, NEWS(blog), ABOUT, CONTACT
We can create now pages that are we going to use.
Caution: In some cases port 80 can be already used so you
will need to change port for Apache to something else.
Next we need to do basic settings. We will go to Settings tab and finish
In order to change port for Apache or MySQL we need to go to settings in basic set up there.
MAMP and change what we need to. This is also case for MySQL so you will After we are done click on Save Changes button.
need to change port for that. By default we will use port 80 for Apache.
There are two ways of doing this. First and easy one is to go to
localhost:80/wordpress/ and follow the steps.
Second way is to edit wp-config-sample.php manually and we will do like that.
In WordPress folder we have file that is called wp-config-sample.php
and we need text editor to open that file and alter a few things.

Under DB_NAME we will put wpproject as that is our chosen database name.
Under DB_USER we will use root and under DB_PASSWORD also root.
NOTE: These are settings for local enviroment!!! NOTES:

32
To all the things I’ve lost on you
Oh oh
Oooooo
When you get older, plainer, saner
When you remember
all the danger
we came from?
PRESENTATION OF THE WEBSITES

Aims:
Presentation of the websites created by the participants

Timeframe and Concept:

W7
WEBSITE
Burning like embers, falling, tender
Long before the days of no surrender Presentation of the website - 10 to 15min per participant
Years ago a Comments and feedback - 5 to 10min per participant
Baby, is that lost on you? nd well you know
Is that lost on you?
Smoke ‘em if you got ‘em
During this workshop, the participant will
‘Cause it’s going down present their work in front of the class.
All I ever wanted was you Each presentation will be followed by comments and
I’ll never get to heaven feedback by trainers and the other participants
‘Cause I don’t know how
Homework explanation - 10min

OOoohhh- Expected workshop duration: 110min

Mermework review - 15minRecommendation:
Having a one extra session before
this last one
in a manner of assistance of trainers to
participants with creating their websites

OOoooooOo
Baby is that
lost on you
NOTES:

*Lost on you song by LP

go-to-favorite song of Bečej Training
 Credits:
Content of this Education Program is created with the knowledge and mentorship of :
Dimitrije Badnjarević, PROJECT IS CO-FUNDED BY:
with research and curation of:
Alvi Kacmoli, Anton Brodarac, Antonio Preučil, Beris Ndreu, Dušan Stanišković, Filip Karagić,
Fisadër Mulla, Juxhin Alia, Kristina Jurić, Mihael Nikolić, Nina Božić, Sonila Selmani,
Suela Selmani, Tanja Stefanovski, Tea Kljajin and Zlata Miklja.

Under the mentorship and guidance of Boris Negeli and Nikola Radman.
Front and Back Cover designed by Dijana Makijević
Handbook layout and design by Jovana Dragaš

Icon design: Fonts:

PNGs taken from the Noun Project, Arial
under the Creative Commons licence: Calibri
texting by Gregor Cresnar Cat_Meow - Maxin Feld
Pencil by Landan Lloyd Fun_Crayon - Jonathan Harris
chaturanga by Minjeong Kim Loud_and_Clear - Skyhaven Fonts ASSOCIATES:
plank by Minjeong Kim Stale_Marker - Maxin Feld
yoga by Minjeong Kim Red_Velvet - BLKBK Fonts
sticky notes by Giannis Choulakis Front/Back Cover fonts:
company by faisalovers DK Southside_Fizz - Hanoded
Glasses by corpus delicti Myriad Pro
Book by Vladimir Belochkin Orator Std
Marker by Darren Dutch Courier New
Mortarboard hat by Phil Smith Photography:
okay by Meg Clingman Background of the Front Cover
List by Landan Lloyd taken by Dijana Makijević
reminder by Davo Sime Art:
Gear, settings by Danil Polshin Live a Less Electrical Life
Mouse by Focus by Hudson-Powell
Glasses by asianson.design page 10
Hand Left Thumb Down by Stefan Wetterstrand
DYJII logo:
Hand Left Thumb Up by Stefan Wetterstrand
Located on the Back Cover
Colors: Tanja Mirković
Front and back cover

Page concept colors

36
 ‘’ very nice ‘’
MIHAEL NIKOLIC
Prince of Room no. 308 Tanja Mirkovic

‘’ .. back to purity
.. back to simplicity ‘’

Dieter Rams

</html> ..
.. and the END is always near

‘’good design is all about

making other designers feel
like idiots because that idea
wasn’t theirs ‘’
Frank Chimero
.’
n.

http:// www.designyourjob.org /
o
so

‘ .. so on and 2017
BORIS NEGELI