MCC Web Design Workshop

MCC Web Design Workshop

May 3-31, 2014

Hi! I’m Faye.•Industrial engineering graduate

•Mozilla Rep since 2011

•Web enthusiast

•Systems and procedures staff in a car manufacturing company

•Education and WoMoz Team

#MozillaPH #WoMoz

My Contact Details

fayetandog@mozillaph.

org

@fayetandog

fb.me/fayetandog

What we will be doing this May

Day 1: HTML/CSS

Day 2: More HTML and CSS practice

Day 3: Intro to Wordpress

Day 4: Building your Wordpress site

Day 5: Continue building your Wordpress site

Some housekeeping…

•Do we have Internet connection?

•Is Firefox installed?

•Do we have a text editor?

Parts of an HTML Element

Parts of a CSS Ruleset/Rule

Self-study at home

•MozillaPH Education Support Group: https://www.facebook.com/groups/teachthewebph/

•Remix things on Webmaker.org!

•Try your skills at Codeacademy.com!

•Check tutorials at W3Schools.com!

Some housekeeping…

•Do you have the portable copy of Sublime Text installed?

•Have you created a project folder to put your files in?

Day 1 Recap

HTML & CSSHypertext Markup LanguageCascading Style Sheet

Languages used to create webpages.

Imagine HTML is used to build a raw house and CSS is used to create the house’s decorations.

HTML & CSS RECAP GAME!

Day 1 Recap•Most basic HTML elements

Day 1 Recap•Parts of an HTML element

Day 1 RecapHTML tags that we have learned<strong><em><p><img><a><h1> to <h6><ol><ul><div><font> (but do not use this anymore!) use <span> then add a ‘class’ attribute

Day 1 RecapParts of a CSS Rule/Ruleset

Day 1 Recap

CSS properties that we have learneddisplaycolorbackground-colorfloatfont-sizemargin (remember: left top right bottom)padding

WELCOME TO DAY 2!

Some adjustments to our agenda

Day 1: Introductory HTML/CSS

Day 2: More HTML and CSS practice

Day 3: Intro to Wordpress

Day 4: Building your Wordpress site

Day 5: Continue building your Wordpress site

DONE!

Agenda for today•More HTML and CSS on Thimble

•Special characters•Tables•Forms•Styling divs•Positioning divs•Using web fonts

•Working offline•Creating HTML and CSS files•Creating your website folder

•Pages on your website

Special Characters

http://mozph.me/htmlchar

<table>

<th>: table header (column title)

<tr>: table row

<td>: table data

<th> <th> <th>

<td> <td> <td>

<td> <td> <td>

<tr>

<tr>

<form>

•Input Types

•Text

•Password

•Radio

•Checkbox

Styling <div>•height•background-color•color•borders

•sides (top, left, bottom, roght)•border-width•border-style

•dotted, dashed, solid, double, groove, ridge, inset, outset

•padding•margin

Day 2 Recap

•Special characters•Tables•Forms

Some adjustments to our agendaDay 1: Introductory HTML/CSS

Day 2: More HTML and CSS practice

Day 3: Even more HTML and CSS practice/ Intro to Wordpress

Day 4: Building your Wordpress site

Day 5: Continue building your Wordpress site

DONE!

DONE!

Day 3 Agenda

•Using web fonts•Working offline

•Creating HTML and CSS files•Creating your website folder

•Positioning divs•Pages on your website•Intro to Wordpress (if time allows)

Using web fonts…

•Go to fonts.google.com!

Positioning <div>

•http://mozph.me/c1t26c

•Position:

•Static

•Relative

•Absolute

•Float

Working offline

1. Create a folder, and name it *your name*’s Website

2. Create an index.html file.

3. Create a style.css file

4. Create an about.html

5. Create a contact.html

ACTIVITY

•Create your very own multi-page website! You may use Thimble first then copy paste it to your local files to save time from viewing it in your browsers every after updating the file.

ACTIVITY•Specifications:

•For index.html

•Create a two-column website with header and footer. One column shall serve as the sidebar and thus, it should be smaller in width than the other.

HEADER

SIDEBAR CONTENT

FOOTER

•For about.html

•Create a three-column website with header and footer. Retain the sidebar and two equal columns one containing a short description of yourself and your blog, and another containing your educational background.

HEADER

SIDEBAR ABOUTEDUCATIONAL BACKGROUND

FOOTER

ACTIVITY

•For contact.html

•Create a non-functional contact form

Workshop Folder

•http://mozph.me/Le5eHe

Our Agenda So FarDay 1: Introductory HTML/CSS

Day 2: More HTML and CSS practice

Day 3: Even more HTML and CSS practice

Day 4: Intro to Wordpress/Building your Wordpress site

Day 5: Continue building your Wordpress site (Creating more pages)

DONE!

DONE!

DONE!

Day 4 Agenda

•Intro to Wordpress•Intro to PHP•Wordpress Syntax•How to make your HTML site work on Wordpress

Some housekeeping…

•Is XAMPP installed?

•Is Wordpress installed?

Wordpress 101•Wordpress is an open source blogging and Web content management system (CMS).

•Wordpress.com – Blogging platform that focuses on the usage of it. Wordpress handles all the nitty-gritty setup. You need to pay to customize it better.

•Wordpress.org – Site where you can download Wordpress and get support on using the Wordpress platform in your own websites. Totally free, but you have to take care of everything yourself, including your web host.

Why Wordpress?•How is it different with Tumblr, Blogger, Livejournal etc.?

•The Wordpress publishing platform can be downloaded and used independently for your website.

•Excellent customization options with plugins.

•Excellent community support.

Let’s learn to transform your HTML pages to Wordpress themes!

But first…

Let’s learn the building blocks of Wordpress— PHP and MySQL!

(don’t worry we’ll just go through the basics for you to understand what is happening)

PHP

•PHP means PHP: Hypertext Preprocessor (crazy, IKR, it’s called a recursive abbreviation)

•It is a scripting language (remember HTML being a markup language?)

•PHP files contain HTML, CSS, JavaScript and PHP code

•It is executed on the server.

Basic PHP Syntax

A PHP script starts with <?php and ends with ?>

Basic Wordpress Files

•Wordpress themes are composed of a folder of template files, which controls a specific part of your theme.

Basic Wordpress Files•header.php - This file will contain the code for the header section of the theme;

•index.php - This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included

•sidebar.php - This file will contain the information about the sidebar

•footer.php - This file will handle your footer

•style.css - This file will handle the styling of your new theme

Header.php•Simply the header.

•This is where you put the opening <html> tag.

Index.php

•The code begins with <?php get_header(); ?> which will include the header file.

•Next is the loop code to check whether you have posts. If you have one, it will appear. If none, ‘Sorry, no posts matched your criteria’ will appear.

•<?php get_sidebar(); ?> will include the sidebar file

•<?php get_footer(); ?> will include the footer file

Sidebar.php•In our example, we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items, therefore we have wrapped the actual functions in unsorted lists (the <ul> tags).

Footer.php

•Simply the footer.

•Don’t forget to close the <html> tag here!

Activity

•Create your very own one-page Wordpress site! You may search for Wordpress tutorials or ask your mentors if you want to go a little faster on learning Wordpress.

Activity

1. Run MySQL on XAMPP

2. Go to C:\xampp\apps\wordpress\htdocs\wp-content\themes and create your own theme folder

3. Create your theme!

Day 4 Recap•We learned…

•About Wordpress

•How to make your basic HTML website work with Wordpress (copy paste powers!)

•For the purposes of this workshop, we didn’t learn about the essential PHP theories and concepts, we just have to know how the Wordpress syntax (which consists of PHP codes) work as to not intimidate you.

•You can just copy and paste the codes! At least for now. But remember, if you are learning how to program, it is essential you type codes.

Day 5 Agenda

•Wordpress features

•Posts (draft, private, password protected), pages, categories, tags, plugins, users, privacy options

•Wordpress resources

•Theme downloads, free plugins

•Web hosting and domains

Wordpress Dashboard

•Posts

•Categories- the ‘table of contents’

•Tags- ‘index of the book’

•Media

•Wordpress’ way of organizing all your media uploads

Wordpress Dashboard•Appearance

•Themes- choose/upload a theme•Customize- use your theme’s customization features. It varies depending on the theme’s features

•Widgets- find things you can download! Can be added to the sidebar, footer etc.

•Menus•Theme Options- depends on the theme•Editor

Wordpress Dashboard•Appearance

•Themes- choose/upload a theme•Customize- use your theme’s customization features. It varies depending on the theme’s features

•Widgets- find things you can download! Can be added to the sidebar, footer etc.

•Menus•Theme Options- depends on the theme•Editor

Wordpress Dashboard•Plug-ins•Users

• Super Admin – access to the site network administration features and all other features.

• Administrator – access to all the administration features within a single site.

• Editor – publish and manage posts including the posts of other users.

• Author – publish and manage their own posts.

• Contributor – write and manage their own posts but cannot publish them.

• Subscriber – only manage their profile.

Wordpress Dashboard

•Tools•Settings•You can edit basic Wordpress settings here including blog name, privacy etc..

Theme and plug-in resources

•You can search at Wordpress.org or any other sites like fabthemes.com etc. Google is your bestfriend!

•Make sure what you’ll download is a ZIP file. You can upload it directly to your websites.

•You can just download those free themes and edit it to your liking.

•You may buy paid themes as well.

Web Hosting

•Paid web hosting fit for a personal/ low-bandwidth site costs Php 2k- 5k a year

•Domains costs around Php 500 a year

•There are free options but very restricted and not so reliable.

•Recommended: Hostinger.ph

•http://bit.ly/hostingerph

Further reading/ practice

•Learning HTML and CSS•http://w3schools.com•http://codecademy.com

•Learning Wordpress•http://codex.wordpress.org/Getting_Started_with_WordPress

•http://wp-cheatsheet.com/•http://webdesignerwall.com/tutorials/complete-wordpress-theme-guide

Learning PHP•http://www.codecademy.com/tracks/php

webmaker.org