• • • 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!