Assignment_13_JavaScript.doc

Programming for the Internet

with

JavaScript – Assign13

11/29/2015………..………..…..……….…..Learning/JavaScript/Assign13-JavaScript.doc

[email protected] or [email protected] M-F 6am-8pm, S-S 8am-8pm and by Appointment

http://JilMac.com JilMac 802-254-8628

1.

Review

2.

Reading Assignment

3.

Discussion Assignment worth up to 2 points

4.

Code Examples Assignment worth up to 3 points

5.

CHAT times will be worth up to 1 extra credit point per wk

===========================================================

1. Review

 CHECK YOUR GRADES & BADGES - I'm not perfect ... I may have overlooked something ... Post to the forum you want reviewed. There are 4 badges you can earn: Sub-Directories/Libraries, Menus, PHP Include & Project Outline

 Breathe and Laugh –

THIS IS NOT A RACE – This is a journey.

 Project Outline page https://sites.google.com/site/jilmactraining/Classes/project

 Grading Rubric https://drive.google.com/file/d/0B_nsZH_N7X9mZkZHVEVDNDgtVXc/edit?usp=sharing

 https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec

 REMEMBER Watching Recordings is REQUIRED - you receive an extra credit point for 100 words what you learned. For anyone who is trying to catch up - watching the recordings is an EXCELLENT way to catch up fast and earn points.

 Class Web Site’s Semester at a glance:

https://sites.google.com/site/jilmactraining/internet-programming-js/ip-assignments

 FREE TRAINING from ADOBE http://tv.adobe.com/channels

 Remember you are allowed to LEARN - at Any time during the semester. That also means you can go back and re-do/add-to any assignment that you did not get the full 3 points for. Or do research assignments.

 CCV’s new website went LIVE in the Fall 2013. It took 1 year to design & develop. The existing website was outdated, was becoming difficult for users to navigate, and maintenance was an increasing burden for staff. CCV's President Joyce Judy extends her gratitude to the many staff members who wrote, edited, and re-edited content for this project. This took a herculean effort.

 The new site has a contemporary, clean look, and it incorporates many advanced features of a modern website. It is responsive to users’ screen size, whether that’s a laptop, a large-screen television, a tablet, or smart phone.

 The information architecture has been drastically simplified, making it more intuitive and easier to locate the information you need. This is the result of many detailed decisions about what is needed on the site and what can be safely transferred to other locations such as the portal. This pairing down will make our lives easier, and I’m certain that for our current and prospective students, the information they most need will be no more than a few clicks away.

Copying as Marketing--Thinking About Copyright

Videos can now be imbedded, Audio can be streamed, this is a form of ADVERTISING for a website!!

How to Handle Price-

Sensitive Design Clients

2. +Reading Assignment

Read Chapter 17 – Scripting Mobile Devices

Changing your Orientation, Handling Touch Events, Differentiating Devices, Locating Your

Device.

JavaScript: Visual QuickStart Guide

Tom Negrino(Author), Dori Smith(Author) Book's Web Site http://www.javascriptworld.com/

 Download the scripts - click the download button from the TOP Nav http://www.javascriptworld.com/

Before each chat I will be updating our class web page http://stweb.ccv.edu with this semesters data. You will see each assignments changes the week before. You are free to look ahead = just be aware I may change small things.

Breathe deeply & Laugh - it fuels the brain with Oxygen - which is important in the learning process!

3. Discussion/Research Assignment – 2 points

Research CMS - Content Management Systems



I use Google Sites as my CMS.



CMS it’s here to stay. How do we integrate it into our regular sites.



When you do a view source on CCV.edu's new web site .... what is it written in?



And how is setting up a URL different/same. We will be going over these

concepts in Chats, Workshops & Videos.



The documents are on this site: http://sites.google.com/site/jilmacgsites/

on the

documents link from the left-nav.

http://sites.google.com/site/jilmacgsites/home/documents

Comparing you can also use the Documents from this class.



CMS Software Options

http://www.cmsmatrix.org

/

the list GROWS !! 1200 CMS



300+ words and links to your research.

4.Code Examples=Before + After – 3 points

Do 3 Before + After examples – post them to your Assignment Page on your Web Site.

Chapter 17 – Scripting Mobile Devices

Changing your Orientation, Handling Touch Events, Differentiating Devices, Locating Your

Device.

To learn about JSON=JavaScript Object Notation - w3Schools http://www.w3schools.com/json

Wikipedia defines JSON as "is an open standard format that uses human-readable text to transmit data objects consisting of attribute– value pairs. It is used primarily to transmit data between a server and web application, as an alternative to XML."

When you kids are not here – Daddy & I eat in the living room. They giggled and said when you guies are not here – we eat in the living room too!! LOL

If someone else has something more exciting than your example – go into their source code (View, Source Code) and see what they did, compliment them on it. Or as Chris Pederick says “Inspired by”. An excellent example of complimenting them can be found in the CHAT outline – for the Web Developer Toolbar http://chrispederick.com/work/web-developer/features/ under Acknowledgements. Things I’m asking you to do in our Assignments – are HOW THINGS ARE DONE IN THE REAL WORLD. This is an Open Source community – where you EARN respect, not Salaries. You are working under the “Volunteer” rules of conduct –vs- the “Corporate” conduct.

5. CHAT – 1 point extra credit

Each Week - I have a set time where I present material and answer student’s questions live. It is NOT

required - but it is nice to touch base with students and answer questions real time. I also go over the

chapter examples and present material from sources other than our text book.

 Watching each weeks chats are HIGHLY recommended - they cover topics that may not have been covered in the regular postings. Plus if you comment as if you were in the chat – you get Extra Credit too. JilMac’s discussions are never closed – you are allowed to learn any assignment at any time of the semester.

CHAT – Dates & Times are on the Recording page of

https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec  Open a browser window

 GoTo http://JilMac.com web site

 From the LEFT-NAV select “Connect with JilMac”

 It will bring you to the Adobe Connect Pro web site.

 Enter the name you want displayed – NOTE: FERPA, please consider the CHATS a field trip. They will be recorded, and they will be available on the internet to anyone who has the URL address. So if you don’t want to use your real name – you don’t have to! Pick what you want displayed.

 Come when you can – leave when you must – you are always welcome! Some of us will stay up late to solve issues or discuss other topics – you are always welcome to watch. Invite your family, friends, associates to see what an On-Line meeting looks and works like.

 Those who have microphones – use them – Mary was able to use hers last week. It made the experience richer.

o To set up your microphone, once you are in Adobe Connect PRO

o Click Meeting > Manage my Settings > Audio Setup Wizard

o If this is the first time you have used Audio – then install the small app

If you have used Audio in Connect Pro then just click the NEXT button and follow the instructions

=================================================================================

Forms in Google

Form Verification – creating clean code - how do you make sure?? And continuing on with – Programs that generate JavaScript code??

Dreamweaver does with Spry Libraries

Photoshop does with Slide Shows – it’s fast and accurate!

Note: Photoshop CS Automating Slideshows is actually done in BRIDGE now So there are many ways do automate – Photoshop Elements even has one! Google Maps – has lots of JavaScript routines you can use

Music Web sites – generate code for you to link to their music

YouTube allows you to Embed Objects to your web pages

Picasa – allows you to Embed a Flash Slideshow, Create an RSS feed, or send a link Sample of the code generated by YouTube to embed a video

<object width="640" height="385">

<param name="movie" value="http://www.youtube.com/v/SpThWN3jkBE? fs=1&amp;hl=en_US"></param>

<param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param>

<embed src=http://www.youtube.com/v/SpThWN3jkBE?fs=1&amp;hl=en_US

type="application/x-shockwave-flash" allowscriptaccess="always"

allowfullscreen="true" width="640"

height="385"> </embed>

</object>

Let’s look at what can be generated for free on Google: http://sites.google.com/site/jilmacgsites/

How can we integrate CMS systems into our Web Pages? Where does one thing leave off and another begin? “It Depends” – famous quote by Jen Kramer.

CS4, CS5.5 and upcoming CS6 approaches the slideshow in a very different manner than CS3 (created in Automate). CS4+ use Bridge to invoke the AUTOMATE, they have you build them in Bridge.

http://help.adobe.com/en_US/Bridge/3.0/WSCF044571-2772-4d28-9EBD-2C9F46AF008A.html

Video showing how to create www.adobe.com/go/lrvid4014_bri.

There is a plug-in for Photoshop CS4 to enable you to create Slideshow from WITHIN Photoshop CS4. It comes with mixed reviews – as any change does, here are some snips from the Adobe Community site:

 The old web gallery tool is an optional plug-in now. Instructions for downloading and using it are in the comment just above yours, and documentation for the optional plug-in is at

http://help.adobe.com/en_US/Photoshop/11.0/WS4B2B82C2-F8F7-4464-AB29-EFE7FDDDB109.html

Sprite Animations: Vampire Kitty Lives

%2022%202012&utm_content=SitePoint%20Newsletter%20November

%2022%202012+CID_42ca970c1a88bab01d36db88fbe1d4be&utm_source=Newsletter&utm_term=Sprite %20Animations%20Vampire%20Kitty

How to Duplicate Elements Using CSS3 Box Shadows

http://www.sitepoint.com/css3-box-shadow-elements/?utm_medium=email&utm_campaign=SitePoint %20Newsletter%20November%2022%202012&utm_content=SitePoint%20Newsletter%20November

It will be interesting to see how future versions of Photoshop and Elements approach automation.

Adobe Photoshop/Bridge/DreamWeaver Web Photo Gallery

Generated ALL THE CODE in the "Adobe Web Gallery" directory in Assignment13  Photoshop CS5 Optional Plugins

 Adobe Photoshop CS5 optional plugins and ReadMe file

 The following download is for the Adobe ﾮ Photoshop ﾮ CS5 English version.

 Some plug-ins and presets have been removed in Photoshop. If you still want to use these plug-ins and presets, you can download this package and install.

 The following plug-ins and associated files are included in this package: Photoshop CS5 Optional plugins

 ReadMe

 Picture Package (ContactSheetII)  ExtractPlus (Windows-only)  PatternMaker

 PhotomergeUI

 Web Photo Gallery (WebContactSheetII) plus presets  Script for Layer Comps to Web Photo Gallery

 Texture presets for Texturizer  TWAIN



Ok - here is what happened. or what I think happened.



However you grabbed the file (xml spy??) cd_catalog.xml ... you did not get the first line.

<?xml version="1.0" encoding="utf-8"?> DreamWeaver CS4 uses this one



<?xml version="1.0" encoding="ISO-8859-1"?> is what w3schools.com wants

Plus xml spy inserted a comment - you can have comments but not on the top of the

document.



Plus it put in some dashes - which you see - depending on the editor which open and close

records - the ones you had upset it - and I had to remove the first few dashes.



You need to have the XML have strict syntax - it's fussy just like a database.

If you can display the xml file - it should be ready to run



Demo FireBug.

 In the Watch TAB on the right hand side of the FireBug screen  There are two main areas: THIS and Scope Chain

 This is what is happening right now – which is a LOT

 Scope Chain – Displays what happens in each “round” of walking the code.  We will concentrate on the Scope Chain

 Then F5 to re-run Program

 Continue > through it – keep opening the Scope Chain for both these examples 0+ Loads the JavaScript 1+ Reads the file & Display 2+ ends the program.

 Cursor over the function calls – to see what the value is  On 2+ - under XMLHTTP

 Get ResponseXML if you see the first line – you can open it up and see the whole file

 Your ready state is now 4 and get status is now 200 – you have the file and can close program  =============================================================

 Seeing THIS=> in FireFox’s Firebug

Pointers (->) are basically the same as any other





it's a relationship between an object and it's attributes. It's not an equal sign with

objects and arrays.. that's "=>", used to associated elements in an array or hash.

So inside a class, "this" refers to a class itself.

object->name refers to object's 'name' attribute