Programming for the Internet
with
JavaScript – Assign09
11/1/2015………..………..…..……….…..Learning/JavaScript/Assign09-JavaScript.doc
[email protected]
M-F 6am-8pm, S-S 8am-8pm
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
Breathe & Laugh – THIS IS NOT A RACE – This is a journey.
Class Web Site’s Semester at a glance: http://stweb.ccv.edu/CIS-2140-VO01-V15FA/jam08260
Each week you should add your and other students links to your REFERENCE PAGE??
Japanese Flag - to finish what we started discussing about Graphics & JavaScript in the CHAT 08 Review on Functions & Classes – there are some new syntax rules that need to be followed: 1. Do NOT use spaces in Functions
2. End every function with a semicolon ;
There are a number of web sites that have YouTube videos of Talks - these Talks get us thinking in a NEW WAY.
Talks at Google:
The Underdog - when you have nothing - you have to do things differently - this is Innovation
Malcolm Gladwell - "David & Goliath"
http://www.youtube.com/watch?v=5L0GGfQblrc
The way we think about things ... usually is not supportedExtra Credit Opportunity - Watch the remainder of this talk and give me 100 words what you learned.
Watch another of Malcolm Gladwell video/article/etc give me the link and 100 words about it. Watch a "Talk at Google" give me the link and 100 words what you learned.
http://www.youtube.com/user/AtGoogleTalks?feature=watch
NOTE: Readers Digest had an article on David & Goliath and Malcolm's new book. And the Elks Magazine's HealthLine had an article on Pituitary Gland Tumors - what Malcolm said could have been Goliath's medical issue... they must all tie in with one another ... or else I am more aware ...
W3C TALKS - http://www.w3.org/Talks
CSS effect - http://stweb.ccv.edu/CIS-2140-VO01-V15FA/jam08260/Assignment09/OtherExamples/Josiah-backgroundImageOverlay
#content { background-image: url(background_pixel_img.gif); Note: the gif is very small. background-repeat:repeat;
}
WordPress
- What does the file Structure look like
http://WordPress.org
(vs. WordPress.com) Our CCV
WebSite is now a WordPress Site.
I have a book that explains Progressive Enhancement .
http://www.amazon.com/s/ref=sr_pg_1?rh=n%3A283155%2Cp_27%3AOswald+Campesato&sort=daterank&ie=UTF8&qid=1363632519
REACTIVE DESIGN, RESPONSIVE DESIGN, PROGRESSIVE ENHANCEMENT and MOBILE FIRST - what do they mean? Are there other names/phrases/sub-Topics for this? What created the demand for Reactive Design? Who is developing in it? What tools are they using to create/test/develop Reactive Design?
Note: New Author:Tim Wright works for http://FreshTilledSoil.com and http://cssKarma.com and he has a YouTube Video, that was taken of his presentation. Here is Tim Wright's take on the above 3 terms ... http://www.youtube.com/watch? v=fe6zv6mX5U4
There is another new author that I am keeping my eye on. He has a few books out - but a LOT more books are
coming out this year by ... "Oswald Campesato". Check Amazon Book Store & YouTube.
Responsive Design or Mobile First
http://buildmobile.com/7-things-your-desktop-envies-from-your-mobile-site/?
utm_medium=email&utm_campaign=BuildMobile+Feb+17th&utm_content=BuildMobile+Feb+17th+CID_4cfbffe827758
0f6681680f2aac8c35f&utm_source=Newsletter&utm_term=Designing+Responsively+Fundamental+Practices
Word Press - Responsive Designs TEMPLATES , one consistently recommended was http://
Woothemes.comResponsive Design is very popular - if you Google "Wordpress free Responsive Design Templates"
What Can't you do on a Phone or Tablet?? HOVER, and many other gestures - like
Right-Click
- is done with a
LONGGGG press
. We also have gravity changing if a screen is Portrait or Landscape. And constantly check for Screen
Width.
================================================================================================================== Reminder:
================================================================================================================== Project Outline: If you wanted to make a professional looking Project Outline & Final Outline(your bill) You can always use Microsoft or Google Template. You can choose if you want it to be more Proposal or Invoice like. If you are going to be having your own business on the side (and who does not need a business on the side) then you might want to roll this into your project. Steps to find a Google Document/Drive PROPOSAL TEMPLATE.
Log into Google/Gmail
Select Document or Drive from the top menu
Click Create (red)Button in the top left hand corner
Scroll to the bottom and select FROM TEMPLATE
In the Search Templates box at the top of the screen put in PROPOSAL or ESTIMATE or REPORT
You don't have to use all of it! Pick what works for you, Cover Page, Signoff Page, Requirements Page
You choose how informal or formal YOU want it to be. You can re-Use graphic from the Website on the form. REUSE don't REINVENT!! REPURPOSE don't CREATE FROM SCRATCH. Make it Quick, Light, Flexible!
These are NOT written in STONE - they are LIVING DOCUMENTs, that Grow, Change & Adapt.
Now some of these are VERY robust, but if you just followed it loosely you could design a Template that could help you if you were an Independent Website Developer. Some even have sign-off pages on the last page. If you wanted to go into business - then use this Idea to develop a page of forms that you can use to help guide you - even a check-off list of How many Pages, What type of Pages, Features on each page, etc. Then you can print it out and use it as a guideline and worksheet for creating an estimate/
If programs run differently on YOUR server than on STWEB – you should be checking the PHPinfo()
see Assignment08 or Assignment09’s CHAT were we covered it – or go to our class web site and grab the
code!
http://stweb.ccv.edu/CIS-2140-VO01-V15FA/jam08260/Assignment08/OtherExamples/PHPInfo-how2findOutWhatIsRunningOnTheServer/
(ver 5.1.6)
compare this to what is on MyVermont.tv
http://MyVermont.tv/CCV/PHP/PHPinfo.php
(ver 5.2.17)
compare this to what is running on the WordPress server:
EXTRA CREDIT Opportunities
1.
Review a
Google Book
– 1 credit for 100+ word overview (you don't have to read the ENTIRE book - just a hunk of
it - or try some of the code, etc.
2. Visit a Users Group and for every 100 words you get 1 extra credit point.
https://sites.google.com/site/jilmactraining/user-groups
2. +Reading Assignment
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/
Chapter
12 - Applied JavaScript
Adding Pull-Down Menus ... 289
Enhancing Pull-Down Menus ... 293
A Slideshow with Captions ... 297
A Silly Name Generator ... 301
A Bar Graph Generator ... 306
Style Sheet Switcher ... 315
Chapter 13 -
Introduction to Ajax
...325 - 362
3. Discussion/Research Assignment – 2 point
AJAX -
It make take several passes to understand it. And if the light does not go on right away … keep in mind … this is a process. The learning journey, not a race across a movable finish line.Study Ajax - go out on the web, browse Tutorials, Overviews, YouTubes, etc. Spend at least 2 hours on this – give me 300+ words what you learned.
Create a link page on your web site – and begin to organize it – as a place to have:
links to information you need for this class, your project, and your training
Explanations of terms and links to where you can get additional info
Examples of code, what the code does, comments on where it could come in handy, etc.
http://www.mousewhisperer.co.uk/ajax_page.html
for the whole article. Now just one paragraph:How does it (Ajax) work? (We have not learned Post or Get, that is more for Intermediate Class)
Instead of a user request being made of the server via, for example, a normal HTTP POST or GET request, such as would be made by submitting a form or clicking a hyperlink, an Ajax script makes a request of a server by using the Javascript XMLHTTPRequest object.
NOTE: Phil Ballard operates the Mouse Wisperer web site. See his Amazon author Biography
http://www.amazon.com/Phil-Ballard/e/B001IQX9JO/ref=ntt_athr_dp_pel_1
Phil’s other site is CrackAjax.net http://www.crackajax.net/xmlhttprequest.php
Here are some YouTube tutorials – a variety, find your type of trainer – search “tutorial ajax xmlhttprequest object” W3Schools http://www.w3schools.com/jquery/jquery_ajax_intro.asp
Ajax Tutorial 1 Intro -http://www.youtube.com/watch?
v=dtrWHL9Asec&p=1E2D56399310BD3A&playnext=1&index=51
If you like srikantdhondi here is their YouTube channel
http://www.youtube.com/user/srikantdhondi
In the Intermediate class we get into PHP & MySQL tables http://www.youtube.com/user/thornwebdesignIf you want a simple view from a Kids point of view check out Connor
http://www.youtube.com/user/ConnorAlves ; Simple Ajax Library -
http://www.youtube.com/user/ConnorAlves#p/search/1/zp8sOwIMxnw Note - Connor uses Eclipse editor/framework. It is an IDE - Integrated Development Environment.
Chapter 13 - Introducing AJAX
: Do 3 Before + After examples–post them to STWEB Assignment Page
Each week/assignment you will have the option to earn 3 points, one for each code examples. Each
code example will consist of the BEFORE code – that runs on your STWEB site, you make changes to
the code–and list the changes in the comments and put the AFTER code on your web site with a link to
each.
Book's Web Site http://www.javascriptworld.com
"Download the scripts" - click this button from the TOP Nav on http://www.javascriptworld.com
I DO NOT expect you to hand type the examples (if it helps you learn - hand type, but that time is your own and is not built into our 8 hours per week [10 hours in the Summer Semesters !! ])
You are FREE to look on the web, in another text book, or examples from work to substitute.
W3Schools – http://www.w3schools.com/js/js_functions.asp
a. gives us a very simple straight forward example by clicking the TryIT Button b. http://www.w3schools.com/js/tryit.asp?filename=tryjs_function2
Or from the web or another JavaScript book – Here is a sampling from Google Bookshttp://www.google.com/search? tbs=bks%3A1&tbo=1&q=javascript+functions&btnG=Search+Books
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 to ATTEND, but it is REQUIRED to Watch the recording. 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.
IF you comment as if you were in the chat – you get Extra Credit. JilMac’s discussions are never closed – you
are allowed to learn any assignment at any time of the semester, even past CHATS!
CHATS –
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.
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
o If you have used Audio in Connect Pro then just click the NEXT button and follow the instructions
Explanation for Functions & Classes
http://www.htmlgoodies.com/beyond/php/article.php/3472491/PHP-Tutorial-Functions.htm
XML in NotePad++ it makes it easier to understand
XML
http://www.google.com/search?sourceid=navclient&ie=UTF-8&rlz=1T4ADBF_enUS236US238&q=xml+tutorial
XML and it's DOM
http://www.google.com/search?sourceid=navclient&ie=UTF-8&rlz=1T4ADBF_enUS236US238&q=xml+dom
CSS3 has some generators:
http://www.awwwards.com/the-best-css3-tools-experiments-and-demos-for-web-developers.html http://CSSportal.com
http://css3generator.com click the Choose something - then see how it looks!
http://www.css3maker.com/
http://css3.me
How to Create a Flashy Menu Using CSS
CSS3-Transitions http://dev.w3.org/csswg/css3-transitions/
W3Schools Transitions http://www.w3schools.com/css/css3_transitions.asp
Demo from W3.org http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-transitions.html Demos from Adobe: http://www.adobe.com/inspire-apps/css_transitions_dreamweaver_demo/
Forms, Forms, Forms use Ajax a LOT!
How Ajax Works http://www.noupe.com/ajax/how-ajax-works.html
50 Useful JavaScript and jQuery Techniques and Plugins
FORMS http://www.noupe.com/category/ajax
http://www.noupe.com/css/47-excellent-ajax-css-forms.html
http://www.noupe.com/ajax/how-ajax-works.html
That also lead me to http://www.noupe.com/css
http://www.noupe.com/css/50-useful-css-tools-and-generators-for-developers.html I liked CSSportal.com
WordPress
http://www.sitepoint.com/define-your-own-wordpress-widgets/?
utm_medium=email&utm_campaign=Sitepoint+Newsletter+Feb+16th+2012&utm_content=Sitepoint+Newsletter+Feb+
16th+2012+CID_944d957a83c96643931c3916b00b760a&utm_source=Newsletter&utm_term=Define+Your+Own+Word
Press+Widgets
The 5 Most Valuable Places for Keywords on Your Website
http://www.sitepoint.com/the-5-most-valuable-places-for-keywords-on-your-website/?utm_medium=email&utm_campaign=Sitepoint+Newsletter+Feb+16th+2012&utm_content=Sitepoint+Newsletter+Feb+16th+2012+CID_944d957a8
