design your job i i - salto-youth · wordpress 1 w2 wordpress 1 w2 next we need to do are basic...

DESIGN YOUR JOB I I

education program manualeducation 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.”

...AND ITS PARTNERS:

PROJECT IMPLEMENTED BY:

“Пројекат „Дизајнирај свој посао 2“, спроводи ЦОДР „RES POLIS“, суфинансира Министарство омладине и спорта РС.”

VERY NICE

66

99 VERY VERY NICE VERY VERY very NICE VERY VERY very very NICE VERY VERY very very veryNICE

y NICE very very very ver

y very very very nice Mihael Nikolić half of a charismatic duo/ prince of room no. 308

5

Title of the sessions: Workshop 1INTRO TO UI/UX & HTML and CSS......................................................page 5-9Workshop 2WORDPRESS/Intro - basic set up & settings /Working - pages, posts & categories..........................................page 11-15Workshop 3WORDPRESS/Working - menus, navigation, media, users...................................page 17-19Workshop 4WORDPRESS/Working - plugins, widgets, themes, forms & social media.............page 21-24Workshop 5WORDPRESS/Working - fine tuning / intro to WP SEO, maintenance & security.....page 25-28Workshop 6Developing in local environment: Installing MAMP......................page 29-33Workshop 7Presentation of the websites.................................................................page 35

Hello !

Recommended reading/New resources

Important points/Info

Apps/Tools

Place to take notes

Used symbols:

W1Timeframe & Methods: Introduction of the program, and asking participants about their expectations - 10minIntroduction to best UI/UX practices - 15minShowing good and bad UI/UX by examples - 15minIntroduction to HTML and CSS - 15 minQuestions/Answers - 10minExpected workshop duration: 70min

Aims:Presenting to students what is good and what is bad UI/UX, focus on user experience for disabled people.

Recommended reading:https://www.sitepoint.com/5-ways-get-better-ux-disabled-users/https://developer.apple.com/design/tips/https://www.smashingmagazine.com/usability-and-user-experience/https://medium.com/goodux-badux https://developer.mozilla.org/en-US/docs/Web/HTMLhttps://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5https://www.html5rocks.com/en/https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_workshttps://www.youtube.com/watch?v=bWPMSSsVdPkhttps://www.youtube.com/watch?v=0afZj1G0BIEhttps://www.codecademy.com/learn/learn-htmlhttps://www.codecademy.com/learn/learn-css

Balance between features and user experience. Do not clutter Wordpress 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 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 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.

LECTURE:

Introduction: - to best UI/UX practices- to HTML and CSS

Good Examples:https://protonmail.com/https://www.smashingmagazine.com/https://sidebar.io/http://youth-work.me/

Bad examples:https://www.lingscars.com/http://www.suzannecollinsbooks.com/http://art.yale.edu/

UI/UX P r a c t i c e s HTML and CSS

https://www.sitepoint.com/5-ways-get-better-ux-disabled-users/

6 7

W1All things above are important but we will focus on last one because it affects who and how can access and use our Wordpress web site. Displaying content for regular users is no brainer but when we need to make it usable for disabled people things can get tricky. As our design and content are influenced by the theme we use, it is im-portant to choose one that can be used and modified with ease.

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 innovation2.Do not use color as the only visual mean of conveying information 3.Ensure enough contrast between text and its background 4.Provide visual focus indication for keyboard focus 5.Make clean and easy to understand forms 6.Avoid component identity crises 7.Do not make people hover to find things

W1HTML (HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a webpage. Other technologies besides HTML are generally used to describe a webpage’s appearance /presentation (CSS) or functionality (JavaScript). HyperText refers to links that connect webpages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web. Most of web apps are done in HTML5 however there are still apps that are made with HTML4. On images below you can see the difference in declaration of HTML type.

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts: 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.

Html 4 Html 5





8 9

W1W1A document is usually a text file structured using a markup language — 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:

And this is what we get in browser:

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

Introduction: - to best UI/UX practices- in to HTML and CSS




10 11

HTML/CSS/SEO

W2W2

*Live a Less Electrical Life by Hudson-Powell

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

Timeframe & Methods:Recalling what we did last time - 5minSetting up hosting and WordPress - 15minExplanation of the WordPress dashboard - 5minTheoretical intro and practical examples of pages - 10minTheoretial intro and practical examples of posts and categories - 20minPractical work - 10minQ’s and A’s - 5minExpected workshop duration: 70min

Aims:In this session we will set up online hosting and Wordpress, and givean Intro of the dashboard. Also, we will explain and show practicalexamples of pages, posts and categories.

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/

WORDPRESS 1

12 13

WORDPRESS 1

W2WORDPRESS 1

W2

Next we need to do are basic settings. 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)

Basic entities in WordPress: categories, pages, posts, links

Category is predefined taxonomy in Wordpress. It is used to sort and group content into different sections. Default category in Wordpress is Uncategorized.

Adding categoryWe can add category in Wordpress in a few ways. We can create categories before adding posts or during post creation we can select created categories or add new one.

Edit categoryWe can edit category in Wordpress when we navigate to Posts > Categories and when we mouse over one of them edit link will appear.

We have a link in the additional reading section, that explains how to set up online hosting. We play the video on the projector and the participants follow the instructions and set up everything.After we filled required fields we can log on to our fresh WordPress installation.In order to have good organization of our content we need to know which pages we want to create. For start we will need: HOME, NEWS(blog), ABOUT, CONTACT.Now we can create pages that we are going to use.



14 15

W2WORDPRESS 1

Posts are content entries listed in reverse chronological order on your blog’s home page. Due to their reverse chronological order, your posts are meant to be timely. Older posts are archived based on month and year. As the post gets older, the deeper the user has to dig to find it.Posts encourage conversation. They have a built-in commenting feature that allows users to comment on a particular topic.

Creating PostPosts are created under Posts > Add New

Editing PostWhen we are on Posts tab mouseover post that we want to edit and click on edit.

Post types:

Standard – The default post format

Aside – A note like post, usually styled without title

Gallery – A gallery of images

Link – A link to another site

Image – An image or photograph

Quote – A quotation

Status – Twitter like short status update

Video – A post containing video (From WordPress 3.6 there is support for native video upload and playback)

Audio – An audio file

Chat – A chat transcript.

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 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.

Users can also use a page to be the static front page of their 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 Settings > Reading under ‘Front page displays’ option.

Adding PageCreating a new page is easy. Just navigate to pages and click on add new button.

Editing PageEditing page is also simple, just mouseover page you want to edit and click on edit.

Posts are timely content part of a series of posts in a blog. Pages are static one-off type of documents which are not tied to the blog’s reverse chronological order of content.

Pages can be hierarchical, which means a page can have sub pages, forexample, a parent page titled About us can have a sub-page called Our history. On the other hand posts are not hierarchical.

By default posts in WordPress can be sorted into taxonomies Categories and Tags. Pages do not have categories or tags.

Pages can utilize custom page templates. Posts can not utilize this feature by default in WordPress.

WordPress posts are displayed in RSS feeds while Pages are excluded from feeds.

Page in WordPress refers to the page post type. Key differences between pages and posts are:


W2WORDPRESS 1


Boris Negeli reflection&energizer expert

PLANKs

60sec of

17

W3Working on WordPress [ menus, navigation, media, users ]

Timeframe & Methods:Recalling what we did last time - 5minIntroduction to menus and navigation - 10minIntroduction to media / practical examples of uploading files- 10minIntro to website hierarchy - 10minCreating a new user - 5minPractical work with the participants - 35minQ’s and A’s - 10minExpected workshop duration: 85min

Homework explanation - 10min

Aims:Learning to create and position Menus;Add and use media and create and manage users.

WORDPRESS 2

We can start to organize content when it is added.We can create, edit and arrange menus in WordPress dashboard underAppearance > 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.

LECTURE:

Recommended reading:https://codex.wordpress.org/WordPress_Menu_User_Guidehttp://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

18 19

WORDPRESS 2

W3WORDPRESS 2

W3In our current theme we can add Menus to two locations: 1. Top Menu 2. Social Links Menu (it is intended for social links)

Also we have option in menus to automatically add new top-level pages. If we want that just check the checkbox and we are done.

We can also add custom links or posts to our menus.

Also we can add Menus in Sidebar and other widget areas it is just a matter of options of theme that we currently use. We need to go to Appearance > Widgets and 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 to edit or delete and edit or delete items or whole menu.

NOTES:

Working on WordPress [ menus, navigation, media, users ]

Working on WordPress [ menus, navigation, media, users ]

Media is part of WordPress dashboard which is used to manage user uploads (images, audio, video, and other files). Under the Media menu, there are two screens. The first screen Library lists all the files in the media library. These files can be edited and deleted from the library. The second screen is Add New, which allows users to upload files. Remember users can also upload media (images, videos, etc) while writing a post or page. However, the Add New link under allows users to upload files without attaching them to a specific post or page.

All media files are stored and organized based on the year and month they were uploaded in a folder called /wp-content/uploads/. You can search the media files by using your WordPress admin menu, but there is no way to store media files in specific folders.

Wordpress has powerfull user management system already built in. 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 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.

20 21

W4Timeframe & Methods:Recall of the last day lesson - 5minIntroduction to Wordpress plugins and widgets - 10minTheoratical and practical (in Laptops) presentation in WordPress for WordPress plugins - 25minIntro to WordPress themes, forms and social media - 10minTheoratical and practical (in Laptops)presentation in WordPress for WordPress themes - 10minTheoratical and practical (in Laptops) presentation in WordPress for WordPress forms and social media - 20minQ’s and A’s - 10minExpected workshop duration: 90min

Aims:Learning how to install and use plugins, widgets, themes,including adding style and functionality to a website

WORDPRESS 3

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

LECTURE:

Recommended reading:http://www.wpbeginner.com/glossary/plugin/http://www.wpbeginner.com/category/plugins/https://wordpress.org/plugins/https://codex.wordpress.org/WordPress_Widgetshttp://www.wpbeginner.com/beginners-guide/how-to-add-and-use-widgets-in-wordpress/http://www.wpbeginner.com/showcase/25-most-use-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/

B E H o L D

STUDENTS AREBECOMING THE TEACHERS !

22 23

WORDPRESS 3

W4WORDPRESS 3

W4A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress.

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.Because the vast majority of plugins are free, it is important to note that they usually do not come with tech support. For this reason it is important to be careful when choosing which ones you want to install on your site. Although there are plugins that can do virtually anything, some are much higher quality than others. In order to choose the right ones, you should ask yourself a few questions. How long has it been since it was updated? Is it compatible with the latest version of WordPress? Are people getting answers to their support questions? What type of rating does it have? Widgets in WordPress are designed to add new features to our sidebars. We can see that with default widgets that we get when we install WordPress.

Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on properly widgetized WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure. Widgets require no code experience or expertise. They can be added, removed, and rearranged in Appearance > Widgets in the WordPress dashboard.

We can add new widgets in form of plugin and there are many to explore and use for all kind of situations.Widgets usually live in WordPress sidebar but they can be also used in footer like in our Twenty Seventeen theme.


Theme decides how our WordPress will look and feel. So choosing right theme for our Wordpress web site is crucial. In most cases themes that you get with Wordpress will do the job but you can always try new themes and make even better product.There are thousands and thousands of themes available online. 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).

Installing themes is easy in Wordpress. There are few ways to do this.First one is easy and we need to navigate to Appearance > Themes and click on Add New button. After install is complete we can activate new theme.Second option is to upload theme throug WordPress dashboard. Download theme to your computer and navigate to Appearance > Themes and click on Upload Theme button.Third way is copying theme to our theme directory but for this we need to have FTP access to our server which is not always the case.

WordPress does not have form management built in out of the box. For that we need to install plugin which will take care of that. We will take a look on several plugins that are known to work well.

1. WPForms 2. Gravity Forms 3. Pirate Forms 4. Ninja Forms 5. Formidable Pro 6. Contact Form 7Choice 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.First we need to install plugin from Plugins tab in dashboard. After installation we can proceed to settings of our plugin which can be accessed from Plugins tab or Settings tab in dashboard.

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.


24

W5WORDPRESS 4 WORDPRESS 3

Working on WordPress fine tuning[ intro to Wordpress SEO, maintenance & security ] W4

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.

Every web site should have social media presence. That does not mean just creating social media profiles for your web site. We need to have our WordPress connected and communicating with social media profiles. WordPress has limited options regarding social media out of the box. We have mostly options in theme to add links to our social profiles.

Most of time it is enough but there are other things that we can do.Social media connection to our WordPress also has big influence on our SEO. So if we want to have best results we need to add Social media plugin.

Main issue with most of social media plugins is performance. Like all plugins they need 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. 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.

1.EA Share Count2.Sassy Social Share3.AddtoAny4.Wordpress to Buffer5.Simple Social Icons6.Social Icons Widget by WPZoom7.WordPress Social Login8.Revive Old Post9.Instagram Feed

Timeframe & Methods:Recall of the last day lesson - 5minIntroduction to WordPress SEO - 10minTheoratical and practical (in Laptops) presentation in WordPress for WordPress SEO - 10minIntro to WordPress maintenance - 10minPractical examples - 10minIntro to WordPress security - 10minPractical examples - 10minQ’s and A’s - 10minExpected workshop duration: Homework explanation - 10minExpected workshop duration: 110minomework review - 15min

Aims:Learning basics of WordPress SEO, maintenance and security.

LECTURE:

Recommended reading:http://www.wpbeginner.com/wordpress-seo/https://moz.com/blog/optimizing-your-wordpress-blog-postshttps://yoast.com/wordpress-seo/https://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdfhttps://blog.kissmetrics.com/simple-guide-to-seohttps://www.sitepoint.com/definitive-guide-to-wordpress-maintenance/http://www.wpbeginner.com/plugins/how-to-put-your-wordpress-site-in-maintenance-mode/https://codex.wordpress.org/WordPress_Backupshttps://yoast.com/wordpress-security/https://codex.wordpress.org/Hardening_WordPresshttp://www.wpbeginner.com/wordpress-security/

75min


27

W5WORDPRESS 4

We were already talk about SEO optimization in our starting chapters. SEO is broad subject and there are many tools that can reduce time and effort. There are several plugins for SEO however our focus will be on Yoast SEO plugin. We need to install Yoast SEO plugin in Plugins tab and activate plugin itself. After that we will get new things in our dashboard.

SEO is important for static pages and for our posts on blog. There is a subtle difference between these two and we will focus on our blog posts SEO.

Basic WordPress SEO:

1.Permalink structure 2.www vs non-www 3.Stop words 4.SSL or no SSL 5.Optimize titles for SEO 6.Optimize descriptions 7.Image optimization 8.XML sitemaps

NOTES:

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.Regular maintenance is essential for stable and fast WordPress web site. When dealing with maintenance in Wordpress we assume that you have Administrator access to WordPress.

WordPress maintenance include:1. Maintenance mode2. Backups 3. WordPress updates4. Comment spam5. Database maintenance and optimization6. Health and security monitoring7. Centralized management (for mutltiple WordPress instances/sites)

Maintenance mode should be used whenever there are some changes done that can af-fect user experience. WordPress has native maintenance mode when updates are being applied however there are plugins that can inform users even better than native solution.Backups are very important and they are frequently negclected. Using automatic solutions for backup is way to go as it can save time and money. Manual backups are also recommended when you have time to do so. 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:

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.

1. WordPress core2. Plugins3. Themes

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

28 29

W5WORDPRESS 4

W6Developing in local environment:Installing MAMP

MAMP

NOTES:

Aims:Teaching participants how to set up an environment for local development.

Timeframe & Methods:Recall of the last day lesson - 5minIntroduction to MAMP and what we get by installing it - 5minDownloading, Installing MAMP- 20minConfiguring MAMP - 20minDownloading, configuring WordPress - 20minConfiguring WordPress - 20minQ’s and A’s - 10minExpected workshop duration: 100min

LECTURE:

Recommended reading:http://webcraft.tools/3-easy-steps-for-install-ing-wordpress-on-your-local-machine/https://wordpress.org/download/http://webcraft.tools/3-easy-steps-for-install-ing-wordpress-on-your-local-machine/

WordPress security is process that can be done in few stages depending on 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.Basic security in WordPress is easy and it is recommended to take some time for that. Basic security consists of few things that become best practic-es long time ago when there was no good plugins for security.

For basic security we do not need plugins but for additional level we need to use them.We will mention Sucuri Security which is free. After installing and activating plugin first we need to generate API Key and then we can dig into setting up security in Sucuri.

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

Keep your WordPress and add ons up to date!

Google is your friend :)

Other things that are also good practice and can be done are:

1. Do not use admin as username2. Use strong password3. Stay up to date

1. Give permissions to users with care2. Protect wp-config.php and .htaccess3. Limit login attempts4. Use only well known security plugins!5. Use Two-Factor Authentication

Working on WordPress fine tuning[ intro to Wordpress SEO, maintenance & security ]

30 31

W6MAMP

W6 MAMP

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 MySQLWe 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 browser2. Go to Tools > phpMyAdmin

3. Go to Databases tab in phpMyAdmin

4. Enter name for database that is going to be used by WordPress and under Collation dropdown select utf8_unicode_ci

Last step is to click on Create button and we have our database ready.

Tools and Apps:Text editor (Notepad++, TextEdit, Sublime Text)Web browser (Mozilla, Chrome, Edge)https://www.mamp.info/en/

Developing in local environment:Installing MAMP


32

W6 MAMP

Our enviroment is ready and we can proceed with Wordpress installation. First we need to download latest stable version of Wordpress from wordpress.org.

After download we can unpack content of archive and copy it to proper location for local development. In our case since we use MAMP that location is:C > MAMP > htdocs

When copy is finished we need to configure WordPress to use database that we created eariler.

Caution: In some cases port 80 can be already used so you will need to change port for Apache to something else.

In order to change port for Apache or MySQL we need to go to settings in MAMP and change what we need to. This is also case for MySQL so you will 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 tolocalhost: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!!!

Now we can check that our MySQL and Apache servers are running under 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 installation in our browser tab. We need to finish installation in order to access WordPress dashboard where we will do most of our setup and work.

After we filled required fields we can log on to our fresh WordPress installation.In order to have good organization of our content we need to know which pages we want to create. For start we will need: HOME, NEWS(blog), ABOUT, CONTACTWe can create now pages that are we going to use.

Next we need to do basic settings. We will go to Settings tab and finish basic set up there. After we are done click on Save Changes button.



W6MAMP

NOTES:

To all the things I’ve lost on youOh oh

Baby, is that lost on you?Is that lost on you?

OOoohhh-

OOoooooOo

Oooooo

Baby is that lost on you

*Lost on you song by LP go-to-favorite song of Bečej Training

When you get older, plainer, sanerWhen you remember all the danger we came from?Burning like embers, falling, tenderLong before the days of no surrenderYears ago and well you know

Smoke ‘em if you got ‘em‘Cause it’s going downAll I ever wanted was youI’ll never get to heaven‘Cause I don’t know how

PRESENTATION OF THE WEBSITES

Aims:Presentation of the websites created by the participants

Timeframe and Concept:Presentation of the website - 10 to 15min per participantComments and feedback - 5 to 10min per participant

During this workshop, the participant will present their work in front of the class.Each presentation will be followed by comments and feedback by trainers and the other participants

Homework explanation - 10minExpected workshop duration: 110minMermework review - 15minRecommendation:

Having a one extra session before this last one in a manner of assistance of trainers to participants with creating their websites

NOTES:

W7WEBSITE

36

Credits:

Icon design: Fonts:

Art:

DYJII logo:

Colors:Front and back cover

Content of this Education Program is created with the knowledge and mentorship of : Dimitrije Badnjarević, 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š

PNGs taken from the Noun Project, under the Creative Commons licence:texting by Gregor CresnarPencil by Landan Lloydchaturanga by Minjeong Kimplank by Minjeong Kimyoga by Minjeong Kim sticky notes by Giannis Choulakiscompany by faisaloversGlasses by corpus delictiBook by Vladimir BelochkinMarker by Darren DutchMortarboard hat by Phil Smithokay by Meg ClingmanList by Landan Lloydreminder by Davo SimeGear, settings by Danil PolshinMouse by FocusGlasses by asianson.designHand Left Thumb Down by Stefan WetterstrandHand Left Thumb Up by Stefan Wetterstrand

ArialCalibriCat_Meow - Maxin Feld Fun_Crayon - Jonathan Harris Loud_and_Clear - Skyhaven Fonts Stale_Marker - Maxin FeldRed_Velvet - BLKBK FontsFront/Back Cover fonts:DK Southside_Fizz - HanodedMyriad ProOrator StdCourier New

Live a Less Electrical Life by Hudson-Powell page 10

Located on the Back CoverTanja Mirković

Page concept colors

PROJECT IS CO-FUNDED BY:

ASSOCIATES:

Photography:Background of the Front Cover taken by Dijana Makijević

http:// www.designyourjob.org / 2017‘ .. so on and so

on ..’

BORIS NEGELI

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

Tanja Mirkovic

‘’ very nice ‘’MIHAEL NIKOLICPrince of Room no. 308

‘’good design is all about making other designers feel like idiots because that idea wasn’t theirs ‘’ Frank Chimero

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

D i e t e r R a m s

design your job i i - salto-youth · wordpress 1 w2 wordpress 1 w2 next we need to do are basic...

Documents