HACKATHON
NIGHT!!!!!
In the news this week!
interesting model?!?
Planting the seeds :)
DATABC, the "developer exchange"
http://blog.data.gov.bc.ca/2015/02/introducing-the-bc-developers-exchange/
Upcoming Events!
Networking with co-op! Tomorrow night! 7pm!
At the Fort!
(we can code in the back room, I'll be there at 6pm!)
LLC event Oct 25!
Hour of Code! Dec 10, 6pm! At the Fort!
HACKATHON
“A hackathon, a hacker neologism, is an event when programmers meet to do collaborative computer programming.” -Wikipedia
Not sure we can watch Dragon's Den, but GO JEN GO!!!!
SCRUM!!!! Practice (tools) and Process (methodology)
Practices: Tools... ANYTHING!
Wordpress, Axure,
Github issues/wiki,
Slack, others?
Processes: Agile!
TONIGHT
Code Walkthrough is a form of peer review in which a programmer leads the review process and the other team members ask questions and spot possible errors against development standards and other issues. The meeting is usually led by the author of the document under review and attended by other members of the team.
http://www.tutorialspoint.com/software_testing_dictionary/code_walkthrough.htm
Templates on GitHub
- maps and markers (cityvibes and taps & pours)
- grid animation (#myvictoria)
- counters and maps (cycle app!)
- "walk throughs" and then PLAY!!!!
A small step but...
- a good way to start, to get something small working!
- down the road (next week) we can look at additional functionality
- device vibration
- sounds
- calculating "proximity"
- time
- space
- the "data management and visualization" section will include
- backend data organization
- data analytics and more visualization!
thecodeplayer!
- great examples there, but there is a trick to getting them to work for you locally!
<!--
Two markers with two different icons!
Based on the example here:
http://www.w3schools.com/json/tryit.asp?filename=tryjson_create
This creates an "event" that might look like something we get from another server!
The data format is called "JSON" (JavaScript Object Notation)
-->
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<script>
//Alert statements help with debugging---you know your script is running and where it is!
alert("hi and here we go!");
var images = ['images/logo.png', 'images/Mayor-Beer-icon.png'];
var markers = [
['Fort Tectoria', 48.424134,-123.363127],
['Great Beer', 48.424000,-123.363010]
];
var myCenter = new google.maps.LatLng(48.424134,-123.363127);
// This set up is borrowed from the GoogleMap example in W3Schools!
function initialize() {
alert("in init!");
var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map= new google.maps.Map(document.getElementById("googleMap"),mapProp);
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: images[i]
});
alert("got one!");
}
}
google.maps.event.addDomListener(window, 'load', initialize);
alert("done");
</script>
<h1>Mocking up our data!!!<h1>
<h2>JSON Object Creation in JavaScript</h2>
<p id="demo"></p>
<script>
var text = '{"event":"Our Presentations","street":"777 Fort Street","time":"7pm"}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.event + "<br>" +
obj.street + "<br>" +
obj.time;
</script>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html><!--
A slight change to be dropping in our icons with a time delay! Based on the example here:
https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration
-->
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<meta charset="utf-8">
<title>Marker animations with <code>setTimeout()</code></title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
margin-left: -52px;
}
</style>
</head>
<body>
<script>
var ourMap;
function initialize() {
var myCenter = new google.maps.LatLng(48.424134,-123.363127);
var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
ourMap = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function addMarker(pos, im) {
new google.maps.Marker({
position: pos,
map: ourMap,
icon: im,
draggable: true,
animation: google.maps.Animation.DROP
});
}
function putMarkers() {
// Loop through our array of markers & DROP each one on the map
var markerlist = [
['Fort Tectoria', 48.424134,-123.363127],
['Great Beer', 48.424000,-123.363010]
];
var images = ['images/logo.png', 'images/Mayor-Beer-icon.png'];
for( i = 0; i < markerlist.length; i++ ) {
var position = new google.maps.LatLng(markerlist[i][1], markerlist[i][2]);
var title = markerlist[i][0];
(function(pos, image) {
setTimeout(function() {
addMarker(pos, image);
}, i*500);
}(position, images[i]));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="floating-panel">
<button id="drop" onclick="putMarkers()">Drop Markers</button>
<div id="googleMap" style="width:500px;height:380px;"></div>
</div>
<div id="map"></div>
</body>
</html>
Agenda
- "sprints" (another term from "agile")
- plan, implement, DEBUG!!!!
- use "Developer tools" to look for errors!
- scrum...
- repeat!
deck
By Yvonne
deck
- 1,140
