Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

Transkript

1 Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se

2 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en antal filer som du kan ladda ner i en zip-fil. Länk &ll zip-filen finns på labora&onens webbsida. Då du packat upp zip-filen, får du en mapp med några filer.

3 2. FirstClass Kom igång med FirstClass klientprogram. Öppna FirstClass klientprogram och logga in. Orientera dig i FirstClass mappar kursens mapp, Mailbox och Web publishing. Prova an skicka en meddelande i Mailbox. Om du har en kurskamrat i närheten, kan ni prova an skicka meddelanden &ll varandra. Annars kan du prova an skicka en meddelande, genom an adressera det &ll dig själv. Se mer om meddelanden, flaggor, m.m. i Intro &ll användning av FirstClass Kursmappens fullständiga namn varierar beroende på vilket kurs7llfälle du följer, men namnet börjar all7d med kurskoden 1ME321.

4 3. Organisera dina webbsidor De webbsidor du skapar i kursen ska publiceras i FirstClass. Då är det bra an ha en likadan struktur på mapparna på din egen dator, så an alla referenser i länkar och bilder blir rän, då du sedan skapar dina filer. Skapa en mapp på din egen dator och kalla den webbsidor. Lägg in filen yourpage.htm i mappen webbsidor och döp om filen &ll first.htm. I mappen webbsidor skapar du en ny mapp och kallar den dold. I mappen dold skapar du ynerligare en mapp, som du kallar u1. Lägg in filerna snails.htm och 7nysnail.png i mappen u1.

5 4. Webbeditor Om du har &llgång &ll Dreamweaver (finns i D1169 i Växjö) kan du använda det programmet i kodläget. Använd inte Designläget. Det är vik&gt an du lär dig skriva kod, så använd endast kodläget. Har du inte Dreamweaver, rekommenderas du använda Komodo Edit. Du kan också använda annan valfri editor. Det går med vilken texteditor som helst, men du bör använda en editor som har stöd för HTML5, både för taggar och anribut. Öppna filen first.htm i din webbeditor. Kontrollera inställningarna i editorn, så an filen sparas med teckenkodning UTF-8. Dreamweaver: Ta fram programmets inställningar (Preferences) och där kategorin New Document. Där ska Default Document Type vara HTML5 och Default Encoding ska vara UTF-8. Komodo Edit: Ta fram programmets inställningar (Preferences) och där Interna7onaliza7on. Default Editor Encoding ska vara UTF-8. Language-specific Default Encoding ska vara HTML5 och Default Encoding. Klicka sedan på OK. Välj dessutom menykommandot Current File Preferences i Edit-menyn. I rutan för File Preferences väljer du UTF-8 i popupmenyn för Encoding. Uppdatera filens innehåll, genom an i koden ändra namnet Kalle Anka &ll din eget namn. Observera an det finns på två ställen (inom 7tle och h1). Spara filen.

6 5. Webbläsare Du kan använda valfri webbläsare, men du rekommenderas an använda Firefox, e<ersom det är den som används i övningarnas instruk&oner. Den har dessutom bra stöd för standarden i HTML och CSS. Det är också Firefox vi använder då dina redovisningar kontrolleras. Öppna filen first.htm i webbläsaren. Om du ser både filens och webbläsarens ikon, kan du dra filen &ll webbläsaren. Annars kan du först öppna webbläsaren och där välja kommandot Öppna fil i Arkiv-menyn (Open file i Filemenyn). Bläddra sedan fram din fil och peka ut den. Kontrollera an det ser korrekt ut och an åäö visas som de ska. Om inte åäö visas korrekt, får du gå &llbaks &ll föregående övning och kontrollera inställningarna i editorn. Kontrollera också an länken fungerar och an bilden visas på den andra sidan. Om det inte fungerar har du antagligen lagt filerna i fel mappar, eller gen mapparna fel namn. Gå då &llbaks &ll föregående övningar och kontrollera namn och struktur.

7 6a. Mappstruktur på webbservern (FirstClass) Filerna publiceras i Web Publishing i FirstClass. Du ska där skapa samma struktur som du &digare skapade på din egen dator i mappen webbsidor. Mappen dold ska ha behörighetsinställningar, så an endast du och lärarna kommer åt innehållet i den. I webbläsaren måste man ange sin lösenord. Starta FirstClass klientprogram och logga in. Öppna mappen Web Publishing och i Arkiv-menyn väljer du kommandot för an skapa en ny konferens (obs! det ska vara konferens och ej mapp). I fönstret som då dyker upp väljer du Standard Conference. Du får en ny konferens kallad New Conference i vänsterspalten i Web Publishing. Högerklicka på New Conference och välj Visa info... (Get info... på engelska / i Windows är det Egenskaper eller Preferences) och byt namnet &ll dold. Klicka sedan på OK. Högerklicka på dold och välj Behörigheter (Permissions). Skriv din eget namn i fältet Vem (Who) och tryck på Return-tangenten. Välj Full behörighet (Controller) i menyn i kolumnen Åtkomst (Access). Skriv Medieteknik Personal i fältet Vem (Who). Välj Infohämtare (Reader) i menyn i kolumnen Åtkomst (Access). Skriv All Users i fältet Vem (Who). Behåll Obehörig (Disallowed) i menyn i kolumnen Åtkomst (Access). Observera a2 All Users måste stå sist i listan. fortsä`ning på nästa sida

8 6b. Mappstruktur på webbservern (FirstClass) fortsä`ning från föregående sida Klicka på mappen dold och skapa en ny mapp. Obs! det ska nu vara mapp (folder). Välj Standard folder. Mappen hamnar i den övre rutan &ll höger (eventuellt en bit ner, så du får scrolla fram den). Högerklicka på den nya mappen, välj Visa info och skriv in namnet u1.

9 7a. Publicera webbsidor med FirstClass klient För an flyna över de filer som ska publiceras, kan du an&ngen använda FirstClass klient eller FTP. Här visas det först hur du använder FirstClass klient. FTP visas i övning 10. Öppna mappen Web Publishing. Öppna också mappen webbsidor på din dator och lägg dess fönster in&ll fönstret för Web Publishing. Du kan då enkelt kommer åt båda fönstren. FlyNa över filen first.htm som finns i webbsidor, genom an dra den &ll symbolen för Web Publishing.Släpp filen då symbolen är markerad. FlyNa över filerna i mappen u1 på din dator &ll u1 i FirstClass, genom an dra filerna &ll symbolen för u1.

10 7b. Om det inte fungerar an dra filerna Om det inte fungerar an dra filerna från fönstret på din dator &ll fönstret i FirstClass, så kan du istället göra på följande sän. Filer direkt i Web Publishing Öppna mappen Web Publishing och klicka på den lilla symbolen för Web Publishing. Välj sedan kommandot Ladda upp i Arkiv-menyn och peka ut den fil du vill ladda upp. Filer i mappen u1 Klicka på den lilla symbolen för mappen för an öppna den. Välj sedan kommandot Ladda upp i Arkiv-menyn och peka ut den fil du vill ladda upp.

11 8. TiNa på publicerad sida i webbläsaren Adressen (URL) &ll sidorna bestäms på följande sän: Till mappen Web Publishing blir det hnp:// anvid är din eget användarid &ll FirstClass. Obs! För an komma åt webbservern i FirstClass, måste adressen börja med www. Om filen heter index.htm, så räcker det med ovanstående adress. Annars tas också filnamnet med i slutet av url:en, t.ex. hnp:// Till sidan i mappen u1 blir url:en hnp:// Om behörigheten för mappen dold är korrekt inställd (enligt övning 6), lägger servern sedan in Login i url:en och du får en inloggningsruta, där du skriver in dina inloggningskoder för an få fram sidan. Har du dock redan gjort det &digare, så är du redan inloggad och kommer direkt &ll sidan. Du är sedan inloggad &lls du avslutar webbläsaren. Öppna webbläsaren och skriv in adressen &ll ingångssidan Dvs &ll sidan first.htm, fast med din användarid istället för enur001. Kontrollera an sidan ser korrekt ut och an bilden visas. Testa också länken &ll den andra sidan. Då bör inloggningsrutan dyka upp, ifall du inte redan är inloggad i FirstClass i webbläsaren. Avsluta i så fall webbläsaren, så loggas du ut. Testa sedan igen, så du kan se an inloggningsrutan dyker upp.

12 9. Ta bort en fil eller byta ut en fil i FirstClass I FirstClass kan man ha flera filer med samma namn, men det blir då problem med an veta vilken av filerna som visas i webbläsaren. Så, vill du byta ut en fil i FirstClass, måste du först ta bort den gamla filen. Du kan ta bort en fil, genom an högerklicka på den och välja kommandot Ta bort. Filer direkt i Web Publishing visas i fönstrets vänstra halva, så högerklicka på symbolen där. Då filen tas bort, markeras den med en liten soptunna. Filen är dock bornagen och visas inte längre ifall du stänger och sedan öppnar fönstret igen. Filer i en mapp (t.ex. u1) visas i fönstrets högra halva, så högerklicka på filen där. Filen tas bort direkt, då du väljer an ta bort den. Du kan också ta bort en fil genom an först klicka på den, för an markera den, och sedan trycka på Delete eller backsteg ( ) på tangentbordet. Men om du klickar på en fil i den vänstra halvan av fönstret dyker det först upp en fönster för nedladdning av filen. Där klickar du då bara på Avbryt, så kan du sedan ta bort filen. Då du tagit bort den gamla filen, kan du sedan lägga upp nya filer, på samma sän som visats i övning 7. Prova an ta bort filerna first.htm och snails.htm. Lägg sedan upp dem igen ifrån din dator.

13 10a. Publicera webbsidor med FTP-program I denna övning ska du lägga upp filer &ll Web Publishing i FirstClass med hjälp av en FTP-program. Du rekommenderas an använda programmet Cyberduck. Starta FTP-programmet. Skapa en ny anslutning. Skriv in fc.lnu.se som server (kolla också an porten är 21) Skulle det inte fungera med fc.lnu.se, kan du prova med adressen Skriv in din användarid och lösenord &ll FirstClass och anslut &ll servern. Sedan kan det ibland ta en stund innan anslutningen är klar. Det kan också dyka upp en meddelande om "osäker anslutning", men så är det vid vanlig FTP, så klicka då bara på Fortsä`. Då anslutningen är uppränad visas filerna som finns i Web Publishing. fortsä`ning på nästa sida

14 10b. Publicera webbsidor med FTP-program fortsä`ning från föregående sida Observera an endast filer och vanliga mappar som finns i Web Publishing visas i fönstret i Cyberduck. "Mappen" dold är i FirstClass en konferens, för an du skulle kunna ställa in behörighet på den. Den visas därför inte som en mapp i Cyberduck och syns inte alls. I övning 10d kommer du dock se an du kan komma åt den ändå. Men först ska du byta ut filen first.htm. Ta bort filen first.htm, genom an högerklicka på den och välj Radera. E<er en tag dyker meddelandet om an det är en osäker anslutning upp igen, ifall du inte bockat för an det inte ska visas mer. Bocka i så fall för det nu, så du slipper det i fram&den, och klicka på Fortsä`. Klicka sedan på Radera i nästa meddelande. Nu visas helt plötsligt mappen dold, e<ersom det inte finns några filer kvar direkt i Web Publishing, men vi struntar i det nu. I nästa punkt ska du lägga upp en fil igen. Lägg upp filen first.htm igen, genom an dra den från fönstret med filerna på din dator &ll fönstret i FTPprogrammet. Släpp den var som helst, men inte över mappen dold, för då hamnar filen där. Då filen lagts upp igen, visas an&ngen endast filen first.htm eller både first.htm och mappen dold. fortsä`ning på nästa sida

15 10c. Publicera webbsidor med FTP-program fortsä`ning från föregående sida Nu ska vi se hur du kan bryta anslutningen och hur du kan koppla upp igen. Koppla ner anslutningen, genom an klicka på knappen Koppla ner. Anslut &ll servern igen, genom an klicka på knappen Ny anslutning och anslut igen på samma sän som i övning 10a. Då visas endast filen first.htm. fortsä`ning på nästa sida

16 10d. Publicera webbsidor med FTP-program fortsä`ning från föregående sida Gå &ll mappen dold, genom an välja kommandot Gå 7ll mapp... i menyn Gå. I rutan du då får skriver du dold och klickar på knappen Gå. Fönstret med filerna uppdateras då &ll an visa innehållet i mappen dold, där mappen u1 finns. Expandera mappen u1, genom an klicka på pilen &ll vänster om den. Byt ut filen snails.htm i u1, genom an dra den från din dator &ll symbolen för u1 i FTP-programmet. Du ska inte först ta bort den gamla filen, utan FTP-programmet visar en dialog, där du väljer an skriva över den gamla filen, genom an klicka på Fortsä`. Vill du gå upp &ll Web publishing igen (där first.htm finns), kan du i menyn ovanför fillistan välja /~. Kontrollera sedan an du kan se sidorna i webbläsaren. Sidorna ska se likadana ut som &digare, e<ersom du inte ändrat något i dem. Prova gärna an ändra någon text i filen first.htm på din dator och dra sedan över den &ll fönstret i FTP-programmet. Kontrollera sedan i webbläsaren an det är den nya sidan som visas.