gdisf / teaching-materials Goto Github PK
View Code? Open in Web Editor NEWGDI SF - Web Development and Programming Curriculum
Home Page: http://www.teaching-materials.org
License: GNU General Public License v3.0
GDI SF - Web Development and Programming Curriculum
Home Page: http://www.teaching-materials.org
License: GNU General Public License v3.0
SVG:
https://github.com/pamelafox/smileyslider
http://www.svgopen.org/2007/papers/SLOGO_Abstract/SLogo_Fig9_Goldberg_Machine.svg
http://www.carto.net/papers/svg/us_crime_2000/map.svgz
http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg
Canvas Tutorials: (maybe follow-up reading)
http://blog.teamtreehouse.com/how-to-draw-with-html5-canvas
http://msdn.microsoft.com/en-us/hh534406.aspx
http://simeonvisser.hubpages.com/hub/HTML5-Tutorial-Basics-of-Canvas-Drawing
Canvas/fabricJS demo:
http://montage-maker.appspot.com/
CSS3:
http://joshnetherton.com/presentations/remix2012/
Old school graphics:
http://en.wikipedia.org/wiki/Croquet_Project
When people who are already familiar with programming take day 1, they perceive it as too slow. We could provide extra material for them to go deeper into the basics.
For example I have a few more basics exercises linked from https://sites.google.com/site/webdevedu/lessons-1/javascript-basics
cc @icyfenix
in the AJAX slide
I tried to do the HTML101 workshop at a school called Hyper Island. While working through the slides, I noticed that there are some parts that are really long (ex: Starting Here), where it's multiple slides in a row with tons of info.
I'm wondering if you've had issues with people losing focus. Do you actually go through the code for each html tag presented? During my workshop, I just showed a webpage with all sorts of tags on it (from buttons to forms to radioboxes), and said that there were more details in the slides. Then I gave the exercise. Seemed to work well, since going through the tags one by one was making some heads nod asleep.
Add this link to css3 slides
http://codepen.io/joshnetherton/full/maDxd
Front page is quite out of date.
Thanks to Brandon Frohs:
Next/previous slides are visible (unlike in Lesson 2).
The client/browser/server interaction image is a bit too simply. Maybe add URL under the arrow between client and browser (and add navigation field to browser image), and add an additional arrow going from browser to server requesting a specific page? I also like the additional step listed in this image (source) where the server has to find the "data".
Tablets may be worth adding to the list of devices.
Perhaps change the first sentence to be more descriptive:
Browsers are programs that access and render content...
"...each browser varies in how it displays webpages" seems drastic to me, as though each webpage will look completely different in each browser. Perhaps "...each browser can vary slightly in how it displays webspages." to show the end result can be pixel-perfect, but it's not always the case, especially with newly added elements/features.
The chart is about a year out of date. Link is helpful, but would be nice to see an updated chart. Would be awesome if this could be generated on the fly from data pulled from somewhere (perhaps gs.statcounter.com like caniuse.com?).
It may be useful to explain how developers [should] choose which browsers they want to focus on. Perhaps add a link to caniuse.com.
May want to add a port example (ports are used later, but not explained).
Bottom of image (including the source of the image) is cut off.
IPv6 is mentioned, described as a number, but hexidecimal is show. May want to mention what hexidecimal is (base 16) and perhaps link to the Wikipedia article for IPv4/IPv6/Hexidecimal.
According to Wikipedia, 127.0.0.1
isn't necessarily always the "self" address, so I'd suggest rewording to say "usually". And, for IPv6, it is ::1
.
ifconfig
isn't available on Windows machines, and is being deprecated on Linux. ip address
can be used on Linux, and I believe ipconfig
is the command for Windows.
Maybe add node.js to list of server-side programming languages? It's JavaScript, so, theoretically, those who see these slides will soon know JavaScript too. Might be too much information for a beginner though.
students spend more time debugging directory structure than on model instantiation, so just include an empty models.js file that is correctly referred to in index.html and runner.html
Cuz it's already bold!
So that students dont think its only static JSON that servers produce.
Can do it on App Engine and set CORS headers perhaps.
Its too confusing to get it in the right place.
Possibly app.js and views.js too.
Rewrite functions using var onButtonClick = function() {} instead of function onButtonClick
Fix HTML editor slide column order
Remove default CSS from bianca's jsbin in-class
In DOM detective exercise, include images of what theyre selecting (or atleast be more specific about the green class names)
cc @bgando
I worry that window.onload distracts from the basics of events, and I think it might be better to have it after, and use that to talk about best practices generally.
cc @icyfenix
Review Object Literals and data types
Explain that Objects are common ways to interact with a library's APIs
Create a basic library with an API
Instantiate and pass in an object
For makeSentence
example, change from return
to console.log()
so that output in JS console is seen.
Porting over from the site.
meta charset
and encoding.Porting over from site.
input[type="text"]
.http://en.m.wikipedia.org/wiki/The_Name_Game
"A verse can be created for any name, wi
thX as the name and Y as the name without the first consonant sound (if it begins with a consonant), as follows:
(X), (X), bo-b (Y)
Banana-fana fo-f (Y)
Fee-Fi-mo-m (Y)
(X)!
If the name starts with a vowel or vowel sound, the "b" "f" or "m" is inserted in front of the name."
Use spies so that the penultimate exercise relies on more unit tests and fewer instructions
Instead of just blob demo.
In slides show an example of instantiating a model with properties other than defaults. Also explain .set()
and .get()
The course JS302: Backbone has as requisite JS302. Maybe JS205 ?
Change unit tests so that students can use either string or function. Currently, tests only pass if string is used.
Porting over from site.
We've had feedback from multiple students that the second day is too fast (even those already familiar with programming). We could slow it down and remove somethings (we could remove Animation and Events entirely, perhaps, and do more DOM exercises). We could break the DOM section up more.
cc @icyfenix
In the case of a time crunch, events is more important than animation, so we should reverse those.
That means the final events exercise needs to be made a final homework, since it involves both.
Should show fetch and reset events in context of BackboneShelf and have a demo for that stage, to help with exercise.
Right now it's ThreeJS code
From our feedback form:
"GDI is an organization whose reason for existence is to fight stereotype threat. I partnered with a woman who was older the first day, and I think the fact that the exercises asked for our ages activated stereotype threat. She didn't show up the next day."
I don't know if that's the case or not, but it woudn't hurt to change the exercises. The "age calculator" and "about me" exercises both end up asking for age.
cc @icyfenix
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.