De ce trebuie sa-ti faci un site in decembrie?

Decembrie este cunoscuta ca fiind luna cadourilor. Traditiile si obiceiurile din fiecare colt al lumii prind forma, iar bucuria pune stapanire pe fiecare in parte. Intrebarea este de ce sa puneti bazele unui site,  in decembrie?

In primul rand, incepem prin a ne gandi ce ne dorim noi de Craciun. Asadar, produsele, accesoriile si nu numai trebuie sa le putem comanda chiar din propria casa. Prin urmare, puteti da startul unei mici afaceri online, iar noi va putem ajuta. Pentru ca fiecare vine la pachet cu promotiile lui, nici noi nu intarziem sa ne facem remarcati.

Insa, sa incepem cu inceputul. Traim intr-o era a tehnologiei, a vitezei, iar cateva click-uri pot face diferenta.  Informatia se gaseste rapid, iar dumneavoastra puteti deveni unul dintre informatorii de succes. Totusi, inainte sa va apucati de site, nu  va culcati pe urechea ca vecinul sau nepotul va pot ajuta. Exista multe riscuri, printre care sa faceti o investitie mare si inutila.

Primul lucru si cel mai esential este sa ne contactati, pentru ca in prag de sarbatori noi va oferim servicii de inalta calitate, la preturi promotionale, accesibile oricarui buzunar. Va vom prezenta pe scurt de ce ar trebui sa aveti un site in luna decembrie:

  • Pentru ca in decembrie se fac multe cadouri, asadar, noi va facem cadou serviciile noastre la un pret avantajos, iar la randul dumneavoastra oferiti cadouri unui public cat mai extins;
  • Daca deja aveti o afacere, noi va ajutam sa o faceti cunoscuta, conturandu-va o imagine puternica si in lumea virtuala;
  • Pentru ca incepe nebunia cadourilor, iar site-ul dumneavoastra poate fi o solutie rapida si practica pentru oamenii al caror timp este din ce in ce mai limitat;
  • Pentru ca un site pus la punct si adaptat la vremurile actuale inseamna o conectivitate activa pe toate retelele de socializare.

Si daca nu v-am convins cu luna decembrie, atunci ganditi-va ca puteti sa va faceti aparitia pe piata intr-un mod inedit in urmatorul an. Ba chiar mai mult, site-ul este un angajat neobosit, poate lucra si in noaptea  de Craciun si de Anul Nou. Vanzarile pot creste cu fiecare zi mai mult, iar afacerea dumneavoastra se poate extinde vizibil.

De ce aveti nevoie de un site pentru afacerea dvs

Sa o zicem drept! Ati vrut, la un moment dat, sa va faceti site. Chiar ati vorbit cu cineva, ati dat, poate, si un avans, dar inca nu sunteti online. Nu v-ati mai risca sa cheltuiti alti bani, nu aveti nici timp sa adunati informatii si poze pentru site, si, pana una alta, afacerea dvs a functionat foarte bine pana acum si fara un site.

Nu va poate garanta nimeni ca un site va aduce clientii de unul singur. E nevoie de un produs sau de servicii bune, de preturi bune, de detalii despre afacere, de promovare, etc., pentru a determina clientii sa cumpere de la dumneavoastra. Dar va putem garanta ca, neavand site, fiecare potential client care a cautat dupa produsul/serviciul dvs pe google, a ajuns pe pagina unui concurent si, in majoritatea cazurilor, a si cumparat de la acela si nu de la dumneavoastra!

Si, ca sa va dovedim, mergeti pe Google si scrieti produsul sau serviciul oferit. Cautarea va va arata lista siteurilor concurentilor. Daca, pe langa denumirea produsului sau a serviciului, scrieti si localitatea in care activati, veti vedea firmele locale concurente. Evident, aceleasi informatii sunt vazute si de clientii pe care ii pierdeti, neavand site.

Uitati experientele neplacute si costurile enorme! Un site va costa cat o ceasca de cafea, in fiecare zi. Dati-ne un telefon si bem impreuna o cafea, in timp ce va pregatim afacerea pentru mediul online!

Ce este SEO

Siteul este cartea de vizita online a afacerii, dar nu este suficient pentru a fi gasiti pe internet. De multe ori, daca nu il facem corespunzator, e ca si cum nici nu ar exista. Si… cum se zice, daca nu te gaseste Google, nu existi, ca sa existam pe internet, trebuie sa avem siteul optimizat pentru Google.

La acest aspect se refera SEO – Search Engine Optimization. Ca sa fim corecti, putem spune ca SEO se refera la optimizarea pentru motoare de cautare, dar sa nu ne pacalim. Suntem in era Google si trebuie sa-i dam Cezarului ce-i al Cezarului!

Optimizarea este un proces dinamic, cu sute de factori de luat in seama, de la aranjarea cuvintelor in continut, pana la activitatea siteurilor concurente. De aceea, nu exista nicio garantie de succes. Putem doar spune ca, facand ceea ce e recomandat, avem sanse mai mari sa urcam siteul in topul rezultatelor Google.

Practic, pentru fiecare factor abordat, Google acorda siteului un punctaj. La final, la cautarile utilizatorilor Google, siteurile sunt afisare in ordinea descrescatoare a punctajelor, pentru cuvintele cheie respective.

Concret, am optimizat siteul www.soft-build.com, pentru termenul “software timisoara“, care este, de fapt, un cuvant cheie (chiar daca este grup de cuvinte). Google a punctat siteul, gasind cuvantul cheie si in tagurile meta, in continutul paginii, la descrierea unor poze, astfel ca, atunci cand cautam acest termen, siteul va aparea pe un frumos loc 4.

Durata optimizarii este de la o luna la un an, in functie de cat de folosit este termenul. Tocmai de aceea, am introdus un abonament de optimizare pentru clientii nostri. Pretul acestuia pleaca de la 200 de lei, pentru 3-4 termeni optimizati, dar poate creste, daca avem de optimizat multi termeni.

Daca aveti intrebari sau doriti sa discutam despre cum va putem optimiza siteul, va invit la o cafea!

De ce e bine sa-ti faca Soft Build siteul

Multi clienti vin la noi cu un site existent, facut de fiul din clasa a X-a de la Info sau de un vecin de bloc, care ii tot amana, dupa ce a incasat banii.  Cel mai rau este cand vin cu siteul facut de alte firme, cu probleme in cod, fara nici cea mai mica urma de optimizare si fara manual de utilizare.

E firesc sa nu stii ce sa ceri de la o firma de web design, in calitate de client. Pana la urma, clientul vine cu nevoia de a avea site, de multe ori nu cunoaste partea tehnica a procesului. Si nici nu ar trebui  sa cunoasca asta! La Soft Build, intelegem ca e de datoria noastra sa ne ocupam de partea tehnica si sa va oferim cele mai bune servicii, de la realizarea ofertei, pana la primul click pe care il veti da pe site! Intelegem si reticenta pe care o aveti fata de domeniul nostru si incercam sa il facem cat mai accesibil.

De aceea, va prezentam cateva puncte pe care are trebui sa le contina o oferta de pret de realizare site si pe care Soft Build le pune in discutie, la orice ofertare:

1. Numarul de pagini incluse in pret si care sunt acestea

De obicei, paginile incluse in oferta de pret sunt acasa, despre noi, produse/servicii, galerie si contact. In functie de afacerea dvs poate va e mai utila o pagina de rezervari, sau de cerere de oferta de pret. Specificati exact paginile de care aveti nevoie sau descrieti activiatatea firmei si permiteti-ne sa va consiliem.

2. Modul in care se pot modifica paginile

Este posibil sa aveti nevoie, la un moment dat, sa adaugati sau sa stergeti continut de pe pagini. Stabilim de la inceperea colaborarii cum se vor modifica paginile: veti avea o sectiune de administrare sau va trebui sa platiti modificarile, atunci cand vor fi necesare? In cazul in care nu aveti multe modificari sau nu doriti sa folositi o sectiune de administrare, cereti sa fie scoasa din oferta, puteti sa folositi acesti bani pentru optimizarea siteului. Daca veti avea modificari frecvente, fie optati pentru o sectiune de administrare, fie pentru un abonament lunar de mentenanta a siteului.

3. In cate limbi va fi disponibil siteul

Daca exista posibilitatea sa doriti siteul si in alte limbi decat romana, este bine sa specificati de la inceperea colaborarii, pentru a pregati deja codul. Este mult mai simplu sa programam de la inceput functionalitatea, decat sa o modificam mai tarziu.

4. Ce tip de design va fi folosit

Layoutul siteului dumneavoastra trebuie sa fie unic. Poate avea acelasi numar de coloane ca alte siteuri, poate avea aceeasi structura, in sensul de a pune meniul sus, de a afisa pe stanga un text, pe dreapta poze, dar este foarte important ca siteul sa aiba un aspect adaptat siglei si domeniului firmei dumneavoastra. Va garantam layouturi corespunzatoare imaginii firmei. In plus, modificam propunerea de layout pana vom ajunge la un numitor comun. Dumneavoastra trebuie sa fiti cel multumit de aspectul paginii. Este imaginea firmei pe internet!

De asemenea, in ofertele Soft Build, realizarea designului este inclusa in pret!

5. Ce servicii de optimizare sunt incluse in oferta de pret

Serviciile de optimizare sunt, de obicei, separate de cele de realizarea siteului, dar orice site ar trebui sa vina cu optimizare de baza, fiind deja facuta validarea codului, denumirea corecta a paginilor si a tagurilor meta. Ofertele noastre includ automat optimizare de baza, dar oferim si servicii de optimizare Google (SEO) si separat.

6. Domeniul si gazduirea

Unul dintre costurile ascunse ale unui site este reprezentat de domeniu, sau adresa de internet. Multe firme “uita” sa specifice faptul ca acestea nu sunt incluse in pret (sau ca sunt incluse doar un an), amintind aspectul doar dupa semnarea contractului.

Orice site are nevoie de o adresa pe internet. In functie de buget, puteti cumpara un domeniu .ro, care este valabil pe viata, sau un domeniu .com, care trebuie innoit in fiecare an. Preturi gasiti aici.

Gazduirea se refera la locatia unde sunt tinute pe server fisierele siteului. Cateodata, ea este inclusa in pret, in primul an, dar, in general, se plateste anual. Avand gazduire, pe langa website, mai sunt folosite si adresele de email, dar si alte utilitare oferite de firma de hosting. Am intalnit situatii in care clientii au cumparat pachete de gazduire foarte scumpe, nenecesare, pentru ca acestea le-au fost oferite. Optati pentru o gazduire ieftina, care ofera, printre particularitati, PHP, baze de date MySQL (daca aveti site cu administrare) si adrese de email. Noi oferim pachetul Standard pentru situatia in care siteurile nu sunt cu administrare si pachetul Mediu pentru majoritatea celorlalte siteuri. Pachetul Ultra se preteaza magazinelor online sau siteurilor foarte mari. Mai multe detalii, aici.

7. Manual de utilizare a administrarii

In cazul in care ati optat pentru un website dinamic, cu administrare, este obligatoriu sa aveti si un manual de utilizare, in care sunt descrise procedurile de lucru. Soft Build ofera un manual, adaptat pentru fiecare website si pentru cerintele fiecarui client in parte.  Iar manualul este gratuit!

8. Garantii

Daca apar erori in site din cauza unei erori de programare din cauza noastra, corectiile sunt facute gratuit, oricand. Daca, din greseala, ati modificat ceva la site ce nu trebuia, in primele 12 luni de la publicare, corectiile sunt gratuite.

Orice oferta de pret ati primit, daca nu prezinta aspectele enumerate, cereti-le in mod expres. Este foarte important sa sititi de la inceput ce implica realizarea siteului si pe ce cheltuiti banii. Iar, pentru a discuta despre nevoile afacerii dumneavoastra, lasati-ne un mesaj si va invitam la o cafea!

Mic tutorial de Photoshop

Folosesc Photoshop de cativa ani. Nu stiu sa fac cele mai tari chestii, dar stiu sa fac un layout si sa il pun in HTML.

Am instalat Adobe Photoshop CS4, dar oricare varianta e buna, ca nu folosesc ultimul racnet in materie de tooluri.

Photoshop lucreaza cu layere. Sa zicem ca punem masa. Masa este un layer(strat). Fata de masa va fi layerul de peste. Fiecare farfurie este un alt layer. O farfurie intinsa e un layer care sta sub layerul reprezentat de farfuria de supa. Asa e si in PS. Layere se suprapun, se ascund, se intesecteaza.

A propos de tooluri, cele mai utile sunt:

– selector de layere
– tool de decupare
– zoom
– guma de sters
– text
– brush (pensula)
– color picker – selectam o culoare de pe imaginea curenta
– crop – taie o parte din imaginea curenta, stergand restul
– magic wand – selecteaza anumite zone, cu culoare identica sau aproape de culoarea selectata
– lasou – decupeaza neregulat
– dreptunghi

Toolurile care au o sagetica in coltul din dreapta, jos, au si alte tooluri “surori”. Daca dam click dreapta pe ele, nu se deschide un meniu cu acestea din urma.

Foarte util este toolul de “feliere” – Slice Tool. Practic, taie anumite parti din imagine, generand imagini mai mici si o sa vedem cum se face intr-un post viitor.

Mai sunt si toolurile de forme predefinite, pe langa cel de dreptunghi.

Atunci cand dam click pe un tool, in partea de sus a ecranului va aparea un meniu contextual, pentru diverse alte setari.

Facem un document nou: File->New si setam latime si inaltime. Pentru un site, va trebui sa calculam latimea in functie de rezolutia monitorului pentru majoritatea dintre vizitatori. Spre exemplu, daca facem un site pentru matrimoniale, cautam pe www.trafic.ro dupa cuvantul “matrimoniale”. Primul loc e ocupat de siteul anuntul.ro, dar acesta nu e specializat pe matrimoniale, deci primeste vizite si din alte domenii. Urmatorul este matrimoniale.ro, la ale carui detalii ne si uitam.

Coboram in partea stanga, jos, si dam click pe “Rezolutie”, din boxul “Sistem”. Vedem ca majoritatea vizitatorilor necesita minim 1024 px latime, sau rezolutii mai mari. Inseamna ca siteul nostru va trebui sa intre in 1024 px. De fapt, mai putini. De ce? Mai jos avem prima pagina din google.ro, pentru Mozilla Firefox si pentru Internet Explorer.

Daca ne uitam in partea dreapta, o parte din pixeli sunt “mancati” de bara de scroll. Asadar, vom calcula o latime mai mica de 1024px, pentru a evita aparitia scrollului orizontal. 900 px e o latime suficienta. Vom scrie valoarea de 1100, pentru a avea cate 100 px liberi si in stanga si in dreapta si a lucra mai usor. Inaltime poate fi oricat, pentru ca in web, paginile sunt atat de inalte, cat continut e in ele. Punem 700 px, doar ca sa fie.

Ziceam ca lasam spatii in stanga si in dreapta, deci, dupa ce am facut imaginea de 1100 px, ne ducem cu selectorul de layere pe liniarul din stanga, tinem apasat si tragem. Sub mouse va aparea o bara albastra, pe care o ducem pana la 100 px. Mai tragem o bara pana la 1000px. Barele albastre se numesc guidelines. Intre ele, am lasat 900 px, exact cat va fi latimea paginii noastre.

In acest spatiu, punem tot felul de forme. Sa incepem pe pasi:
1. Dam right click pe toolul cu dreptunghiul (rectangle) si alegem Ellipse Tool. Vedem in bara de sus, de unde putem alege si alta forma, alta culoare, etc.
2. Punem mouseul pe foaia alba si tragem pana facem un cerc de dimensiunea dorita.
3. Apasam pe pointer (selectorul de layere). Sus va aparea meniul contextual pentru acesta. Bifam auto-select si selectam layer. Bifam si show transform controls.
4. Dam click pe cercul desenat si apoi ii modificam dimensiunea tragand de una din margini. In meniul contextual trebuie sa apasam pe bifa pentru a pastra dimensiunea noua. Daca nu dorim, vom apasa pe butonul de langa bifa. Daca nu apasam pe nimic, nu vom putea folosi alt tool.

Sa modificam cercul:
1. In partea dreapta a ecranului, ar trebui sa fie lista de layere. Daca nu se vede, apasam F7, pana apare.
2. Cercul nostru se va numi Shape 1. Dam click dreapta pe nume si alegem blending options. Aici incepe distractia.
3. Dam click pe toate itemele din partea stanga si apoi modificam valori in partea dreapta. Pentru ca am deja “preferinte”, voi folosi drop shadow. Aleg unghiul din care bate lumina si dimensiunile pentru umbra. Folosesc apoi bevel and emboss si ma joc cu dimensiunile pana fac un buton dodolit. Dau ok.

Toate proprietatile din blending options sunt spectaculoase si se pot face o gramada de minunatii in PS.

Acum sa trecem la ceva mai serios. Luam poza urmatoare, a unei fete fara machiaj. O deschidem in PS, mergand la meniul File->open.

Evident, o vom machia. Pasii sunt:
1. Ne ducem, in dreapta, la layers. In partea de jos a panelului, sunt mai multe iconite. Apasam pe layer nou/new layer. Acum avem, deasupra, un layer nou, invizibil.
2. Alegem toolul brush si culoarea rosie. Alegem culoarea apasand pe patratelele colorate de la baza listei de tooluri din stanga. Acolo unde sunt buzele, desenam cu culoarea rosie. Daca va e mai usor, folositi zoom, pentru a mari imaginea pana deasupra buzelor.
3. Daca ati depasit conturul, folositi guma.
4. Layerul pe care am desenat buzele rosii se numeste Layer 1. Dam click dreapta pe nume si apoi blending options.
5. In partea stanga a ferestrei, alegem alt blending mode si alta opacitate. Ne jucam cu optiunile pana gasim culoarea potrivita. Ok! Acum e rujata!
6. Facem un layer nou, ca la pasul 1.
7. Alegem brush si culoarea verde (sau oricare alta culoare). Machiem in jurul ochilor si facem blending options pe layer.
8. La fel, cu un layer nou, cu brush negru, putem folosi dermatograf si mascara.
9. Chiar daca nu e ordinea corecta, putem aplica acum un “fond de ten”. Daca vrem ca fondul de ten sa stea sub machiaj, vom da click pe layer si il vom trage sub celelalte.
10. Sa fim fancy, sa punem si un blush! Adica rosu in obraji! Sa vedem ce a iesit!

Inainte                                                                 Dupa

Asta numesc eu machiaj in 5 minute!:))

Tema

1. Incercati toate toolurile din blending options pe un text si pe o forma de stea de serif.
2. Faceti suvite fetei din poza.

DIV vs Table

De cand au aparut <div>-urile, lumea s-a schimbat! E un fel de “Marea Schisma”. Iubitorii <table>-urilor au incercat sa se tina tare pe pozitie si sa nu is tradeze credinta, pe cand ceilalti s-au dat de partea <div>-urilor cu incredere.

Mie mi-a fost tare greu sa trec de la <table> la <div>. Ambele sunt containere, poti pune in ele diverse elemente. Ca si avantaje:

Table – avantaje

  • elementele din el se pot organiza mai bine
  • nu prea apar probleme de compatibilitate intre browsere
  • altele – astept pareri in comentarii

Div – avantaje

  • e mai elegant
  • se  pot suprapune mai bine elementele
  • suporta si layouturi nestandardizate
  • e… web2.0 (echivalentul modei bio-eco de acum)
  • alte avantaje, tot la comentarii, va rog, si am sa le adaug aici

Acum, partea concreta! Sa zicem ca avem un site care arata asa:

Ca sa il facem cu tabele, trebuie sa folosim urmatorul cod:

<table>
   <tr>
    <td colspan="2"> <!-- grupam 2 coloane -->
      Header
    </td>
  </tr>
  <tr>
    <td>
      Meniu
    </td>
    <td>
      Continut
    </td>
  </tr>
  <tr>
    <td colspan="2">
      Footer
    </td>
  </tr>
</table>

Si cu divuri:

<div id="container">
  <div id="header">
    Header
  </div>
  <div id="middle">
    <div id="meniu">
      Meniu
    </div>
    <div id="continut">
      Continut
    </div>
  </div>
  <div id="footer">
    Footer
  </div>
</div>

Iar CSS-ul:
#container{
  position:absolute;
  width:500px;
  left:50%;
  margin-left:-250px;
}
#header{
  width:100%;
  float:left;
}
#middle{
  width:100%;
  float:left;
}
#meniu{
  float:left;
  width:150px;
}
#continut{
  float:right;
  width:350px;
}
#footer{
  width:100%;
  float:left;
}

In principiu, sunt mai multe moduri de a face treaba asta cu div-uri. Din ce am observat eu, cu metoda asta merge pe browsere fara probleme, dar astept si alte metode.

Dupa cum se vede in CSS, am centrat div-ul cu id-ul “container”. Asta e o metoda “desteapta”, care merge in majoritatea cazurilor. Sa vedem inca o data codul:

    position:absolute;
  width:500px;
  left:50%;
  margin-left:-250px;

Intai, il punem in pozitie absoluta pe pagina. Daca ar fi relativa, ar tine cont de celelalte elemente. Pasul 2 e sa punem o latime fixa, in cazul nostru, 500px.
Cand facem left:50%, punem marginea din stanga a div-ului la mijlocul ecranului:

Cu negru e pagina web, iar cu verde este divul nostru.
Cu margin-left:-250px, tragem div-ul 250 px la stanga, astfel incat mijlocul lui sa se suprapuna pe mijlocul paginii web, astfel:

Tema

Sa se faca cu div-uri si cu tabele, folosind si css si imagini, urmatoarele layouturi:

1.

2.

CSS – Cascading Style Sheets

CSS este un standard pentru formatarea elementelor unui document. Avantajele folosirii sunt definirea stilurilor de prezentare intr-un singur loc, modificare foarte usoara si pozitionarea continutului cu mare precizie.

Comentariile in CSS se scriu intre /* si */
/* acesta este un comentariu CSS */

Ca sa introducem cod CSS in pagina, avem doua solutii:
1. direct in sectiunea <head></head> a paginii, adaugand:
<style type="text/css">
/* aici se scrie codul CSS */
</style>

2. apeland un fisier extern, tot in sectiunea <head></head> a paginii:
<link rel="stylesheet" href="adresa fisierului *.css" type="text/css" />

Sintaxa CSS este formata din trei parti: un selector, o proprietate si o valoare.
selector {proprietate: valoare}

Selectorul poate fi:

1. un tag
Cand selectorul e un tag, vom scrie direct numele tagului, astfel:
body {color: blue} /* va face textul din pagina albastru*/
p{text-align:center;
color:red;
} /* in toate paragrafele din pagina (deci oriunde va gasi tagul p) va alinia textul la centru si il va face rosu */

2. o clasa
Putem grupa mai multe elemente intr-o clasa, pentru a le da aceleasi proprietati. Ca sa marcam faptul ca acele elemente apartin unei clase, vom adauga in taguri atributul class:
<p class="textAlbastru">....</p>
<h2 class="textAlbastru">...</h2>
<input type="text" class="textAlbastru"/>
In css vom scrie clasa cu punct inaintea numelui, deci:
.textAlbastru{
color:blue;
}

3. un id
ID-ul este unic, iar atunci cand selectorul va fi un id, inseamna ca aplicam un anume stil unui singur element de pe pagina.
<h1 id="titluRosu">...</h1>
In css, id-ul il vom nota cu diez (#) inaintea numelui. Vom avea:
#titluRosu{
color:red;
}
Celelalte elemente h1 de pe pagina nu vor avea textul rosu.

Selectorii se pot grupa cu virgula :
h1,h2,h3,h4,h5,h6 { color: green }

Pseudoselectorii sunt selectori speciali care se aplica anumitor elemente, se exemplu linkurile:
A:link {color:blue;}
A:hover {color:red;}

In plus, putem sa adaugam stiluri CSS si in codul HTML, direct in declaratia tagurilor, folosind atributul style:
<div style='font-size:10px;color:red;'>….</div> <!—declaratie inline-->

Stiluri utilizate cel mai des:

Font & Text

font-family: tip font;
font-size: dimensiune font;
font-style: italic, normal, oblique;
font-weight: bold, bolder, normal;
text-align: left, right, center, justify;
text -decoration: underline, overline, line-through;

Border

border-color: /*setam culoarea, fie cu denumire, fie cu cod*/;
border-style:none,solid, dotted, dashed;
border-top-color
border-top-style
border-bottom-color
border-bottom-style
border-left-color
border-left-style
border-right-color
border-right-style
Sau, pur si simplu:
border: dimensiune tip culoare;
border: 1px solid black;

Proprietati diverse

width: -auto sau definit de utilizator
height:-auto sau definit de utilizator
float: -left, right, none
clear: -all, both, left, right, none
position:-absolute, fixed, relative, static
cursor: – hand, crosshair

Margin & Padding

margin-bottom
margin-left
margin-right
margin-top
margin: top right bottom left;
margin: 5px 3px 5px 3px; padding-bottom
padding -left
padding -right
padding -top
padding: top right bottom left;
padding: 10px 5px 8 px 5 px;

Background

background-color
background-image: url(“cale imagine”)
background-position
background-repeat: repeat-x, repeat-y, no-repeat, repeat

Exercitii

1. Pagina va avea fundalul verde, textul galben, de dimensiune 12px, fontul va fi Arial
body{
background-color:green;
color:yellow;
font-size:12px;
font-family:Arial;
}

2. Textul din headinguri va fi subliniat, bold si italic
h1, h2, h3, h4, h5{
text-decoration:underline;
font-weight:bold;
font-style:italic;
}

3. Pe fundalul paginii se va vedea o imagine care va fi centrata orizontal si vertical
body{
background-image:url(adresapoza.jpg);
background-repeat:no-repeat;
background-position:middle center;
}

4. Pe pagina sunt 5 tabele. Doar pentru unul dintre ele, care are id-ul TabelSpecial, toate celulele vor avea border roz, dublu, de 2 pixeli
#TabelSpecial td { /* se refera la toate tagurile td care se gasesc in tabelul cu id-ul TabelSpecial*/
border:2px double pink;
}

5. Linkurile nu vor fi subliniate si vor fi scrise cu rosu. Cand se va trece cu mouseul peste ele, culoarea de fundal a linkului va fi rosie, iar textul galben. Distanta de la text la marginile linkului va fi, in toate partile, de 10 px
a{
text-decoration:none;
color:red;
padding:10px; /*10 px in toate partile distanta de la text la marginile imaginare ale linkului*/
}
a:hover{/* cand trecem cu mouseul peste link */
color:yellow;
background-color:red;
} /*nu mai punem alte proprietati, deci le mosteneste pe cele definite mai sus, la a */

6. Vom face un div care va avea o imagine de dimensiune 600px x 10px, care se repeta pe verticala
<div style="background-image:url(imagini/imagine.png); background-repeat:repeat-y;">...</div>

Tema

1. un fisier care se numeste cv.html si in care faceti CV-ul propriu
2. un  fisier stil.css in care aplicati stiluri pentru cv.html
3. pozele referite in CV

CV-ul va avea un bacground: o imagine degrade, care se repeta pe orizontala, va fi scris cu gri inchis, cu font de 10, Verdana. Paragrafele vor avea distanta de la text la conturul imaginar de 10px. Se va face un link de trimitere email pe adresa de email. Linkul va fi verde si fara subliniere, iar la trecerea mouseului peste, va fi rosu si subliniat.

4. stilizati formularul din tema trecuta, astfel incat casutele de text vor avea background gri deschis, textul va fi albastru si fontul va fi Comics.

HTML – formulare

Pe langa afisarea unor informatii, siteurile ne permit sa primim informatii de la vizitatori. Realizam acest lucru cu ajutorul formularelor.

<form></form> – Formular.  Atribute:
- action metioneaza adresa scriptului (aflat pe server) care va interpreta formularul.  Aceste scripturi pot fi scrise in limbajele PHP, jsp, asp etc..
- method indica metoda folosita de browser pentru transmiterea formularului. Poate lua valorile get (datele sunt trimise prin adaugarea la adresa indicata de action. Permite trimiterea unor mici cantitati de date) si post (datele sunt trimise separat si sunt permise cantitati mari de date).
- enctype – permite formului sa trimita anumite informatii sau nu. Spre exemplu, daca nu ii dam formularului enctype=”multipart/form-data”, nu putem trimite fisiere.

Un formular va arata cam asa:
<form action="fisier_procesare.php" method="metoda" enctype="tip enctype">
</form>
 <input />

Care o fi treaba cu metoda? Sau cand sa folosim get si cand sa folosim post?
Metoda get ne va afisa la adresa valorile campurilor. Pentru a testa asta, mergem pe Google si cautam ceva. Vedem ca in adresa apare si termenul cautat de noi. Ne e util, pentru ca, daca pastram adresa, putem sa vedem si mai tarziu rezultatele.
Evident, daca avem un formular de login, nu am vrea ca parola sa apara in adresa, atunci cand se trimite formularul. Cand nu vrem sa vedem valorile campurilor in adresa, folosim post.

Campuri din formular

Input - diverse controale din formular. In principiu, majoritatea campurilor din formular sunt inputuri. Poate avea atributele:
- type – indica tipul datelor care vor fi introduse:
text -text;
submit –trimite formularul;
reset –reseteaza formularul;
password –parola;
hidden -nu este vizibil, programatorul poate sa isi transmita anumite informatii;
checkbox -caseta de validare;
button –buton;
radio -selectarea unui singur element dintr-un grup;
file -fisier pentru upload;
image -butonul va fi inlocuit cu o imagine
- name – numele asociat campului respectiv. Este folosit la prelucrarea datelor de catre scriptul mentionat in action.
- size – numarul de caractere vizibile din camp, nu e obligatoriu sa apara.
- value - daca dorim sa ii dam o valoare, nu e obligatoriu sa apara.

Un input va arata cam asa:
<input type="tip" value="valoare sau nimic" name="nume" size="valoare sau nu apare"/>

Inputul e control nepereche.

Select – ne lasa sa alegem dintr-o lista. Avem posibilitatea sa afisam un text pentru fiecare optiune, dar vom lucra cu valorile optinilor. Concret:
<select name="nume">
   <option value="valoare 1">Text optiune 1</option>
   <option value="valoare 2">Text optiune 2</option>
   <option value="valoare 3">Text optiune 3</option>
   <option value="valoare 4">Text optiune 4</option>

</select>

Textarea – este o casuta de text, unde putem pune textul pe mai multe linii. Nu are atributul value, ci continutul se pune intre tagurile pereche  <textarea></textarea>
<textarea name="nume"> continut
</textarea>
Motivul pentru care textarea nu are atributul value, este faptul ca putem pune in continut si taguri html, care vor fi afisate in textarea.

Asadar, un form va arata:

<form action="script.php" method="post">
Nume:<input type="text" name="nume"><br />
Prenume:<input type="text" name="prenume"><br />
<input type="submit" value="Trimite">
<input type="reset" value="Sterge">
</form>

Avem nevoie de un buton care sa transmita informatiile, e recomandabil sa folosim un input de tip submit.

Procesarea formularelor se va face la cursul de PHP. Pana atunci, vom invata stilizarea si validarea formularului.

Tema

1. un fisier care se numeste formular.html si in care incercati exemplele din documentatie in html
2. un formular de inregistrare care va avea urmatoarele campuri:
nume, prenume – inputuri text
parola – input password
universitatea – select
facultatea – input text
anul de studii – input radio, cu valori de la 1 la 5
descriere -  textarea
poza – fisier
de acord cu termenii si conditiile – casuta de bifare
nume fisier curent – camp ascuns
buton simplu, care nu trimite formularul
buton de trimitere
buton de resetare

HTML

HTML – Hyper Text Markup Language

Atunci cand vrem sa vorbim cu un polonez, spre exemplu, trebuie sa gasim un mod de comunicare, o limba pe care sa o stim cu totii. Acelasi lucru e si cu browserul. Pentru a ii transmite ce dorim, trebuie sa folosim aceeasi limba. Practic, aceasta limba este HTML. “Cuvintele” pe care le folosim sunt:

Tag – specifica regiuni importante in documentul HTML si se noteaza astfel : <tag>Element – Un tag complet, care e compus din tag de deschidere <tag> si de inchidere </tag>. Nu toate tagurile au pereche, unele se folosesc astfel : <tag/>Atribut – Se foloseste pentru modificarea elementelor HTML. Se pot folosi atribute multiple, astfel <tag atribut=”valoare atribut”></tag>.

Scopul HTML este prezentarea informatiilor – paragrafe, fonturi, tabele, div-uri, etc. HTML este un format text proiectat pentru a putea fi citit si editat de oameni utilizand un editor de text simplu (Notepad).

O pagina HTML, are urmatoarele elemente de baza:

Tip document – <html></html>
Head – <head></head> – Aici sunt continute informatii descriptive, metadate
Body – <body></body> – Corpul paginii

Ca idee, pagina are un cap si un corp. Asa cum e in viata, corpul se vede din prima, practic, pe browser se va afisa ce e in body. Conteaza “ce are in cap” cineva, deci informatiile din head-ul paginii vor comunica cu browserul si ii vor da detalii despre pagina.

Un alt element important in crearea unei paginii web il reprezinta DOCTYPE-ul. DOCTYPE-ul e necesar intr-o pagina web incat prin acest tag ii spunem browser-ului cum sa interpreteze pagina. Nu va chinuiti sa retinteti tot, google va poate da o linie de cod pt DOCTYPE.

O pagina de HTML ar arata asa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Untitled Document</title>
   </head>
<body>
<!-- cod html -->
</body>
</html>

Sa vedem ce etichete HTML apar in exemplu:

<html></html> - Inceputul si sfarsitul fisierului
<head></head> – Contine informatii descriptive si metadata
<title></title>
– Este pozitionat in <head></head> si contine titlul paginii
Etichetele <meta> pot include informaţii despre titlul şi autorul documentului, informaţii structurale despre cum este împărţit documentul în diferite segmente, paragrafe etc. şi informaţii care permit ca documentul să poată fi legat de alte documente (css, javascript). Tot in <head> se pot definii stiluri si functii javascript, care vor fi folosite in documentul html.
<body></body> – Contine corpul paginii, ceea ce se va afisa pe browser. Asadar: tot ce dorim sa apara pe browser, punem intre cele doua taguri <body>..
<!– comentariu –> - Comentariu HTML

Taguri folosite

<h1></h1>Headinguri – Titlurile in HTML sunt numerotate de la 1-6, cu 1 fiind cea mai mare poziţie şi 6 fiind cel mai mica. Prin introducerea de text în cadrul tag-ului <h1>, textul va avea dimensiunea in functie de h-ul adaugat (1-6).

<h1> Titlul 1</h1>
<h2> Titlul 2</h2>
<h3> Titlul 3</h3>
<h4> Titlul 4</h4>
<h5> Titlul 5</h5>
<h6> Titlul 6</h6>

<p></p> - Paragraf
<p> Acesta este un paragraf. </p>

Rezultat:
Acesta este un paragraf.
Daca scriam:
p Acesta este un paragraf </p>
Rezultatul ar fi fost:
p Acesta este un paragraf
Paragraful poate avea atribute, printre care si align, cu valorile: left, right, justify, center.

<br / >Rand nou – tag nepereche

<hr />Linie orizontala – tag nepereche

<ol></ol>Lista ordonata. Contine itemi, notati cu <li></li>.;
<ol>
<li>Primul</li>
<li>Al doilea</li>
<li>Al treilea</li>
</ol>
Lista ordonata are atributele:
- start = numarul de la care incepe numerotarea
- type = tipul listei, cu valorile: “a”, “A”, “i”, “I”

<ul></ul>Lista neordonata, sau lista cu bullets. Contine itemi, notati cu <li></li>.
<ul>
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
</ul>

Lista neordonata are atributul type, care poate fi square, disc, circle.

<dl></dl>Lista de definitii, care contine <dt></dt> – termenul definit, si <dd></dd> – definitia.

<b></b>Bold

<strong></strong> – Text strong, asemanator cu bold

<i></i>Italic

<em></em>Emphasis, asemanator cu italic

<sup></sup>Superscript

<sub></sub>Subscript

<del></del>Text taiat

<code></code>Font cod

<font></font>Font.
Are urmatoarele atribute:
- size – dimensiunea fontului
- color – culoarea fontului
- face – tipul fontului

<a></a>Link
Are urmatoarele atribute:
- href – adresa fisierului destinatie
- target – in ce fereastra se va deschide fisierul destinatie. Poate lua valorile: _blank (pagina va fi incarcata intr-o noua fereastra), _parent (pagina va fi incarcata in fereastra parinte), _top (pagina va fi incarcata in fereastra top a cadrului), _self (pagina va fi incarcata in aceeasi fereastra)
- title – descrierea afisata in momentul in care mouse-ul se afla deasupra linkului
<a href="adresa-fisier" target="_blank" title="titlu"> nume</a>
Link-urile pot fi interne, locale, sau globale.
Pentru a creea un link de trimitere a unui email, folosim:
   <a href="mailto:angela@soft-build.com?subject=Intrebare blog" >Da-mi un email</a>

<img /> – Eticheta folosita pentru inserarea unei imagini in pagina. Are urmatoarele atribute:
- src = sursa, locul unde se afla imaginea
- width = latimea imaginii
- height = inaltimea imaginii
- alt = numele care inlocuieste imaginea pana se incarca sau cand nu a fost gasita
- border = chenar (0 = lipsa bordura)
<img src="numepoza.extensie" width="100" height="75" alt="poza" border="0" />

Sursa imaginii, sau adresa ei, poate fi relativa sau absoluta. Sa vedem ce inseamna fiecare:
Daca suntem in Piata Operei, in Timisoara, cu spatele la Opera si intrebam pe cineva unde este catedrala, ne va spune: “Drept inainte”. Asta e calea relativa, pentru ca doar daca stam cu spatele la Opera si mergem inainte, putem gasi Catedrala.

Daca vorbim cu cineva pe messenger si intrebam unde e Catedrala, ne va spune: “Mergi in Piata Operei, stai cu spatele la Opera si mergi inainte”. Asta e calea absoluta, pentru ca oriunde am fi, daca mergem in Timisoara, in Piata Operei si stam cu spatele la Opera, iar apoi mergem inainte, vom ajunge la Catedrala.

Astfel, calea relativa e atunci cand gasesc locatia pozei plecand de la locatia fisierului html. Pot sa zic ca poza e in acelasi director, si voi pune la src “poza.jpg”. Daca poza e in directorul imagini, care e in acelasi director cu fisierul, vom merge la “imagini/poza.jpg”. Daca poza e intr-un director mai sus fata de fisier, vom scrie “../imagini/poza.jpg”.

Pentru a lua o imagine folosind calea absoluta, scriem adresa imaginii din calculator “c:\imagini\poza.jpg” sau de pe internet http://www.site.ro/imagini/poza.jpg. Se mai poate lua si calea absoluta, ca si baza siteului (acolo unde e fisierul index.html, iar aceasta se noteaza asa: “/imagini/poza.jpg”.

O imagine poate fi, la randul ei link, astfel:
<a href="#" alt="" target="_blank">
<img src="numepoza.extensie" width="100" height="75" alt="poza" border="0" />
</a>

<table></table> – Tabel
<tr></tr> – Rand de table
<td></td> – Celula de table

<table border="1">
<tr>
<td>Celula 1</td>
<td>Celula 2</td>
</tr>
<tr>
<td>Celula 3</td>
<td>Celula 4</td>
</tr>
</table>

Atributele etichetei table sunt:
- border = bordura (0 – lipsa bordura)
- width = latimea tabelului
- height = inaltimea tabelului
- bgcolor = culoarea de fundal
- background = imaginea de fundal (W3C invalid, folositi style)
- cellspacing = distanta intre celule
- cellpadding = distanta dintre marginea celulei si continut

Atributele etichetei td sunt:
- align = aliniere pe orizontala a continutului (left, right, center)
- valign = aliniere pe verticalala a continutului (top, bottom, middle)
- width = latimea celulei
- height = inaltimea celulei
- bgcolor = culoarea de fundal
- background = imaginea de fundal (W3C invalid, folositi style)
- colspan = uneste celula cu cea din dreapta ei
- rowspan = uneste celula cu cea de sub ea

<div></div> – Div – o caseta folosita pentru a grupa alte elemente. Nu permite alte elemente pe acelasi rand.

<span></span> – Span – o caseta folosita pentru a grupa alte elemente, dar care permite alte elemente pe acelasi rand.

Entitati si simboluri

Putem folosi anumite simboluri, pentru a afisa anumite caractere. Spre exemplu, pentru ca ochiul uman citeste mai usor codul indentat, browserul nu va lua in seama doua spatii unul dupa celalalt pe care ni le scriem noi in cod, ci va considera ca e un singur spatiu. De aceea, daca vrem sa afisam doua spatii, va trebui sa folosim un simbol special pentru spatiu. Mai putem afisa si alte caractere speciale.

- &nbsp; = spatiu
- &copy; – ©
- &lt; = <
- &gt; =>

Tema

  1. un fisier care se numeste index.html si in care incercati exemplele din documentatie in html
  2. un fisier cv.html care va contine cv-ul vostru in format html, fara stiluri, folosind elementele invatate la html
  3. pozele referite in cod, unde e cazul

Intrebari?:)

Generalitati

Salut!

M-am decis sa fac adaug cursul la blog, pentru ca am strans materialele de-a lungul timpului, le-am predat la cursurile Soft Build si am vazut ca ar fi multi interesati sa invete ceva tehnologii web.

Am sa incerc sa pun cat mai putina teorie si sa prezint anumite metode asa cum le aplic eu, fara sa am pretentia ca sunt cele mai “ortodoxe” sau ca ar fi cele recomandate sau optime. Sunt cele care imi sunt mie comode. De altfel, dupa ce am tot lucrat cu programatori, va recomand sa aplicati metodele pe care le stapaniti cel mai bine, in loc sa va “prindeti urechile” cu ce e la moda!

Bun, sa incepem!

Aveti nevoie de un editor de cod. Eu folosesc Dreamweaver, dar puteti folosi si Notepad++ sau orice alt editor de text. Facem HTML, apoi CSS si Javascript. Dupa ce am pus bazele, trecem la partea dinamica a programarii web: PHP si MySQL (baze de date).

Nu va bazati doar pe documentatia din blog, puteti gasi pe net tot felul de informatii. Recomand si siteul www.tizag.com, are tutoriale foarte bune si documentatia noastra e inspirata de acolo.

Va recomand sa nu faceti cu copy+paste exercitiile, pentru ca va ajuta pe voi sa va obisnuiti sa scrieti codul.

Daca e ceva, nu ezitati sa ma intrebati in comments. In primul rand, invatati pentru voi si, daca tot v-ati apucat, e pacat sa nu va lamuriti cum trebuie cu programarea web:).