Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se
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 två filer.
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
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 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 6nysnail.png i mappen u1.
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> 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 Interna6onaliza6on. Default Editor Encoding ska vara UTF- 8. Language- specific Default Encoding ska vara HTML5 och Default Encoding. 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 6tle och h1). Spara filen.
5. Webbläsare Du kan använda valfri webbläsare, men du rekommenderas an använda Firefox. Den har 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 File- menyn). 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.
6. 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. 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 dialogen 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. 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 an All Users måste stå sist i listan. 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.
7. 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. Ö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, så an du enkelt kommer åt båda fönstren. FlyNa över de filer som finns i webbsidor, genom an markera dem och dra dem &ll symbolen för Web Publishing. Släpp filerna då symbolen är markerad. FlyNa över sidan i mappen u1 på din dator &ll u1 i FirstClass, genom an dra filen &ll symbolen för u1.
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 en 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.
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://www.fc.lnu.se/~anvid/ 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://www.fc.lnu.se/~anvid/first.htm Till sidan i mappen u1 blir url:en hnp://www.fc.lnu.se/~anvid/dold/u1/snails.htm 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) Kontrollera an sidan ser korrekt ut och an bildenvisas. 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.
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å tangenten Delete eller backsteg. 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.
10. 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 www.fc.lnu.se som server (kolla också an porten är 21) 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. Då anslutningen är uppränad visas filerna i Web Publishing. fortsä]ning på nästa sida
10. Publicera webbsidor med FTP- program fortsä]ning från föregående sida Ta bort filen first.htm, genom an högerklicka på den och välja Radera. Lägg upp filen first.htm, genom an dra den från fönstret med filerna på din dator &ll fönstret i FTP- programmet. Släpp den var som helst, men inte över mapparna dold eller u1, för då hamnar filen där. Byt ut filen snails.htm i u1, genom an dra den från din dator &ll symbolen för u1 i FTP- programmet. Du behöver inte först ta bort den gamla filen, utan FTP- programmet visar en dialog, där du kan välja an skriva över den gamla filen. Kontrollera sedan an du kan se sidorna i webbläsaren.