Lambda - Kasutaja kaastöö [et]

UI:Offline mobiiliapp

2014-03-31T17:42:39Z

Roger: /* Ülesanne */

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

NB! Enamus ülesandest saab teha Chromega desktopis. Mobiili on vaja vaid Take picture koha jaoks.

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ([http://jsfiddle.net/sangdol/RsxtG/49/ link]) ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

== Joonistusosa koodinäide ==

Näitekoodi on vaja kindlasti kohandada. Tore oleks ka mitme sõrme tugi, kuid pole kohustuslik (sellele aitab kaasa pointer-eventide attribuut 'pointerId'.)

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.addEventListener('load', init);
var canvas = null;
var ctx = null;
// currently active stroke
var stroke = null;
function init() {
canvas = document.querySelector('canvas');
ctx = canvas.getContext("2d");
// Set the default line style.
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "black";
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseleave', onMouseUp);
requestAnimFrame(drawPointers);
}
function onMouseDown(event) {
stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
function onMouseMove(event) {
// Are we currently drawing this pointer?
if (stroke) {
stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
}
function onMouseUp(event) {
stroke = null;
}
function drawPointers() {
// If we have an active stroke, draw any undrawn segments.
if (stroke) {
stroke.draw();
}
requestAnimFrame(drawPointers);
}
function Point(x, y) {
this.x = x;
this.y = y;
}
function Stroke(x, y) {
this.points = [new Point(x, y)];
}
Stroke.prototype.addPoint = function (x, y) {
this.points.push(new Point(x, y));
}
Stroke.prototype.draw = function () {
if (this.points.length < 2) {
return;
}
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.stroke();
ctx.closePath();
this.points = this.points.slice(-1);
}

UI:Offline mobiiliapp

2014-03-31T17:10:42Z

Roger: /* Joonistusosa koodinäide */

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

NB! Enamus ülesandest saab teha Chromega desktopis. Mobiili on vaja vaid Take picture koha jaoks.

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

== Joonistusosa koodinäide ==

Näitekoodi on vaja kindlasti kohandada. Tore oleks ka mitme sõrme tugi, kuid pole kohustuslik (sellele aitab kaasa pointer-eventide attribuut 'pointerId'.)

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.addEventListener('load', init);
var canvas = null;
var ctx = null;
// currently active stroke
var stroke = null;
function init() {
canvas = document.querySelector('canvas');
ctx = canvas.getContext("2d");
// Set the default line style.
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "black";
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseleave', onMouseUp);
requestAnimFrame(drawPointers);
}
function onMouseDown(event) {
stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
function onMouseMove(event) {
// Are we currently drawing this pointer?
if (stroke) {
stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
}
function onMouseUp(event) {
stroke = null;
}
function drawPointers() {
// If we have an active stroke, draw any undrawn segments.
if (stroke) {
stroke.draw();
}
requestAnimFrame(drawPointers);
}
function Point(x, y) {
this.x = x;
this.y = y;
}
function Stroke(x, y) {
this.points = [new Point(x, y)];
}
Stroke.prototype.addPoint = function (x, y) {
this.points.push(new Point(x, y));
}
Stroke.prototype.draw = function () {
if (this.points.length < 2) {
return;
}
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.stroke();
ctx.closePath();
this.points = this.points.slice(-1);
}

UI:Offline mobiiliapp

2014-03-31T17:08:58Z

Roger: /* Joonistusosa koodinäide */

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

NB! Enamus ülesandest saab teha Chromega desktopis. Mobiili on vaja vaid Take picture koha jaoks.

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

== Joonistusosa koodinäide ==

Näitekoodi on vaja kindlasti kohandada.

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.addEventListener('load', init);
var canvas = null;
var ctx = null;
// currently active stroke
var stroke = null;
function init() {
canvas = document.querySelector('canvas');
ctx = canvas.getContext("2d");
// Set the default line style.
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "black";
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseleave', onMouseUp);
requestAnimFrame(drawPointers);
}
function onMouseDown(event) {
stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
function onMouseMove(event) {
// Are we currently drawing this pointer?
if (stroke) {
stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
}
function onMouseUp(event) {
stroke = null;
}
function drawPointers() {
// If we have an active stroke, draw any undrawn segments.
if (stroke) {
stroke.draw();
}
requestAnimFrame(drawPointers);
}
function Point(x, y) {
this.x = x;
this.y = y;
}
function Stroke(x, y) {
this.points = [new Point(x, y)];
}
Stroke.prototype.addPoint = function (x, y) {
this.points.push(new Point(x, y));
}
Stroke.prototype.draw = function () {
if (this.points.length < 2) {
return;
}
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.stroke();
ctx.closePath();
this.points = this.points.slice(-1);
}

UI:Offline mobiiliapp

2014-03-31T17:08:44Z

Roger: /* Joonistusosa koodinäide */

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

NB! Enamus ülesandest saab teha Chromega desktopis. Mobiili on vaja vaid Take picture koha jaoks.

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

== Joonistusosa koodinäide ==

Näitekoodi on vaja kindlasti kohandada.

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.addEventListener('load', init);
var canvas = null;
var ctx = null;
// currently active stroke
var stroke = null;
function init() {
canvas = document.querySelector('canvas');
ctx = canvas.getContext("2d");
// Set the default line style.
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "black";
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseleave', onMouseUp);
requestAnimFrame(drawPointers);
}
function onMouseDown(event) {
stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
function onMouseMove(event) {
// Are we currently drawing this pointer?
if (stroke) {
stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
}
function onMouseUp(event) {
stroke = null;
}
function drawPointers() {
// If we have an active stroke, draw any undrawn segments.
if (stroke) {
stroke.draw();
}
requestAnimFrame(drawPointers);
}
function Point(x, y) {
this.x = x;
this.y = y;
}
function Stroke(x, y) {
this.points = [new Point(x, y)];
}
Stroke.prototype.addPoint = function (x, y) {
this.points.push(new Point(x, y));
}
Stroke.prototype.draw = function () {
if (this.points.length < 2) {
return;
}
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.stroke();
ctx.closePath();
this.points = this.points.slice(-1);
}

UI:Offline mobiiliapp

2014-03-31T17:07:35Z

Roger: /* Ülesanne */

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

NB! Enamus ülesandest saab teha Chromega desktopis. Mobiili on vaja vaid Take picture koha jaoks.

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

== Joonistusosa koodinäide ==

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.addEventListener('load', init);
var canvas = null;
var ctx = null;
// currently active stroke
var stroke = null;
function init() {
canvas = document.querySelector('canvas');
ctx = canvas.getContext("2d");
// Set the default line style.
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "black";
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseleave', onMouseUp);
requestAnimFrame(drawPointers);
}
function onMouseDown(event) {
stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
function onMouseMove(event) {
// Are we currently drawing this pointer?
if (stroke) {
stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
}
function onMouseUp(event) {
stroke = null;
}
function drawPointers() {
// If we have an active stroke, draw any undrawn segments.
if (stroke) {
stroke.draw();
}
requestAnimFrame(drawPointers);
}
function Point(x, y) {
this.x = x;
this.y = y;
}
function Stroke(x, y) {
this.points = [new Point(x, y)];
}
Stroke.prototype.addPoint = function (x, y) {
this.points.push(new Point(x, y));
}
Stroke.prototype.draw = function () {
if (this.points.length < 2) {
return;
}
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.stroke();
ctx.closePath();
this.points = this.points.slice(-1);
}

UI:Offline mobiiliapp

2014-03-31T17:04:44Z

Roger: /* Joonistusosa koodinäide */

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

== Joonistusosa koodinäide ==

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.addEventListener('load', init);
var canvas = null;
var ctx = null;
// currently active stroke
var stroke = null;
function init() {
canvas = document.querySelector('canvas');
ctx = canvas.getContext("2d");
// Set the default line style.
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "black";
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseleave', onMouseUp);
requestAnimFrame(drawPointers);
}
function onMouseDown(event) {
stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
function onMouseMove(event) {
// Are we currently drawing this pointer?
if (stroke) {
stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
}
function onMouseUp(event) {
stroke = null;
}
function drawPointers() {
// If we have an active stroke, draw any undrawn segments.
if (stroke) {
stroke.draw();
}
requestAnimFrame(drawPointers);
}
function Point(x, y) {
this.x = x;
this.y = y;
}
function Stroke(x, y) {
this.points = [new Point(x, y)];
}
Stroke.prototype.addPoint = function (x, y) {
this.points.push(new Point(x, y));
}
Stroke.prototype.draw = function () {
if (this.points.length < 2) {
return;
}
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.stroke();
ctx.closePath();
this.points = this.points.slice(-1);
}

UI:Offline mobiiliapp

2014-03-31T17:04:32Z

Roger: /* Joonistusosa koodinäide */

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

== Joonistusosa koodinäide ==

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.addEventListener('load', init);
var canvas = null;
var ctx = null;
// currently active stroke
var stroke = null;
function init() {
canvas = document.querySelector('canvas');
ctx = canvas.getContext("2d");
// Set the default line style.
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "black";
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseleave', onMouseUp);
requestAnimFrame(drawPointers);
}
function onMouseDown(event) {
stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
function onMouseMove(event) {
// Are we currently drawing this pointer?
if (stroke) {
stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
}
function onMouseUp(event) {
stroke = null;
}
function drawPointers() {
// If we have an active stroke, draw any undrawn segments.
if (stroke) {
stroke.draw();
}

requestAnimFrame(drawPointers);
}
function Point(x, y) {
this.x = x;
this.y = y;
}
function Stroke(x, y) {
this.points = [new Point(x, y)];
}
Stroke.prototype.addPoint = function (x, y) {
this.points.push(new Point(x, y));
}
Stroke.prototype.draw = function () {
if (this.points.length < 2) {
return;
}
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.stroke();
ctx.closePath();
this.points = this.points.slice(-1);
}

UI:Offline mobiiliapp

2014-03-31T17:03:52Z

Roger: /* Joonistusosa koodinäide */

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

== Joonistusosa koodinäide ==

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

window.addEventListener('load', init);

var canvas = null;
var ctx = null;

// currently active stroke
var stroke = null;

function init() {
canvas = document.querySelector('canvas');
ctx = canvas.getContext("2d");

// Set the default line style.
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "black";

canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseleave', onMouseUp);

requestAnimFrame(drawPointers);
}

function onMouseDown(event) {
stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}

function onMouseMove(event) {
// Are we currently drawing this pointer?
if (stroke) {
stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
};

function onMouseUp(event) {
stroke = null;
};

function drawPointers() {
// If we have an active stroke, draw any undrawn segments.
if (stroke) {
stroke.draw();
}

requestAnimFrame(drawPointers);
};

function Point(x, y) {
this.x = x;
this.y = y;
}

function Stroke(x, y) {
this.points = [new Point(x, y)];
}

Stroke.prototype.addPoint = function (x, y) {
this.points.push(new Point(x, y));
};

Stroke.prototype.draw = function () {
if (this.points.length < 2) {
return;
}

ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.stroke();
ctx.closePath();
this.points = this.points.slice(-1);
};

UI:Offline mobiiliapp

2014-03-31T17:03:00Z

Roger:

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

== Joonistusosa koodinäide ==

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

window.addEventListener('load', init);

var canvas = null;
var ctx = null;

// currently active stroke
var stroke = null;

function init() {
canvas = document.querySelector('canvas');
ctx = canvas.getContext("2d");

// Set the default line style.
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "black";

canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseleave', onMouseUp);

requestAnimFrame(drawPointers);
}

function onMouseDown(event) {
stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}

function onMouseMove(event) {
// Are we currently drawing this pointer?
if (stroke) {
stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
};

function onMouseUp(event) {
stroke = null;
};

function drawPointers() {
// If we have an active stroke, draw any undrawn segments.
if (stroke) {
stroke.draw();
}

requestAnimFrame(drawPointers);
};

function Point(x, y) {
this.x = x;
this.y = y;
}

function Stroke(x, y) {
this.points = [new Point(x, y)];
}

Stroke.prototype.addPoint = function (x, y) {
this.points.push(new Point(x, y));
};

Stroke.prototype.draw = function () {
if (this.points.length < 2) {
return;
}

ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.stroke();
ctx.closePath();
this.points = this.points.slice(-1);
};

UI:Offline mobiiliapp

2014-03-31T17:00:39Z

Roger: Uus lehekülg: '{{UI}} == Ülesanne == x240px Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemi...'

Fail:Drawing-app.png

2014-03-31T16:50:48Z

Roger:

Kasutajaliidesed

2014-03-31T16:48:00Z

Roger: /* Praktikumid */

Kursuse kood: ITV0130 
Link: http://www.lambda.ee/index.php/Kasutajaliidesed or http://www.lambda.ee/index/itv0130 
Õppejõud: Jaagup Irve 
Kontakt: jaagup.irve@ttu.ee, TTÜ ruum ICT-425 
Kursus varasematel aastatel: [[Kasutajaliidesed (2013)|2013]] [[Kasutajaliidesed (2012)|2012]]

__TOC__

== Korraldusest ==

Loengutes selgitame kasutajaliideste arendamise põhimõtteid. Harjutustundide eesmärk on tutvustada laborite tegemiseks tarvilikke tehnilisi lahendusi. Praktikumis lahendame iga nädal mõnd konkreetset liidese ehitamisel ettetulevat probleemi (kui pole kodutööde esitamise nädal, sest siis tegeleme ainult sellega)

=== Rühmad ===

* [https://docs.google.com/spreadsheet/pub?key=0Ahj5HjDByo6SdHpLX2NFYjl5Mk5sWVlQR0xJVWwtU3c&single=true&gid=2&output=html Rühmad]
* Muudatuste tegemine ja lisamine e-posti teel.
* Rühm A: esmaspäev 16:00 ITC-404
* Rühm B: esmaspäev 17:45 ITC-401
* Rühm C: teisipäev 10:00 ITC-401

== Hindest ==

Aine lõppeb hindelise arvestusega. Aine hinne koosneb kolmest komponendist:
* Labor 1: [[UI Prototüüp|Kasutajaliidese prototüüpimine]] staatilise HTML/CSS/Javascripti abil (30+3p) '''Tähtaeg: 17. märts (Rühmad A, B) ja 18. märts (Rühm C)'''
* Labor 2: AJAX kasutajaliidese viimistlemine HTML/CSS/Javascripti abil. (30+3p) [[Serverirakenduse praktiline juhend]]
* Kontrolltöö lugemismaterjalide ja loengumaterjalide peale (40p)

Laborid sooritatakse paarikaupa või soovi korral individuaalselt; hindamisel peavad kohal olema mõlemad paarilised.

== Praktikumid ==

Esimene nädal praktikumi ei toimu, sest gruppidesse jagamine (vt grupid ülalpool)

# [[UI:Prototüüp|Prototüüpimine paberil]]
# [[UI:Bootstrap|Bootstrap]]
# [[UI:Kassid|Kassid]] (esitamiseks 25.nda veebruari jooksul)
# [[UI:CSS elemente|CSS elemente]]
# [[UI:Transition|Transition]]
# ''Esimese labori esitamine''
# [[UI:Mobiilvaate praktikum|Mobiilvaate praktikum]]
# [[UI:Offline mobiiliapp|Offline mobiiliapp]]
# [[UI:Dijkstra|Dijkstra]] 
# [[UI:Sqlite|Sqlite]] 
# [[UI:CSS3 elemente|CSS3 elemente]]
# [[UI:CSS Speech|CSS Speech]]

== Videod ==

* [https://www.youtube.com/playlist?list=PLMQzXA1f24AdPMsiYydc4rcAtHN-MiC6D&feature=view_all CSSi tutvustusvideod]

== Kontrolltöö ==

Kontrolltöö toimub viimase loengu ajal, loengu ruumides. Kontrolltöö sisuks on alltoodud materjalide lugemiskontroll ning HTML/javascripti tehniliste küsimuste lahendamine paberil.

''' Lugemist '''

* A List Apart: [http://alistapart.com/article/indefenseofeyecandy In Defence of Eye Candy] - miks ilus liides on "parem".
* Spolsky: [http://www.joelonsoftware.com/uibook/fog0000000249.html User Interface Design For Programmers] - kontrollitundest, kasutajamudelist ja päris inimestest
* Brandon Walkin: [http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/ Managing UI complexity] - sellest kuidas asju kasutaja eest ära peita
* Ask Tog: [http://www.asktog.com/basics/firstPrinciples.html First Principles of User Interaction Design] - tee liides valmis ja loe see uuesti läbi
* Nielsen: [http://www.nngroup.com/articles/ten-usability-heuristics/ 10 heuristilist kriteeriumit] - liidese testimiseks
* [http://ui-patterns.com/ UI-Patterns.com] - parempoolne menüü
* [http://www.joelonsoftware.com/articles/Unicode.html Spolsky: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)]
* [http://friedcellcollective.net/outbreak/2007/12/13/messing-up-the-interface/ kuidas vormid koledaks lähevad] ja [http://www.lukew.com/ff/entry.asp?1502 vormide disainist]

''' Tehniline '''

* CSS (vt http://www.w3schools.com/css/default.asp). Peab aru saama põhimõtetest ja näidetest. Konkreetsete omaduste ja atribuudite nimesid ise välja ei pea mõtlema.
* Javascript (vt http://www.w3schools.com/js/default.asp). Peab aru saama väikestest näidetest a la js inclusion, vormist teksti kättesaamine ja muutmine, domi kättesaamine ja muutmine. Ei pea oskama erinevaid teeke.
* Json/ajax (vt http://www.w3schools.com/ajax/default.asp). Peab oskama kirjutada väikese JSONi kasutava ajaxi näite. Väike progeülesanne.
* HTML dom põhipunktid (vt http://www.w3schools.com/htmldom/default.asp).
* Cookied ja sessioonid (vt http://en.wikipedia.org/wiki/HTTP_cookie, http://www.quirksmode.org/js/cookies.html). Peab aru saama cookie põhimõtetest server-side ja aru saama javascripti näidetest cookiede kasutamise kohta. Programmeerimisülesannet selle kohta ei tule.
* Cgi protokoll (vt http://www.jmarshall.com/easy/cgi/). Peab aru saama, kuidas vormisisusid postitaktakse, mis vahe on GET ja POST protokollil.

== Niisama huvitavat lugemist ==
* [http://www.theverge.com/2013/1/24/3904134/google-redesign-how-larry-page-engineered-beautiful-revolution Redesigning Google: How Larry Page Engineered Beautiful Revolution] - kuidas Google ennast hiljuti ümber ehitas
* [http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown Amazoni alam-menüü nipp]
* [http://paulrouget.com/e/devtoolsnext/ Firefox developer tools] - lahedusi Mozillalt
* [http://www.riso.ee/et/files/Kasutajakeskse_veebi_lehekylgede_disain.pdf RISO: Kasutajakeskse veebi lehekülgede disain (.pdf)]
* [http://www.riso.ee/et/files/Kasutajakeskse_veebi_lehekylgede_disain.pdf Riigi veebi koosvõime raamistik]
* [http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx Windows User Experience Interaction guidelines] - Win7
* [http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx UX Guidelines for Windows Store apps] - Win 8
* [http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html iOS Human Interface Guidelines]
* [https://developer.gnome.org/hig-book/stable/ GNOME Human Interface Guidelines]
* [https://medium.com/product-design/5ccef7b3e1fc Kuidas iOS lapikumaks muutub aja jooksul]
* [http://www.behance.net/rogeroddone Google Visual Asset Guidelines] - Google'i ikonograafia loomisest
* [http://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you Dark Patterns] - salakavalatest kasutajaliidese mustritest.

[[Kategooria:Kasutajaliidesed]]

UI:Mobiilvaate praktikum

2014-03-24T20:38:50Z

Roger:

{{UI}}
Harjutuse eesmärk on kirjutada valmis veebileht, mis reageerib dünaamiliselt kasutaja akna laiuse muutumisele, kasutades selleks ainult CSSi. Täpsemalt proovime seda thea Flexbox nimelise standardiga, mis on veel nii uus, et igas brauseris korralikult ei tööta. Seetõttu kasutage selle harjutuse testimiseks brauserit '''Chrome'''.

== Ülesanne ==

Teha leht, mis kasutaks [http://css-tricks.com/snippets/css/a-guide-to-flexbox/ flexboxi] meetodit koos CSS Media Querydega. Sisu võiks koosneda piltidest + tekstidest, mis muudavad suurust vastavalt brauseri suuruse muutmisele.

Desktopi vaade peaks olema kõikidel ekraanidel, millel on laius suurem kui 1024px.

[[Pilt:Desktop-flex.png|x240px]]

(Nupud võiks olla keskel üleval. Näidata teistsugust reklaami, kui vaadata suurema pikslitihedusega ekraanilt)

Tableti vaade peaks jääma 1024px ja 768px vahele.

[[Pilt:Tablet-flex.png|x240px]]

(Tulbas vähem asju. Äärest ääreni nupud üleval ning suuremad, kui desktopi vaates. Reklaam peaks sellest vaatest puuduma)

Mobiilne vaade võiks olla väiksem kui 768px.

[[Pilt:Mobile.png|x240px]]

(Pilt peaks erinema desktopi reklaami pildist. Näidata teistsugust reklaami, kui vaadata suurema pikslitihedusega ekraanilt. Javascriptiga peaks peitma menüü, kui minna mobiilsesse vaatesse ning mingi nupu vajutamisel võiks see nähtavale ilmuda)

==Esitamine==
Esitamiseks saatke tulemus tavalisele aadressile, kirjutades teemareale "UI:Mobiilvaade". Töö nagu ikka üksi või kahekesi.

UI:Mobiilvaate praktikum

2014-03-24T18:02:20Z

Roger:

Teha leht, mis kasutaks [http://css-tricks.com/snippets/css/a-guide-to-flexbox/ flexboxi] meetodit koos CSS Media Querydega. Sisu võiks koosneda piltidest + tekstidest, mis muudavad suurust vastavalt brauseri suuruse muutmisele.

Desktopi vaade peaks olema kõikidel ekraanidel, millel on laius suurem kui 1024px.

[[Pilt:Desktop-flex.png|x240px]]

(Nupud võiks olla keskel üleval. Näidata teistsugust reklaami, kui vaadata suurema pikslitihedusega ekraanilt)

Tableti vaade peaks jääma 1024px ja 768px vahele.

[[Pilt:Tablet-flex.png|x240px]]

(Tulbas vähem asju. Äärest ääreni nupud üleval ning suuremad, kui desktopi vaates)

Mobiilne vaade võiks olla väiksem kui 768px.

[[Pilt:Mobile.png|x240px]]

(Pilt peaks erinema desktopi reklaami pildist. Näidata teistsugust reklaami, kui vaadata suurema pikslitihedusega ekraanilt. Javascriptiga peaks peitma menüü, kui minna mobiilsesse vaatesse ning mingi nupu vajutamisel võiks see nähtavale ilmuda)

UI:Mobiilvaate praktikum

2014-03-24T17:58:34Z

Roger:

Teha leht, mis kasutaks [http://css-tricks.com/snippets/css/a-guide-to-flexbox/ flexboxi] meetodit koos CSS Media Querydega. Sisu võiks koosneda piltidest + tekstidest, mis muudavad suurust vastavalt brauseri suuruse muutmisele.

Desktopi vaade peaks olema kõik, millel on laius suurem kui 1024px.

[[Pilt:Desktop-flex.png|x240px]]

(Nupud võiks olla keskel üleval. Näidata teistsugust reklaami, kui vaadata suurema pikslitihedusega ekraanilt)

Tableti vaade peaks jääma 1024px ja 768px vahele.

[[Pilt:Tablet-flex.png|x240px]]

(Tulbas vähem asju. Äärest ääreni nupud üleval ning suuremad, kui desktopi vaates)

Mobiilne vaade võiks olla väiksem kui 768px.

[[Pilt:Mobile.png|x240px]]

(Pilt peaks erinema desktopi reklaami pildist. Näidata teistsugust reklaami, kui vaadata suurema pikslitihedusega ekraanilt.)

UI:Mobiilvaate praktikum

2014-03-24T17:54:40Z

Roger:

Teha leht, mis kasutaks [http://css-tricks.com/snippets/css/a-guide-to-flexbox/ flexboxi] meetodit koos CSS Media Querydega.

Desktopi vaade peaks olema kõik, millel on laius suurem kui 1024px.

[[Pilt:Desktop-flex.png|x240px]]

Tableti vaade peaks jääma 1024px ja 768px vahele.

[[Pilt:Tablet-flex.png|x240px]]

Mobiilne vaade võiks olla väiksem kui 768px.

[[Pilt:Mobile.png|x240px]]

UI:Mobiilvaate praktikum

2014-03-24T17:54:28Z

Roger:

Teha leht, mis kasutaks [http://css-tricks.com/snippets/css/a-guide-to-flexbox/ flexboxi] meetodit koos CSS Media Querydega.

Desktopi vaade peaks olema kõik, millel on laius suurem kui 1024px.
[[Pilt:Desktop-flex.png|x240px]]

Tableti vaade peaks jääma 1024px ja 768px vahele.
[[Pilt:Tablet-flex.png|x240px]]

Mobiilne vaade võiks olla väiksem kui 768px.
[[Pilt:Mobile.png|x240px]]

UI:Mobiilvaate praktikum

2014-03-24T17:50:13Z

Roger:

[[Pilt:Desktop-flex.png|x240px]]
[[Pilt:Tablet-flex.png|x240px]]
[[Pilt:Mobile.png|x240px]]

UI:Mobiilvaate praktikum

2014-03-24T17:49:04Z

Roger: Uus lehekülg: 'Pilt:Desktop-flex.png Pilt:Tablet-flex.png Pilt:Mobile.png'

[[Pilt:Desktop-flex.png]]
[[Pilt:Tablet-flex.png]]
[[Pilt:Mobile.png]]

Fail:Tablet-flex.png

2014-03-24T17:48:56Z

Roger:

Fail:Mobile.png

2014-03-24T17:48:26Z

Roger:

Fail:Desktop-flex.png

2014-03-24T17:47:22Z

Roger:

Kasutajaliidesed

2014-03-24T17:46:09Z

Roger: /* Praktikumid */

Kursuse kood: ITV0130 
Link: http://www.lambda.ee/index.php/Kasutajaliidesed or http://www.lambda.ee/index/itv0130 
Õppejõud: Jaagup Irve 
Kontakt: jaagup.irve@ttu.ee, TTÜ ruum ICT-425 
Kursus varasematel aastatel: [[Kasutajaliidesed (2013)|2013]] [[Kasutajaliidesed (2012)|2012]]

__TOC__

== Korraldusest ==

Loengutes selgitame kasutajaliideste arendamise põhimõtteid. Harjutustundide eesmärk on tutvustada laborite tegemiseks tarvilikke tehnilisi lahendusi. Praktikumis lahendame iga nädal mõnd konkreetset liidese ehitamisel ettetulevat probleemi (kui pole kodutööde esitamise nädal, sest siis tegeleme ainult sellega)

=== Rühmad ===

* [https://docs.google.com/spreadsheet/pub?key=0Ahj5HjDByo6SdHpLX2NFYjl5Mk5sWVlQR0xJVWwtU3c&single=true&gid=2&output=html Rühmad]
* Muudatuste tegemine ja lisamine e-posti teel.
* Rühm A: esmaspäev 16:00 ITC-404
* Rühm B: esmaspäev 17:45 ITC-401
* Rühm C: teisipäev 10:00 ITC-401

== Hindest ==

Aine lõppeb hindelise arvestusega. Aine hinne koosneb kolmest komponendist:
* Labor 1: [[UI Prototüüp|Kasutajaliidese prototüüpimine]] staatilise HTML/CSS/Javascripti abil (30+3p) '''Tähtaeg: 17. märts (Rühmad A, B) ja 18. märts (Rühm C)'''
* Labor 2: AJAX kasutajaliidese viimistlemine HTML/CSS/Javascripti abil. (30+3p) [[Serverirakenduse praktiline juhend]]
* Kontrolltöö lugemismaterjalide ja loengumaterjalide peale (40p)

Laborid sooritatakse paarikaupa või soovi korral individuaalselt; hindamisel peavad kohal olema mõlemad paarilised.

== Praktikumid ==

Esimene nädal praktikumi ei toimu, sest gruppidesse jagamine (vt grupid ülalpool)

# [[UI:Prototüüp|Prototüüpimine paberil]]
# [[UI:Bootstrap|Bootstrap]]
# [[UI:Kassid|Kassid]] (esitamiseks 25.nda veebruari jooksul)
# [[UI:CSS elemente|CSS elemente]]
# [[UI:Transition|Transition]]
# ''Esimese labori esitamine''
# [[UI:Mobiilvaate praktikum|Mobiilvaate praktikum]]
# [[UI:Dijkstra|Dijkstra]] 
# [[UI:Sqlite|Sqlite]] 
# [[UI:CSS3 elemente|CSS3 elemente]]
# [[UI:CSS Speech|CSS Speech]]

== Videod ==

* [https://www.youtube.com/playlist?list=PLMQzXA1f24AdPMsiYydc4rcAtHN-MiC6D&feature=view_all CSSi tutvustusvideod]

== Kontrolltöö ==

Kontrolltöö toimub viimase loengu ajal, loengu ruumides. Kontrolltöö sisuks on alltoodud materjalide lugemiskontroll ning HTML/javascripti tehniliste küsimuste lahendamine paberil.

''' Lugemist '''

* A List Apart: [http://alistapart.com/article/indefenseofeyecandy In Defence of Eye Candy] - miks ilus liides on "parem".
* Spolsky: [http://www.joelonsoftware.com/uibook/fog0000000249.html User Interface Design For Programmers] - kontrollitundest, kasutajamudelist ja päris inimestest
* Brandon Walkin: [http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/ Managing UI complexity] - sellest kuidas asju kasutaja eest ära peita
* Ask Tog: [http://www.asktog.com/basics/firstPrinciples.html First Principles of User Interaction Design] - tee liides valmis ja loe see uuesti läbi
* Nielsen: [http://www.nngroup.com/articles/ten-usability-heuristics/ 10 heuristilist kriteeriumit] - liidese testimiseks
* [http://ui-patterns.com/ UI-Patterns.com] - parempoolne menüü
* [http://www.joelonsoftware.com/articles/Unicode.html Spolsky: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)]
* [http://friedcellcollective.net/outbreak/2007/12/13/messing-up-the-interface/ kuidas vormid koledaks lähevad] ja [http://www.lukew.com/ff/entry.asp?1502 vormide disainist]

''' Tehniline '''

* CSS (vt http://www.w3schools.com/css/default.asp). Peab aru saama põhimõtetest ja näidetest. Konkreetsete omaduste ja atribuudite nimesid ise välja ei pea mõtlema.
* Javascript (vt http://www.w3schools.com/js/default.asp). Peab aru saama väikestest näidetest a la js inclusion, vormist teksti kättesaamine ja muutmine, domi kättesaamine ja muutmine. Ei pea oskama erinevaid teeke.
* Json/ajax (vt http://www.w3schools.com/ajax/default.asp). Peab oskama kirjutada väikese JSONi kasutava ajaxi näite. Väike progeülesanne.
* HTML dom põhipunktid (vt http://www.w3schools.com/htmldom/default.asp).
* Cookied ja sessioonid (vt http://en.wikipedia.org/wiki/HTTP_cookie, http://www.quirksmode.org/js/cookies.html). Peab aru saama cookie põhimõtetest server-side ja aru saama javascripti näidetest cookiede kasutamise kohta. Programmeerimisülesannet selle kohta ei tule.
* Cgi protokoll (vt http://www.jmarshall.com/easy/cgi/). Peab aru saama, kuidas vormisisusid postitaktakse, mis vahe on GET ja POST protokollil.

== Niisama huvitavat lugemist ==
* [http://www.theverge.com/2013/1/24/3904134/google-redesign-how-larry-page-engineered-beautiful-revolution Redesigning Google: How Larry Page Engineered Beautiful Revolution] - kuidas Google ennast hiljuti ümber ehitas
* [http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown Amazoni alam-menüü nipp]
* [http://paulrouget.com/e/devtoolsnext/ Firefox developer tools] - lahedusi Mozillalt
* [http://www.riso.ee/et/files/Kasutajakeskse_veebi_lehekylgede_disain.pdf RISO: Kasutajakeskse veebi lehekülgede disain (.pdf)]
* [http://www.riso.ee/et/files/Kasutajakeskse_veebi_lehekylgede_disain.pdf Riigi veebi koosvõime raamistik]
* [http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx Windows User Experience Interaction guidelines] - Win7
* [http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx UX Guidelines for Windows Store apps] - Win 8
* [http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html iOS Human Interface Guidelines]
* [https://developer.gnome.org/hig-book/stable/ GNOME Human Interface Guidelines]
* [https://medium.com/product-design/5ccef7b3e1fc Kuidas iOS lapikumaks muutub aja jooksul]
* [http://www.behance.net/rogeroddone Google Visual Asset Guidelines] - Google'i ikonograafia loomisest
* [http://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you Dark Patterns] - salakavalatest kasutajaliidese mustritest.

[[Kategooria:Kasutajaliidesed]]