Programming for the Internet
with
JavaScript – Assign05
10/04/2015………...………..…..……….…..Learning/JavaScript/Assign05-JavaScript.doc
http://JilMac.com [email protected] M-F 6am-8pm, S-S 8am-8pm [email protected] 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 week we are 1/3 the way through – amazing how fast the time goes!
CCV Resources - Resume's http://ccv.edu/discover-resources/career-services/resumes-cover-letters/
Internships' http://vbsr.org/intern_program/available_positions/
And More! http://ccv.edu/discover-resources/career-services/
YOU CAN EVALUATE ME!!! Hay! It's time to give your teachers a Grade!
o Mid-semester course evaluations available to students SOON. The purpose of these evaluations is to provide your TEACHERS student feedback early enough in the semester for TEACHERS to be able to make adjustments to the
course or respond to student concerns. Students should have received via a link in an email message and in the portal.
o Final course evaluations will be available to students & Instructors after the class completes.
o This means a lot to CCV - if 3/4 of the students fill out an eval - EVERYONE will get
2 points extra Credit!! Since I can't see who did and who didn't
CUT & PASTE - Depending on where you get your " " “Before” examples, the text, a web site, a .pdf document … If you cut & paste the PDF or document – it may throw in special characters. When you paste the code into an editor, save the code and give it the proper extension … .html, .css, .js this will enable the Editor to know what the language is and use its color coded - to display if there are any inconsistencies. These could show up as an incorrect “, <, Carriage Return/Line Feed, etc. Replace the characters and see if that corrects the color coding. Do all the beginning and ending brackets, reserve words, and code appear in the correct color?? If the color coding looks odd – it will be your key – because just looking at the characters – may NOT reveal everything that was copied.
Developers Toolbars - every Browser has them, each Browser VERSION will have differences ...
FireFox: Tools > Web Developer> Developer Toolbar, FireBug & add-ons
How do you keep your skills current?
HP Free Courses http://www.life-global.org/en/LEARN-ONLINE/Courses
YouTube Creator Academy https://creatoracademy.withgoogle.com/page/education?tag=&hl=en Area Users Groups https://sites.google.com/site/jilmactraining/user-groups
Adobe Training Videos: http://www.youtube.com/user/AdobeandtheWeb/
Adobe & the Web YouTube Channel http://www.youtube.com/user/AdobeandtheWeb/
What is replacing Flash??? Some believe it is Edge Animate https://www.youtube.com/watch?v=GDZ4Uj8vito it was introduced several years ago:
Conferences - even if you can't physically attend - most conferences record the speakers, watching the recordings is Free:
Even though it is 3 years old - it still ahve good stuff: Adobe Conference 2012:
Full Keynote: http://youtu.be/efWKWxNu4zY
Adobe and the Web Platform http://youtu.be/rXPeWRX-i4w
Edge Animate http://youtu.be/oA2UJbC2_qo
Adobe Edge Animate: Creating the Interactive Web http://youtu.be/T7MqEEGGpus
Edge Animate showcase sample files http://www.adobe.com/devnet/edge-animate/articles/showcase-sample-files.html
Edge Reflow http://youtu.be/hSDuP1j4JVk
Adobe and Typography http://youtu.be/I_e-XguV4uQ
Brackets and Edge Code http://youtu.be/2V8v6gwrZiM
Edge Inspect http://youtu.be/SyzZHS-1fPE
PhoneGap/PhoneGap Build http://youtu.be/VE4FmdWK0Kw
PhoneGap: Building and Testing Mobile Apps with Web Standards http://youtu.be/u6YBDqIFlvg
PhoneGap Build levels up http://www.adobe.com/devnet/phonegap/articles/phonegap-build-levels-up.html
Edge Tools and Services and Creative Cloud http://youtu.be/Kpk6SJ6yVe4
HTML, CSS, and JavaScript Code Editing with Edge Code
http://www.adobe.com/devnet/edge-code/articles/code-editing-with-edge-code.html
Browser testing across devices with Adobe Edge Inspect
http://www.adobe.com/devnet/edge-inspect/articles/browser-testing-across-devices-with-adobe-edge-inspect.html
Journey Through the Graphical Web http://youtu.be/P2Yj-8zGa3U
Brackets: Code The Web http://youtu.be/2Tk7AUaExBQ
Adobe Pipeline Sneaks http://youtu.be/IiXnazocB30
Create JS: Creating Rich, Interactive Experiences for HTML5 http://youtu.be/QHudJJLRp-c
Design Responsively: Creating a Site that Works Across Screens http://youtu.be/oEfyBqA5V4k
Adobe Developers Network http://www.adobe.com/devnet.html & http://www.adobe.com/devnet/features.html
Google I/O 2015 Keynote https://www.youtube.com/watch?v=7V-fIGMDsmE Google I/O 2014 Videos https://www.google.com/events/io/io14videos Google I/O 2013 Keynote http://www.youtube.com/watch?v=vNU2zxx9aCs Google I/O 2012 Conference
What's New in Android? https://www.youtube.com/watch?v=ndBdf1_oOGA
Chrome Developer Tools https://www.youtube.com/watch? v=_X3QVbKJd7A&list=PLeeooRShLW_kYzG6bNVbHxTdVz_ibROx1
Advanced Design for Engineers http://www.youtube.com/watch?v=iJDoxOTyMdk
Designing and Implementing Android UIs for Phones and Tablets http://www.youtube.com/watch?v=WGIU2JX1U5Y
Building a Business Around the Places API http://www.youtube.com/watch?v=JCgTAWXwjOk
Not Just a Map http://www.youtube.com/watch?v=ZUUQQ5sLsws
Dart is a language, library, toolset, and virtual machine from Google that greatly facilitates writing fast, interactive HTML5 apps without requiring you to be a JavaScript expert.
http://www.drdobbs.com/open-source/dart-build-html5-apps-fast/240005631?cid=DDJ_nl_upd_2012-09-25_h&elq=21c3588c5e5642fa820fd9d4be8f5d1e
Every Professional should have an account on http://LinkedIN.com it is the professional on-line resume. Every Professional should have a URL – your name, or something that refers to you. Some of mine are:
http://JilMac.comhttp://Mac-Rand.com http://MyVermont.TV, http://VermontGrowers.com I also get my kids, and friends their URL instead of Birthday Cards. Approx $10 per year. I’ll touch on this in Chat this week.
2. Reading Assignment
Chapter 8, Handling Events for Assignment05
JavaScript: Visual QuickStart Guide
Tom Negrino(Author), Dori Smith(Author)
Start Reading JavaScript: Visual QuickStart Guide
Don't have a Kindle?Get your Kindle here, or download a FREEKindle Reading App. 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 and Laugh - it fuels the brain with Oxygen - which is important in the learning process!
3. Discussion/Research Assignment – 2 point
Research/Discussion questions should take about 2 hours per week. You should RESEARCH it (not just give your CURRENT OPINION if you want the full 2 points), give links to your research, and do an example. In this case – there are lots of good examples – that you should make a web page to demonstrate. 150+ words on what you learned and what information you want to share.
JavaScript Libraries - What are they?? Give me some samples. Research this and give me 200+ words – about JavaScript Libraries
(note some libraries are also referred to as third party libraries - they are for more advanced programming). Put an example on your web site to one use for them.
NOTE: it is highly recommended that you read each other’s posts – My classes are run like a users group.
Give me an example of a Relative link on YOUR web site
Give me an example of an Absolute link on YOUR web site.
COPY your entire web site into a NEW directory – how much of it still works??
Use FireFox’s Web Development Toolbar to find broken links
o Review Wed’s CHAT or scroll down to CHAT for directions how to load the Development Toolbar.
Explain what you learned with this exercise
Explain what would happen if you had to RESTORE your Web Site to another SERVER, how long would it take you to FIX all the broken links. How would your Boss feel if parts of the site were “Broken” for any length of time.
What would some reasons be – that you had to RESTORE your site to another server?
Lots of Links for last assignment: TheNewBoston:
If Statement http: // www.youtube.com/watch?v=UZKnICO3i6U using == http://www.youtube.com/watch?v=UogH74LirBc
Examples & Samples
MediaCollege.com http://www.mediacollege.com/internet/javascript/
o Has a great Rounding Numbers examples for this week, plus many other examples
Java Scripts.net http://www.java-scripts.net/ lots of choices, lots of examples
CSBrown.edu http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html#top
http://www.tizag.com/javascriptT/
Dreamweaver Templates - just Google "Tutorial Dreamweaver SPRY"
Dreamweaver has SPRY – the built in Library - If you love everything DreamWeaver
4.Code Examples=Before + After – 3 points from Chap 8 or equiv
Example on page 195 - Handling Events
http://www.w3schools.com/jsref/event_onkeypress.asp
You need to have an index.html or index.htm file in your root directory. You can also create an
index.htm
file in each Assignment Directory where you can put a link to your Discussion Research problem and links
to each of the three Before+After examples you want credit for.
Each person is allowed to learn at their comfort level. I don’t tell you WHAT to change – you get to decide.
I only want you to change something at your comfort level. I want you to get the process down, find and
example – make it run ON YOUR SERVER, save that as your BEFORE, then change something, document it,
and save it as your AFTER example – have LINKS to the Before & After from your web site. This is so
others can look at your work.
THIS IS NOT A RACE – This is a journey.
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.
When you are more comfortable – you can expand your examples – maybe incorporate some of what you
have learned from each other. I also encourage you to combine this class with another class/project/work
assignment - applying what we are doing, and sharing that application makes the projects richer.
In all my classes and the work you turn in should all be accessible from your index.html
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 the LIVE CHAT - but it is a requirement of the course to WATCH the RECORDED
CHATS. 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. IF you comment on the CHAT you can receive UP TO 1 Extra Credit Point, over the course of the semester
that is an extra 14 points! If you want to increase your grade - this is a good way to do it.
Recordings https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec
CHATS check
https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec
for the
N
ext Chat Date & Time and to access Previous CHAT recordings.
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
o If you have used Audio in Connect Pro then just click the NEXT button and follow the instructions
Recordings https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec
Google Mouse Events vs Touch Events
https://www.google.com/? gfe_rd=ssl&ei=YbgRVslUhpn6Bd_QleAK#q=mouse+events+vs+touch+events&tbs=qdr:yThese come from my Nephews Blog - he is a web developer in Texas.
Swipe is a great touch slider. I like that it is written in vanilla Javascript, so it will perform faster than a slider written in jQuery on a mobile phone. http://swipejs.com/
Usability Hub is a great resource for those who like to see how designs will perform before launching. It is very simple and fast to setup a test and I’ve used this tool to great effect in the past. https://usabilityhub.com/
Below is a great resource for learning Google’s Chrome Developer Toolset. http://discover-devtools.codeschool.com/
JSON Tutorial – Learning JSON w/ jQuery Video by Rob Graham on learning JSON. I found this to be very clean
and helpful.
AngularJS Fundamentals In 60-ish Minutes A great video if you're looking to learn AngularJS and need a good place to start.
http://discover-devtools.codeschool.com/
From a Design Festival Newsletter
http://designfestival.comCreate a Reusable CSS Menu with Photoshop
Your site’s menu system should reflect the style of your site. You can
choose smaller, subtler sizes and fonts, or you can scale up to big spaces and matching typefaces.
In this tutorial, we are going to create a more subtle, more sophisticated look.
http://designfestival.com/create-a-reusable-css-menu-with-photoshop/?
utm_medium=email&utm_campaign=DesignFestival+15th+Feb&utm_content=DesignFestival+15th+Feb+C
ID_1168a6dfd64020a3ded9532270686b2f&utm_source=Newsletter&utm_term=More
Using Multiple Backgrounds for Flexibility in Web
Design
It's a tricky task to design an image-based background that stretches and shrinks to accomodate different browser sizes. But with a little CSS know-how, you can create a sharp, scalable background that fits both small and large pages without compromising your design.
http://designfestival.com/using-multiple-backgrounds-for-flexibility-in-web-design/?
utm_medium=email&utm_campaign=DesignFestival+15th+Feb&utm_content=DesignFestival+15th+Feb+CID_116 8a6dfd64020a3ded9532270686b2f&utm_source=Newsletter&utm_term=More
More »
Best jQuery Plugins for Typography
For those graphic designers taking advantage of jQuery to enhance their sites, this collection of plugins
is dedicated specifically to typography enhancing tools.
http://designfestival.com/best-jquery-plugins-for-typography/?
utm_medium=email&utm_campaign=DesignFestival+15th+Feb&utm_content=DesignFestival+15th+Feb+CID_1
168a6dfd64020a3ded9532270686b2f&utm_source=Newsletter&utm_term=More
Additional interesting topics:
An Introduction to jQuery for Designers
Design Festival's JavaScript & JQuery Resources http://designfestival.com/category/javascript
Oracle Massive Open Online Course: Develop Java Embedded
Applications Using a Raspberry Pi
Oracle's MOOC- Massive Open Online Course: Develop Java Embedded Applications Using a Raspberry Pi is open for enrollment. This free course, designed for Java developers, is delivered over 5-weeks. Take the course at your own pace - weekly they add new lessons, quizzes and homework assignments. The course started March 31, 2014 - but I believe it is open and you can join at any time.
Email from 2/18/2104
Hey Digirati! (Note: Digirati are "OnLine Elite")
Tonight!!! Justin Cutroni is going to be doing a Q&A at Web Analytics Burlington (née Web
Analytics Wednesday). 5:30pm at Thoughtfaucet is the hangout, 6pm is the Q&A. Justin is amazing so I hope to see you all there. Parking is usually good behind Speeders, entrance is on Howard by the loading dock--across from Dealer. Kacey said I need to put up signs so I'm going to try to bang some out in time. See you there!
Feb 20th, VTdotNet: How meta-programming will change our way to code?
Feb 20th, Mario's Dynamic Leaps: Musical Innovations and Backwards Glances in Donkey Kong and Super Mario Bros. If that isn't enough for you to go see this I don't know what it will take to get you out on a Thursday night.
Feb 22nd, CodeAcross BTV: How can open data improve our community?
Feb 26th, BTV 3D Modeling: Designing 3D Parts Using Sketchup
Feb 27th, Girl Develop It: Intro to Git and GitHub
In addition I've heard that there's an Old North End Tweetup that is organizing an event via Facebook. The singularity is upon us. As always, let me know if there's something fun I've missed.
Peace out, Gahlord
======================================================
While I was using my tablet - and I was turning it back and forth from landscape to portrait while riding in the car - My husband was driving... A message popped up saying did I want to continue shaking???
How did it know or think I was shaking??
So I googled "JavaScript Mobile Device shake" and read some from StackOverFlow then fine tuned the search to "jquery mobile detect device shake"
and learned about a new Library???? they are calling it a Plug-in
http://jgestures.codeplex.com/releases/view/70830
And noticing that there are articles about "Custom Shakes" - could this be the new handshake - to open new doors?
Keep your eyes, ears and senses open - you may see many "New to You" events.
I think of an Event as something a PROGRAM looks for
