11.kl. "Stila lapas kaskadēšana (CSS) un tā lietošanas iespējas."

trešdiena, 2010. gada 20. janvāris
CSS - Cascading Style Sheet jeb stila lapas kaskadēšana nodrošina daudzas interesantas un ērtas iespējas dažādu tīmekļa lapas elementu noformēšanā un ļauj ietaupīt daudz laika web vietnes veidošanas darbā. Šeit ir zināma līdzība ar stilu lietošanu teksta dokumentu noformēšanā - lietojot dažādu dokumenta objektu noformējuma stilus, iespējams dokumenta noformēšanu veikt daudz ātrāk un ievērot vienotu stilu visā dokumentā. Tas ir īpaši svarīgi, ja dokumentā ir daudz objektu ar vienādu noformējumu. CSS nodrošina līdzīgu iespēju tīmekļa lapās.
CSS galvenā priekšrocība, iespējams, ir tā, ka stilu izveido vienreiz, bet lietot var tik reizes, cik tas dokumentā nepieciešams līdzīgu elementu noformēšanai. Ja līdzīgu noformējuma efektu vēlas panākt ar HTML līdzekļiem, tad katra tīmekļa lapas elementa noformēšana jāveic katru reizi no jauna.

Izmantojamie materiāli:
 CSS selektoru pieraksts (sintakse)

 Selektors {īpašība1:vērtība1; īpašība2:vērtība2; ...; īpašībaN:vērtībaN}

 Piemēri:
  • h1 {color:maroon;font-size:20pt;}
  • hr {color:navy;}
  • p {font-size:11pt;margin-left:15px;}
  • p {color:red;text-align:center;}
  • a:link {color:green;}
http://www.w3schools.com/css/selector.gif

p {color:red;text-align:center;}
Piemēru p {color:red;text-align:center;} var pierakstīt arī šādi:

p
{
color:red;
text-align:center;
}

Horizontālais CSS selektora pieraksts:

http://en.support.files.wordpress.com/2011/09/css-selectors-lrg.png

Vertikālais CSS selektora pieraksts (raksts):

Ieteicams izpētīt arī nākošo atttēlu (http://dabrook.org/curriculum/web-design-2/html-css-review):


CSS koda iekļaušana tīmekļa lapās

CSS koda iekļaušanai tīmekļa lapās iespējami 3 varianti:
  • speciālu CSS datņu lietošana;
  • CSS definēšana visai tīmekļa lapai (Head daļā);
  • CSS definēšana konkrētam objektam tīmekļa lapā.
CSS datņu lietošana faktiski ir visuniversālākais veids, jo šajā gadījumā CSS datni sagatavo vienu reizi un lieto dažādās tīmekļa lapās saskaņā ar vajadzību. Sākumā šķiet, ka visvienkāršākais veids ir CSS definēšana konkrētam objektam tīmekļa lapā. Ļoti iespējas, ka definēt CSS vienam objektam ir vienkāršāk, tomēr šādā gadījumā kods jāraksta katram objektam no jauna un katrā tīmekļa lapā tas jādara atkal un atkal. 

Speciālu CSS datņu lietošana

Sagatavo speciālu CSS datni, kurā ir definēti visi tīmekļa lapā nepieciešamie noformējuma stili, piemēram, datne.css. CSS datni ieteicams saglabāt tajā pašā vietā, kurā atrodas html datne. CSS datne iekļaušana tīemkļa lapā redzama attēlā:


CSS apraksts tīmekļa lapas galvas daļā starp tagiem Head 

Šajā gadījumā CSS kods tiek ievietots tagos STYLE - skat. attēlu.


Objekta noformējuma CSS lietošana

Šajā gadījumā CSS definē paša noformējamā objekta kodā, izmantojot STYLE - skat. attēlā rindiņu ar "<p style=..."



Veiksmi cīņā ar HTML un CSS kodiem!

****************************************

Prezentācija par CSS


 Uzdevumi:
  • apskatīt piedāvātos materiālus;
  • atvērt W3schools  materiālu par CSS - saite;
  • iepazīties ar CSS Home un CSS Syntax .nodarbību saturu;
  • dotos piemērus pārbaudīt darbībā (mainot dažādu vērtības, nodublējot kodu uz Notepad, attiecīgi saglabājot tīmekļa lappusi un atverot pārlūkprogrammā).
       Turpinām iepazīties ar CSS lietošanas iespējām! Ieteicams iepazīties ar materiāliem par CSS  W3schools vietnē, kā arī ar informāciju citās tīmekļa vietnēs, izmēģināt praksē gatavus piemērus un izveidot savus CSS piemērus, notestēt tos. Noteikti ir vērts iepazīties arī ar dažādiem CSS rīkiem, kuri dod iespēju vajadzīgos uzdevumus veikt ātri un tādējādi taupīt laiku. Uzģenerētos koda fragamentus pēc tam var vienkārši ar dublēšanas metodi ievietot vajadzīgajā vietā failā.

Izmantojamie materiāli:
Izmantojamie rīki:
  • CSS ģenerators - saite;
  • iespaidīgs CSS koda ģenerators tiešsaistē - saite;
  • vienkāršs CSS ģenerators - saite;
  • CSS izvēlņu ģenerators - saite;
  • cits jauku izvēlņu ģenerators - saite;
  • CSS Menu Generator - saite;
  • Tabs Generator - saite;
  • CSS spraitu ģenerators - saite;
  • izklājumu ģenerators - saite;
  • CSS diagrammu ģenerators - saite;
  • 15 noderīgi CSS ģeneratori - saite;
  • 20 populāri tiešsaistes CSS rīki - saite;
  • raksts par 50 noderīgiem rīkiem darbam ar CSS - saite;
  • CSS koda ģenerators - saite;
  • CSS portāls - saite;
  • krāsu shēmas - saite.
Citi rīki:
  • EditLive! JavaScript API Demonstration - saite.
Kā lietot šos dažādos CSS koda ģenerēšanas rīkus?
  1. Atvērt vietni ar izvēlēto CSS rīku.
  2. Iestatīt vajadzīgās CSS vērtības.
  3. Uzģenerēt CSS kodu.
  4. Atlasīt un nokopēt nepieciešamo CSS koda fragmentu.
  5. Ielīmēt (Paste) CSS fragmentu tīmekļa lappuses kodā starp tagiem Head vai CSS failā.
  6. Lietot iegūto CSS nepieciešamjās tīmekļa lappuses vietās.


10.kl. "Lappuses parametri. Darblapas izdrukas parametri."

otrdiena, 2010. gada 19. janvāris
Lappuses parametru maiņa MS Excel 2007 vai MS Excel 2010 veicama, izmantojot rīku joslu Page Layout:


Darblapas izdrukas parametrus definē dialoga logā Page Setup, kuru iegūst uzklikšķinot uz pogas Print Titles (MS Office 2000 - 2003 jāizpilda komandas View => Header and Footer vai File => Page Setup):


OpenOffice.org Calc ieprieš minētos parametrus un iestanes maina dialoga logā Page Style (Format => Page) cilnēs Header, Footer un Sheet:


Galveni un kājeni rediģē attiecīgajā cilnē (lapiņā) uzklikšķinot uz Edit, kā rezultātā atveras dialoga logs Header vai Footer:


Veiksmi darbā ar izklājlapā un gatavosimies ieskaitei 27.janvārī!

10.kl. "Loģiskās funkcijas un to lietošana."

Par loģisko funkciju lietošanu izklājlapās var lasīt sekojošos materiālos:
Sagataves uzdevumiem:

6.kl. "Elementāru aprēķinu veikšana izklājlapas tabulā."

Šajā nodarbībā apgūsim:
  • automātisku skaitļu virkņu, nedēļas dienu un mēnešu nosaukumu ģenerēšanu;
  • formulu veidošanas likumus;
  • aprēķinus, izmantojot vienkāršas matemātiskas formulas;
  • skaitļu summu automātisku aprēķināšanu.
Sagataves uzdevumiem:

11.kl. "Galvenie tīmekļa lappusi aprakstošie tagi."

pirmdiena, 2010. gada 18. janvāris

Stundas mērķis -  apgūt tīmekļa lappusi aprakstošo tagu sintaksi un lietošanu.

Uzdevumi
(sasniedzamie rezultāti):
·
iegūt izpratni par tīmekļa lappuses struktūru;
· noskaidrot tīmekļa lapppusē ievietojamos objektus;
· noskaidrot un apgūt tagu pieraksta principus;
· apgūt lappuses galveno daļu aprakstīšanas tagus;
· uzrakstīt HTML kodu lappusei par Auces novadu (skat. Auces_novads.doc)!
 

Saikne ar standartu 11.klases programmā:
·
Hiperteksta iezīmēšanas valoda (HTML) un tajā veidotu dokumentu struktūra, galvenie tīmekļa
lappusi aprakstošie tagi.
· Tīmekļa lappuses parametru iestatīšana.

HTML - HyperText Markup Language jeb valoda, kurā ar vadības simbolu, kurus sauc par tagiem, palīdzību nosaka pārlūkprogrammā attēlojamās tīmekļa lappuses struktūru un izskatu (LIIS materiāls).

HTML dokumenta struktūras pamatsastāvdaļas ir objekti:
  • virsraksti; 
  • tabulas; 
  • rindkopas;
  • saraksti.  
HTML tagus izmanto, lai norādītu interneta pārlūkprogrammai, kā šos objektus parādīt.Tīmekļa lappusēs var ievietot arī grafiskos un multimediju objektus:
Tīmekļa lappuses galvenos tagus parāda nākošie attēli:




Citi svarīgi tagi (skat. arī W3C vietni):


Rīku komplekti darbam1. Piezīmju bloknots (Notepad) un pārlūkprogramma
2. Notepad++ un pārlūkprogramma
3. Tiešsaistes servisi:

Darba tehnoloģija

1. Atvērt piezīmju bloknotu (Notepad)!
2. Ievadīt atverošo un noslēdzošo tagu HTML:
          un beigu rindā
     

3. Saglabāt ioto tīmekļa lapas sagatavi:
  • File => Save As;
  • ievadīt datnes vārdu: nosaukums.html;
  • nomainīt datnes tipu: Saves As Type => All Files;
  • Save
4. Atvērt saglabāto tīmekļa lapu pārlūkprogrammā un pārliecināties, ka lapa tiek atainota korekti!
5. Ja ir kļūmes, tad izlabot HTML kodu, atkārtoti saglabāt (CTRL + S) vai File => Save!
6. Pārlūkprogrammā lapu ielasīt atkārtoti (Reload), apskatīt!
7. Turpināt html koda rediģēšanu un pilnveidi!


Neliels tīmekļa laps fragments



Citas praktiskiem darbiem ieteicamas programmas:
  • Notepad un kāda pārlūkprogramma (Firefox, Google Chrome, IE);
  • Notepad++ un kāda pārlūkprogramma (Firefox, Google Chrome, IE);
  • SeaMonkey ar iebūvēto HTML redaktoru Composer.
Notepad++




 SeaMonkey Composer


Izmantotais attēls ir atrodams šajā vietnē (attēla saite) - http://www.zemgaletourism.lv/bildes/Vecauces_pils_5.jpg!  Attiecīgajā attēla tagā, lietojot attēlu no kādas vietnes, ieteicams kā attēla avotu (src="***") izmantot saiti! Izmēģiniet praktiskajā darbā abus variantus!

SeaMonkey Composer html koda rediģēšanas režīmā:





Uzdevumi treniņam:
  • pārbaudīt šeit dotos HTML valodas tagus, ievadot līdzīgus piemērus kādā vienkāršā teksta redaktorā (Notepad, Notepad ++, Notepad 2008 vai citā - piemēram, Blogger jauna raksta sagatavošanas redaktorā);
  • saglabāt piemērus ar paplašinājumu html;
  • saglabātos piemērus aplūkot pārlūkprogrammā ( Firefox, Opera, IE vai Safari);
  • Izanalizēt attēlā ar Notepad++ logā redzamo html kodu;
  • izveidot nelielu noderīgu saišu sarakstu (izmantot saraksta tagus);
  • pamēģināt kombinēt tagus teksta izskata uzlabošanai, saglabāt pārveidotos piemērus un aplūkot tos no jauna.
*** Ieteikums! Sākumā var būt apgrūtinoši iegaumēt tagus, to pieraksta sintaksi, tādēļ ir iespējams paralēli lietot kādu piemērotu bezmaksas tīmekļa lapu redaktoru, kurā daudzus lapas elementus var izveidot vizuālā vidē, bet tagus atrast koda rediģēšanas režīmā.

*** Noteikti vēlams paralēli lietot vietni W3Schools.com!

Dažas ieteicamas programmas tīmekļa lappušu rediģēšanai:
  •  Notepad ++ - vienkārša un lieliska programma koda rediģēšanai;
  • ērti lietojams SeaMonkey (pārlūkprogramma ar iebūvētu html koda redaktoru Composer);
  • Amaya - pilnībā nodoršina atbilstību W3C standartiem (saskarne nepierasta);
  • NetObjects Fusion Essentials - lieliska tīmekļa lapu un vietņu veidošanas sistēma;
  • Kompozer - šo programmu iesaka K.Veiss (vsk. māc. grāmatas autors);
  • TheSiteWizard - tiešsaistes rīks tīmekļa lapu veidotājiem (šeit daudz noderīgas informācijas);
  • CofeeCup Free Stuff - veirākas lieliskas bezmaksas programmas (web redaktors, izvēlņu ģenerators, bezmkasas izglītības paka, u.c.);
  • PageBreeze Free HTML Editor - ļoti labs un vienkāršs tīmekļa lapu redaktors, kurā var strādāt dizaina un koda rediģēšanas režīmos;
  • Alleycode - šeit atrodama virkne bezmaksas rīku tīmekļa lappušu veidošanai;
  • FirstPage 06 - lielisks rīks, tikai reti tiek atjaunināts;
  • WebPlus SE -ļoti interesanta un jaudīga tīmekļa lappušu veidošanas programma;
  • Komodo Edit - tiek rekomendēts kā viens no labākajiem rīkiem;
  • Aptana Studio - lieliska vide web aplikāciju būvei (atbalsta AIR 2.0 beta);
  • NetBeans - vide, kura atbalsta milzīgu skaitu tehnoloģiju un paredzēta aplikāciju izstrādei dažādām vidēm;
  • Eclipse - arī visai iespaidīgs rīks;
  • Microsoft rīki - vesela kolekcija, bet nav bezmaksas (iz izmēģinājuma versijas);
  • Adobe rīki (Products) - iz izmēģinājuma versijas;
  • Xara rīki - izmēģinājuma versijas.
Protams, ir arī virkne tiešsaistes rīku - skat. šīs pašas vietnes izvēlni Web rīki labajā malā.
---------------------------------------------------------------------------------------------------------------

5.kl. "Iepazīšanās ar prezentāciju lietotni un gatavu prezentāciju piemēriem."

svētdiena, 2010. gada 17. janvāris
Prezentāciju piemēri ievadam:

Kas tad ir prezentācija?

Datorprezentācija (desktop resentation) - pasniegšanas grafikas programmās esošās slīdrādes iespēju izmantošana, lai displeja ekrānā izspīdinātu diagrammas vai citu ilustratīvu materiālu, kas atrodas datorā.


Prezentācijas jēdziens - par prezentāciju var uzskatīt ilustrētu noteiktas tēmas izklāstu (teorētiska materiāla izklāsts, praktiskās darbības vai pētījuma atspoguļojums, projekta realizācijas atspoguļojums, parādības vai iekārtas darbības demonstrācija, uzdevuma risinājuma demonstrācija, utt.) Prezentācija var būt realizēta ar tehnisko līdzekļu palīdzību vai bez tiem.
Prezentāciju demonstrēšanas tehniskie līdzekļi:
·  Diaprojektori, epiprojektori (diafilmas, diapozitīvi, sagataves uz papīra);
·  Kodoprojektori (sagatves drukā uz plēvēm, liela auditorija);
·  Datori (demonstrē prezentācijas failu datora monitorā - dinamika, augsta kvalitāte, 1-3 cilvēki vienlaicīgi);
·  LCD paneļi (projicē tieši no datora ekrāna uz parasto ekrānu, bet vajadzīgs labs kodoprojektors un aptumšota telpa, var izmantot dinamiskos efektus, auditorija 10 - 30 cilvēki);
·  Mulitivideoprojektori (projicē tieši no datora ekrāna uz parasto ekrānu, kvalitāte maksimāla un iespējas pilnīgas - līdz pat video izmantošanai, taču ļoti dārga tehnika);

Prezentācijas slaidu nomaiņas veidi:
·  Manulālais (rokas režīms -ar peles pogas klikšķiem);
·  Automātiskais (pēc noteikta laika);
·  Jauktais (mauālais + automātiskais)

Prezentāciju programmas (raksts Wikipedia):

Prezentācijas var sagatavot arī kā ideju (prāta) kartes (Mind maps):


7.kl. "Algoritmu pamatstruktūras, blokshēmu elementi."

Materiāli darbam ar teoriju:
Uzdevumi:
  • Sastādīt lineāru algoritmu bagātību meklētājam (Skat.attēlu!), to pierakstot strukturētā formā!
  • Izveidoto algoritmu pārveidot blokshēmas formā!
  • Programmā ZR_Logo (ZR_Logo lejupielāde bet te komandu saraksta lejupielāde) sastādīt lineāru algoritmu bagātību meklētājam (Skat.attēlu pie "Bagātību meklētāja piedzīvojumi"!), pieņemot, ka 1 solis ir vients punkts, bet rakšanu imitēt ar nelielas spirāles uzzīmēšanu ceļa galapunktā! Algoritmu pārbaudīt darbībā! Rezultātu parādīt skolotājam!
  • Programmā ZR_Logo  izveidot algoritmu, kas darba laukuma stūros uzzīmē 4 dažādas figūras ar atšķirīgu krāsu un līniju biezumu!
  • Programmā ZR_Logo  izveidot algoritmu, kuru izpildot tiek uzzīmēts sniegpārsliņu raksts. Pieņemt, ka sniegpārsliņas pamatfigūrā ir 6 stari. Minimālais pamatfigūru skaits - 7 figūras (katra stara galā vēl viena sniegpārsliņas pamafigūra - skat.attēlu materiāla beigās)!
Uzmanību! Ja kāds skolēns pilda uzdevumus mājās, tad var rezultātu nokopēt ar taustiņu PrintScreen, ielīmēt to, piemēram, Paint, nogriezt liekās malas un saglabāt zibdiskā ("flešiņā') vai nosūtīt skolotājam uz e-pastu (Auces vsk. skolēni - uz informat.avsk@gmail.com).


Bagātību meklētāja piedzīvojumi

Reiz gadījās tā, ka kādam puisim izdevās atrast karti, kurā bija aprakstīts un iezīmēts, kā atrast vēl joprojām neatrastas un neapjaustas bagātības. Daudzi bija jau meklējuši, bet nekā. ("Aplauzās!"). Vai tiešām uzdevums ir tik neizpildāms?
Jūsu uzdevums uzrakstīt strukturētajā pierakstā tādu algoritmu, kurā būtu ievēroti kartē un tajā izdarītajās piezīmēs dotie norādījumi!

Sniegpārsliņa



Kas jāzina ieskaitē?
  1. Kas ir algoritms, komanda un programma?
  2. Kādām jābūt algoritmu komandām?
  3. Kādas ir algoritmu pamatsruktūras (veidi)?
  4. Kādi ir populārākie agoritmu pieraksta veidi?
  5. Jāzina algoritmu piemēri.
  6. Jāzina dažas programmas, kuras paredzētas darbam ar algoritmiem.
  7. Jāprot izveidot un pierakstīt vienkāršus algoritmus strukturētā un blokshēmu formā.
  8. Jāspēj izpildīt vienkāršus lagoritmus.

Statistika