May 31st, 2011 § § permalink
When in the web domain, I find that the sought after skill is connected to what the user sees. Be it graphical elements, css art, user interface design, content strategies, copywriting or mobile adaption, to mention some examples – when looking for help, a buyer tends to view the needs from the perspective of the user.
This is, of course, a necessary and good thing. But it poses some challenges for those of us working as developers.
37Signals advocates that everybody should be writers, and makes sure that the designers are the team leaders. I think this makes sense, especially for a distributed company. You will need to communicate, and the better you do it, the better off you are, and the more you get done. And last but not least, the better you communicate, the better you are at enabling others to get stuff done.
Designers as team leaders are a sensible idea. They are in charge of the communication. They might not always be the ones that are capable of implementing a complex algorithm, but they are the ones that bind together users and developers.
But I digress.
If you look at how the terms are used in everyday-lingo, the separation is even simpler. Developers make software, or web pages. Designers make them look good.
The lines are more blurry that that. Designers often implement their designs, and developers more times than not need to implement designs without support of artists. The skills aren’t mutually exclusive either.
But you’ll need to know what you are looking for. Know that more times than not creating a website is more than a single-person job, if it is to be done well. And, even though most is able to a certain degree to do both, be specific. Do you want a search interface, or the algorithm?
September 12th, 2010 § § permalink
Denne gangen tenkte jeg å kun vise et eksempel på bruk av jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jQuery - ta det piano</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
displayKeys();
});
$(window).resize(function() {
displayKeys();
});
function displayKeys() {
$("body").html('');
// Piano layout coped from the following image: http://en.wikipedia.org/wiki/File:D274.jpg,
// through the follwing article: http://en.wikipedia.org/wiki/Musical_keyboard
// Set up the keyboard container, which should hold all the keys
$("body").append('<div id="pianocontainer"></div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
for(var i=1; i<=7;i++) {
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
}
$("#pianocontainer").append('<div> </div>');
// Style the container and the keys. This should be done through regular css in most of the cases,
// but we're using jquery, since this is what the tutorial is all about
// Doing static css assignments first, so these can be used in the calculations later
$("#pianocontainer").css('border', '1px solid gray');
$("div.pianokey").not("div.minorkey").css('float', 'left');
$("div.pianokey").not("div.minorkey").css('border', '1px solid lightgray');
$("div.minorkey").css('background-color', 'black');
$("div.minorkey").css('position', 'absolute');
$("#pianocontainer, div.pianokey").css('height', Math.min(200, $(document).height() * 2 / 3));
// Setting the width of each of the piano keys
$("div.pianokey").not("div.minorkey").css('width', ($("#pianocontainer").width() - 2) / $("div.pianokey").not("div.minorkey").length - 2 * $("div.pianokey").css('border').substring(0, $("div.pianokey").css('border').indexOf("px"))); // Requires the border to be specified in format of ("border: Xpx ..."), where X is the border width. Subtracting the left and right border in the width calculation
// Height and width of the minor keys
$("div.minorkey").css('height', $("#pianocontainer").height() * (2 / 3)); // 2/3 of regular height
$("div.minorkey").css('width', $("div.pianokey").not("div.minorkey").width() * (2 / 3)); // 2/3 of regular width
// Each minor key is absolutely positioned - need to set left attribute based on their siblings
$.each($("div.minorkey"), function(key, element) {
$(element).css('left', $(element).next().position().left - $(element).width() / 2);
});
}
</script>
</head>
<body></body>
</html>
Kopier koden over til et html-dokument, og vis det i nettleseren din. Du skal da få se et piano. Foreløpig gjør dette pianoet ikke spesielt mye, det skal vi prøve å få til etter hvert.
September 9th, 2010 § § permalink
En av de viktigste… Den viktigste tingen du kan lære deg hvis du skal jobbe med jQuery – den viktigste tingen du må lære deg – er å bruke såkalte selectors. Det er ikke i nærheten av å være så skummelt som det kan høres ut – selectors er egentlig bare jQuery-språk for et uttrykk som bestemmer hvilke html-element du vil jobbe med.
Jeg var såvidt innom selectors i forrige ukes introduksjonspost, men det er et så viktig tema at det fortjener en egen uke. Hvis vi tar koden vi lagde sist:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Å begynne med jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").css('background-color', 'yellow');
});
</script>
</head>
<body>
<p>Denne teksten skal bli grønn.</p>
</body>
</html>
I dette eksempelet bruker vi to selectors. document er den første, og “body” er den andre. document står, sammen med window, litt i særstilling – de fleste selectors skal stå i anførselstegn.
De gode nyhetene er at hvis du har drevet litt med css, så kjenner du tegningen allerede – jQuery har gjort en veldig god innsats for å bruke samme måte for å la oss velge et eller flere element som det css har.
De viktigste tingene å huske på:
- $(“.klassenavn”): Hvis du skal velge elementer med en gitt klasse, så velger du klassenavnet med et punktum foran.
- $(“#id”): Hvis du skal velge et element med en gitt id, så velg med en skigard (#) foran. Men husk på at hvis du bruker id-er, og det gjør du fort, så må det bare være en av hver id i dokumentet ditt. Hvis ikke blir den første valgt, og du blir forvirret
- Skal du velge et barn, for eksempel et p-element inni et div-element, begge med gitt id, så kan du gjøre slik: $(“#div-element > #p-element”)
- Hvis du ville velge begge to, så fungerer “(#div-element, #p-element”)
- Du kan gjøre vanvittig mye, til og med en del ting du ikke kan i css – jQuery Selectors-dokumentasjonen har mye snadder du kan lese deg opp på.
Så da modifiserer vi litt på forrige ukes kode, så skal du få et eksempel å teste deg på – det kan godt hende du vil trenger dokumentasjonen for å finne svaret.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Å begynne med jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Sett inn koden din her
});
</script>
</head>
<body>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
</body>
</html>
Kan du – uten å endre på selve html-koden – sørge for at de forskjellige tekstavsnittene får de fargene de skal, og ikke blir stående ufargelagt og flau. Det er flere måter å løse dette på.
Hvis du har lyst til å prøve deg, så post gjerne svar eller spørsmål i kommentarfeltet.