Fireisland » html http://www.fireisland.no Just another WordPress site Tue, 13 Dec 2011 00:15:52 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Skjult skatt i Safari: webinspektør (debugger)http://www.fireisland.no/nettlesar/skjult-skatt-i-safari-webinspektor-debugger/ http://www.fireisland.no/nettlesar/skjult-skatt-i-safari-webinspektor-debugger/#comments Mon, 10 Nov 2008 18:29:51 +0000 Anders-Meyer http://www.fireisland.no/?p=311

Read the rest of this entry »

]]>

I FireFox brukar eg Firebug til feilsøking på HTML og CSS, men i safari har eg endeleg funne eit godt alternativ. Og det ligg integrert i Safari – verkeleg ein skjult skatt!

For å aktivere Safari webinspektør gjer du følgjande:

  1. Lukk Safari
  2. Start Terminal
  3. Skriv følgjande kode:
    defaults write com.apple.Safari IncludeDebugMenu 1
  4. Start Safari
  5. Høgreklikk eit element på ei nettside og velg “Inspiser element”
Skulle ynskje Internet Explorer hadde like gode feilsøkingsverktøy, det er jo der ein verkeleg treng dei!
]]> http://www.fireisland.no/nettlesar/skjult-skatt-i-safari-webinspektor-debugger/feed/ 5 HTML spesialtegn og symbolerhttp://www.fireisland.no/webdesign/252-html-spesialtegn-og-symboler/ http://www.fireisland.no/webdesign/252-html-spesialtegn-og-symboler/#comments Mon, 27 Oct 2008 23:57:02 +0000 Anders-Meyer http://www.fireisland.no/?p=266

Read the rest of this entry »

]]>

Når ein skal skrive HTML-kode så er det ikkje alle tegn som er tillete og skrive rett fram i koden som td. Æ, Ø, Å, &, ©, ™ også vidare.. Disse må ein skrive som &Aelig;, Å, &, ©, ™. Dette er dei spesialtegna(special entities) som eg brukar dagleg. Og det finnes mange fleire, eg har sett nokre samlingar med 252 spesialtegn og symboler forklart men ingen av dei har vore fine nok til at eg orkar å henge dei på veggen.

Så eg gjorde noko med det! Eg har no samla disse 252 og omstrukturert tabellen litt, samt å presentera dei på ein oversikteleg og estetisk “plansje”. Denne henge på veggen min, kanskje den er fin nok til å henge på din?

For sikkerhetsskuld har eg laga den i HTML og PDF:

Sjå HTML spesialtegn og symboler her (permanent lenke)
Last ned HTML spesialtegn og symboler som PDF her

Originalkilda er henta frå Moon aka Sun

]]> http://www.fireisland.no/webdesign/252-html-spesialtegn-og-symboler/feed/ 6 Alt du veit om CSS er feil!http://www.fireisland.no/webdesign/alt-du-veit-om-css-er-feil/ http://www.fireisland.no/webdesign/alt-du-veit-om-css-er-feil/#comments Wed, 22 Oct 2008 23:08:50 +0000 Anders-Meyer http://www.fireisland.no/?p=256

Read the rest of this entry »

]]>  

Alt du veit om CSS er feil!, slik lyder tittelen på ei ny bok frå Sitepoint: “Everything You Know About CSS Is Wrong!“. Boka viser deg nye teknikkar i CSS som gjer at du slepp avanserte flyte-layoutar og “hacks” for å få webdesignet på stell med CSS-basert layout. Dei påstår at det skal bli lettare å bruke CSS, noko som høyres ut som ein kjedeleg kvardag tykkjer eg.

Dei viser teknikkar som ikkje er 100% støtta i dagens nettlesarmarknad, men så snart IE 8 er nummer 1 blant windowsbrukarane vil teknikkane dei viser ha full støtte. Alle dei andre støttar det allerde: Firefox, Safari, Opera osv..

Dei går spesielt inn på den nye støtten for display:table; display:table-cell; og display:table-row; disse nye display-mulighetane gjer at du kan få alt frå DIVar til H2ar til å oppføre seg som tabellceller – altså CSS-tabellar. Dette gjer at me kan la semantisk-html-kode presentere layouten som ein tabell utan at det er ein tabell. Eh, det høyres jo litt tåpeleg ut, kvifor ikkje berre bruke ein tabell til? Jo, du får ryddigare, lettare og rettare kode i motsetnad til å lage ein tabell-tabell som er tyngre.

Digital Web Magazine viser eit eksempel frå boka:

HTML:

 <!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" lang="en-US">
<head>
⋮ HTML head content…
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="nav">
⋮ navigation column content…
</div>
<div id="extras">
⋮ news headlines column content…
</div>
<div id="content">
⋮ main article content…
</div>
</div>
</div>
</body>
</html>

CSS:

#main {
  display: table;
  border-collapse: collapse;
}

#nav {
  display: table-cell;
  width: 180px;
  background-color: #e7dbcd;
}

#extras {
  display: table-cell;
  width: 180px;
  padding-left: 10px;
  border-right: 1px dotted #d7ad7b;
}

#content {
  display: table-cell;
  width: 380px;
  padding-left: 10px;
}

Ferdig webdesign:

Dette virka svært lovande tykkjer eg, spesielt med tanke på vertikalfordeling, der har alltid tabellar hatt overtaket på CSS. Det var på tide at det kom ei ordning på det. Men det er nokre år til me kan bruke det aktivt då, diverre.. framleis mange som brukar både internet explorer 7 og 6! Kanskje i 2010?

]]> http://www.fireisland.no/webdesign/alt-du-veit-om-css-er-feil/feed/ 4 7 gratis verktøy for å optimalisere css og annen webkodehttp://www.fireisland.no/webdesign/7-gratis-verkt%c3%b8y-for-a-optimalisere-css-og-annen-webkode/ http://www.fireisland.no/webdesign/7-gratis-verkt%c3%b8y-for-a-optimalisere-css-og-annen-webkode/#comments Tue, 12 Aug 2008 06:00:56 +0000 Anders-Meyer http://www.fireisland.no/?p=164

Read the rest of this entry »

]]>

Det finnes mange gode verktøy på internett for optimalisere css-koden du lagar. Her har eg samla 10 slik verktøy. Eg brukar dei ofte for å komprimere css-kode etter at eg er ferdig med eit prosjekt.

NB! Optimalisert CSS er ikkje særleg lesbart, så du må hugse å ta backup av din originale  css-kilde før du byrjar. Dersom du skal gjere endringar bør du gjere dette i original fila og deretter optimalisere på nytt.

Pretty Printer

Dei kallar dette verktøyet for ein kildekode “forfinar”(Les: “source code beautifier”). Det støttar mange programmerings språk: PHP, Java, C++, C, Perl, JavaScript CSS. Her kan du også påverka resultat sjølv, med å velgja forskjellige metodar.

Online CSS Optimizer

Reduserar filstørrelsen på cssfila di. Du kan laste opp fil eller oppgi url.

Tabifier

Dette verktøyet gir deg ikkje mindre størrelse på fila, men ryddar opp i innrykka CSS-fila. Det støtter også følgjande språk: HTML, CSS og C.

Online CSS Optimiser

Nok eit verktøy som optimaliserar CSSkode. Men det som er bra med denne er at du får lesbar kode når du er ferdig, dersom du velgjer “Pretty Print”.

Format CSS Online

Let deg automatisk formatere CSS-koden. Litt same funksjonalitet som tabifier, men her har du fleire muligheter enn å berre endre innrykka. Ikkje minst at du kan sortere CSS alfabetisk.

Clean CSS

Optimaliserar også CSS kode, men her kan du velgje mellom 5 grader av kompressjon vs. lesbarhet.

CSS Compressor

Til sist, nok ein css komprimerar. Denne let deg  velge grad av kompresjon og om du vil behalde kommentarar eller ei.

]]> http://www.fireisland.no/webdesign/7-gratis-verkt%c3%b8y-for-a-optimalisere-css-og-annen-webkode/feed/ 1