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

• Complete the 5 steps at https://cim.saddleback.edu/~class/cimRoot/de.html
  Login and ftp access for CIM is Saddleback Username, Password Student ID; canvas and mysite uses your MyStie password
• Make sure you complete the canvas intro quiz

Permalink - Open Assignment New Window

Analysis of previous CIMW280Portfolios (class was called cim298)

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

Permalink - Open Assignment New Window

Reading: Basic File Transfer, and controlling Apache Web site access .htaccess. Watch both Canvas 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:

1. What is a git, cvs, webdav and ftp?
2. How do GIT, CVS, WebDav interrelate?
3. 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?
4. 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 separator.

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/canvas, and https://cim.saddleback.edu/cimw280 ?

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

Permalink - Open Assignment New Window

Make your cim home page (aka https://cim.saddleback.edu/~sbusername) as your portfolio. If you are using an external site or specific subfolder on cim to host your portfolio, make sure your default home page has a link to your portfolio.

On canvas discussion board. Review the previous discussion board on past portfolios.

Canvas also has a discussion board where you will post the basics of your portfolio design ideas. Your Design should have design goals, central theme and an HLD (High-Level Design). You should also reply to another student's post.

HLD Details: your HLD needs to include your final name convention (mnemonics/nomenclature), It would be advantageous to create a 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.

You can use AI to create your wire frame, you can also use AI to refine it.

Permalink - Open Assignment New Window

Create an account on linked-in and request add to network to my account.

Then sign in to Saddle back's handshake and submit a resume for review.

Permalink - Open Assignment New Window

Post analysis of current CIMW140 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 2020

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

Permalink - Open Assignment New Window

Watch all HTML canvas videos on canvas then complete the HTML canvas quiz.

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. Some web-servers will automatically load a favicon.ico file. But you can always add a link tag to your web page, this page has a iconSample.png link tag, 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">

<!-- "shortcut icon" is being deprecated, we just "icon" , for types you can have image/png and image/gif -->

</head>

Historically .ico was the recommended format but now png (W3C recommendation) and gif are supported. Firefox and opera support advance png and also animated gifs.

More info at configuring HTML.

If you can find additional information 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 32x32 (standard) or I would recommend a 128x128 to support smart phones support higher resolutions. Your can convert to the historical ICO format:

1. The web site convertico.com translates any 32x32 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'.

Permalink - Open Assignment New Window

Your Portfolio, should have social media links, and also contact us, last update and IP notice

.All sites should have a footer, you need to create footer with contact and about information. Put the footer you are creating at the bottom of you main home page (i.e., https://cim.saddleback.edu/~sbusername) . More detailed information...

1. Contact information should always have an e-mail contact link. if interested you may want to create a Spam-Proof e-mail address Web page, spam proof little dated with document.write created a JavaScript script, that makes it very difficult for spam-bots to harvest e-mail addresses. You can also draw images in Fireworks/Photoshop or create a e-mail contact link using Flash. Other points to consider in contact information are formal names, business locations or business phone number. For this part of the test you need only a basic mailto link.
   Notice this Spam Proof:
   
2. Add an about link, if you have a social media account such as Facebook or linked In, you can use this as your about-me link. About-me refers to the student creating the Web page, not the professor teaching the class. , Make sure you use a Facebook badge and link to your Facebook page. For linked in use one of these profile-badges(just pick one and use the left text box code) - For example, my linked in is:
    
   remember don't link to my page, link to your page.  - Lots of badge image icon, be consistent.
3. You may need to make your linked-in account public.
   
   
4. No one is using QR, but try to add one anyways QR generator
   
   
5. Deprecated - Not Required This is an optional Site Map Research. With CS4 Dreamweaver dropped support for site map, In place of a site map, look into XML site maps. XML site maps have became a standard that search engines use to index Web sites. This site has an XML site map generator. Enter your full URL make sure you include index.html, then look at the bottom of the Web page, for the XML output. Don't submit your Web site to a Search engine. Don't copy the XML data to cim, this is for your interest only. If you must have a site map, which isn't required for CS4 users, take advantage of one of a 30 day trail version of Web based site map generator: You can look into A1 Website and this application software Smart Draw looks good. Reminder it is optional for CS4 users to post a graphic site map, don't post any XML output or do a Search engine submit. You can use search bliss, which is a java script widget site. We will cover SEO and site maps in CIMW 280 capstone portfolio.

Permalink - Open Assignment New Window

For this assignment chose one of the frameworks below and redesign you home page using it

Optional Bootstrap Book

• Series: Sams Teach Yourself Bootstrap
  
• Paperback: 432 pages
• Publisher: Sams Publishing; 1 edition (November 14, 2015)
• Language: English
• ISBN-10: 0672337045
• Valorebooks.com $20 | Amazon $20 also

Basics Matter! I have seen so many students in the last 2 years fooling around with Bootstrap, and running into major problems because they don't have the basics. Basics matter, if you have not taken cimw115 take it. If you are not sure about Dreamweaver's site definition, files and/or folders make sure you re-watch the entire cimw115 cim-dreamweaver video set.

• 2023 Best JavaScript Front end Frameworks - Skeleton and Bootstrap again in 20 best frameworks 2023 - CSS RWD have not changed in 10 years 2014 Best Frameworks, its been bootstrap and foundation one and two for years. - Lightweight CSS RWD frameworks skeleton remains a favorite
• Wappalyer Bootstrap - ASP.net - INK - Foundation; Problem more Server Side (RoR) and are not RWD. INK is part of Foundation and ASP.net is MVVC not really an RWD.

Modern day RWD (Responsive Web Design) CSS frameworks fall into two groups lightweight and heavyweight. Lightweight frameworks provide the skeleton (aka 2by4 framework) for an RWD site, they have little if any JavaScript, and have a streamlined CSS file. Since they are lightweight, its easy to comprehend the code. Lightweight systems don't provide default formatting of your content. In addition you can load your own JavaScript libraries. However, the JavaScript libraries may or may not be RWD. The most popular lightweight systems are...

• Skeleton simple light weight
• Simple Grid lightweight
• Pure.css - Yahoo CSS Framework

In order to maintain compatibility with jQuery UI components and all the CSS design students have written the future cimw160 website will be based on Skeleton.

Heavyweight RWD frameworks, provide not only the RWD framework, but also entire JavaScript frameworks, JavaScript user interface components, and content formatting. The most popular heavyweight RWD frameworks are...

• Foundation geared for Web Applications
• twitter Bootstrap most popular mobile first RWD framework
• twitter used Bootstrap 3. bootstrap 3 is very stable which version 3 vs 4 vs 5; 5 replaced jQuery with pure vanilla JavaScript; 4 is supported by Adobe DW, NetBeans has 3.3 twitter support

  Bootstrap Version Comparison
  Version	JavaScript	IDE	other
  3	jQuery 1.x	NetBeans 10+	stable still supported - Twitter
  4	jQuery 3.4.1	Dreamweaver File --> New	Browsers prior IE9 not supported, faster style-sheets and new components
  5	Vanilla JavaScript	site download	IE11 and down not supported, can use jQuery with bootstrap 5.x

If you are starting brand new project then heavyweight framework may be the best tool for the job. However, if you already have a lot of custom CSS code and JavaScript then lightweight is probably the best path to take. Latest version of Dreamweaver cloud provides full support for Bootstrap, Bootstrap provides an RWD framework, and its own set of user interface tools (DW Bootstrap components) very similar to jQuery UI. Nota bene, Bootstrap is a heavy weight system you have to be good with a powerful IDE like Dreamweaver in order to use.

For this assignment chose one of the frameworks above and redesign you home page using it.

Make sure you home page has links to your assignment. Also include a short narrative why you chose that framework. In H6 and H7 you will be modifying the RWD framework, you start up in H5. I'm assuming you are using either Dreamweaver or NetBeans, but other IDEs should have some sort of support for Bootstrap I will be creating a bootstrap site in class. Steps for DW are relatively easy...

1. First make sure you have a correctly defined site definition
2. DW File → New, Select Site Template → Bootstrap Theme (Pick a sample bootstrap template)
3. They give yo a file with lots of help attached
4. You may want to open Windows insert panel select category bootstrap (need to be in live mode to drag and drop)
5. Menus are always ul, li grouping, not class names and ids.
6. Bootstrap is JavaScript is loaded at end; beginning loads bootstrap CSS
7. Its a standard 12 column fluid grid layout, bootstrap has a lot of class names;
   You have a container, with rows, each row has 12 columns "grids"
8. Learn to use IDE and feel out the naming/structure convention.

CIMW140 CSS/RWD discuses the grid system layouts of the above RWD frameworks. The problem with these frameworks, they don't balance content size. CIMW140 also covers a more modern layout, called Flexbox.

Permalink - Open Assignment New Window

You need to do either NetBeans Bootstrap or Dreamweaver (DW) Bootstrap templates. If you are a DW user it is recommended you learn how to do DW templates

Install Bootstrap on Netbeans

1. Get (aka download) the sample zip file.
2. In Netbeans File --> Import (the zip file you just downloaded)
3. You should have a new project with two html files that work with bootstrap 4.x

Netbeans is an open source stable integrated developers environment (IDE). It is very good at CSS, JavaScript, PHP, Java and SQL. It also supports many other less used languages. Steps to completing this lab are in the 5/1/2019 webcasts and getting started outline:

1. Install recent version of Apache Netbeans
2. Install Netbeans reboot your System
3. Add NetBeans Connector to Chrome
4. Start up Apache NetBeans
5. In NetBeans File --> New Project
   1. Select HTML5/JavaScript HTML5/JS Application
   2. Select a location to save your work
   3. Select Download Online Template - Select a Bootstrap Template
      You can select any RWD framework.
      
   4. Click Finish
6. You Edit file in document windows, the left navigator is your DOM selector, you have Code folding, and automatic HTML 5 Verification
7. You test file using Chrome, look for ICON on Chrome, may need to manually add links to your browsers.
8. You save file and reload/refresh with Chrome

Add Bootstrap Widgets - pay attention which bootstrap version is loaded 3 or 4, It will be listed in your HTML header. Make sure you use the right bootstrap major version either 3 or 4, The minor version number should also line so Bootstrap 3.3,1 is the same as Bootstrap 3.3.7. The third number is just bug fixes. In general its, MajorNumber.MinorNumber,BugFixesPatches, HTML 4.0 was actually HTML 4.01 is had a quick bug fix after release. Links for Bootstrap 3.3.x

• Bootstrap 3.3
• Components Tabs list all available widgets (right side tab bar), each one has examples and code. Always pay attention to the div block structures.
• In the webcasts I added a drop down Bootstrap menu using the Bootstrap 3.3 examples.

Permalink - Open Assignment New Window

You only need to do one H7 either NetBeans/Bootstrap or Bootstrap/DW templates.

We will be creating a bootstrap DW template page in class. A DW template is a page with non editable regions, when you update the non-editable regions on a master template page, all HTML pages that use the template page are automatically updated. So we will create a bootstrap page, and keep the headers and footers as global menus, that can be updated at any time. Each individual page on the site will have its own editable content, but shared a global header and footer from the master page.

Steps

1. Make sure you have a site definition correctly created.
2. File new → Starter Templates, explore the various templates, select one of the bootstrap layouts
3. Once open File → Save as Template, call it main.dwt, dwt is the Dreamweaver template extension, notice how the file panel changes.
4. By default the entire template page is set as non editable. For the top header, set your global links
5. Set you footer, contact, social links
6. Right click regions between header and footer and set them as template → Editable, We have three types of editable regions, edit, optional and repeating. Edit implies pages based on main template are allowed to edit these regions. Optional means pages based on main template can delete region; repeating implies you can repeat the region (e.g., article can be repeat 1 or more times). Once you set the first region, you will see a special XML comment that DW uses to signify the name and type of edit region. You can manually insert XML comment tags enclosing HTML tag groups.
   
7. Save the page and restart DW.
8. Create three pages based on main.dwt. File →New, select category site templates you should see your main.dwt file. Select and save file
   as indexTemplates.html, other.html and sample.html. We now have three files based on the main.dwt template.
9. Edit each file using the editable regions.
10. Go back to main.dwt and set up local-links to these three files, when you save the template, the three other files will be updated.
11. Set the templates folder to cloaked.
12. Put your entire site to cim home page and test it.

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: RWD Framework, Dreamweaver, templates, Flash, Adobe, or CMS. Also will it be a CSS, Flash, CMS or Adobe Photoshop site.

Popular RWD Frameworks - 10 RWD Frameworks - Comparison of 4 Frameworks

1. Bootstrap - most popular, well integrated into DW creative cloud. Cons: heavyweight - not suited for a small site, companies hire on basic skills.
2. Foundation 6 by Zurb - better for a business site, but has a steep learning curve.
3. Skeleton UI - lightweight, simple good for simple site or a beginner, but may not have as active development
4. PureCSS.io Yahoo - lightweight, can add bootstrap components
5. uiKit - lightweight, from WordPress Joomla developers, active developing team

Conclusion, only Bootstrap is automatically integrated in DW. If using DW, you should be able to add extension for skeleton or another lightweight (aka small footprint) framework.

Permalink - Open Assignment New Window

Review of XML and Image Galleries/Viewers

You should make sure your portfolio has a slide show or similar.

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.

Permalink - Open Assignment New Window

Look into getting a Google Developers Standard "Free" account, First watch the google developers YouTube Video.

The current google developer system pushes AI and cloud useage as a pay service.

Log File: What is an XML Site Map. Generate an xmlSite map for your home page site.
What is Google adwords(5 Minute Video first)?

Web Page Assignment: Get a google developers account and add the site map generated as part of your log file.

Permalink - Open Assignment New Window

Make sure you site passes both HTML5 and CSS, validation. Add validation links.

Add a link checking add-on, test all page links.

Finally make sure you test your site on a computer, that is not the one you did the development on.

RWD Checklist...

1. May want to use an RWD frame work like bootstrap
2. Check your site using Firefox Web Developer View - Responsive layouts.
3. With DW goto to live view and use the side scrubber.
4. In Chrome, right^click inspect, the second top icon Carl-Shift-M "toggle Device Toolbar", can set the device you want to view your page on.

Once again make sure you test your site on a computer, that is not the one you did the development on.

Permalink - Open Assignment New Window

May 24 2023 is the last day of class, make sure cim home page portfolio is up and running.

Permalink - Open Assignment New Window

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)

• Basic HTML
• More Complete HTML List - <pre>, <div>, <span>, <iframe>
• HTML5, form pattern tag, <header>, <footer>, <aside> - cimw 115;

Need to Pick Two Optional Parts

CSS - Cascading Style Sheets, cimw140 |

• 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 cimw145 - WordPress

• PHP - Basic PHP
• PHP Fundamentals
• W3C Live Examples

JavaScript - jQuery - cimw160

• Basic Function and RegEXP overview
• Other JavaScript
• W3C JavaScript

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

Not covered Spring/2017 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 utilized. 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 usage 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.