Programming for the Internet
with
JavaScript – Assign12
11/22/2015………..………..…..……….…..Learning/JavaScript/Assign12-JavaScript.doc
[email protected]
or [email protected]
M-F 6am-8pm, S-S 8am-8pm or by appt.
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 and Laugh –
THIS IS NOT A RACE – This is a journey. Week 12/15 that's 4/5's or 80%
CHECK YOUR GRADES - I'm not perfect ... I may have overlooked something ... Post to the forum you want reviewed.
Class Web Site’s Semester at a glance:
https://sites.google.com/site/jilmactraining/internet-programming-js/ip-assignments
o There are only 14 Assignments per semester in my classes, this is Assignment 12 of 14
During Summer Sessions we double up Assign 1&2 in the first week & Assign 13 & 14 are doubled up the last week.
o All the Assignments are laid out on the Assignments page of our class web site
o
https://sites.google.com/site/jilmactraining/internet-programming-js/ip-assignments
has the due date for all work to be handed in. Scroll to the bottom for date.
If you need an extension – it’s fine with me – but your ADVISOR is the one who must approve it.
you should start the discussion with your ADVISOR if you think you may want this option
o Safari Books On-Line http://www.safaribooksonline.com/
User Groups - We have a new one!! Woodstock Digital http://www.woodstockdigital.com/ it happened Nov 7th but it got Great reviews!!
o You can find it on the USER GROUP PAGE https://sites.google.com/site/jilmactraining/user-groups
o New England Adobe Users Group http://NEAUG.org - meetings are FREE and open to all with FREE LUNCH!
Lets look over what I am looking for in the final project - use this GUIDE LINE call me if you have questions
o PHP include & require - are required from Assignment12 on and in your FINAL PROJECT
o IF you have the SAME CODE in file after file - then you have a maintenance nightmare!
o IF you have the SAME MENU in file after file - then you have a maintenance nightmare!
o Using PHP Include & requires is easy - but it will take a few minutes to learn
o IF you are not using PHP include & require in your code - Call JilMac and she will walk you through it.
o Samples are on our class web page, FTP and copy the code - so you can learn
o notice how the index is not an .html file??? it is now a .php file
o http://stweb.ccv.edu/CIS-2140-VO01-V14FA/jam08260/index.php
HTML5 -
http://webdesignledger.com/tools/10-online-html5-tools-for-web-designers
New Menu Tags for breaking down your HTML into PHP sections
o
http://webdesign.about.com/od/html5/a/html_5_whats_new.htm
2. +Reading Assignment
Read Chapter 16 – Building on jQuery
jQuery as a foundation, Dragging & Dropping Elements, jQuery with External Data, jQuery Plugins, and jQuery Audio
JavaScript: Visual QuickStart Guide (9th or 8th Edition)
[Paperback] 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/
NOTE: the HTML5 Audio Player example
reference http://www.w3schools.com/html/html5_audio.asp
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
300+ words and links to your research.
jQuery – continue your research on the most popular JavaScript Library. Visit the official jQuery site:
http://jquery.com
This API (Application Program Interface) works across a multitude of browsers. It has changed the way people
write JavaScript.
A question that comes up a lot is …. Which we began discussing this in Chat last week is:
Should I have a copy of jquery.js on my server? Or should I run it from a CDN
-Content Delivery Network.
http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
1. Faster Download - from Google
2. Decrease load on your server
3. Caching - jQuery is used frequently
4. JilMac's favorite - Maintenance - who will update jQuery on YOUR server?
in the 8th addition of this text ....
http://ajax.googleapis.com/ajax/libs/jquery/
1
/jquery.js <-- the 1 denotes the MOST recent!!
but ...
in the 9th addition of this text ...
___________________________________________
Where to learn more:
http://learn.jquery.com/about-jquery/how-jquery-works/
Some Sound Research
- you can substitute that for another jquery.
https://commons.wikimedia.org/wiki/Category:Audio_files_of_music
4.Code Examples=Before + After – 3 points
Chapter 16 – Building on jQuery
jQuery as a foundation, Dragging & Dropping Elements, jQuery with External Data, jQuery Plugins, and jQuery Audio
All students have the option to use an example from their text books – or to find a similar example from the web. You now ALSO have the option to run these programs on your own server. Some examples could be run on different servers and outcomes compared. While STWEB will give us SOME exposure to a Shared Web Host, it is VERY limited or what the Systems Administrators = SysAdmins call “Tied Down”, “Secured”, “Secured Down”. Which translates to safe but you can’t do much. However – this is EXCELLENT experience … to compare Servers. You need to know, understand, and be flexible with knowing that every server is set up the way their Administrator wants it to be. Just like every Family’s House has their own rules. And that House rules change. After our teenagers had all grown up – I mentioned to one of them who was still living at home … 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
Remainder of CHATS check JilMac's Calendar
https://sites.google.com/site/jilmactraining/calendar
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.
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
What programs generate JavaScript code and/or Advanced HTML??
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
Google Maps what is the Future?
How can a map - be more - than just a map?
jQuery Map 60 best plugins
http://www.jqueryrain.com/example/jquery-map/
Statistical Map in "Demo 8" shows example of
JSON
Music Web sites
– generate code for you to link to their music
N
Google+>Home>Photos>Share Album(Picasaa0
– allows you to Embed a Flash Slideshow, Create an RSS
feed, or send a link
https://plus.google.com/u/0/photos/takeatour
Google Hosted Libraries (
CDN
)
https://developers.google.com/speed/libraries
TED Talks - Images _or_ Google Talks
http://www.ted.com/talks/mary_lou_jepsen_could_future_devices_read_images_from_our_brains https://www.youtube.com/watch?v=SjbSEjOJL3U
http://webcheatsheet.com/php/create_thumbnail_images.php
IF you are interested in WordPress.org - I have space on my Instructor Blue Host
site. Blue Host is a web hosting company that CCV is evaluating to replace STWEB:
If you are interested I can set up space for you - I have to do the "One Button Install" for WordPress. QUESTIONS:
1. What other "One Button Installs" does BlueHost (and most Shared Web Hosts) offer?
https://www.mojomarketplace.com/scripts?utm_source=www.bluehost.com
Scroll down 1/2 way to see Moodle in the Education Section .
2. You saw me getting frustrated trying to log into the WordPress Administration. 3. I have set up your FTP's and you should have
WORD PRESS TRAINING VIDEOS WordPress Videos
10 Training Videos from Blue Host for creating a WordPress Web Site Video 1 -
o They put in a LOT of plugs for themselves as a BlueHost Web Hosting Video 2 - Theme - overall look for your web site.
o Content - Stagnant & Dynamic (blogs)
o How many users will update your site
o Plugins - add functionality - contact forms or image galleries
o Admin Website naem/wp-admin then enter your Admin login & password
o Wordpress Dashboard is NOT the website - it is how you add content - you need to check how your site works in a browser
Video3 - Pages - set up your permanent content
o Hello World
o Plan Content - add pages - content that doesn't change
o Pages > Sample Page - delete it > Add NEW > About Us > add page text
o Text Editor - vs- Text Editor
MORE WITH WordPress on Blue Host: 1. Update your code-apply patches 2. Review WordPress.ORG Themes
I am following the WordPress for Dummies Chap 11 finding & Installing Word Press Themes 3. Download a Theme then FTP to BlueHost
I chose this one https://wordpress.org/themes/graphene/ Download the Theme
a. Extract the files to their own directory b. FTP the extracted Theme
c. to your /wp-content/themes directory on your WordPress server
4. Activating a New Theme Activate your Theme
a. from the Admin Dashboard
b. Click on the Left-Nav's APPEARANCE c. Select Themes
d. The themes page opens to show you all the themes you have FTP'ed
e. Hover your mouse pointer over the thumbnail image of the theme you want to use f. Click the LIVE PREVIEW
