JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI
|
|
- Kjell Lundgren
- för 8 år sedan
- Visningar:
Transkript
1 JavaScript JavaScript Ramverk (Bibliotek) jquery + jquery UI
2 Allmänt ramverk/bibliotek Importera JavaScript-kod Plattformsoberoende JavaScript Prototype + script.aculo.us jquery + jquery UI
3 Återanvända javascript Jskod.js minkod={ minfunktion:function(parameter1, parameter2) { //kod } } Webbsida.html <script type= text/javascript src= jskod.js ></script> <script> minkod.minfunktion(variabel1, variabel2); </script>
4 jquery jquery innehåller många saker HTML/DOM/CSS manipulation Ändra i HTML och CSS Effekter och animationer Ändra objekt vid händelser Ger en sida en dynamisk funktion
5 jquery Installation <head> <script src="jquery.js"></script> </head <head> <script type="text/javascript" src=" jquery/1.8.3/jquery.min.js"> </script> </head>
6 jquery Syntax $ (selektor).åtgärd () Ett $-tecken definierar jquery En selektor för att välja HTML-element En jquery-åtgärd () som skall utföras på elementen $(this).show() visar det aktuella elementet. $("p").show() visar alla <p> element. $(".test").show() visar alla element med class = "test $("#test").show() visar elementet med id = "test"
7 jquery Syntax <script type="text/javascript"> $(document).ready(function () { // Skriv koden här... }); </script> $(function(){ // Skriv koden här... });
8 Selektorer Väljer och manipulerar HTML-element Hittar element baserat på klass, id, typ, egenskap, attribut och mer Baserat på CSS-selektorer Finns även egna jquery-selektorer Börjar med dollartecken och parenteser: $ () $("p") $(".header")
9 Selektorer <script src="jquery min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h1>en H1</h1> <p>en paragraf</p> <h2>en H2</h2> <p>en paragraf</p> <button>göm paragrafer</button> </body>
10 Selektorer $ ("*") Väljer alla element $ (this) Väljer aktuell HTML-element $ ("p.intro") Väljer alla <p> element med class = "intro" $ ("p.first") Väljer det första <p> elementet $ ("ul li: first") Väljer det första <li> elementet av den första <ul> $ ("ul li: first-child") Väljer det första <li> elementet av varje <ul> $ ("[href]") Väljer alla element med href-attribut $ ("a [target = '_blank']") Väljer alla <a> element med ett mål lika med "_blank" $ ( a [target! = '_blank']") Väljer alla <a> element med ett mål som inte är lika med "_blank" $ (":button") Väljer alla <button>-element och alla <Input>-element av typ = button" $ ("tr:even") Väljer alla jämna <tr> element $ ("tr:odd") Väljer alla udda <tr> element
11 Globala funktioner <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.j s"> </script> <script src="my_jquery_functions.js"></script> </head>
12 jquery HTML (DOM) Det finns funktioner i jquery som används för att ändra i HTML Egentligen ändrar man via DOM Get, Set, Add, Remove
13 Händelser CSS händelser Vi såg dem i de förra föreläsningarna $("p").click(); Aktiveras när en p-tagg klickas
14 mouseenter() <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert("du står på id=p1!"); }); }); </script> </head> <body> <p id="p1">en paragraf med id=p1</p> </body>
15 mousedown() <script> $(document).ready(function(){ $("#p1").mousedown(function(){ alert("vänster musknapp är nedtryckt över p1"); }); }); </script> </head> <body> <p id="p1">en paragraf med id=p1</p> </body>
16 Effekter Hide Dölj objektet Show Visa objektet Toggle Byt mellan att dölja och visa objektet Animate Ändrar ett objekts CSS-egenskap till ett bestämt värde T.ex. Ändra height från 200px till 300px Det finns många fler
17 Fade fadein() fadeout() fadetoggle() fadeto() $(selector).fadein(fart,callback); "slow", "fast", or millisekunder Callback kan vara en funktion som anropas när fade är färdig
18 Slide slidedown() slideup() slidetoggle() <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slidetoggle("slow"); }); }); </script>
19 animate() animate() Animera valt objekt Ändra t.ex. storlek, textstorlek, etc. Kan ändra flera attribut samtidigt Kan ändra saker i sekvens Först figurstorlek, sen textstorlek, sen genomskinlighet Ändras samtidigt div.animate({height:'300px', width:'200px'}); Ändras i sekvens div.animate(height:'300px'); div.animate(width:'200px');
20 animate() HTML-objekt har statisk position per default För att ändra positionen på objektet måste CSS-positionen vara fixed, relative eller absolute Det går att använda både absoluta och relativa värden 250px +/- 150px Går att ställa hastighet för animeringen fast, slow 600 ms, 200 ms Default: 400 ms Millisekunder Värden, t.ex. 1000
21 jquery User Interface (UI) Finns flera funktioner för grafisk interaktion Draggable, dropable, sortable, osv. Gör att man kan animera färger Bakgrundsfärg, textfärg Ett annat ramverk än jquery Länkas in på samma sätt <script src=" Från den egna hårddisken
22 Animera färg Det går att ändra färger med animate också Bakgrundsfärg, backgroundcolor Textfärg, color jquery UI behövs
23 Funktioner i jquery UI Kan dra objekt draggable() Kan släppa dem i vissa områden dropable() Kan ändra objektens storlek resizable() Kan välja vissa element selectable() Kan sortera element sortable()
24 jquery Bra länkar jquery for Absolute Beginners Video Series: jquery-for-absolute-beginners-video-series/ w3schools.com: jquery.com: jquery UI
jquery Grundkurs 1 Copyright Mahmud Al Hakim
jquery Grundkurs Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se Innehåll Introduktion till JavaScript-bibliotek Vad är jquery? Implementation och Grundsyntax Selectors (väljare)
Appar med ryggrad. Introduktion till JavaScriptramverket Backbone
Appar med ryggrad Introduktion till JavaScriptramverket Backbone Vanlig webbsida Databas MVC - Model View Controller MVC - Model View Controller MVC Backbone.js Ger struktur Bygger på MVC konceptet Tvingar
JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?
Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia
JAVASCRIPT. Beteende
JAVASCRIPT Beteende OVERVIEW HTML Formulär JavaScript Syntax Events DOM Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN Skriptspråk som körs på klientsidan (klientskript) Koden exekveras i webbläsaren
21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html
Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
AngularJS Skriven av: Isak Glans. Datum: 2015-04-29. Kurs: Webbutveckling. Lärare: Per Sahlin. Utbildning: Systemutvecklare i.net, Newtons Yrkeshögskola. 1 Sammanfattning Syftet med denna uppsats är att
E07 "Greased Lightning"
E07 "Greased Lightning" Föreläsning 7, HT2014 CSS och Event Kurs: 1dv403 Webbteknik I Johan Leitet E07 Greased Lightning Dagens agenda CSS-egenskaper Händelsestyrd programmering Händelsehanterare Typer
JavaScript. DOM Scripting
JavaScript DOM Scripting Vad är Document object Model (DOM)? En standardiserad modell där man ser en webbsida och dess innehåll som objekt document.getelementsbytagname( p ); document.getelementbyid( mittid
Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen
MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering
Föreläsning 4. CSS Stilmallar för webben
Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll
F07 Stilmallar Dagens agenda
F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar
Lambdas. (och fler design patterns) Objekt-orienterad programmering och design (DIT952) Niklas Broberg, 2017
Lambdas (och fler design patterns) Objekt-orienterad programmering och design (DIT952) Niklas Broberg, 2017 Funktioner En funktion (i programmeringstermer) är en operation som tar ett eller flera argument,
Lektion 2 Del 1 Kapitel 6
Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp
Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener <scenes>... 3 Typsnitt <fonts>... 3 Övergångar <transitions>...
Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener ... 3 Typsnitt ... 3 Övergångar ... 4 Mall för slide ... 5 , ...
CSS-övningar. 1. Grunder
CSS-övningar 1. Grunder CSS Testa stilmallar Klasser Elementen div och span Ärvda egenskaper Mer om typsnitt, marginaler och mått Textdekor Fristående CSS -fil Attributet style Prioritetsordning hos stilelement
ORDLISTA WEBBDESIGN 100P
ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.
HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)
HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text
Lektion 3 HTML, CSS och JavaScript
Lektion 3 HTML, CSS och JavaScript I den här lektionen behandlas HTML, CSS och JavaScript (JS). Det förutsätts att lektion 1 och 2 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML
Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:
Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både
Webbutveckling med AngularJS
Webbutveckling med AngularJS Kommunikation och Användargränssnitt HT 2016 Per Lind Upplägg Laboration 1 - Skapa en SPA (single-page application) med AngularJS Laboration 2 - Responsiv design, mobile-first
JavaScript. En Introduktion
JavaScript En Introduktion Innehåll Introduktion till JavaScript Händelsehantering och CSS Felhantering i JavaScript Validering i JavaScript Introduktion Ingen koppling till Java Statiska och dynamiska
Lektion 2 - CSS. CSS - Fortsätt så här
Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt
HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015
. HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17
Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma
Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation
EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript
EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Dokument i övningarna I denna labora&on finns inga filer ar
TDDD52 CSS. Färger. Färger 1/3/13
Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis
On-line produktion TDDC61
On-line produktion TDDC61 Förra gången MuddyCards Animation Portfolio Lab 3. Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner
Materialspecifikationer
HD SYDSVENSKAN CITY NÄRA H I T TA H E M. S E MERAJOBB.SE Materialspecifikationer webb 2015 www.hdsydsvenskan.se Standardformat Panoramabanner Storlek: 980x240 px Enhet: Dator / Läsplatta Video / ljud:
Användarbeskrivning för Anvisningstjänsten
1 (23) Användarbeskrivning för Anvisningstjänsten 2 (23) INNEHÅLL 1 ALLMÄN BESKRIVNING AV ANVISNINGSTJÄNSTEN... 3 1.1 Skillnad mellan Central och Lokal anvisning... 3 2 INTEGRATION ENLIGT [IDP-DISCO]...
Visa och dölja element med JavaScript
Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Visa och dölja element Förändra elementets sdl för display eller visibility
Animering på webben En jämnförande studie av CSS och jquery i deras gemensamma funktionsområde för animering
Uppsala universitet Inst. för informationsvetenskap/data- och systemvetenskap Animering på webben En jämnförande studie av CSS och jquery i deras gemensamma funktionsområde för animering Hannes Dahlberg
INTRODUKTION TILL ANGULAR JS
INTRODUKTION TILL ANGULAR JS DEL 1 Mahmud Al Hakim www.alhakim.se mahmud@alhakim.se VAD ÄR ANGULAR? Angular är ett JavaScript ramverk. Angular används för utveckling av frontendwebbapplikationer. Angular
Carl-Oscar Hermansson WEBB DESIGN
Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...
Labbrapport: HTML och CSS
Labbrapport: HTML och CSS Utförd av: Natalie Olmosse Mailadress: natalie.olmosse@gmail.com Datum: 2015 12 18 Kursansvarig: Karin Fahlquist Övriga lärare: Ulrik Söderström Första inlämningen Resultat (Godkänd/Retur):
F r a m e s - r a m a r
skriv ut» F r a m e s - r a m a r Exempel på framesets» Ramkanter (borders)» Färg på ramkanter» Bläddringslister (scrolling)» Marginaler» Länkning i ramar» Uppdatera flera ramar samtidigt» IFRAME - inbäddad
Tillämpad Programmering. Ekonomi + Spel + Javascript
Programmerat exempelprojekt (följ länk och tryck på RUN) https://repl.it/@hakanandersson/canvas-shop Tillämpad Programmering. Ekonomi + Spel + Javascript Håkan Andersson Webbapplikationer Java applets
Webbprogrammering. Sahand Sadjadee
Webbprogrammering Sahand Sadjadee Agenda Webb The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages
Kursplanering Utveckling av webbapplikationer
Kursplanering Utveckling av webbapplikationer Fakta Ämne Programmering Poäng 40 Yh-poäng Kurskod YSYS-WEB Klass Systemutvecklare.NET Syfte och koppling till yrkesrollen För att kunna arbeta som systemutvecklare
2I1073 Föreläsning 1. HTML och XHTML XHTML
2I1073 Föreläsning 1 XHTML, stilmallar och Javascript 1 KTH-MI Peter Mozelius HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll innehåller lite text taggarna kan
Materialspecifikationer webb 2014
SYDSVENSKAN CITY NÄRA H I T TA H E M. S E MERAJOBB.SE SYDSVENSKAN WEBBYRÅ Materialspecifikationer webb 2014 www.sydsvenskan-webbyra.se Standardformat Panoramabanner Storlek: 980x240 px Framerate: 18-24
Bilder. Bilder och bildformat
och bildformat Det första du måste göra är att skaffa bilder att lägga in i ett HTMLdokument. Ta en bild med din mobil/ webbkamera eller rita bilden själv.du kan ta gratisbilder från Google, gå in på bilder
Bilaga 4, Skapa grafiskt användargränssnitt med guide
Bilaga 4 Bil 4:1 Bilaga 4, Skapa grafiskt användargränssnitt med guide Enklast till en början är att vid MATLABS kommandoprompt skriva guide vilket ger dels ett figurfönster och det som kallas Guide Control
12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration
REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap
CSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek
CSS-WORKSHOP Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek sarabritta.jadelius@trollhattan.se 0520-49 76 65 HTML strukturerar innehåll det här är
JavaScript En Introduktion
Innehåll JavaScript En Introduktion Introduktion till JavaScript Händelsehantering och CSS Felhantering i JavaScript Validering i JavaScript Introduktion Ingen koppling till Java Statiska och dynamiska
Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.
e-line mobilversion Pyramid Business Studio 3.42A servicepack 05 (2015-07-13) Mobilversionen av e-line är i grunden samma applikation som fullversionen av e-line. Skillnaden är att endast valda delar av
Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">
CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi
En stiligare portal Laboration 3
Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt
/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }
/*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:
ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML
ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt
TNMK30. Elektronisk publicering
TNMK30 Elektronisk publicering Välkomna till kursen Niklas Rönnberg niklas.ronnberg@liu.se Kopparhammaren 2, rum 2011 Medverkande Stefan Gustavson, stefan.gustavson@liu.se Camilla Forsell, camilla.forsell@liu.se
Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1
Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min
JavaScript del 9 Dynamik och animeringar
JavaScript del 9 Dynamik och animeringar Det sista vi ska titta på när det kommer till att lära oss JavaScript är hur vi skapar dynamik på vår webbplats, ge användarna chansen att påverka vad som händer
En grundkurs i hemsidor och hur de är uppbyggda
En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och
Lektion 4 HTML, CSS och PHP
Lektion 4 HTML, CSS och PHP I den här lektionen behandlas i huvudsak PHP. Det förutsätts att lektion 1, 2 och 3 är gjorda, eller att du har tillräckliga kunskaper i grundläggande HTML och CSS för att klara
Spelprogrammering med JavaScript och HTML5
Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.
Laboration 2: Xhtml och CSS.
Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och
Övning (X)HTML 2. Sidan 1 av 7 2010-11-11
Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan
Frågor och svar Gränssnittsdesign/Webbutveckling
Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96
<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim
Kursledare: Mahmud Al Hakim Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet
Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)
Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet
Content Management System. Publiceringssystem
Content Management System Publiceringssystem Vad är ett Content Management System (CMS)? Ett verktyg för att separera innehåll från presentation Skapa webbsidor utan att kunna html Låt många skapa sidor
Introduktion Till WordPress
Introduktion Till WordPress Vad är WordPress? ett blogg- och innehållshanteringssystem skrivet i PHP och som använder databasen MySQL för datalagringen Wordpress har under åren utvecklats från ett bloggsystem
Webbteknik för ingenjörer
Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera
Introduk+on +ll programmering i JavaScript
Föreläsning i webbdesign Introduk+on +ll programmering i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Språk Naturliga språk Mänsklig kommunika+on T.ex. Svenska, engelska,
Övnings hemtentamen med förslag till lösning, webbprogrammering
Övnings hemtentamen med förslag till lösning, webbprogrammering Se detta som ett förslag efter som uppgifterna ofta går att lösa få flera sätt. Uppgift 1 CSS 4 poäng Alla css regler skall placeras i en
! HTML Formulär! JavaScript! Syntax! Events! DOM. ! URL variabler i en query string (get) ! HTTP post request (post)
OVERVIEW JAVASCRIPT Beteende! HTML Formulär! JavaScript! Syntax! Events! DOM! Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN HTML FORMULÄR! Skriptspråk som körs på klientsidan (klientskript)! Koden
Ajax TruClient. Erfarenheter, tips och trix från Swedbank IT. Christian Gerdes Performance Engineer, LIGHTS IN LINE AB
Ajax TruClient Erfarenheter, tips och trix från Swedbank IT Christian Gerdes Performance Engineer, LIGHTS IN LINE AB Intro Lite om Swedbanks Teknik Test Varför TruClient En ny teknik kräver ett nytt tänk
Labora&on 8 Formulär övningar/uppgi6er
Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument
HTML. Introduktion till HyperText Markup Language
HTML Introduktion till HyperText Markup Language 1 Frågor innan vi börjar? 2 Dagens föreläsning Snabb introduktion till webben Varför använder vi HTML? Ett första HTML-dokument Metadata Teckenkodning Validera
F06 A table form Dagens agenda
F06 A table form Dagens agenda Länkar Tabeller Formulär Hyperlänkar index.html feed/news.html klickbar text hippo.png about.html Relativ länk till webbsida via klickbar länk: klickbar
Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er
Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna
Idag. Webben, HTML och CSS. Live demo. Webbens funktion
Idag Webben, HTML och CSS Institutionen för system- och rymdteknik Luleå tekniska universitet Moment F om webben, HTML och CSS startar nu Dead-line: fredag 28 sep (dvs om en dryg vecka). Uppgift: Skriv,
Labora&on 4 CSS och validering övningar/uppgi9er
Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna
Nätet. Uppgiften. Nivå
Nivå 1 Nätet All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Uppgiften Har
Innehållsförteckning. Adobe GoLive CS
Innehållsförteckning 1 Om GoLive CS... 1 Mappar och filstruktur...1 Vad är en webbsida?...1 Vad är speciellt för en webbsida?...2 Vad är en webbplats?...3 Vanliga fallgropar med webbdesign...3 Överföra
JS & beteende. TNMK30 - Elektronisk publicering
JS & beteende TNMK30 - Elektronisk publicering Dagens föreläsning HTML Formulär JavaScript Syntax Events DOM Validering av fomulär JavaScript Skriptspråk som körs på klientsidan (klientskript). Koden exekveras
E07 "Greased Lightning"
E07 "Greased Lightning" Föreläsning 7, HT2012 CSS och Event Kurs: 1dv403 Webbteknik I Johan Leitet E07 Greased Lightning Dagens agenda CSS-egenskaper Händelsestyrd programmering Händelsehanterare Typer
PageSpeed Insights. Ta bort JavaScript- och CSS-kod som blockerar renderingen från innehåll ovanför mitten
PageSpeed Insights 64 / 100 Hastighet Bör Fixas: Ta bort JavaScript- och CSS-kod som blockerar renderingen från innehåll ovanför mitten Det finns 3 skriptresurser och 1 CSS-resurser som blockerar renderingen
PageSpeed Insights. Ta bort JavaScript- och CSS-kod som blockerar renderingen från innehåll ovanför mitten
PageSpeed Insights 66 / 100 Hastighet Bör Fixas: Ta bort JavaScript- och CSS-kod som blockerar renderingen från innehåll ovanför mitten Det finns 1 skriptresurser och 2 CSS-resurser som blockerar renderingen
Introduktion till objektorientering. Vad är objektorientering egentligen? Hur relaterar det till datatyper? Hur relaterar det till verkligheten?
Introduktion till objektorientering Vad är objektorientering egentligen? Hur relaterar det till datatyper? Hur relaterar det till verkligheten? TDDD78, TDDE30, jonas.kvarnstrom@liu.se 729A85 jonas.kvarnstrom@liu.se
Struktur & Layout med CSS
1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs
Kravspecifika.on, pappersprototyp & CSS
1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna
Introduktion till objektorientering. Vad är objektorientering egentligen? Hur relaterar det till datatyper? Hur relaterar det till verkligheten?
Introduktion till objektorientering Vad är objektorientering egentligen? Hur relaterar det till datatyper? Hur relaterar det till verkligheten? jonas.kvarnstrom@liu.se 2014 2017 jonas.kvarnstrom@liu.se
Introduktion till objektorientering. Vad är objektorientering egentligen? Hur relaterar det till datatyper? Hur relaterar det till verkligheten?
Introduktion till objektorientering Vad är objektorientering egentligen? Hur relaterar det till datatyper? Hur relaterar det till verkligheten? jonas.kvarnstrom@liu.se 2015 2014 jonas.kvarnstrom@liu.se
Inför prov 1 i webbdesign
Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke
Förra gången. jquery Lab 4 Muddy Cards resultat.
Förra gången jquery Lab 4 Muddy Cards resultat. Labgrupper Helklass alltid på lab-tiderna? Ingen föreläsning nästa vecka Bonus-info HTML - formulär Serverskript PHP Portfolio Sammanfattning. Idag Webblingo
Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!
Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna
Alla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php
Introlektion PHP är ett av de enklare språken att lära sig just pga. dess dynamiska struktur. Det används för att bygga upp båda stora och mindre system. Några vanliga system som använder sig av PHP är
Mayas UI. Grundläggande UI. Dag Stensson 2009
Mayas UI Mayas UI (User Interface eller användargränssnitt) är tämligen komplicerat jämfört med Adobe Photoshop eller andra liknande verktyg. Oroa dig inte, det blir lite bättre med tiden. Ni kommer att
Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.
Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny
Webbprogrammering, DA123A, Studiematerial 4
Webbprogrammering, DA123A, Studiematerial 4 DOM bakgrund I webbens ungdom fanns endast möjlighet att visa statisk information i en webbläsare. När Netscape Communications släppte version 2.0 av Netscape
Det ska endast finnas två bilder av samma typ på spelplanen.
Laboration 3 Laboration 3, Memory Observera För att bli godkänd på laborationen ska din källkod följa den standard vad det gäller kommentering, val av variabelnamn m.m. som gåtts igenom på föreläsning.
Riktiga Vykort Partner webb Teknisk beskrivning
Riktiga Vykort Partner webb Teknisk beskrivning I denna tekniska beskrivning finns instruktioner om hur du skall konfigurerar din webb för att kunna skicka bilder som Riktiga Vykort. Har du frågor kontaktar
E11 "Protection" Föreläsning 11, HT2014 Säkerhet, tillgänglighet. Johan Leitet. Kurs: 1dv403 Webbteknik I
Föreläsning 11, HT2014 Säkerhet, tillgänglighet E11 "Protection" Kurs: 1dv403 Webbteknik I Johan Leitet E11 Protection Dagens agenda Tillgänglighet Säkerhet Webbsajt vs. Webbapp Webbsida/webbsajt Webbapplikation
E03 "Day 3: 2:00 p.m 3:00 p.m"
E03 "Day 3: 2:00 p.m 3:00 p.m" Föreläsning 3, HT2013 Funktioner och objekt Kurs: 1dv403 Webbteknik I Johan Leitet E03 Day 3: 2:00 p.m. - 3:00 p.m. Dagens agenda Funktioner Ordning av inladdning Objekt
Samlingar, Gränssitt och Programkonstruktion! Förelasning 11!! TDA540 Objektorienterad Programmering!
Samlingar, Gränssitt och Programkonstruktion! Förelasning 11!! TDA540 Objektorienterad Programmering! Samlingar Vi kommer att behöva hantera samlingar av objekt - Har oftast använd Array (fält) - Bra om