Igår surfade jag runt på nätet och kom in på Manges blogg. Jag blev nästan rädd när jag fick se källkoden. Jag trodde inte det fanns 90-tals sidor på nätet ännu. Men tydligen finns det gott om sidor som kör med ramar eller iframes. Visst sidan fungerar säkert bra och visas korrekt i många webbläsare MEN inom kort så kommer nyare versioner av webbläsarna och det kommer följa de nya webbstandarderna som finns och då kan det bli problem att visa en sida korrekt som använder sig av ramar eller iframes.
Så vad behövs för att komma igång att utveckla lite modernare sidor?
Först skall jag bara säga att jag inriktar mig mot Microsofts plattform och därför kommer jag enbart ge tips som handlar om Microsoft.
Det är alltid bra med en WYSIWYG-editor (WYSIWYG = What You See Is What You Get). Men glöm aldrig att grunderna är bra att ha så det kan hjälpa att skriva lite kod i anteckningar (notepad) i några timmar och göra enkla sidor med endast XHTML. Glöm HTML det nya heter XHTML. Men kan man HTML så är det jättelätt att gå över till XHTML. Den största skillnaden är att man måste stänga alla taggar i XHTML. Sedan är all XHTML kod skriven med små bokstäver och ingen CSS kod skall ligga ihop med XHTML koden. Det går att göra det men det är inte snyggt och följer inte standard.
Du behöver kunskaper i XHTML, CSS för att kunna skapa moderna webbsidor som tolkas likadant av alla webbläsare. För att utveckla hemsidor med enbart XHTML och CSS så behöver man bara anteckningar. Men vill man ha något mer avancerat så skulle jag rekommendera Visual Web Developer (VWD) som går att lada hem här.
Med VWD kan du göra väldigt mycket inom webbutveckling. Det är endast fantasin och kunskaperna som sätter gränserna, ibland även databas lösningen men det tar vi längre ner i detta inlägg.
Hur gör man då för att bygga en hemsida som inte använder sig av ramar men som ändå har samma utseende på alla sidor utan att behöva kopiera fil efter fil och sedan skriva om innehållet och behålla designen. Det smartaste och enklaste sättet är att använda Masterpage. En kort förklaring till Masterpage är att du ha en fil som slutar men ändelsen .master. Låt oss säga att vi skapar Page.master. Detta är vår mastepage fil där all design kommer vara i. Här bygger man upp sidan grundstruktur, infogar CSS filer och skriver allt viktigt inom <head></head>. När allt detta är klart så vill vi visa vårt innehåll, t.ex. vår startsida med en kort text och kanske någon bild. Vi skapar då en fil som heter Default.aspx och inom vår ContentPlaceHolder skriver vi vårt innehåll. Allt detta jag snackar om nu går väldigt fort och det krävs lite mer erfarenheter för att detta skall gå. Men är du intresserad av att komma igång med Masterpages så kolla in denna film. Om vi sammanfattar detta lite fort så heter ramar och iframes masterpages nu och detta är vänligt för t.ex. Googles spindlar och det ger dig bättre resultat på t.ex. Google.
Nu skall vi ta lite exempel från Manges hemsida och visa hur den koden bör se ut.
Eftersom hans sida Lucifer.se använder iframes så har jag valt att kolla på själva huvudsidan och kontakt sidan, alltså http://www.lucifer.se och http://lucifer.se/docs/kontakt.htm. Om man går in på den sista länken så kommer man endast se kontakt sidan och inte resten av sidan och då missar man menyer och allt annat. Ännu en gång, använd inte ramar eller iframes.
<td style="font-family: Verdana; font-size: 10pt; color: #CCCCCC; font-weight:bold">
Intresserad av mer?</td>
Denna kod hittar vi på kontakt.htm sidan och denna skall jag nu analysera och visa hur den bör se ut.
CSS-koden för ett H1 element.
<div id="contactDiv">
<h1>Intresserad av mer?</h1>
</div>
XHTML koden där vi har lagt texten i en div, går även att lägga inom en <span> </span eller <p></p> men i detta fall har jag valt att lägga det i en div. Diven har ett ID, sedan hämtas rubriken (H1) från divens ID i CSS:en. Smart va? Och framför allt det är standard och det är snyggare. Självklart är CSS koden i en egen .css fil som hämtas i vårt huvud på sidan.
Sammanfattning
För att bygga moderna webbsidor så behöver man skriva korrekt XHTML & CSS. Vill man göra mer avancerade sidor så kan man använda VWD som låter dig utveckla i antingen C# eller VB.NET. Har du Visual Studio som är snäppet bättre men som kostar otroligt mycket så finns även där stöd för andra språk som Ruby on rails och lite annat. Men C# läs C-Sharp, det är så det uttalas, och VB.NET är de vanligaste språken när man programmerar ASP.NET.
Databaser
Jag råkade ju nämna det här med databaser innan lite längre upp så jag skall dra lite snabbt vad det är osv. En databas är ett program, oftast MySQL eller MSSQL som lagrar data åt oss. Om du har en gästbok eller en blogg så allt som skrivs i tex kommenteringen till en blogg sparas i en databas och all information hämtas från databasen med hjälp av ett språk som heter SQL (Structured Query Language). T.ex. så här.
SELECT * FROM Tabell_i_databasen ORDER BY ID DESC
Denna enkla SQL kod hämtar ut allt från en tabell i databasen som heter Tabell_i_databasen och sorterar på kolumnen ID och den kommer hämta ut det senaste ID numret sist, alltså visas det inlägget längst upp på sidan, eller längst ner beroende på hur man valt att presentera data. Men SQL och databas snack är ganska avancerad nivå så lär dig XHTML & CSS först.
1bc143a3-9866-478b-981d-57836fe1dbbc|0|.0