Labora&on 1 Introduk&on &ll utvecklingsmiljön – övningar/uppgi<er 1M321 Webbteknik 1, 7,5hp Medieteknik © 2015 Rune Körnefors [email protected] 1. Ladda ner arbetsdokument Till övningarna i denna labora&on ﬁnns det eN antal ﬁler som du kan ladda ner i en zip-‐ﬁl. Länk &ll zip-‐ﬁlen ﬁnns på labora&onens webbsida. Då du packat upp zip-‐ﬁlen, får du en mapp med två ﬁler. 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, ﬂaggor, 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 ﬁler. •  Skapa en mapp på din egen dator och kalla den webbsidor. •  Lägg in ﬁlen yourpage.htm i mappen och döp om ﬁlen &ll ﬁrst.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 ﬁlerna snails.htm och 6nysnail.png i mappen u1. 4. Webbeditor Om du har &llgång &ll Dreamweaver (ﬁnns 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 ﬁlen ﬁrst.htm i din webbeditor. •  Kontrollera inställningarna i editorn, så aN ﬁlen 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-‐speciﬁc 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 ﬁlens innehåll, genom aN i koden ändra namnet Kalle Anka &ll diN eget namn. Observera aN det ﬁnns på två ställen (inom 6tle och h1). •  Spara ﬁlen. 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 ﬁlen ﬁrst.htm i webbläsaren. •  Om du ser både ﬁlens och webbläsarens ikon, kan du dra ﬁlen &ll webbläsaren. Annars kan du först öppna webbläsaren och där välja kommandot Öppna ﬁl… i Arkiv-‐menyn (Open ﬁle… i File-‐
menyn). Bläddra sedan fram din ﬁl 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 ﬁlerna 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 ﬂyNa över de ﬁler 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 ﬁler som ﬁnns i webbsidor, genom aN markera dem och dra dem &ll symbolen för Web Publishing. Släpp ﬁlerna då symbolen är markerad. •  FlyNa över sidan i mappen u1 på din dator &ll u1 i FirstClass, genom aN dra ﬁlen &ll symbolen för u1. 7b. Om det inte fungerar aN dra ﬁlerna Om det inte fungerar aN dra ﬁlerna 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 ﬁl 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 ﬁl du vill ladda upp. 8. TiNa på publicerad sida i webbläsaren Adressen (URL) &ll sidorna bestäms på följande säN: Obs! Till mappen Web Publishing blir det För aN komma åt webbservern i FirstClass, måste adressen hNp://www.fc.lnu.se/~anvid/ börja med www. anvid är diN eget användarid &ll FirstClass. Om ﬁlen heter index.htm, så räcker det med ovanstående adress. Annars tas också ﬁlnamnet med i slutet av url:en, t.ex. hNp://www.fc.lnu.se/~anvid/ﬁrst.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 ﬁrst.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 ﬁl eller byta ut en ﬁl i FirstClass I FirstClass kan man ha ﬂera ﬁler med samma namn, men det blir då problem med aN veta vilken av ﬁlerna som visas i webbläsaren. Så, vill du byta ut en ﬁl i FirstClass, måste du först ta bort den gamla ﬁlen. Du kan ta bort en ﬁl, 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å ﬁlen 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å ﬁlen där. Filen tas bort direkt, då du väljer aN ta bort den. Du kan också ta bort en ﬁl 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 ﬁl i den vänstra halvan av fönstret dyker det först upp eN fönster för nedladdning av ﬁlen. Där klickar du då bara på Avbryt, så kan du sedan ta bort ﬁlen. Då du tagit bort den gamla ﬁlen, kan du sedan lägga upp nya ﬁler, på samma säN som visats i övning 7. •  Prova aN ta bort ﬁlerna ﬁrst.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 ﬁler &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 ﬁlerna 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 ﬁlen ﬁrst.htm, genom aN högerklicka på den och välja Radera. •  Lägg upp ﬁlen ﬁrst.htm, genom aN dra den från fönstret med ﬁlerna 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 ﬁlen där. •  Byt ut ﬁlen 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 ﬁlen, utan FTP-‐programmet visar en dialog, där du kan välja aN skriva över den gamla ﬁlen. •  Kontrollera sedan aN du kan se sidorna i webbläsaren.