Web Design 2 Assignments

WEB DESIGN 2 ASSIGNMENTS (subject to change)

https://www.codecademy.com/
https://www.udemy.com/
https://www.freecodecamp.com/
https://www.eduonix.com/courses
https://www.w3.org/2002/03/tutorials#webdesign_htmlcss
https://www.w3.org/community/webed/wiki/Main_Page#CSS
http://quirktools.com/screenfly/
https://www.w3schools.com/bootstrap/default.asp
http://www.styleneat.com/
https://helpx.adobe.com/acrobat/using/publishing-interactive-pdf-web-forms.html
http://www.pskills.org/html.jsp
https://extensions.joomla.org/
https://www.codescho ol.com/
https://html-online.com/editor/
https://pixlr.com/editor/
https://sourceforge.net/projects/kompozer/files/current/0.7.10/kompozer-0.7.10-win32.zip/download

April 30

Recreate one of the following sites using joomla

respinola.com
thelowrybrand.com
lhs.hcsdnv.com
hcsdnv.com
The site must be completely functional and completely different in terms of layout.
You must make the home page as well as individual pages to demontrate the appearance as well as function of sub pages and different content areas of the site.

Just for fun

Feb 18

Transfer a Joomla site to godaddy

Login to your godaddy folder with the information provided by me.
For example Sean's URL is http://respinola.com/sean/administrator/
Update Joomla.
Find and apply a new template.
- Modify the template from the orginal.
  - This means change the color scheme from the default and make a replacement logo and favicon.
Include 20 pages of content (inlcuding a picture)
- Some of the requirements below can count toward the page total.
Apply extensions.
- JCE
  - https://www.inmotionhosting.com/support/edu/joomla-25/jce-editor/download-install-jce
- Slider/Carousel
  - at least three images.
- Photo Gallery
  - At least 12 images.
  - Make sure they are royalty free.
- Calendar
  - Include at least one event.
- Social Media extension (https://extensions.joomla.org/)
  - Facebook, Instagram, Twitter
  - Include the feed from at least one social media platforms AND have share/like/follow icons to three different social media platforms.
- News feed
- Search
- Ads (banner)
  - You will create the advertisements for three different business.
- glyph icons-font awesome
- Map/directions
- Edit the css
  - To achieve this you need to make the site appear measurably and literally sigficantly (which means: in a sufficiently great or important way as to be worthy of attention) different. Change items such as color scheme, font, headings, etc.
  - Add at least three of your own classes or IDs to the CSS.

Migrating to new version of Joomla on Godaddy

https://docs.joomla.org/Special:MyLanguage/Joomla_2.5_to_3.x_Step_by_Step_Migration
You may see this error: Duplicate column name 'ordering' SQL=ALTER TABLE `#__languages` ADD COLUMN `ordering` int(11) NOT NULL default 0 AFTER `published`;

For example delete if exists /libraries/cms/controller/legacy.php
/libraries/cms/model/legacy.php
/libraries/cms/view/legacy.php

How to turn off magic quotes gpc for Joomla 3

Error
Your host needs to disable magic_quotes_gpc to run this version of Joomla! Table 'res1805704533345.#__postinstall_messages' doesn't exist SQL=SHOW FULL COLUMNS FROM `#__postinstall_messages`
https://docs.joomla.org/How_to_turn_off_magic_quotes_gpc_for_Joomla_3

Nov 27

Joomla!

Objective: Build a responsive website using Joomla!, a Content Management System (CMS)
Go to https://www.joomla.org/
Download the zip file for Joomla!. Version 3.8.2 is also in your advwebfiles folder.
Create a site on https://www.joomla.com/
Go to https://community.joomla.org/joomla-training.html
- The Beginners Guide to Joomla! 3
- Download and install the C++ updates if necessary
- Watch the following videos. This book is referenced in the videos (https://www.ostraining.com/books/j3e/intro/)
- For Joomla templates and extensions, try Joomlashack: https://joomlashack.com.
- Introduction
  - Introduction to the Joomla Beginner Class
    - Example 1
    - Example 2
      http://cassiecaldwell.com/joomlaville/
  - What is Joomla?
    In this video, we explain what Joomla is. Joomla's goal is to make it easier to put your content online. What does that mean in pratice?
  - How to Plan Your Joomla Site
    In this video, you'll learn how to create a plan for a Joomla site. Our plan to build the site for a city called Joomlaville. This plan will take us through all seven steps of the Joomla workflow.
- Installation
  - How to Install Joomla on the Official Demo Site
    In this video, you'll see how to install Joomla using the official demo site. This demo will give you a Joomla site that you can host free for 90 days.
  - How to Install Joomla on Your Computer
    In this video, you'll see how to install Joomla on your PC or your Mac computer. We recommend that PC owners try WAMP and that Mac owners try Windows.
    - You need to create a database in phpMyAdmin at 1'10".
    - Unzip the Joomla! files into the root directory. This is at 1'49" in the video. Select www directory to find out where the wamp directory is.
    - Download and install wamp if necessary.
      - https://www.youtube.com/watch?v=w9VLZ-eTZqs or
        Installation of Wamp on 8080 Port
    - Use Chrome as the default browser and Brackets as the text editor.
    - After installation the username is root and there is no password for phpMyAdmin.
    - For the Joomla! installation and confisguration screen at 2'50".
  - Try this? https://www.ostraining.com/books/je/pc/
  - Installing Joomla on a P.C.
- Content
  - How to Navigate the Joomla Administrator Area
    In this video, you'll take a tour of the Joomla administrator interface. You'll learn about all of the main areas of the interface, including the dashboard, main menu, extensions and more.
  - The Joomla Content Workflow
    In this video, you'll learn about the Content Workflow for Jooma: CASh: Categorize Add Show This process will help you quickly build categories, articles and menu links.
  - How to Create Categories
    In this video, you'll see how to create categories in Joomla. Following the plan from earlier videos, you'll create categories called About, Attractions, Festivals, Transportation and more. Rod also gives his recommendation for how to deal with the "Uncategorised" category.
    Your categories should like like this
  - How to Create Articles in Joomla
    In this video, you'll start to add the articles we planned earlier in this class. Here are the names of the 12 articles you'll create:
    - About category: Joomlaville Climate (this is later referred to as JoomlaVille Overview), Joomlaville Location, Joomlaville History
    - Attractions category: Museum, Zoo, Aquarium
    - Festivals category: New Years, Independence Day, Mother Day
    - Transportation category: Train Station, Bus Station, Airport
    - https://www.ostraining.com/books/j3e/intro/
      It seems the video skips making the Welcome to Joomla article, this is used for the index page, which is shown at 4'38". The text for the article is also from the book but Chapter 4.
      You can make this now and set it as a featured article so the pages look the same. It is covered in the video "How to Use Featured Articles".
  - Creating More Joomla Articles
    In this video, you'll continue to add the articles we planned earlier in this class. As a reminder, these are names of the articles you'll create:
    - About category: Joomlaville Overview, Joomlaville Location, Joomlaville History
    - Attractions category: Museum, Zoo, Aquarium
    - Festivals category: New Years, Independence Day, Mother Day
    - Transport category: Train Station, Bus Station, Airport
  - How to Add Formatting, Tags and Images to Joomla Articles
    In this video, you'll see how to use the formatting options in Joomla's text editor. You can add bold and italic text, plus bulleted lists. You can also add Tags to categorize your content, decide when your article is published and add metadata for search engines.
    - Minor changes are made to the Climate article and tags are added.
    - At 2'42" it seems as the name of the climate article gets changed to Joomla Overview.
    - Also change the alias to joomlaville-overview
  - How to Link to Articles
    You have completed Parts 1 and 2 of the CASh workflow. In this video, you'll complete Step 3: Show. You'll see how to create menu links to show your content to visitors.
    - You are creating menus for each of the categories to appear in the left sidebar.
    - At 4'03" it has you select the Joomlaville Overview article for the menu. This was previously the Climate article.
    - Finished menu
  - How to Link to a Category Blog
    In this video, you'll create a blog layout which shows several articles. A Category Blog will automatically update to show all the new articles in a particular category. You'll also see how to add a "Read More" link and set up teaser versions of your articles.
    - The new Attractions Menu
    - The Attractions Category Blog with two columns
    - The Attractions Category Blog with one column
  - How to Link to a Category List
    In this video, you'll create a list of articles in a particular category. As with the previous examples, you'll create a menu, menu links and a module.
    - This is the view after changing the List Layouts options for the menu.
  - How to Use Featured Articles
    In this video you'll write a "Welcome to Joomlaville" article that will appear on your homepage. To make this work, we'll use the Featured Article option in Joomla.
    - This is shows the new Fesitvals Menu.
  - Finishing Up Our Menus
    In this video, we finish up the CASh workflow that we planned earlier in the class. This involves adding several articles to a new menu. You'll also see how to rearrange modules.
    - Preview
  - How to Add Images to Articles
    In this video, you'll see how to upload, organize and add images to your Joomla site. You'll see how use the Media Manager, insert images into articles and how to use the "Intro Image" feature.
    - Your page may not look the same as you need to find your own museum image.
  - How to Change the Article Options
    In this video, you'll explore Joomla's Article Options. These allow you to set the global options for your site, although you can also override them on individual articles.
    - This is the preview at 2'57". The text on yur page may not match exactly.
- Extend
  - Understanding Joomla Extensions
    As we continue to build the Joomlaville site, we turn our focus to Joomla extensions. There are five different types of extension:
    - Components
    - Modules
    - Templates
    - Plugins
    - Languages
  - How to Use the Banners Component
    In this part of the class, you'll learn about Joomla's core extensions. In this first video, you use Banners component that allows you to show advertising banners on your site.
    - Breadcumbs and Banner need to be switched and your link should function.
  - How to Use the Contacts Component
    The Contact component allows you to create contact forms for your site. Your contact forms can contain email addresses, phone numbers, addresses and more.
    - The following show the new Contact Us menu item, the contact page and the contact information for the mayor. You will need to find you own image for the mayor.
  - How to Use the Joomla Update Component
    When a Joomla update is available, a message will appear in your administrator area. The Joomla Update component allows you to update your site smoothly with just a single click.
    
    Note: you won't have to use this component if you're using the Joomla demo site. The demo site is automatically updated for you.
  - How to Use the Messaging Component
    The Messaging component allows you to send private messages between users. These users must have at least "Manager" status on your Joomla site.
    
    For the grade, show me that you created a new user.
  - How to Use the News Feeds Components
    The News Feeds component allows to use RSS Feeds to show news from other sites. After you have set up the News Feeds, the news will be automatically updated.
    - The link should show on the Joomla home page in the Main Menu.
  - How to Use the Redirect Component
    The Redirect component collects all the broken links and 404 errors on your site. It stores all those bad URLs and allows you to redirect them to URLs that do work correctly.
    - This will be verified by going to http://localhost:8080/joomlaville/index.php/joomlaville-locations to see if it redirects to http://localhost:8080/joomlaville/index.php/joomlaville-location
  - How to Use the Search Component
    The Search component offers a simple search for your site. You can allow your users to use the search via a module or a menu link.
    - Remember his preview will look different
      
      The preview below shows some of the search plugins turned off
  - How to Use the Smart Search Component
    The Smart Search component is more powerful alternative to the normal Search component. Smart Search offers "Advanced Search" options so that visitors can drill down more accurately. You can also create completely custom Search Filters.
    - Note the order on the menus is different in the video. You may need to reorder the menus on the Modules screen so Search is above About.
      
      To show you created the filter search zoo as he did in the video.
  - How to Use the Module Manager
    In previous videos, we've created modules. In this video, you'll learn much more about modules. You'll see how to position modules in different parts of your site and how show them on certain pages.
  - The Latest Articles menu is below the Main Menu. In the video it is above it. Positioning can be changed in the Module screens and is addressed at 5'26".
    
    The Welcome module in addition to the Most Read module.
    
    The Welcome module is gone after logging in. You must set the Access to guest.
  - How to Use the Plugin Manager
    In this video, you'll explore plugins. The plugins are easy to ignore, but play a very important role on your site. Plugins enable everything from authentication, to editor plugins, caching and much more.
    
    Component = engine. Does the heavy work
    Module = dashboard. Displays information
    Plugin = sparkplug. Helps with small tasks
    Tamplates = paint job
    Languages = translations
    
    The welcome module moved to the bottom of the article.
  - How to Use the Language Manager
    The Language Manager allows you to translate your Joomla site into other languages. With a single click you can install translations that range from Afrikaans and Albanian to Vietnamese and Welsh.
    
    Please add Spanish as a site language. Show me this screen.
    
    Example of the language override in the login module.
  - Introduction to the Joomla Extensions Directory (JED)
    The best place to find new extensions for your site is the Joomla Extensions Directory, or JED. The JED provides lots of information about each extension so you can easily decide which one is right for you. Some of the extensions on the JED are free, and some you will need to pay for.
    
    You should be able to find JCE by searching for it... https://extensions.joomla.org/extensions/extension/edition/editors/jce/
  - How to Install Extensions via Install from Web
    
    Show me your editor to verify JCE was installed.
- Design
  - What is a Joomla Template?
    In this video, we'll introduce you to Joomla templates. What are templates and where can you get them from?
    Template Workflow
  - How to Install a New Template
    In this video we'll show you how to download and install a template called Breeze. This is the example template that we use in many of our Joomla video classes. You'll see how to install and configure a new template, putting modules into the correct positions and setting up your menus.
    
    The template is at https://www.ostraining.com/breeze/
    
    The new template.
  - Find and install a different template.
    - Show me when you are done.
    - Change back to the Breeze template.
  - How to Modify Your Template
    Now that you have your template set up, we'll show you how to modify the color and design of the template. Each template will have different options, ranging from the very simple to the very complex.
  - Site Cleanup
    This is one of the final videos in this class and we're going to tidy up and complete some of the work we've done so far. You'll see how to place your modules in the correct position and also upload a logo and some images.
    
    The Joomlaville Logo at the top of the image and the Attractions footers at the bottom.
- People
  - How to Use the User Manager
    In this part of the class, we're going to talk about creating accounts for your users. You'll see how users are created and how you can control their basic options.
  - How to Manage User Registration
    By default, user registration in Joomla is disabled. You can enable registration to allow people to join your site. In this video, you'll learn how you can manage the registration process for your Joomla site.
    
    Show me the screen after you have signed up a new user.
  - How to Use Access Control
    Access Control in Joomla is the process of deciding what your users can see and do. By default, there are five access levels that control what people can see:
    - Public
    - Guest
    - Registered
    - Special
    - Super Users
- Manage
  - Maintenance and Security
    In the final video of this class, we'll show you how to maintain your Joomla site and keep it safe. You'll see how to take your site offline, run updates and protect your logins with 2-factor authentication.
- Akeeba Backup for Joomla!
  An extension which is around since 2006. Millions of downloads. Countless praise in the Joomla! Extensions Directory. Three J.O.S.C.A.R. awards. A single goal: backup, restore and transfer your site in a snap!
- How to Improve SEO on Joomla! 3 Sites
How to Maintain a Joomla! 3 Site
In this class we show you how manage a Joomla 3 site. Rod explains user access control. He also shows you how to maintain, backup, update and move your Joomla site.

Users
Overview
What Users Can See
What Users Can Do
What Administrators Can Do
Maintenance
Updating Joomla
Updating Extensions
Deleting Extensions
Admin Tools and Backup
Global Configuration
Moving Your Joomla Site
How to Keep Joomla! 3 Sites Safe
How to Build Multilingual Sites in Joomla! 3

Other tutorials: https://www.siteground.com/tutorials/joomla/
- Create a Website with Joomla
- The Most Common Joomla! Questions in our Joomla! 3 Tutorial

Oct 30

Word Press

Objective: Build a responsive website using Wordpress, a Content Management System (CMS)
https://websitesetup.org/
https://wordpress.org/showcase/
Install Wordpress app on Go Daddy.
Connect Word Press to Go Daddy subdomain with Jet Pack.
Make a website for a food truck.
- Home
- Menu
- Feedback/Comments
- Add several widgets
- Add social media buttons

Wordpress setup

Wedding Film School (Youtube)
- How to Set Up a Wordpress Website with GoDaddy: https://youtu.be/Olhhlqs_iFk
- How to Install a Premium Wordpress Theme with GoDaddy: https://youtu.be/g35lhV9UOd8
- How to Build and Design a Wordpress Website: https://youtu.be/mtkC0jtgJI8
WP Smackdown (Youtube)
- GoDaddy Managed WordPress Hosting - Setup Wizard Walkthrough: https://youtu.be/swNtL2SNAss
How To Make a WordPress Website with GoDaddy - 2017 (Youtube)

Wordpress Tutorials

Using WordPress.com to Create a Website
http://en.support.wordpress.com/using-wordpress-to-create-a-website/
Build a Business Website Tutorial
https://en.support.wordpress.com/tutorials/business-website-tutorial/
Build Your Website in Five Steps
https://en.support.wordpress.com/five-step-website-setup/

Examples

https://www.wix.com/blog/2017/01/7-food-trucks-websites-on-the-road-to-success/

Sep 21

Make a responsive layout using CSS

Objective: Build a responsive website using HTML and CSS
Must include the following divs.
- Wrapper (container), Header, Menu, left and right content areas (main and sidebar), footer.
The nav bar in the menu should be responsive and have at least one dropdown.
Appropriate CSS for all divs.
Divide the footer into three columns.
Add divs to the sidebar.
Create several heading styles as well as styles for text in the body.
Responsive for desktop, tablet and mobile.
Use place holder images and text.
Build only the index page.
Upload using Filezilla to the Go Daddy server. I will supply the FTP info.
Examples
- http://www.os-templates.com/premium-website-templates/transform
- https://templated.co/solarize
- https://w3layouts.com/preview/?l=/radiant-energy-industrial-category-bootstrap-responsive-web-template/
- https://templated.co/p/9265150585917340
use the @font-face rule or https://developers.google.com/fonts/docs/getting_started
Incorporate http://fontawesome.io/
Carousel
Social Media icons
Social Media feed
FACEBOOK
- Step 2: Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
- <div id="fb-root"></div>
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
- Step 3: Place this code wherever you want the plugin to appear on your page.
- <div class="fb-page" data-href="https://www.facebook.com/nba" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/nba" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/nba">NBA</a></blockquote></div>
- IFRAME METHOD
- <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fnba&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
TWITTER
- <div class="editor-pics twitter">
  <a class="twitter-timeline" href="https://twitter.com/LowryHigh" data-widget-id="543900127291658240" width="300" height="400" data-link-color="#0066ff"
  data-border-color="#0066ff" data-chrome="noheader light">Tweets by @LowryHigh</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  <div class="clearfix"></div>
  </div>
- Twitter 1
- Twitter 2
- Twitter 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Great Business Inc.</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="I brief sentence about your website/busness" />
<meta name="keywords" content="Radiant Energy Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
</head>

Aug 28

Tutorial: How to build a HTML5 website from scratch

Objective: Build a responsive website
http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch
Use the shared google doc for the directions and save when instructed.

Return syllabus signed by parents