Webbrelaterat - Design och resurser f�r webbdesigners » Resurser

4 Praktiska tutorials med hur du bygger hemsidor i HTML5 och CSS3

Anton — Wed, 30 Jun 2010 23:16:12 +0000

Anton h�r!
Johan har v�ldigt mycket att g�ra med sitt nya jobb, d�rf�r erbj�d jag mig att uppdatera lite tills Johan kommer tillbaka och skriva sin suver�na blogginl�gg.

Nu n�r HTML5 och CSS3 b�rjar bli allt vanligare kan det vara bra att �va sig genom lite praktiska tutorials, d�rf�r har jag samlat ihop 4st tutorials som �r oerh�rt bra dig som vill l�ra dig mer om HTML5 och CSS3.

One page portfolio hemsida

Hur man bygger en one-page portfolio hemsida. Mycket anv�ndbart f�r dig som letar efter inspiration till din nya portfolio hemsida – finns mycket att l�ra h�r.

Iphone App hemsida

Hur man bygger en Iphone App hemsida, mycket anv�ndbar tutorial. Anv�nder en glow effekt, som �r riktigt cool!

HTML5 Portfolio med jquery

En till HTML5 och CSS3 tutorial som ber�r one page hemsidor. Anv�nder sig av m�nga nya tekniker som tillkommit med CSS3.

Bygg en elegant hemsida i HTML5 och CSS3

Min favorit tutorial, den �r oerh�rt bra. Det ges lite fakta, och tutorialen �r v�ldigt enkel att f�lja.

Hoppas dessa tutorials var l�rorika, l�mna g�rna en kommentar om vad du tyckte, eller vad du vill se mer av f�r inl�gg.

20 nya sp�nnande CSS/jQuery plugins, tricks och skript

Johan — Thu, 22 Apr 2010 20:58:07 +0000

T�nkte egentligen inte posta fler inl�gg innan mitt design byte som kommer snart men det drog lite p� tiden s� har kommer ett under tiden.

Okej, alla �r inte super nya men vissa l�nkar �r verkligen v�rt att n�mna och �r plugins/tricks som man anv�nda i m�nga vardagliga projekt. Dom senaste tv� �ren har det dykt upp massor av h�rliga Javaskript, jQuery plugins och avancerade CSS tekniker som utg�r coola eller interaktiva effekter. Det �r verkligen inte fel att spara en massor av tekniker i din toolbox f�r att underl�tta och minimera din tids�tg�ng f�r dina projekt. Kan �ven tipsa om att m�nga sidor som n�mns nedanf�r har fler tips/plugins s� st�ng inte ner sidan direkt utan g�r g�rna en scan innan.

CSS3 support for Internet Explorer 6, 7, and 8

M�nga CSS tekniker som runda h�rn, box skugga funkar ju inte sj�lvklart i Internet Explorer 6, 7, and 8 men med detta fix s� l�ser du det. Du vill ju inte g�ra din kund besviken?

Ladda ner Bes�k tutorial

Pure CSS Vignette

En cool bildgalleri som �r gjort med avancerad CSS. Kul att l�ra sig nya tricks.

Demo Bes�k tutorial

Sponsor Flip Wall With jQuery & CSS

M�nga av er har s�kert sett annonsplatser i sidobaren p� m�nga sidor. Varf�r inte g�ra den mer intressant och sp�nnande med denna plugin.

Demo Bes�k tutorial

CSS3-Spotlight

Detta kanske �r sv�rt att anv�nda i vanligt projekt men det �r en cool teknik som absolut �r v�rt att titta p�.

Demo Bes�k tutorial

Facebook-style navigation menu with jQuery

Vill du ha en dropdown meny som facebook har? D� �r detta l�sningen f�r dig. Snygg liten funktion som k�nns lite mer sp�nnande �n en vanlig tr�kig variant av dropdown menyer.

Demo Bes�k tutorial

Mega Drop Down Menus w/ CSS & jQuery

Denna j�tte dropdown menyn �r bara ett m�ste i din toolbox.

Demo Bes�k tutorial

CSS3 Glow Tabs with Box Shadow

Visar hur du kan g�ra kombinera olika snygga effekter med CSS3.

Demo Bes�k tutorial

Create a Button with Hover and Active States using CSS Sprites

Med CSS3 kan man g�ra s� snygga knappar utan att designa upp dom och l�gga in dom som bilder. Se hur du kan g�ra h�r.

Bes�k original tutorial

Feature List

En effektiv bildkarusell som �r bra f�r f�retag som vill beskriva lite om produkten.

Bes�k k�lla Demo

Contactable A jQuery Plugin

Det �r inte n�dv�ndigt att anv�nda formul�ren som beskrivs i denna plugin. du kanske bara vill ha “slide” effekten med annat inneh�ll i.

Bes�k k�lla Demo

Switch Display Options

En sk�n display switch som kan vara anv�ndbar n�r man har mycket inneh�ll i en lista och g�ra den mindre och beh�ndigare.

Bes�k k�lla Demo

Micro Image Gallery

Har �r samma effekt som ovan men med andra egenskaper. Se vilken som passar ditt projekt.

Bes�k k�lla Demo

Fly-To-Basket Effect With jQuery

Bygger du en webbshop kan denna effekt vara bra. Kunderna ser att dom har lagt sin produkt i varukorgen.

Bes�k k�lla Demo

Digital Clock (HTC Hero inspired)

Denna effekt kan vara bra f�r bloggar, resesajter, v�der sajter osv. Snygg dessutom.

Bes�k k�lla

Fixed Fade Out Menu: A CSS and jQuery Tutorial

Denna meny sitter fixerad i toppen och n�r du b�rjar skrolla s� tonar menyn ner sig och f�ljer med n�r man skrollar.

Bes�k tutorial Demo

Ketchup Plugin

Anv�ndbarhet �r nummer 1 f�r mig i webbdesign. Varna dina bes�kare n�r dom g�r fel eller har missat n�t med denna plugin.

Bes�k tutorial

TipTip jQuery Plugin

Det finns massor av Tooltip skript men denna �r lite extra snygg och l�tt att anv�nda.

Bes�k tutorial

Understanding CSS3 Gradients

Toningar funkar inte s� j�ttebra i alla webbl�sare i dagens l�ge men l�r dig innan det blir standard f�r denna effekt kommer med all s�kerhet bli riktigt popul�r.

Bes�k tutorial

Quicksand

Detta �r ocks� en form av anv�ndbar effekt. Ist�llet f�r att g�r olika sidor f�r uppgiften s� l�t det h�r skriptet g�ra det �t dig.

Bes�k tutorial Demo

How to: CSS Large Background

Har du n�gon g�ng velat haft en bild som bakgrund men sv�rt och f� den att passa med h�ga och mindre h�ga uppl�sningar.

Bes�k tutorial

15 suver�na artiklar om interaktionsdesign och UX (User experience)

Johan — Fri, 05 Feb 2010 14:30:00 +0000

Jag har under den senaste tiden satsat mycket p� det man ska g�ra innan all design och kodning. K�nns som man aldrig f�r nog att l�ra sig nya saker. Interaktionsdesign �r att skapa strukturen p� en webbsidan f�r att g�ra det s� anv�ndarv�nligt f�r anv�ndaren som m�jligt. Att g�ra en design i Photoshop �r l�tt som en pl�tt j�mf�r med att skapa en bra anv�ndare upplevelse p� en webbsida. Det �r d�r allt tungjobb ska ske. I snar framtid kommer jag lista tips och f�rslag p� hur du kan h�ja konverteringsgraden p� en E-handels sida och verkligen f� dina “shoppers” att handla. Stay tuned och njut av dom h�r artiklarna s� l�nge. Har sj�lv l�st alla och det har gett en djupare f�rst�else om varf�r och d�rf�r.

Complete Beginner’s Guide to Interaction Design

Denna sida �r helt klart v�rt att spara. Det h�r �r bara en artikel av m�nga.

Breaking Rules

Introducing user-centred web design

Detta �r baserad p� en serie av tre delar.

The Golden Rules of Site Redesign

25 User Experience Videos That Are Worth Your Time

User Stories: a strategic design tool

Usability and the user experience

10 Most Common Misconceptions About User Experience Design

Realism in UI Design

UX Design Framework � Visual Design

25 UI Inspiration and Design Pattern Resources

How to analyze a usability study

UX / usability tutorials

The Disciplines of User Experience

50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Verktyg som f�renklar vardagen

Anton — Tue, 12 Jan 2010 20:49:31 +0000

Hej! Mitt namn �r Anton Ranestam och jag �r en webbdesigner fr�n Malm�. Jag driver Ranestam Studio. Ni hittar mig �ven p� Twitter och Facebook d�r jag figurerar aktivt.
Tack f�r mig!

Varf�r Grids och CSS ramverk?

Grids �r n�got som g�r hela din designprocess mycket enklare och v�nligare f�r �gat f�r den som tittar. Det �r d�rf�r att rekommendera att anv�nda n�got slags “grid” n�r du g�r din hemsida.
Ett CSS ramverk �r bra f�r att ett ramverk inneh�ller ett antal f�rdiga alternativ f�r att utforma en webbsida genom CSS. Vilket g�r hela processen med att bygga en hemsida g�r mycket fortare och det g�r �t mindre tid.
Dessa rekommenderar jag:

1kb Grid

1kbgrid �r en hemsida d�r du best�mmer dig f�r antalet kolumner (9, 10, 12, 14 eller 16), kolumnernas bredd (40, 60 eller 80 pixlar), och hur breda du vill att dina “gutters” vara (10 eller 20 pixlar)
Filen �r under eller precis 1kb – d�rav 1kbgrid.
Kika n�rmare h�r; 1kb Grid

960 Grid

960 Grid �r baserat p� en 960 pixel vidd layout. Den funkar med 12 eller 16 kolumners design. N�r du laddar ned din layout f�r du �ven med ett sheet som kan anv�ndas n�r du skissar ner en hemsida f�r en kund.
Kika n�rmare h�r; 960 Grid

Baseline

Baseline �r ett ramverk med b�de n�t-baserad design och bra typografi i �tanke. Det fungerar med HTML 5 och CSS 3 (som kr�ver en modern webbl�sare f�r alla sina funktioner f�r att visas korrekt).
Kika n�rmare h�r; Baseline

Blueprint

Blueprint �r en av de mer v�lk�nda ramverken d�r ute. F�rutom n�t-verktyg f�r design, inkluderar Blueprint ocks� st�d f�r typografi, utskriftsstilar, sprites och mycket, mycket mer.
Kika n�rmare h�r; Blueprint

Fluid 960 Grid System

Fluid 960 Grid System �r baserat p� 960.gs ramen, men med en s�kallad fluid bredd och omfattar MooTools och jQuery effekter.
Kika n�rmare h�r; Fluid 960 Grid System

Grid Calculator

Grid Calculator �r ett enkelt verktyg f�r att justera storleken p� teckensnitt, antal kolumner. Den ber�knar automatiskt det totala grid bredden och visar grid layout under r�knaren. Mycket bra verktyg!
Kika n�rmare h�r; Grid Calculator

5 fr�scha och anv�ndbara jQuery plugins till dina nya projekt

Johan — Thu, 17 Dec 2009 11:10:41 +0000

jQuery �r otroligt bra med sitt stora antal gratis till�gg. jQuery �r ocks� ett coolt s�tt att g�ra dina sida mer interaktiv och anv�ndbar. Det finns ett hav med olika funktioner och plugins – jag har f�rs�kt att hitta dom enklare men fortfarande bra som faktiskt kan anv�ndas utan att det blir f�r mycket. Hoppas du gillar dom h�r fem.

1. Flips

Denna plugin till�ter dig att visa fler boxar i en box med slider funktion. Du kan ha hur m�nga boxar som helst och dessutom styra din funktion som hastighet, knapp utseende osv.

2. ImgBox

Imgbox g�r s� du f�r en zoom effekt p� dina bilder.

3. Captify

Denna plugin �r ganska anv�ndbar p� flera s�tt. Den ger en snygg transparent bildtext i botten p� dina bilder n�r man har muspekaren �ver den.

4. Tipsy

Ger en snygg “tooltips” effekt som efterliknar samma som p� Facebooks och Twitter.

5. SlickWrap

Denna plugin g�r s� texten f�ljer en bildkant oavsett hur b�jd, oval, rund eller rak bilden �r.

Sammanfattning

jQuery �r l�tt att att anv�nda p� sina sidor. Man beh�ver inga speciella programmerings kunskaper f�r att styra eller f� det att funka p� sin webbsida. Denna g�ng s� listade jag ett f� antal men ville h�lla det kort men anv�ndbart. Kommer lista fler i framtiden.

Webbdesign trender #4: Submenyer och dropdown exempel

Johan — Wed, 01 Jul 2009 12:28:53 +0000

Den h�r serien skulle egentligen inneh�lla 10 inl�gg. Men kommer nu avb�ja den h�r serien d� jag beh�ver lite semester och det �r sv�rt att jobba och driva denna sida sj�lv. D� det kr�vs mycket s�kande och forskning innan varje inl�gg. Har �ven ett annat intressant projekt p� g�ng som jag jobbar p� som ocks� tar tid. Under sommaren kommer jag l�gga in lite mindre inl�gg och mycket inspiration f�r att h�lla ig�ng sidan tyv�rr. Skulle n�gon vilja skriva inl�gg p� webbrelaterat.se s� kontakta mig snarast. Hursomhelst.. Nu kommer exempel och tr�ning p� sub-menyer som �r ett otroligt praktiskt s�tt att organisera ditt inneh�ll enklare och f�r dina bes�kare.

Behance

Rapidshare

Tutorial9

Digg

Tuts+

Applereviews

inkd

Outlaw Design Blog

Durrani Design

GoPlay

Foliostars

Plant With Purpos

Food Network

Change

Sony

Redbrick Health

Webbdesign trender #3: Transparenta bakgrunder och effekter

Johan — Wed, 17 Jun 2009 09:20:01 +0000

Tack vare nu n�r n�stan alla webbl�sare st�der transparent s� kan denna effekt anv�ndas l�ttare �n n�gonsin. Det finns 3 alternativ i min vetskap hur man skapar detta. F�rsta skulle vara om man manipulera transparenta effekt i Photoshop till exempel. Med d� kommer nackdelen att d�r du skapar din effekt m�ste ha fast bredd och h�jd.

Det h�r f�rslaget �r nog det b�sta i dagens l�ge. Som jag n�mnde s� st�der n�stan alla nya webbl�sare PNG (PNG24 i Photshop) som kan sparas som transparent i ditt grafik program. I detta fall s� kan effekten vara elastisk. Det sista men det mest os�kra kortet �r att anv�nda nya CSS3 attribut som skapar denna effekt i den �nskade div:en.

Relaterade guider och tips om transparenta bakgrunder

Hur du skapar detta med CSS3. Notera att detta funkar inte i alla webbl�sare.

#div {
	opacity: 0.6;
	}

Christine Galvin Design

Unique 3w

Alex Swanson

Votaw Precision Technologies

Hotel Prestige

24 Ways

Design Phunk

Fred Maya

Impact South Africa

Comicspack

/Webunder

lebloe

Fabio Carneiro

RedoPC

Lisa Moseley

Webbdesign trender #2: 3D k�nsla som gjort i 2D

Johan — Thu, 11 Jun 2009 21:26:59 +0000

Med det h�r inl�gget s� kan jag s�ga att WordPress v2.8 �r ute om n�n hade missat det heh. Ni som h�nger med i sv�ngarna har s�kert m�rkt en h�ftig bandroll effekt som har b�rjat synas mycket p� senaste i webbdesign. F�r n�t �r sedan s� h�rde jag att nya “webb3.0″ skulle inneh�lla mycket 3D effekt. Kanske �r s�.. H�r kommer iallafall ett intressant s�tt att skapa 3D i webbdesign.

Position Absolute

Snook

Aarah Longneckerk

Acko

Burgerkingstudio

Bluedoorbaby

Yoast

Delicious Design Studio

From The Couch

Buildconference

CSS-Tricks

Samfrombelgium

PSD to WP

Mystery Tin

Gaya Design

Webbdesign trender #1: Content Slidehows

Johan — Wed, 10 Jun 2009 11:25:02 +0000

Dom n�rmaste dagarna kommer det handla mycket om olika webbdesign trender som p�g�r just nu p� webben. Ist�llet f�r att lista alla exempel p� ett och samma inl�gg s� �r planen att lista tio trender och en trend per dag ungef�r.

Idag blir det Content slideshow, har inget bra ord p� svenska f�r det. Bildkarusell kanske.. Slideshow �r ett grymt bra s�tt och ha som highlight, g�r sidan mer intressant, bes�karen f�r en l�tt �versyn vad som �r popul�rt eller vad webbplatsen pushar p�.

Relaterade guider hur man g�r en slideshow

Grymma TEXT editorer f�r webbutvecklare och kodare

Johan — Thu, 21 May 2009 11:56:52 +0000

I slut�ndan f�r en programmerare �r det en av dom viktigaste saker att ha en bekv�m och bra text editor. Personligen har jag provat n�gra av dom som, Dreamweaver, UltraEdit, Textpad men i slut�ndan fall jag f�r Notepad++. Otroligt l�tt program som st�der som flesta spr�ken. Det finns en g�ng bra editorer d�r ute s� jag t�nkte lista en av dom som verkar vara dom popul�raste. Svara g�rna p� pollen i slutet av inl�gget.

Textpad (Win)

That’s why TextPad® is so popular. Whether you simply need a powerful replacement for Notepad, a tool for editing your web pages, or a programming IDE, TextPad does what you want, the way you would expect.

Textpad (Win)

Notepad++ (Win)

Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.

Notepad++ (Win)

UltraEdit (Win)

Replacing Notepad or looking for a powerful text editor? UltraEdit is what you’re looking for. Versatile and easy to use, UltraEdit is the ideal text, hex, HTML, PHP, Java, Javascript, Perl, and programmer’s editor.

UltraEdit (Win)

Panic Coda (Mac)

We�ve put together one of the most graceful and feature-packed text editors on the Mac, specifically for maximum hand-coding hotness. It�s got what you expect: syntax coloring, line numbering, auto completing, block editing, international support, etc.

Panic Coda (Mac)

Komodo Edit (Alla plattformer)

Komodo Edit is a free, multi-language editor with code intelligence. Komodo IDE builds on Komodo Edit’s comprehensive editing features, adding intelligent tools for debugging, regular expressions, team development and customization.

Komodo Edit (Alla plattformer)

Bluefish (Mac, Linux)

Bluefish is a powerful editor targeted towards programmers and webdesigners, with many options to write websites, scripts and programming code. Bluefish supports many programming and markup languages, and it focuses on editing dynamic and interactive websites.

Bluefish (Mac, Linux)

Textwrangler (Mac)

TextWrangler is the powerful general purpose text editor, and Unix and server administrator�s tool.

Textwrangler (Mac)

Geany (Alla plattformer)

Geany is a small and lightweight Integrated Development Environment. It was developed to provide a small and fast IDE, which has only a few dependencies from other packages. Another goal was to be as independent as possible from a special Desktop Environment like KDE or GNOME – Geany only requires the GTK2 runtime libraries.

Geany (Alla plattformer)

VIM (Alla plattformer)

Vim is a highly configurable text editor built to enable efficient text editing. It is an improved version of the vi editor distributed with most UNIX systems.

VIM (Alla plattformer)

TextMate (Mac)

TextMate brings Apple’s approach to operating systems into the world of text editors. By bridging UNIX underpinnings and GUI, TextMate cherry-picks the best of both worlds to the benefit of expert scripters and novice users alike.

TextMate (Mac)

Jedit (Alla plattformer)

jEdit is a mature programmer’s text editor with hundreds (counting the time developing plugins) of person-years of development behind it.

Jedit (Alla plattformer)

HTML-kit (Alla plattformer)

HTML-Kit 292 is a highly customizable development environment that can be used to create, edit, preview, validate and publish web pages and text files.

HTML-kit (Alla plattformer)

CSSEdit (Mac)

Because of CSSEdit’s unique focus on style sheets, it offers a wide range of features for any level of expertise. Starting out? Selector Builder and advanced visual editors will gradually help you understand CSS instead of dumbing you down.

CSSEdit (Mac)

Smultron (Mac)

Because of CSSEdit’s unique focus on style sheets, it offers a wide range of features for aSmultron is a free text editor for Mac OS X Leopard 10.5 which is both easy to use and powerful. It is designed to neither confuse newcomers nor disappoint advanced users. It should work perfectly for a whole variety of needs – like web programming, script editing, making a to do list and so on.

Smultron (Mac)

EditPlus (Win)

EditPlus is a text editor, HTML editor and programmers editor for Windows. While it can serve as a good Notepad replacement, it also offers many powerful features for Web page authors and programmers.

EditPlus (Win)