loveanyone

Pause på ubestemt tid

loveanyone — Sun, 27 Sep 2009 15:06:30 +0000

Loveanyone.net tar en pause på ubestemt tid, og det vil ikke bli publisert hverken kurs eller andre artikler på siden i tiden fremover. Grunner til dette er at jeg hverken har noe særlig med tid eller er motivert til å skrive på eller drive siden, samtidig som skuffende lave tall på besøkende og tilbakemeldinger er ytterligere demotiverende. Noe var tydeligvis feil med konseptet jeg lanserte, og det kan være et strengt tatt veldig upassende og lite deskriptivt navn, kombinert med at det ikke var et særlig stort behov for slike kurs på norsk. Andres interesse for webkode er neppe så stor som min en gang var, og uten interesserte lesere er det lite poeng i å skrive. Ikke gjorde jeg en god jobb med promotering heller, og jeg tar kritikk for alt som gjorde at siden ikke ble såpass populær som jeg en gang skulle ønske den ble.

For alt jeg vet kan kursene ha vært for dårlige, selv om jeg personlig mener at jeg gjorde en god innsats med å forklare på en lettfattelig måte og med brukbare eksempler. Uten tilbakemelding er det vanskelig å vite sikkert. Veien videre for de som fikk noe ut av innholdet på siden, og gjerne vil lære mer, er å jobbe med PHP opp mot MySQL-databaser og lage og tilpasse egne systemer med det – i mine øyne er det delvis der den virkelige moroa begynner. Ta turen innom W3Schools og Pixel2life for gode engelske kurs.

Kanskje re-lanserer jeg siden en dag under nytt navn, kanskje kommer det gode kurs og ressurser som kan hjelpe andre med å bygge sine egne websider, kanskje kommer det noen godbiter her nå og da. Det skal selvfølgelig fortsatt være mulig å lese og kommentere på kursene, og jeg vil komme innom med jevne mellomrom for å se om det er noe aktivitet. Jeg håper andre vil ha nytte og glede av det jeg har skrevet her.

- Indigo

Ukens inspirerende side, uke 5: Luke Larsen

loveanyone — Mon, 07 Sep 2009 17:39:23 +0000

Ukens inspirerende side handler om å vise frem websider som fortjener litt oppmerksomhet, om det så er fordi de er godt, originalt eller unikt kodet eller designet, og som har elementer som kan være inspirerende i egen kode- og designprosess.

Når det kommer til både kode og design bare digger jeg siden til

Luke Larsen.

For å skjønne hva jeg mener, prøv navigasjonen på toppen, for å se hvordan siden scroller. Scroll også helt ned og bruk navigasjonen der, og før musa over bildene som ligger under “new to the tank”. At designet er tilpasset så en kan scrolle såpass langt bortover er en ekstra liten bonus. Ta en titt, og legg gjerne igjen en kommentar med spørsmål eller meninger.

Ukens inspirerende side, uke 4: GOTOCHINA

loveanyone — Tue, 01 Sep 2009 18:48:52 +0000

Ukens inspirerende side handler om å vise frem websider som fortjener litt oppmerksomhet, om det så er fordi de er godt, originalt eller unikt kodet eller designet, og som har elementer som kan være inspirerende i egen kode- og designprosess.

Denne ukens utvalgte side ble laget for på dokumentere 17 norske studenters tur til Kina, og for å gi informasjon til andre som gjerne vil ta turen. Store, flotte bilder gjør siden

GOTOCHINA

original og fin, og i stedet for å ha bildene i egne rammer innimellom teksten, vises bildene som bakgrunn og teksten i rammer foran. Den minimalistiske navigasjonen er også god, ved å på en gang være godt synlig, samtidig som den ikke er forstyrrende. GOTOCHINA er rett og slett en side jeg har likt lenge.

Ukens inspirerende side, uke 3: Seed Conference

loveanyone — Mon, 24 Aug 2009 11:46:21 +0000

Seed Conference

…er en original webside fordi designet er bygget opp nesten helt utelukkende av tekst, og ikke bilder. Selv om fargene kanskje kunne vært mer spenstige, og at det kan være en fordel om en ønsker å bruke såpass mye tekst, kan en også lære en del om typografikontraster. Ta en titt, og kom tilbake neste mandag for neste ukes inspirerende side.

Ukens inspirerende side, uke 2: Leinehed

loveanyone — Mon, 17 Aug 2009 15:04:49 +0000

Denne uken vil jeg vise frem websiden til den svenske grafiske designeren Sebastian Leinehed,

Leinehed.com

…av den enkle grunn at jeg liker siden – spesielt måten han ikke har noen toppbilde på siden, og fortsatt klarer å presentere navnet på siden på en fargerik måte. Selv uten portefølje-bildene han har lagt til nedenfor ville siden vært fargerik og god.

For de som lurer: For å vise bilder større bruker Leinehed Lightbox, som jeg tidligere har skrevet et kurs om her. Leinehed tar også i bruk stil-innstillingen position: fixed; for å låse fast et element på siden, slik at det alltid er på samme sted uavhengig av scrolling.

Blueprint CSS-rammeverk

loveanyone — Thu, 13 Aug 2009 20:17:55 +0000

Et CSS-framework, også kalt web design framework, er et ferdig rammeverk som gjør webdesign både raskere og enklere. Vi skal her ta for oss Blueprint CSS, som har forhåndssatte stiler for mange standard html-elementer, og også mange egendefinerte klasser som gir raske og enkle løsninger når vi skal utforme egne design.

Før vi begynner, last ned alle nødvendige filer fra BlueprintCSS.org

I Blueprint CSS bruker vi hovedsaklig CSS-dokumentet screen.css som setter alle stiler for oss. Noen stiler tar for seg hva som skal gjelde ,

-

, bilder, tabeller, lister, osv. Andre klasser lar oss sette bredde på elementer eller setter spesielle stiler til elementer dersom vi skulle ønske å ta de i bruk. I første eksempel skal vi se et enkelt eksempel på hvordan Blueprint setter standardstiler og ta i bruk noen av klassene.

Overskrift

Blueprint CSS har standardstiler for blant annet sitater.
Også for <th>, dersom plassert inne i <thead>, er det satt standardstil.

Legg også merke til at ulike klasser kan taes i bruk på elementer for å tilpasse stilen etter ulike behov.

Tabelloverskrift

Innhold Innhold

Tabelloverskrift

Klasser kan settes til hele elementer Eller bare til deler av teksten

Eksempel: BlueprintCSS 1

Det som gjør Blueprint såpass bra er at det gjør design med CSS, fremfor med tabeller, raskt og enkelt, og har flere klasser med standardbredder, så du raskt kan endre bredde på elementer og tilpasse designet. Klassen span-1 er 30px bred, span-2 er 70px, span-3 er 110 (altså en økning med 40), osv, helt opp til span-24. Det er også klasser for å forskyve innhold – append-1-23, prepend-1-23, pull1-13 og push-1-23. Ta en titt på de ulike mulighetene i disse eksemplene:

Blueprint Grid Test Viser hvordan de ulike span-, push- og pull-klassene brukes. Klassen showgrid brukes også som bakgrunn for å utheve hvor grensene kan gå mellom de ulike klassene.

Blueprint HTML Elements Tests viser standardstil på mange standard HTML-elementer

Blueprint Forms Tests lar oss ta en titt på hvordan skjemaer kan tilpasses (også med span-1-23) og standardsstiler.

Blueprint Sample Page er en eksempelside uten showgrid som viser hva som enkelt kan lages med Blueprint.

Det eneste du trenger for å starte å bruke Blueprint etter å ha lastet ned filene, er å inkludere disse linjene med kode mellom og :

Husk riktig adresse til filene. Screen.css setter stil for alt som skal vises på skjerm, print.css gjelder dersom websiden printes ut på ark og ie.css er i tilfelle brukere av Internet Explorer besøker siden din (IE trenger litt ulike stiler, så alt skal se likt ut som i andre nettlesere).

Det er selvfølgelig mulig å legge til egen stil i samme eller i andre CSS-dokumenter, og å fjerne de delene av CSS-kode du ikke trenger. Helt til slutt, ta en titt på sidene http://www.quantcast.com/ og http://www.blueflavor.com/ som begge er laget med Blueprint. Jeg håper dere tar rammeverket i bruk og klarer å lage minst like gode websider med det.

Tabelloverskrift
Innhold	Innhold

Tabelloverskrift
Klasser kan settes til hele elementer	Eller bare til deler av teksten

Ukens inspirerende side, uke 1: Duoform

loveanyone — Mon, 10 Aug 2009 12:10:05 +0000

Over noe tid nå har jeg tenkt at det er mange sider der ute som bør presenteres av ulike grunner: noen er godt kodet, noen har godt design, noen har et kult konsept, osv… Derfor vil jeg prøve å presentere en slik side hver uke, sider som skiller seg ut på en eller annen måte, som bruker design eller kode unikt, originalt eller bare godt, og som bør få bittelitt oppmerksomhet for det.

Denne uken, uke 1, vil jeg vise dere siden

Duoform av Pete Harrison / aeiko

Duoform er i seg selv ikke en spesielt fin side, med enkel, om ikke kjedelig, typografi, og innholdet står i standard hvite, firkantede bokser. Det som allikevel gjør siden god er bakgrunnen, som tilfører siden flere farger og andre mer spennende elementer. Med jevne mellomrom finner jeg lignende sider, der enkelte elementer er simplistiske og der bakgrunn, ikoner eller godt valg av farger eller bilder allikevel klarer å gjøre helheten spennende og god. Det er selvfølgelig noe å etterstreve i egne design.

Tips gjerne om lignende eller andre gode sider, og ta turen innom neste mandag for en annen inspirerende side.

Sende mail fra siden din

loveanyone — Wed, 05 Aug 2009 18:45:58 +0000

Å bruke PHP til å sende mail kan være nyttig til flere ting. Du kan for eksempel ha et eget kontakt-skjema på siden din så brukere kan kontakte deg, gjøre det mulig for brukere å sende mail til hverandre, eller legge til et mailscript i kommentarsystemet ditt så du får tilsendt mail hver gang noen har kommentert en artikkel. Har du allerede kjennskap til skjemaer og PHP er det bare å sette igang med å lære å sende mail med PHP.

For å sende mail bruker vi funksjonen mail(). Kort oppsummert fungerer den på følgende måte:

mail($til, $tema, $melding)

Det hele er veldig enkelt – Først skal det stå hvilken adresse mailen skal sendes til, så hva temaet (subject) på mailen skal være og så kommer meldingen.

Vi skal i dette kurset sende mail til en Slopsbox-konto. Slopsbox er et tilbud som lar deg opprette en midlertidig mailadresse du kan oppgi til sider du tror kommer til å sende deg spam. Alt innhold på mailen blir slettet innen 24 timer. Det passer altså perfekt til vårt formål. Jeg tar ikke noe ansvar for noe av innholdet i mailene som andre brukere har sendt her, om det så er støtende innhold, reklame eller innhold som strider mot norsk lov. Alt jeg gjør er å lære bort hvordan en kan sende mail, og jeg håper at alle som leser klarer å være modne nok til å bare sende enkle testmailer for å sjekke at scriptet fungerer.

Alt vi trenger nå er et skjema eller funksjoner som lar oss gi verdi til variablene $til, $tema og $melding, og kanskje vi legger til enda litt informasjon. Det er selvfølgelig forskjellige måter å gjøre dette på, her er en:

function skjema(){
echo(“

Fra

Tema

“);
}

function ja(){
$fra = $_POST["fra"];
$til = “minmail@slopsbox.com”;
$tema = $_POST["tema"];
$tid = date(“H:i:s, d.m.Y”);
$ip = $_SERVER["REMOTE_ADDR"];
$melding = $_POST["melding"];
$hele_melding = “
—————————
Mail sendt fra din webside
—————————
Fra: $fra ($ip)
Tema: $tema
Tid: $tid
—————————
$melding
“;

if (mail($til, $tema, $hele_melding)) { echo(“Mail sendt.”); }
else { echo(“Noe gikk galt og mailen kunne ikke sendes.”); }

}

switch($_GET["send"])
{
case “ja”:
ja();
break;

default:
skjema();
break;
}
?>

Eksempel: Sende mail

Om du kan litt om skjemaer og PHP fra før bør det ikke være noen store overraskelser i denne koden. Jeg har brukt date()-funksjonen for å finne tid og dato for når mailen ble sendt, og jeg henter også ut IP-adressen til avsenderen. Om du ikke vil ha med disse instillingene er det bare å fjerne dem. Legg også merke til at det står at mailen er fra postmaster@loveanyone.net, noe som vil endres når du kjører mailscriptet fra din egen server. Prøv deg frem med koden, legg til eller fjern variabler eller prøv å lage et input-felt i skjemaet for å sende til en egendefinert mail. Sjekk også artikkelen om mail() på php.net for å lære mer om hvilke alternativer som er mulig med mail() – det er flere enn det som er redegjort for her.

Sommerferie?

loveanyone — Fri, 17 Jul 2009 09:41:29 +0000

Sommeren er her, og som dere ser har det ikke blitt oppdatert på en stund. Jeg er rett og slett ikke så motivert for å skrive om dagen, og har andre ting å ta meg til. Nye kurs vil bli publisert på siden den 5. August. Inntil da får dere kose dere med de kursene som allerede ligger ute på siden. Kom gjerne med feedback, enten her eller på mail indigo(snabel-a)loveanyone.net angående hva dere vil lese om, hva dere vil lære, om kvaliteten på kurset eller eksempler på hva dere har laget med det dere har lært.

God sommer

Inkludere filer

loveanyone — Mon, 06 Jul 2009 11:38:13 +0000

Når vi jobber med lange koder hender det at vi ønsker å dele opp koden i flere filer for å gjøre den kortere og mer oversiktlig. Samtidig ønsker vi gjerne å ta i bruk funksjoner og variabler som vi da kanskje har i eksterne filer. Å inkludere filer vil si at vi limer alt innholdet i en fil inn der vi inkluderer den, men i stedet for å lime inn alt innholdet bruker vi bare PHP-funksjonen include(). Vi skal også lære å sjekke om en fil eksisterer.

Først trenger vi en fil som inneholder det vi vil inkludere. I dette tilfellet legger jeg ved en variabel og en enkel funksjon som finner ut hvilken uke vi befinner oss i. Filen som skal inkluderes heter her inkludere_filer2.php og ser slik ut:

$variabel = “3″;

function uke() {
$datoen = date(“W”);
$tekst = “Vi er nå i uke $datoen”;
return $tekst;
}
?>

Så trenger vi bare å inkludere denne filen i en annen PHP-fil for å få tilgang til variabelen og funksjonen. Vi kaller her den filen inkludere_filer1.php:

include(“inkludere_filer2.php”);
echo(“Tallet er $variabel
”);
echo uke();
?>

Eksempel: Inkludere fil med variabel og funksjon

Uten å ha inkludert filen, ville vi ikke hatt tilgang til hverken variabelen $variabel eller funksjonen uke(). Husk også på at filen må inkluderes før informasjonen fra fila taes i bruk. Vi kunne ikke inkludert filen først etter å ha prøvd å hente informasjonen fra $variabel eller uke(), da ville ikke informasjonen kunne vises.

Når vi jobber med include og funksjoner er det også viktig å tenke på hvor vi inkluderer en fil. Hvis vi inkluderer en fil inni en funksjon, er ikke innholdet i den tilgjengelig i de andre funksjonene, men bare innenfor seg selv. Eksempel:

echo(“En
”);
echo(“To
”);

function en() {
include(“inkludere_filer2.php”);
$variabel2 = $variabel+1;
echo(“Tallet som kommer etter $variabel er $variabel2″);
}

function to() {
$variabel2 = $variabel+1;
echo(“Tallet som kommer etter $variabel er $variabel2″);
}

switch($_GET["vis"])
{
case “en”:
en();
break;

case “to”:
to();
break;
}
?>

Eksempel: Inkludere fil innenfor funksjon

Her får vi i funksjon en() opp teksten “Tallet som kommer etter 3 er 4″. Funksjonen to() viser teksten “Tallet som kommer etter er 1″. Da funksjonen ikke finner $variabel kan den ikke vise noe, og siden $variabel2 må ta ingenting+1 blir svaret 1. Hvis du ønsker at infoen i en inkludert fil skal være tilgjengelig i alle funksjonene dine, inkluder filen helt i starten av dokumentet ditt (i dette tilfellet, før funksjon en()). Jeg pleier f.eks. å ha all databaseinformasjon i en fil, og inkludere den helt i starten av dokumentene mine, slik at alle funksjoner kan ta i bruk og manipulere databaser.

Eksisterer filen?

Dersom du prøver å inkludere en fil som ikke eksisterer, vil du få en lang feilmelding. For å motvirke dette kan vi enten bruke kun if, og kun inkludere en fil om den eksisterer, eller bruke både if og else for å vise en egendefinert feilmelding om filen ikke eksisterer. For å sjekke en fils eksistens bruker vi funksjonen file_exists().

$fil =”inkludere_filer1.php”;
if(file_exists($fil)) {
echo(“Filen $fil eksisterer, og innholdet er:
”);
include(“$fil”);
}

else{ echo(“Filen $fil eksisterer ikke.”); }
?>

Eksempel: Eksisterer filen?

Eksempelet over inkluderer filen inkludere_filer1.php som eksisterer, og viser derfor ingen feilmelding. Prøv å skrifte $fil til “inkludere_filer5.php”, så vil du få feilmeldingen. Legg også merke til at inkludere_filer1.php fra før av inkluderer inkludere_filer2.php, og derfor kan informasjon fra inkludere_filer2.php vises i denne filen fordi vi har inkludert en fil som inkluderer den. Prøv å vise funksjonen uke() både innenfor if og etter else, så ser du at det virker.

Nå har du fått en rask innføring i hvordan du kan inkludere filer. For flere eksempler, se PHP.net sin artikkel om include(). Helt til slutt bør det nevnes at du må passe litt på hvilke filer du inkluderer. Her har vi inkludert tekstdokumenter, som fungerer bra. Andre regler gjelder for f.eks. bildefiler, og dersom du prøver å inkludere et bilde vises en tekstversjon av fila, omtrent som om du prøver å åpne et bilde i Notisblokk. Hvis du ønsker å inkludere et bilde (eller noe annet enn en fil som inneholder noe annet enn tekstdokument (HTML, PHP, osv) må du inkludere en tekstfil som HTML eller PHP som inneholder et bilde. Eventuelt kan du bare gjøre det enkelt og bruke HTML-tagen , eller vise bilder med CSS.