MCC Web Design Workshop
-
Upload
faye-tandog -
Category
Education
-
view
264 -
download
0
description
Transcript of MCC Web Design Workshop
![Page 1: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/1.jpg)
![Page 2: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/2.jpg)
MCC Web Design Workshop
May 3-31, 2014
![Page 3: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/3.jpg)
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
![Page 4: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/4.jpg)
My Contact Details
fayetandog@mozillaph.
org
@fayetandog
fb.me/fayetandog
![Page 5: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/5.jpg)
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
![Page 6: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/6.jpg)
Some housekeeping…
•Do we have Internet connection?
•Is Firefox installed?
•Do we have a text editor?
![Page 7: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/7.jpg)
![Page 8: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/8.jpg)
Parts of an HTML Element
![Page 9: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/9.jpg)
Parts of a CSS Ruleset/Rule
![Page 10: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/10.jpg)
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!
![Page 11: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/11.jpg)
Some housekeeping…
•Do you have the portable copy of Sublime Text installed?
•Have you created a project folder to put your files in?
![Page 12: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/12.jpg)
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.
![Page 13: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/13.jpg)
HTML & CSS RECAP GAME!
![Page 14: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/14.jpg)
Day 1 Recap•Most basic HTML elements
![Page 15: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/15.jpg)
Day 1 Recap•Parts of an HTML element
![Page 16: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/16.jpg)
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
![Page 17: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/17.jpg)
Day 1 RecapParts of a CSS Rule/Ruleset
![Page 18: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/18.jpg)
Day 1 Recap
CSS properties that we have learneddisplaycolorbackground-colorfloatfont-sizemargin (remember: left top right bottom)padding
![Page 19: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/19.jpg)
WELCOME TO DAY 2!
![Page 20: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/20.jpg)
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!
![Page 21: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/21.jpg)
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
![Page 22: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/22.jpg)
Special Characters
http://mozph.me/htmlchar
![Page 23: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/23.jpg)
<table>
<th>: table header (column title)
<tr>: table row
<td>: table data
<th> <th> <th>
<td> <td> <td>
<td> <td> <td>
<tr>
<tr>
![Page 24: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/24.jpg)
<form>
•Input Types
•Text
•Password
•Radio
•Checkbox
![Page 25: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/25.jpg)
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
![Page 26: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/26.jpg)
Day 2 Recap
•Special characters•Tables•Forms
![Page 27: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/27.jpg)
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!
![Page 28: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/28.jpg)
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)
![Page 29: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/29.jpg)
Using web fonts…
•Go to fonts.google.com!
![Page 30: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/30.jpg)
Positioning <div>
•http://mozph.me/c1t26c
•Position:
•Static
•Relative
•Absolute
•Float
![Page 31: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/31.jpg)
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
![Page 32: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/32.jpg)
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.
![Page 33: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/33.jpg)
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
![Page 34: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/34.jpg)
•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
![Page 35: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/35.jpg)
ACTIVITY
•For contact.html
•Create a non-functional contact form
![Page 36: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/36.jpg)
Workshop Folder
•http://mozph.me/Le5eHe
![Page 37: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/37.jpg)
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!
![Page 38: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/38.jpg)
Day 4 Agenda
•Intro to Wordpress•Intro to PHP•Wordpress Syntax•How to make your HTML site work on Wordpress
![Page 39: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/39.jpg)
Some housekeeping…
•Is XAMPP installed?
•Is Wordpress installed?
![Page 40: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/40.jpg)
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.
![Page 41: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/41.jpg)
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.
![Page 42: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/42.jpg)
Let’s learn to transform your HTML pages to Wordpress themes!
![Page 43: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/43.jpg)
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)
![Page 44: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/44.jpg)
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.
![Page 45: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/45.jpg)
Basic PHP Syntax
A PHP script starts with <?php and ends with ?>
![Page 46: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/46.jpg)
Basic Wordpress Files
•Wordpress themes are composed of a folder of template files, which controls a specific part of your theme.
![Page 47: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/47.jpg)
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
![Page 48: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/48.jpg)
Header.php•Simply the header.
•This is where you put the opening <html> tag.
![Page 49: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/49.jpg)
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
![Page 50: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/50.jpg)
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).
![Page 51: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/51.jpg)
Footer.php
•Simply the footer.
•Don’t forget to close the <html> tag here!
![Page 52: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/52.jpg)
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.
![Page 53: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/53.jpg)
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!
![Page 54: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/54.jpg)
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.
![Page 55: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/55.jpg)
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
![Page 56: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/56.jpg)
Wordpress Dashboard
•Posts
•Categories- the ‘table of contents’
•Tags- ‘index of the book’
•Media
•Wordpress’ way of organizing all your media uploads
![Page 57: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/57.jpg)
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
![Page 58: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/58.jpg)
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
![Page 59: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/59.jpg)
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.
![Page 60: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/60.jpg)
Wordpress Dashboard
•Tools•Settings•You can edit basic Wordpress settings here including blog name, privacy etc..
![Page 61: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/61.jpg)
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.
![Page 62: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/62.jpg)
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
![Page 63: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/63.jpg)
•http://bit.ly/hostingerph
![Page 64: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/64.jpg)
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
![Page 65: MCC Web Design Workshop](https://reader035.fdocuments.us/reader035/viewer/2022062511/54b6c1624a7959ec1b8b45f7/html5/thumbnails/65.jpg)
webmaker.org