Activitatea nr.6: 27.10-31.10

SARCINA DE LUCUR: 
Includeti in lucrarea d-voastra urmatorul cod si adaptati la continutul site-ului

Elementul BUTTON este folosit pentru a introduce in formular un buton care ofera posibilitati de a fi afisat intr-o maniera ceva mai pretentioasa. Si asta deoarece, spre deosebire de elementul INPUT, acesta are un continut care poate sa cuprinda text sau imagine. E bine ca imaginile sa fie insotite de un text alternativ pentru ca afisarea butoanelor in fereastra programului de explorare Web sa poat fi concludenta si in cazul in care imaginile nu vor fi afisate. Marcarea acestui element necesita atat eticheta de inceput cat si eticheta de sfarsit a controlului corespunzator.

Exemplu:Folosirea elementului BUTTON

<form action="program2.exe" name="form2" id="form2">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
         <td>Introduceti numele cautat</td>
          <td><input type="Text" size= "40"></td>
         <td><button name="Cauta" value="cauta" type="submit">Cauta</button></td>
</tr>
</table>
</form>

Meniuri derulante: Un meniu derulant este o lista de optiuni prestabilite din care utilizatorul poate sa aleaga una sau mai multe valori, in functie de modul in care meniul respectiv a fost declarat in interiorul formularului. Marcarea meniului se realizeaza cu ajutorul elementului SELECT. Fiecare optiune a meniului respectiv se marcheaza cu ajutorul elementului OPTION. Un meniu trebuie sa contina cel putin un element OPTION.

In cazul in care lista contine un numar mare de optiuni, acestea se pot grupa cu ajutorul elementului OPTGROUP.

Exemplu:Folosirea elementului

<form action="prog3.exe" name="form3" id="form3">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
          <td>Orasul:</td>
          <td><input type="text" name="TextOras" size="20"></td>
</tr>
<tr>
          <td valign = "top">Judetul</td>
          <td>
          <select name="JudetSelect" id="JudetSelect">
                   <option>Alba
                   <option>Arad
                   <option>Bacau
                   <option>Bihor
                   <option>Bistrita-Nasaud
                   <option>Brasov
                   <option>Braila
                   <option>Buzau
                   <option>Calarasi
                   <option>Cluj
                   <option>Altele...
          </select></td>
</tr>
<tr>
          <td><button type = "submit" value = "gata">O.K</button></td>
          <td><button type = "reset" value = "sterge">Sterge</button></td>
</tr>
</table>
</form>

Activitatea nr.5: 20.10-24.10

Realizati un un site EDUCATIONAL/ FIRMA in HTML ce respecta cerintele de mai jos:

1. Minim 5 pagini

• in  pagina vor fi incluse linkuri. 
• in  pagina va fi inclusa o imagine si  un clip video.

2. Minim 5 articole grupate in minim 2 categorii:
– Categoria 1 (“Cursuri” / "SERVICII") cu minim 3 articole
– Categoria 2 (“Scoala” / "FIRMA" ) cu minim 2 articole
– Cel putin 3 articole vor contine linkuri catre alte adrese de pagini web.
– Cel putin un articol va contine un clip video.
– Cel putin un articol va contine o imagine.


3. Minim 5 linkuri externe grupate pe minim 2 categorii:
– Categoria 1 (“Cursuri”/ "SERVICII") cu minim 3 articole
– Categoria 2 ( “Scoala”/"FIRMA") cu minim 2 articole

Linkurile vor fi diversificate:
– se deschid in aceeasi fereastra sau in ferestre diferite
– au sau nu au descrieri
– unele descrieri sunt identice cu numele legaturii, iar altele nu

4. O tema in concordanta cu subiectul ales
Atentie:
– legaturile (linkurile) vor fi aplicate unor cuvinte sau siruri de cuvinte din text
– se va puncta si formatarea textului si aranjarea in pagina a celorlalte elemente (imagini, clipuri video)
– fiecare pagina/articol va contine cel putin 150 de cuvinte, creatie unica (exclus copy&paste de pe alte site-uri).

Termen de predare: 
23-28.11.2014 -  in functie de programare orar

Materiale utile:

HTML Tutorial - W3Schools

www.w3schools.com/html/ Traducerea acestei pagini

Free HTML CSS JavaScript DOM jQuery XML AJAX Angular ASP .NET PHP SQL tutorials, references, web building examples.

 INDICATII PENTRU REALIZAREA PROIECTULUI:

   Sa realizam impreuna un mic site, iar ca editor al codului sursa folosim Notepad.

Pentru pozitionarea elementelor distinctive ale paginii pot fi folosite tabele sau CSS. In exemplul nostru vom folosi tabelele.

Layout-ul paginii va fi:
- latime totala 750 px
- sus vom avea un header
- meniul in stanga, latime 150 px
- continutul paginii in drepta
- jos vom avea un footer

Vom crea un tabel cu latime 750 px, avand 3 randuri, iar pe fiecare rand cate 2 celule. Pe randul 1 si 3 unim cele 2 celule.

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2">Header</td></tr>
<tr><td width="150">Meniu</td><td width="600">Continut</td></tr>
<tr><td colspan="2">Footer</td></tr>
</table>

Inaltimea fiecarui rand va fi stabilita de elementul cel mai inalt (imagine sau text), sau prin introducerea atributului height in fiecare element td. Stabilim pentru randul 1 si 3 inaltime 50 px, iar pentru randul 2 inaltime 200 px.
Folosind CSS vom formata cele 4 celule in mod independent inserand in fiecare element td atributul class cu valoarea header, meniu, continut si footer.

Utilizarea CSS-ului extern o vom face inserand urmatoarea linie in zona head a paginii.

<link rel="stylesheet" type="text/css" href="site.css"> 

In fisierul CSS extern stabilim pentru fiecare celula in parte culoarea si marimea fontului, culoarea fundalului, pozitionarea pe verticala sau orizontala a continutului, etc.

Puteti vedea fisierele finale html si css pentru pagina creata.

Voua va revine ultima etapa, adaugarea informatiei in fiecare celula. Pentru dezvoltarea in continuare a paginii puteti introduce in fiecare celula (in locul textului corespunzator: Header, Meniu, Continut, Footer) alte etichete html (liste, tabele, formulare) care pozitioneze informatia dorita.

Header-ul poate contine informatii despre tema site-ului sub forma text sau imagine (logo sau banner). In meniu introduceti o lista de link-uri catre celelalte pagini ale site-ului. Footer-ul poate contine link-uri catre: pagina de contact sau pagini externe.
Pentru a pastra layout-ul prezentat, celelalte pagini ale site-ului le obtineti astfel:

Metoda 1: copiind fisierul index.html, apoi paste si il redenumiti, urmand sa modificati continutul functie de tema noii pagini.
Acest mod de obtinere a noilor pagini este cel mai simplu, dar nu cel mai eficient, fiind recomandat incepatorilor.
Metoda 2: utilizarea cadrelor, prin care fiecare zona o transformati in cadru, in acest fel de la o pagina la alta doar cadrul continut se schimba.
Metoda 3: dupa ce este definitivat layout-ul paginii index.html redenumiti fisierul in index.php
Din codul final al paginii index.php decupati (cut) codul pentru zona Header si inlocuiti cu:

<?php
include header.php;
?>

apoi faceti paste intr-un nou fisier denumit header.php.
Repetati operatia pentru zonele Meniu si Footer.

La final vom avea 4 fisiere: index.php, header.php, meniu.php si footer.php

• Daca doriti inca o pagina (de exemplu pagina Contact) copiati fisierul index.php si redenumiti-l contact.php apoi particularizati-l modificand continutul etichetei title si continutul din zona Continut.

• Daca veti dori sa modificati de exemplu meniul veti modifica fisierul meniu.php iar efectul se va vedea in toate paginile site-ului.

Activitatea nr.4: 13.10-25.10.2014

 TERMEN PREDARE PROIECT PARTIAL: 28 .10.2014

Sarcina de lucru:

1. Realizati un  proiect pentru finantarea  unui site didactic/ pt. o firma.
2. Realizati structura site-ului

Incercati pentru punctul 1 sa consultati materialele:

• Managementul proiectelor ro (2)

• CONCEPEREA ŞI ELABORAREA UNUI PROIECT

• CUM SCRIU UN PROIECT?

• Capitolul 2 Planificarea unui proiect

Sesiunea 6 analiza problemelor si nevoilor from raduoncescu

Activitatea nr.3:

 Sarcina de lucru:

Realizati o schita de proiect prin care  proiectati un site didactic/ pt. o firma.

Incercati pentru inceput sa raspundeti la urmatoarele intrebari:

1. De ce este necesar un site didactic pentru elevii clasei a XIIa/ pt. o firma?
2. Care este grupul de elevi/ grupul tinta vizat? 
3. Care sunt etapele necesare realizarii proiectului?
4. Care este durata de timp pentru realizarea lui?
5. Scurta planificare a activitatilor pentru perioada propusa.

Materiale pentru consultare:

• CONCEPEREA ŞI ELABORAREA UNUI PROIECT

• CUM SCRIU UN PROIECT?

• Capitolul 2 Planificarea unui proiect

 Sfaturi utile:

Etapele dezvoltarii unui proiect software-site

Procesul de implementare și dezvoltare constă în parcurgerea următoarelor etape:
1. Identificarea scopurilor și obiectivelor

Primul pas în inițierea fiecărui proiect este stabilirea unei întâlniri pentru o mai bună comunicare și înțelegerea cât mai detaliată a nevoilor site-ului dumneavoastră. 

Colectarea de informații despre continutul site-ului, obiectivele, informații despre produsele și/sau serviciile oferite, precum și procesul de consultare și consiliere sunt etape esențiale în dezvoltarea unui site web.

 
2. Planificarea unei strategii de dezvoltare

Realizarea unei strategii de dezvoltare și a unui plan (document de specificații tehnice) în baza informațiilor cumulate, pentru a sublinia și detalia toate aspectele importante legate de proiectul nostru. Un plan bun garantează succes pe termen lung.  

 
3. Conceptul de design 

Odată ce specificațiile tehnice ale proiectului au fost stabilite de comun acord și aprobate urmează realizarea propunerilor de design. 

Design-ul site-ului va fi conceput în baza unui interviu pe care îl veți completa cu informațiile care le considerați necesare înțelegerii așteptărilor și viziunii dumneavoastră asupra aspectului grafic al proiectului. 

4. Proiectare și implementare

Etapa imediat următoare aprobării conceptului grafic este construcția propriu-zisă a aplicației conform planului de proiect stabilit. 

5. Procesul de testare a aplicației

Înainte ca site-ul să fie postat on-line, va trece printr-o etapă de testare amănunțită, pentru a se asigura compatibilitatea cu diferite browsere, funcționalitatea aplicației și ușurința în utilizare.