Cape Cod Web Technology Meetup - 2

Cape Cod Web Technology MeetupCape Cod Web Technology Meetup
http://www.meetup.com/Cape-Cod-Web-Technology-Meetuphttp://www.meetup.com/Cape-Cod-Web-Technology-Meetup
HTML · CSS · JavaScript · PHP · MySQL
SEO (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

Really Funny GitHub Video
https://youtu.be/Y7aEiVwBAdk

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)

AthenaHealth in Boston
uses 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 Code
It 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}rnrn"].join("rn")
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 Side
Most 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 API
Open 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 Too
Let'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.aspx
var 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.

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: AsherMartin@gmail.com
Skype: AsherMartin

Cape Cod Web Technology Meetup - 2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Cape Cod Web Technology Meetup - 2

Ähnlich wie Cape Cod Web Technology Meetup - 2 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Cape Cod Web Technology Meetup - 2