cape cod web technology meetup - 2
TRANSCRIPT
Cape Cod Web Technology MeetupCape Cod Web Technology Meetuphttp://www.meetup.com/Cape-Cod-Web-Technology-Meetuphttp://www.meetup.com/Cape-Cod-Web-Technology-Meetup
HTML · CSS · JavaScript · PHP · MySQLSEO (Search Engine Optimization)
CMS (Content Management Systems)Software Development · Web Design &
Development · JQuery · Linux · OSX · Windows · Open Source, DOM, Canvas/SVG, WebGL, Video/Audio, Animation, AJAX, WebSockets,
Cache/Storage, Geolocation
Meetup Topics(Quick Overview)
● Text Editors (Atom / Sublime)
● Apache Server (sftp/ssh/php) – Todd's Server!
● CPanel / Wordpress (server side details)
● Working with any Web API (Mapping Example)(facebook, linkedin, twitter, maps, d3.js, jquary)
● JSON and HTML <img>
● GIT http://www.github.com
Text Editors!
● ATOM (Free / GitHub) https://atom.io/
● Sublime (Free) http://www.sublimetext.com/ ● gedit (Kinda Requires Linux / GNOME)
● And you should probability know about Emacs or VI (good old command line … also free)
● IDE (Eclipse, Netbeans, QT others)(large downloads, however free…)
● Apple has XCODE (not open source)
Atom Editor (GitHub)
Sublime Editor (Python)
AthenaHealth in Bostonuses Sublime Text Editor!?
http://www.athenahealth.com/careers/tech-jobs?intcmp=10031704
ATOM and Sublime Shortcut Notes
● Download Atom or Sublime and open source code
● Anyone have a favorite shortcut?
● Test out Really Cool Auto Code Completion
– Type: for,while,switch, if try it out and hit enter!
● Control+Shift+p (to lookup commands)
● Control+d (multiple variable select)
● Edit+Lines+AutoIndent (code beautify)
Todd's Server!
● Ubuntu Server (Linux) (runs apache with php and mysql)
● Make sure you know (ssh / sftp / public_html has your files / and know chmod file permissions)
● Each http connection is a “web socket”
Ubuntu Server (Free)Try to Donate to Open Source!
http://www.ubuntu.com/download/server
They also have a Desktop Version, also Checkout Fedora and CentOS (Also FREE)
Writing your Own Web Server CodeIt only Takes a Few Lines of Code
Cape Cod Wampanoag Server?!?require 'socket' # Get sockets from stdlib
server = TCPServer.new(2000) # Socket to listen on port 2000
loop { # Servers run forever
client = server.accept # Wait for a client to connect
resp = "<html>Cape Cod Wampanoag Web Server found a Ruby!</html>"
headers = ["HTTP/1.1 200 OK",
"Date: Tue, 14 Dec 2010 10:48:45 GMT",
"Server: Ruby",
"Content-Type: text/html; charset=iso-8859-1",
"Content-Length: #{resp.length}\r\n\r\n"].join("\r\n")
client.puts headers # Send the time to the client
client.puts resp
client.close # Disconnect from the client
}
Note: Facebook Writes Their Own Server Code
Ruby Server (port 2000)Cape Cod Wampanoag Web Server
Cpanel – Server SideMost Web Servers use this as a File Manager
(this is where you install wordpress from)
Web API's (include files)
● Google Analytics (not really an API however its a good example...)
– <script src="//www.google-analytics.com/analytics.js" async=""></script>
● Facebook Graph (API) https://developers.facebook.com/docs/javascript/examples – Maybe the most important API in the world?
● Jquery (its for selecting HTML elements - lots of people use it)
● D3.js (graphics) https://github.com/mbostock/d3/wiki/Gallery ● LinkedIn API https://developer.linkedin.com/docs ● Twitter API (uses a lot of JSON)
https://dev.twitter.com/rest/reference/get/search/tweets
● The Key to API's is they are professional and optimized.
Facebook API & LinkedIn API(basically you need to get an API-KEY then you can use all your regular
JavaScript and unfortunately PHP to call the functions)
https://developer.linkedin.com/docs/js-sdk
Working with an APIOpen Street Maps
● Example– Open Street Maps: http://openlayers.org/download/really cool example at /examples/stamen.html
– Google Maps: http://www.mkyong.com/google-maps/google-maps-api-map-types-example/
● Lets try and Make a Slight Change to the Code in /examples/stamen.html
– Try using your actual location, not a static location.
1) Download the zip from Open Street Map at http://openlayers.org/download/
2) Open up the /examples/stamen.html
3) Search for the static geocode of [-122.416667, 37.783333] in your JavaScript for San Francisco and edit it for Cape Cod.
4) Or if your fancy try a function call to your exact Current Position. navigator.geolocation.getCurrentPosition(callback_function);
/examples/stamen.html
Open Street Map
GeoLocation Uses a Non-Blocking Callback Function (mymap)
Once your Geo Location is received the code uses a callback function and “call's mymap” to display the map.
Callback functions are non-blocking and its important not to freeze up the browser while your waiting for remote data.
CSS is Important TooLet's try Changing the
Size of the Map <style type="text/css">
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
Or you can do the CSS style inline.
<div id="map" style="width: 800px, height: 800px"></div>
Does http://openlayers.org/ API say anything else that might help?
You should also know about JSON (JavaScript Objects - just a Variable)
https://msdn.microsoft.com/en-us/library/bb299886.aspxvar contact = {
"Name": "Mashpee Public Library",
"PermissionToCall": true,
"PhoneNumbers": [
{
"Location": "Work",
"Number": "508-539-1435"
}
]
};
if (contact.PermissionToCall)
{
alert("Call " + contact.Name + " at " + contact.PhoneNumbers[0].Number);
}
Note: JSON objects can also get fancy and include other functions inside (the variable). Don't worry about it too much if you don't understand this… JSON is usually used just as a variable type or to pass text data around the internet.
JSON with HTML
What is GitHub?http://www.github.com
● A free (OPEN SOURCE) way of saving your code in a tree and working with others on it.
● See differences (diffs) in your code.
● Written by the Linux guy Linus Torvolds
Future Meetup Topics?
● Coding using new JavaScript! ECMAScript 2015 (ES6)● Participating in Global Open Source Projects (bugzilla)
– How to compile your own Firefox from the C++ code (Aurora/Nightly Build)
● Detailed GIT / Mercurial / Subversion Demo● D3.js: https://github.com/mbostock/d3/wiki/Gallery#basic-charts
● MySQL / AJAX: http://www.jquery4u.com/demos/ajax/● Text Animation: http://twistori.com/#i_think ● Looking into our Personal Websites and Wordpress?● More Group / Community Debugging
Thank You!HTML Questions?
● Feel Free to Contact Me Anytime
– Asher Martin Tel: 773.321.8181
Email: [email protected]
Skype: AsherMartin