falknet.se - En Blogg om IT » Webbutveckling

10 HTML5 Video Spelare

Igor — Mon, 09 Apr 2012 18:11:53 +0000

En av mest omtalade grejer i webbutvecklingsvärlden idag är HTML5. Relativt enkelt med HTML5 kan man göra mycket på webben. Stödet från webbläsarna är fortfarande sisådär men det är klart att HML5 ska man räkna med. En av de mest spännande nya funktioner för HTML 5 är förmågan att hantera ljud och video med den nyligen införda element. Med detta nya HTML-element kan utvecklare visa video på sin webbplats med minimal kod utan att kräva en Flash eller Java-baserad spelare, eller någon form av plugin som gör att videon spelas ordentligt. Sedan är det känd att Apple gillar inte Flash, vilket innebär att om du använder en Flash-video på din webbplats och någon ser den från en Mac, iPhone eller iPad, videon skulle inte spelas.

Flera utvecklare använder redan spelare för HTML5 video, och det med goda skäl. Att byta sin videospelare från Flash-baserade spelare till en HTML5 spelare innebär nästan 100 rader kod mindre och mindre filstorlekar. Utveckla ett användarvänligt html webbplats kan vara tidskrävande nog, så innan du hantera ett projekt som att bygga dina egna HTML5 videospelare ta en titt på 10 HTML 5 video spelare som är ute.

LeanBack Player

MediaElement

J-MediaElement

VideoJS

SublimeVideo

JW Player

Projekktor

Dark Onyx

Flare Video

YouTube

källa

Fem Firefox tillägg för webbutvecklare

Igor — Thu, 08 Sep 2011 04:52:20 +0000

En av de främsta orsakerna bakom Firefox popularitet är mängder med användbara och bra tillägg, så att användarna kan anpassa sin webbläsare genom att ändra sitt utseende och utöka dess funktioner. Mozilla har grupperats några populära och användbara tillägg i samlingar. Den som är mest populär är den samling för webbutvecklare. Många av de tillägg har funktioner som är intressanta även för webbdesigners.

Firebug

Firebug är den schweiziska armékniven av webbutvecklare. Även om det kan verka komplicerat i början, kan det vara mycket användbart för designers med grundläggande kunskaper i HTML och CSS och för dem som är villiga att lära sig mer om det. En bra entry-punkt till detta verktyg är på HTML-panelen. För att öppna Firebug när det väl har installerats, tryck F12 (eller Fn + F12 på en Mac).

Ladda ner Firebug

Web Developer

Många funktioner som erbjuds av Firebug är också närvarande i Web Developer Toolbar. I det här verktygsfältet presenteras funktioner grupperade under meningsfull kategori namn som ”CSS”, ”bilder” eller ”utkast”. Det är en annan intressant sätt för webbdesigners att lära mer om HTML och CSS, och har några unika egenskaper som kan vara användbara för designers.
Web Developer Toolbar kan också användas för att kontrollera att webbplatsers tillgänglighet och webbstandarder.

Ladda ner Web Developer Toolbar

Pixlr Grabber

När din favorit grafik redigerings program är inte tillgänglig, är Pixlr här. Med Pixlr kan du välja ett område på en webbsida, sedan redigera den direkt i din webbläsare, med en full skisserat verktyg.
Du kan också dela tog bilder på webben eller spara dem på din dator.

Ladda ner Pixlr Grabber

FireFTP

Ladda upp filer till en server har aldrig varit enklare med FireFTP. Detta tillägg installeras på tre klick och lägger till en FTP-klient till din webbläsare. När du har skapat ett konto med din FTP-adress kan du dra och släppa filer från din dator till servern, eller högerklicka på en värd-fil, redigera den med din favorit editor och uppdatera filen direkt på servern.

Ladda ner FireFTP

Colorzilla

ColorZilla är en sammanställning av olika verktyg som fokuserar på färger. Med pipetten kan du ta tag i färgen för en bildpunkt på sidan. Färg analysator skapar en palett av färger som används i sidan (utom bilder). Det bör noteras att utvecklaren av ColorZilla skapat en hemsida som låter dig skapa CSS3 gradienter kompatibel med alla aktuella webbläsare.

Ladda ner Colorzilla

Jag har haft alla nämnda tillägg installerade i min Firefox ett tag och som webbutvecklare måste jag erkänna att arbete blir rejält underlättad. Testa gärna.

Källa: Netmagazine

Gratis PSD – Crafted online butik

Igor — Tue, 09 Nov 2010 21:30:31 +0000

Crafted är en fri PSD som var utformad för att användas som en online butik. Designen är unik med en handgjord känsla. Denna design användes aldrig, men det vore synd att låta det gå till spillo, så istället ger ”the odin” bort den som en fri PSD.
PSD består av en hemsida som skapas med hjälp av 960 Grid System. Utformningen använder sig av en fotografi köpt på licens från pixmac.

Denna design använder shop funktioner som:
Image Slider
Snabbtitt på konto – slide down
Shopping korg
Enkel navigeringen
Marknadsförings lådor

Ladda ner PSD

källa

Exportera HTML och CSS med Adobe Fireworks CS4

Igor — Thu, 30 Sep 2010 20:27:10 +0000

I den här video visar colorburned.com hur man konverterar layout till en fullt fungerande HTML-sida som innehåller CSS. Program som används för konvertering är Adobe Fireworks CS4.

10 jQuery plugins som hjälper dig med layout

Igor — Wed, 26 May 2010 21:33:18 +0000

Då och då förekommer ett webbprojekt som har en speciell och unik layout krav, och den nuvarande kapaciteten hos CSS är helt enkelt inte tillräckligt. Med projekt som dessa, kan jQuery vara din bästa vän. Så här är 10 jQuery plugins som hjälper dig med layout.?

källa: webdesignledger

Gratis videospelare för din hemsida/blogg

Igor — Tue, 25 May 2010 22:27:53 +0000

En hel del designers använder videospelare på deras hemsida. Online Video aktörer erbjuder flexibilitet och kreativitet för att bygga din egen TV på din webbsida. Du kan lägga till ett obegränsat antal videoklipp och ordna dem hur du vill av albumtitel, konstnär eller år, det är helt upp till dig! Allt från en enkel video system till en HDTV kan vara helt placeras på din webbplats eller blogg. Nedan hittar du en samling av gratis videospelare för din hemsida/blogg genom vilken du kan öka din produktivitet. Samling gjordes av instantShift och på deras blogg kan du hitta mer info och bilder. De första tio är videospelare till hemsida och resten är WordPress tillägg.

WordPress tillägg

Nyttiga Adobe AIR applikationer

Igor — Mon, 24 May 2010 22:18:46 +0000

Adobe AIR utvecklare använder beprövade webbteknologier för att bygga rika Internet applikationer som körs utanför webbläsaren på flera operativsystem. Tiotals företag som National Geographic, eBay och Nickelodeon använder Adobe AIR för att skapa nya spännande applikationer och att låta användaren använda deras tjänster på sina skrivbord. Applikationer med Adobe AIR är enklare, mer kraftfull, roligare att använda.
Dzineblog har samlat 30 nyttiga Adobe AIR applikationer för webbdesigners och utvecklare. Här visar jag fem som jag använder, för resten klicka på länk.

Alla 30 applikationer.

Skapa Windows 7 start meny med CSS3

Igor — Wed, 07 Apr 2010 12:14:49 +0000

Jag har läst en del artiklar om CSS3 och sett en del snygga grejer den kan göra men i med att Internet Explorer inte stödjer den har jag aldrig fördjupat mig. Så klart fortsätter jag läsa artiklar och idag har jag läst en tutorial som skapar en väldigt snygg grej, nämligen Windows 7 start meny men CSS3. Jag är faktiskt fascinerad hur enkelt det är.

Många användargränssnitt element som kräver bilder för att se bra ut kan göras nu bara med CSS3. För att bevisa det skulle Janko Jovanovic som bloggar på jankoatwarpspeed.com skapa Windows 7 startmeny bara med CSS3 (och vissa ikoner). Om man sönderfaller menyn vi får en div, två listor med ett par länkar varje och några ikoner . Titta här hur han gjorde. Du kan hitta även källkod som du även kan ladda ner. Resultat ser du i bilden.

Massor med snygga favicons (mini-ikoner)

Igor — Tue, 16 Mar 2010 22:31:17 +0000

Favicons, mini grafik för en viss webbplats, kan visas i webbläsarens URL, intill namn i listor med bokmärken(favoriter), och bredvid sidans titel i en tabb. Favicons borde vara visuellt tilltalande och passar till utformning eller logotyp på en viss sida. Faktum är att om du använder favicons för dina webbplatser, användare kan enkelt hitta din webbadress i sina bokmärken.
Utformningen av favicons kan vara svårt för det är inte så lätt att skapa en vacker 16 × 16px mini-ikon men fortfarande lyckas vissa designers nå enorma effekter. Låt oss ta en titt på massor av vackra mini ikoner som fantastiska smashingmagazine visar då och då. Mycket bra inspiration faktiskt. Alla ikoner är dessutom klickbara och kan ses direkt på webbplatsen som använder dem.

Dessutom kommer här länk till en webbaserad favicon generator.

30 Snygga PSD webbmallar helt gratis

Igor — Tue, 02 Mar 2010 21:01:12 +0000

När det gäller utformning av en webbplats så tycker många designer att Photoshop är ett utmärkt verktyg för det och att ingen mjukvara ger så mycket kontroll som Adobe Photoshop. Så klart håller jag med men själv använder jag mycket Adobes Fireworks och programmet klarar också av att öppna och spara kompletta .PSD filer.
Många designers delar sin design till andra helt gratis så att man kan lära av deras verk, plus att ibland blir dessa insamling fantastisk tid sparande. Här listar dzineblog 30 snygga PSD webbmallar att ladda ner helt gratis. Hoppas du gillar listan men var medveten om licensvillkor och avtal innan du placerar dem i bruk.