•
•
•
http://www.murach.com/downloads/a4cs.htm
Webbutvecklingsverktyg
•
Visual Web Developer 2010 express (gratis)
http://www.asp.net
• Installerar även
- .NET framework 4
- SQL Server database express 2008
•
Visual Studio 2010 (90 dagar) (komplett)
(OBS! För er studenter vid HiH är denna gratis, se nästa slide)
http://msdn2.microsoft.com/vstudio
•
SQL Server Management Studio express SP4(databasverktyg)
http://www.microsoft.com/downloads (sök)
Studentlicenser VS 2010
•
Ni kan erhålla fullversion av Visual Studio 2010 (VS) genom Högskolan i
Halmstad så länge ni är studenter.
•
För att ladda ner fullt licencierade program kan ni gå in på helpdesk och
välja ”ladda ner programvaror” (länk till vänster innan ni loggar in).
•
Ni ombes logga in och kan därefter välja ladda ner vad ni önskar…
•
•
•
•
Vad är ASP.NET 4
•
•
•
•
•
•
Hur fungerar det?
Förfrågan via url i webbläsaren
htttp://jeha.ideweb.hh.se/default.aspx
Förfrågan (via kopplingssträng)
SELECT * FROM STUDENT
Svar
t ex ett recordset
Svar
i HTML
Användare med
webbläsare eller
annat device
Skapa webbsidor,
filöverföring (FTP),
administrera
etc
Database server,
tex: ideweb.hh.se
SQL-fråga exekveras
och svar returneras
Web server,
tex: ideweb.hh.se
aspx-kod processas
Skapa databas
lägga in data
administrera
etc
Utvecklare
Lite om innehållet…
• Masterpages ger
konsistent layout på
websajt
• XML sitemap som kan
appliceras på sidor,
menyer, länkar
• Säkerhetsfunktioner
som login, roles och
administration av dessa
• Enkel hantering av
datakällor
• Hantering av olika
databaser
• Sidoptimering, caching,
AJAX
• Felhantering
Kurslitteraturen
1. The essence of ASP.NET
programming
•
•
•
Introduktion till asp.net och
webbapplikationer.
Testning och felsökning (debugging)
samt
HTML och CSS (som lite repetition från
bok)
2. Basic ASP.NET skills
•
•
•
•
Server- och valideringskontroller
State
Masterpages och site navigation
(Themes kan vi hoppa över)
3. ASP.NET database programming
•
•
•
•
Relationsdatabaser och klasser som
används
SQL datakällor
Gridview, detailsview, formview,
listview, mm
ADO.NET - att hantera logic mot
databas
4. Professional ASP.NET skills
•
•
•
•
•
SSL och https
Loginfunktion
Email och felhanteringssidor
Konfigurering och implementering,
mm
(Ajax och WCF kan vi hoppa över)
Och det finns mer…
•
•
•
Besök http://www.asp.net
för mer information om addons,
komponenter, videos, etc
En annan användbar site är
http://www.devasp.net/
där du hittar tips, tricks och
kodexempel som du fritt kan
använda
Tänk på att ange källor när du
använder kodexempel som någon
annan skapat…
Några ASP.NET siter
•
•
•
•
•
http://www.dell.com
http://www.costco.com
http://www.newegg.com
http://www.lego.com
http://www.hsn.com
Integrerad utvecklingsmiljö
Main
menu
Toolbox
Toolbar
area
Solution
explorer
Document
window
Properties
grid
Database
explorer
HTML & XHTML
•
•
Några HTML taggar
• <span>
- Används inline, inga radbrytningar läggs till
• <div class=”main”>
- Används som en container för andra element, radbrytning
• http://www.w3.org/TR/html401/index/attributes.html
Skillnad mellan HTML och XHTML
• Stäng alltid elementen
• Använd alltid gemener för taggarna och attributen
• Använd citationstecken kring värden
• Nästa taggarna korrekt
• Deklarera doctype för sidan <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0…
Att bygga en ASP.NET site
•
•
Två olika projekttyper
• Web site projects
- ingen central projektfil, enkelt att handskas med filerna
- används genomgående i kurslitteraturen
• Web application project
- webutvecklare kan arbeta i team med
kontroll över filer
Olika templates
• ASP.NET web site
• Empty web site
• WCF Service (kraftfullare än web service)
Många olika filtyper…
LINQ
.dbml
Master page
.master
Web user
control
.ascx
HTML
.htm, .html
Web config file
.config
SQL server db
.mdf
XML file
.xml
Class
.cs, .vb
Global application
file
.asax
Web form
.aspx
Site map
.sitemap
Style sheet
.css
Skin file
.skin
Jscript file
.js
Web service
.asmx
Många olika
filtyper…
•
Såhär ser det ut i Visual Web
Developer 2010 när man vill
lägga till nya filer…
Utvecklingserfarenheter?
•
•
•
Vilka verktyg har du arbetat i tidigare och
vilka är de språk som du använt?
Vad är ditt första intryck av att ha bekantat dig
med Visual Studio och ASP.NET?
Lista några viktiga kvaliteter som du tycker en
webbutvecklare bör ha?
Regler för XHTML
Små bokstäver i taggar : XHTML = Casesensitive
<B>feidetext</b> <b>feidetext</b>
Element ska alltid stängas
<p> <p></p> eller <br />
Attribut är casesensitive
<img SRC=”hihi.gif”> <img src=”hihi.gif”>
Element ska nästas, ej korsas
<b><i>korsning</b></i> <b><i>nästat</i></b>
XHTML känner av blanksteg
&nbsp&nbsp&nbsp ” ”
Attribut ska vara inom citattecken
<img src=glad.gif alt=Glad>
<img src=”glad.gif” alt=”Glad”>
XHTML följer content model
<ul>
<p>brott mot content model, &ltli&gt saknas</p>
</ul>
Använd kod för specialtecken så de renderas rätt
<li> &ltli&gt
Exempel på HTML och XHTML
(HTML 5 om !DOCTYPE ändras)
Ser ni skillnaderna?
Myter om HTML och XHTML
WYSIWYG fungerar på webben?
XHTML är ej postscript. CSS är mycket bättre än
HTML och då kan HTML användas som det ska.
HTML är ett programmeringsspråk?
HTML är snarare en strukturering av ett dokument.
HTML specificerar ej logik (kod).
XHTML är den enda framtiden?
Flesta dokument är inte skrivna med XHTML och
klockrena fördelar finns inte att använda XHTML.
Traditionell HTML kommer försvinna?
Miljarder webbsidor försvinner knappast över en natt. Så
länge webbläsare tolkar felaktig markup kommer gamla
HTML sidor leva kvar.
Stardards kommer att lösa alla problem?
Standards är viktiga och hälper till men kommer inte lösa
allt.
Handkodad HTML kommer fortsätta?
”Invisible pixel hack”, etc, behövs ej längre om designers
fokus istället flyttas till att skriva korrekt HTML.
XHTML är dött?
Arbetar du med andra XML-dokument kan XHTML
XHTML är viktigast för att skapa webbsidor?
vara rätt. Om du vill bygga välformulerade dokument. XHTML är basen för att skapa webbsidor, men du
behöver veta bra mycket mer än markup för att skapa
användbara webbsidor.
(X)HTML 5
HTML 5
<!DOCTYPE html>
<meta…
XHTML 5
<?xml version=1.0 encodig=”UTF-8”?>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>…
Integrerad utvecklingsmiljö
Visual Web Developer 2010
Main
menu
Toolbox
VWD2010 Innefattar t ex:
- Databashantering
- Design av Webbplats
- Stylesheets
Toolbar
area
Solution
explorer
Document
window
Properties
grid
Database
explorer
Demo filöverföring webbserver
•
Att föra över filer kan göras på lite olika sätt:
1. Använda en speciell filöverföringsprogramvara (FTP-program)
2. Använda en webbläsare som har stöd för FTP,
t ex internet explorer och url: ftp://ideweb.hh.se
Demo skapa databas
•
Det går att skapa databaser på lite olika sätt:
1. SQL Server management Studio
2. Direkt i Visual Web Developer
Databasserver är
ideweb.hh.se
Ni har samma användarnamn
changethis från början och
ombeds direkt ändra då ni loggar
in första gången.
Demo skapa en webbplats
•
Vi använder Visual Web Developer för att skapa vår första webbplats med asp.net
som vi testkör direkt i verktyget (en lokal webbserver startar automatiskt)
Demos och funderingar
Ni har fått se hur filer kan överföras, databaser kan skapas
och hur webbplatser designas med nästan bara några klick.
•
•
Vad ser ni för möjligheter? Verkar det svårt?
Verkar det kul? Något annat ni tänkt på?
•
Sätt er i smågrupper och diskutera förutsättningslöst vad ni anar runt hörnet
av det ni sett?
Korttagning namn o ansikte
•
•
•
Vi lärare behöver er hjälp att lära era namn. Vi hoppas att ni ställer upp på
ett kort med en namnskylt – tydligt textad (så det syns ordentligt).
Använd utdelade a5-ark och en svart tuschpenna.
Tack på förhand!
