Assignment

Assignment Instructions

Two Assignment Sequences H Generic and Portfolio steps - assignment due dates overlap.

 

Your
Output		 sdiff
code		 Solution Comment
AD | ABC your output AD differs from solution
xyz <   You have xyz\n solution does not
  > b You are missing line w b
ab \ abc You have right initial content, but missing c after ab usually just \n
abc / ab You right initial content, but extra content at end.

 

You need to complete both assignment sequences.

H0 Class Intro and Initial Home Page

  • Login on to IMC Computers
    Username: Full Saddleback Username (include @saddleback.edu, or ivc.edu) Password on IMC
  • Fill In Student Questionnaire - students who signed up for cim298 at the beginning of spring, have already completed the questionnaire. If you recently signed up for cim298 (i.e., March timeframe) then you need to fill in the questionnaire.
  • Login for Questionnaire is Saddleback Username, Password Student ID.
  • Also log in to blackboard and take Quiz 0 - blackboard login info
  • My main index page has videos on getting started and various course offerings at Saddleback.
  • Forward Your Saddleback E-Mail to an account you check. Login to Saddleback E-mail, go to options then settings.

H1 Create Your CIM Home Page

Reading: Navigating a File System, Basic File Transfer, and controlling Apache Web site access .htaccess. Watch both Blackboard Videos CIM-Dreamweaver and FileZilla.

A log file (aka journal) is a text based HTML file, that has an author, a date and entries. A Blog is a Web based Log file, etymology (Web log --> Web-log --> blog). For these assignment you will need to create a log file, and answer all questions in the parts log file written assignment. Make sure you link to your log file from your home page.

Log File Written Assignment: What is a git, cvs, webdav and ftp? How do GIT, CVS, WebDav interrelate? Almost all modern day file systems are based on original Unix Tree file system. What is a Local site Root? What is a File Mapping? In navigating a file system what do ~, ., / and .. represent. Windows uses a back slash \ (falls backward ) for the root folder or other file systems use a forward slash / as the folder seperator.

A log file is a file with a date followed by a note, they normally have multiple entries. A web-based log file is called a Web-log (aka blog). You can also define a log file as a Journal. In the log file assignments, you have one HTML page, enter the current date then answer the log file questions or statements. Application programs often maintain log files. On CIM multiple programs maintain log files. For example, Apache (CIM's Web Server) writes to log files whenever a Web page is accessed. You can view CIM web page statistics, the link just illustrated was created using Webalizer on Apache's log files.

When designing a Web-site keep all file name simple use a consistent nomenclature and mnemonic file names. All local links should be relative, you should be able to relocate the site to another file system or server with no loss. For all local links use the Dreamweaver point to file icon, for all absolute, cut and paste links from the a Web browsers address bar. What is .htaccess, (on cim .htaccess has been disabled) but it is a good tool for controlling Web Access to a Web site. I'm using Apache alias and redirects. What happens when you use these links on cim: https://cim.saddleback.edu/blackboard, and https://cim.saddleback.edu/cim298 ?

Web Page Assignment: Create a default home page on cim.saddleback.edu, make sure you have link to your log file.

H2 Discussion Board CSS Design Analysis

Analysis of CIMW240 Current Ranking and list of all Designs.

The 4th annual TOC Best CSS Design Tournament, is currently selecting the sweet 16, tournament is postponed until 2016

If you have a candidate in the tournament, you may still work on your design, up to 4/8/2016, if you update your CSS design
on cim you need to let me know.

Blackboard has a discussion board where you can make recommendations on the final 2 to enter into the tournament. To do this wewill be looking to add one more to the tournament before 4/11; and set up a single rattail with 4-5 players.

Current Sweet 16 thumbnails Bracket, with round 32 and 64 candidates.

H3 Discussion Board Previous Portfolios Design Analysis

Analysis of previous CIM298 Portfolios (class is now cimw 280)

Reading: Writing a Good Web Site, Webby Judging Criteria

Written Assignment: Blackboard has links to previous capstone/portfolio site, you must post you comments on these sites using the relative blackboard discussion board. You may want to rate the top three, or the ones you think are successful. You can also rate or discuss a portfolio that is present anywhere on the Web.

H4 Introduction to SEO

Reading: SEO Introduction, HTML Site Map, Web Browsers Add-ons (add one or 2 of the SEO addons), Robots.txt.

Log File: What is an XML Site Map, what do these sites do: xmlSite. What type of file is this, hint this site helps. What are google analytic adwords, and Web Master Tools. If you have a site submit it to Google and also submit a site map, you can edit your site map. The Site map is just an XML file. A well done xml site map, with a good description, keywords and title can help with your intial Google display on a search engine hit. What are Apache redirect, alias and .htaccess, can a spider/robot use a redirect. Notices the cim site map, how did it fix this problem? Should you submit your sitemap through robots.txt? Will bad robots obey robots.txt?

In our log file make a comment on CNET SEO tool review.

Try to Install Chrome with Google Toolbar.

H5 XML Review and Image Galleries/Viewers

Review of XML and Image Galleries/Viewers

Reading: Review image galleries at snapShots. -Reading Wikipedia articles: Web Service - XML - XSL - DTD.

Log File: What are two basic categories for image viewers. What is a Web Service? Does flick provide an API and Web Service? What is XSD, XML, XSL and XPATH. Contrast XHTML and XML, hint also define DTD?

Optional Web Page assignment: consider adding a image gallery/viewer to your portfolio. FlashXML.net has quite a few impressive viewers. Lightbox also has a lot of options.

H6 Final Review

Make sure you attend class, take careful notes

Master list of 100 Cheat Sheets -and Cheatography has even more, however you only need to review the cheat sheets in the next section.

Required HTML, Basic Web Development, Course Material (SEO, Image Viewers)

Need to Pick Two Optional Parts

CSS - Cascading Style Sheets, cimw240 |

  • CSS2 - box model, class, tag, id :hover, and child selectors. basic property names, units of measurements
  • CSS2 PDF View
  • CSS3 Generator - transform, transition, border-radius

PHP - Hypertext Preprocessor cimw245 - WordPress

JavaScript - jQuery - cimw160

SQL - Structured Query Language - cimw105

  • PHPMyAdmin SELECT whatToDisplay FROM table WHERE condition ORDER BY ...;
  • MySQL Functions
  • SQL Commands - DML DELETE FROM, UPDATE SET, INSERT INTO, CREATE x;

Will add REGEXP/XML, WordPress and jQuery Spring/2016

 

H7 Optional Review of DW Templates and CMS

Not covered Spring/2015 so it is not due

 

Reading:Site Builders, CMS , Web Site Templates - Dreamweaver Business Catalyst & Exchange.

Log File: Compare/Contrast drupal and WordPress (can ask about this in class). Find a few impressive Web Site template sites and briefly discuss them. In general, CMS is being way over used and templates are being under ultilized. If all you need is a generic Web site then a template is the correct approach. If you need to keep track or users, blogs, or survey then you need a heavyweight CMS system. Briefly review site builders rankings. Comment on IPage and intuit E-Commerce, Wappalyzer firefox add-on gives page technology info as icon at the left side of the address bar. Comment on top useage areas: Apache, Google Analytics, jQuery and Word Press (can click to see breakdown aka analytics). Not sure how they measure Dreamweaver, note some of my Dreamweaver pages don't come up as Dreamweaver in Wappalyzer.

Open source photography template gupta.com

Consider using a Flash, Dreamweaver or other template for your portfolio.

Complete the template assignments in Dreamweaver Textbook for tripsmart and blooms.

Portfolio Step: Site Building Blocks

p>Under My Portfolio, port a link to your portfolio, make a few general comments about why you doing what you are doing. Also make sure you acknowledge any external sources for images/templates.

Also check out other threads and resond to one of the other students portfolio

Your Design Should be broken into three parts: Specifications, HLD (High Level Design), Component Integration - Divide and Conquer

Portfolio Step: Determine your site schematic

Either hand in a hard copy sketch of your HLD and specifications or create a hard copy of it and link it from your footer. You can review the file organizations discussed in chapter 7 assignment for cimw110b. You may use a high level design or UML Visio like tool. Mac UserOmni Graffle wireframe stencil has a 14 day trail version. Powerpoint also allows you to create connectors using flow chart elements.

Portfolio Step: Determine top level site design and theme

Determine your top level site design and theme i.e. what is the the main applications your will be using to generate your portfolio either: Dreamweaver, templates, Flash, Adobe, or CMS. Also will it be a CSS, Flash, CMS or Adobe Photoshop site.

Portfolio Step: Determine top level site design and theme

Determine your main three colors, and font-family.

Portfolio Step: favicon

Also create a favicon that relates to your site.

Create and Implement a favicon for your portfolio, you can always change your favicon image to better match your final portfolio.

Develop a signature for your Web page, your signature should have a favicon.ico version. Favicon.ico is the icon that shows up in the address bar. Favicon works with firefox, and opera; But it is not working with IE. Browser should automatically find it if not, add a link tag in your index.hmtl page in the header, for example..

<head>
<title>MyGreat Index Page</title>

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">


</head>
<body>

.png, .gif and dynamic GIF are also supported

More info at configuring HTML.

If you can find additional infromation on configuring apache, and/or browsers with favicon.ico let me know. Note if you click test1 you will see a bitmap icon. To create an favicon you need to create a 16x16, 32x32 or widerx32 graphics and then use a program to convert it to favicon.ico format. Your have two ways to do this....

  1. The web site convertico.com translates any 16x16 png, jpg, or gif to favicon.ico, online tranlation.

  2. If you familiar with a command line you can download this command line program png2ico . To use png2ico, xtract the file into the directory with your png files; Start --> Run (enter cmd) to start the command console window; Goto the location or your Fireworks document and type 'png2ico favicon.ico fireworks.png'.

Portfolio Step: Social Media Links

Your Portfolio, should have social media links, and also contact us, last update and IP notice. We did started a footer in cimw110a and added IP in cimw110b chapter 6 assignment.