Puzzle glisant javascript

Fisierele vCard cu extensia .vcf sau .vcard

     Fisierele vCard sunt formatul standard pentru cartile de vizita electronice.

     Acestea sunt folosite pentru a stoca informatiile de contact a unor persoane sau firme. Un fisier de acest tip include urmatoarele campuri: nume, prenume, adresa, numar de telefon, Fisierele vCard sunt folosite pentru a stoca informatiile de contact a unor persoane sau firme.   
 
     Cu ajutorul fisierelor vCard se pot importa sau exporta contacte din colectia de contacte (address book). Acestea pot fi atasate la email-uri pentru a asigura destinatarului un mijloc usor de a importa informatiile de contact ale expeditorului.
      Aplicatii de gestionare a datelor personale si telefoanele mobile folosesc aceste resurse pentru a face schimb de contacte.
 
     Fisierele sunt salvate in format text, informatia se poate accesa si cu un editor text, dar poate contine si cod binar folosit pentru stocarea imaginilor.
     Pe desktop majoritatea aplicatiilor de gestionare a mail-urilor pot deschide acest tip de fisier.
     Pe Android am gasit urmatoarele aplicatii (cautare pe Google Play):
        - Contacts VCF
        - Import Contacts
        - VCard - Multiple Vcf Generator
     Nu am incercat aplicatiile personal, dar par sa aiba un scor bun pe Google Play.
     Daca aveti experienta cu aplicatii ce pot gestiona fisiere .vcf pe Android, Feedback-ul este apreciat.
     Pe iOS gestionarea fisierelor .vfc este inclusa si nu este nevoie de instalarea altor aplicatii.

Tutorial lista HTML

Lista intr-o pagina HTML

Lista este o structura ce grupeaza elemente de acelasi fel. In HTML, lista poate fi folosita atat pentru a grupa continutul cat si pentru a crea meniuri de navigatie.

Listele pot fi de urmatoarele tipuri:

- ordonate: elementele sunt notate cu cifre, litere sau alte metode de ordonare

- neordonate: elementele sunt notate cu simboluri: cercuri, patrat

- definitii: elementele sunt insotite de descrieri

Definitiile elementelor HTML folosite

1. Tagul li:
• defineste un element din lista
• poate fi folosit in urmatoarele tipuri de liste: ol, ul, menu
• atributul value:
• defineste valoarea elementului
• poate fi folosit doar pentru ordonate
• ordonarea urmatoarelor elemente se face in functie de aceasta valoare
• este recomandata definirea aspectelor vizuale cu ajutorul CSS-ului
2. Tagul ul:
• defineste o lista neordonata
• folosirea atributului type pentru a seta marcatorii de inceput de linie nu este recomandata, folositi in schimb regulile CSS pentru a obtine aceste efecte
3. Tagul ol:
• defineste o lista ordonata
• Atributul start:
• defineste valoarea de inceput a ordonarii
• are valoare numerica
• Atributul type:
• defineste tipul ordonarii
• primeste urmatoarele valori: 1, a, A, i, I
• Atributul reversed:
• defineste ordinea ordonarii
• nu este suportat in toate navigatoarele WEB
4. Tagul dl:
• defineste o lista de definitii, fiecare element avand si o descriere
• foloseste elemetele dt (reprezinta un element din lista) si dd (reprezinta descrierea, descrierile pentru un anumit element) pentru a-si defini structura
5. Tagul dt:
• defineste un element dintr-o lista de tipul dl
6. Tagul dd:
• defineste o descriere a unui element de tipul dt
• poate contine text, imagini, linkuri, etc.

Lista neordonata

Lista neordonate este definita cu ajutorul tagului ul si contine elemente de tipul li.
Este recomandata definirea tipului de marcator cu ajutorul CSS-ului. Pentru a defini tipul se foloseste urmatoarul atribut list-style-type. In cazul nostru, acesta poate avea urmatoarele valori: circle (cerc gol), disc (cerc umplut), square (patrat) .
Exemplu - Lista neordonata simpla:
Rezultat:

• Element lista 1
• Element lista 2
• Element lista 3

Cod:

Lista ordonata

Lista ordonata se defineste cu ajutorul tagului ol si contine elemente de tipul li.
Tipul marcatorului se poate defini cu ajutorul atributului type, dar folosind list-style-type din CSS se poate accesa o varietate mai mare de tipuri.

Exemplu - Lista ordonata simpla:
Rezultat:

1. Element lista 1
2. Element lista 2
3. Element lista 3

Cod:

Buton HTML

Acest tutorial descrie folosirea butoanelor HTML intr-o pagina WEB.
Butoanele prezentate in acest articol sunt create in doua moduri.
Cu ajutorul tagului button. Acest tag este folosit explicit pentru creare de butoane. Butoanele create in acest fel pot contine imagini si text.
Cu ajutorul tagului input. In acest caz, valoarea atributul type trebuie sa fie button pentru a crea un buton, fiind posibila definirea mai multor tipuri de elemente cu acest tag (Ex: checkboxuri, casete text, selector de fisiere). Acest tip de buton accepta numai text.
Ambele tipuri au atributul type si pot avea valorile reset si submit. Un buton, care are una dintre aceste valori, este folosit in cadrul unui formular.

Definirea unui buton HTML cu ajutorul tagului button

Exemple:

1. Exemplu de buton simplu cu un javascript care va afisa un mesajul: "Butonul a fost apasat" 
• Rezultat:
  
• Codul folosit:
  
2. Exemplu de buton cu imagine (are aceeasi actiunea ca butonul precedent)
• Rezultat:
  
• Codul folosit:
  

Tagul button:

• defineste un buton
• in interiorul tagului se poate adauga continut (text, imagini)
• Atributul type:
• defineste tipul butonului
• este recomandata definirea atributului pentru a evita un comportament inconsistent pe diferitele navigatoare WEB
• accepta urmatoarele valori:
• button - i se pot atribui actiuni particulare
• submit - este folosit pentru a trimite continutul unui formular
• reset - este folosit pentru a reseta continutul unui formular
• Atributul value:
• defineste valoarea butonului
• a nu se confunda cu textul butonului
• Atributul disable:
• este folosit pentru a dezactiva butonul
• in HTML este suficient sa adaugi atributul fara nici o valoare pentru a dezactiva butonul
• in XHTML este necesara definirea atributului disabled="disabled" pentru a dezactiva butonul
• Atributul name:
• defineste un nume pentru button 

Definirea unui buton cu ajutorul tagului input

Acest buton este creat cu ajutorul tagului input folosind atributul type cu valoarea button.

• Rezultat:
  
• Codul folosit:

Explicatii:
Tagul input este folosit pentru a crea campuri folosite pentru inserarea datelor. Aceste campuri sunt folosite in interiorul unui formular form pentru a completa datele, care vor fi trimise pentru procesare pe un server. In cazul nostru se foloseste un input de tipul button, care este folosit pentru definirea unui buton. Butonul este folosit in mare parte pentru executarea unor actiuni javascript.

Cum sa adaugi un .swf la pagina ta HTML

Pentru a introduce o animatie .swf adaugati urmatorul fragment de cod in pagina HTML.
<embed height="200" src="https://sites.google.com/site/exempledeinformatica/hello.swf"   width="120"></embed>
Campurile height si width sunt inaltimea, respectiv latimea obiectului.
Campul src reprezinta calea catre fisierul .swf care este incarcat pe WEB.

Tutorial HTML: Imaginile și pagina ta WEB

Cum să adaugi o imagine în site-ul tău

Principalul mod de a introduce o imagine în pagina HTML este cu ajutorul tagului <img>.
In acest exemplu este exemplificata folosirea acestuia.

Cod:
<html>
<head>
<title>HTML imagine</title>
</head>
<body>
<img src="https://sites.google.com/site/exempledeinformatica/tutoriale-html/tutorial-html-prima-pagina-web/Prima mea pagina html.png"
 alt="Aici se introduce descrierea imaginii."/>
</body>
</html>

Rezultat:

Explicatii:

1. Tagul <img>:
1. este folosit pentru a defini imagini în pagina WEB
2. atributul src:
1. definește calea către imagine
2. este obligatoriu
3. calea poate fi definita astfel:
1. cale relativa: se stabilește în funcție de poziția fișierului HTML și a imaginii
2. cale absoluta: locația completa a imagini (Ex: adresa URL a pagini)
   
3.  atributul alt:
1. este folosit pentru a stabili un conținut text alternativ în cazul în imaginea nu poate fi afișată
   
2. este recomandat sa conțină
1. o scurta descriere a imaginii
2. descrierea paginii țintă dacă imaginea este un link
3. "" în cazul în care imaginea este o decorație nesemnificativa
4. atributele height și width:
1. sunt folosite pentru a stabili înălțimea(height) și lățimea(width) imaginii
2. valorile pentru aceste atribute sunt definite în pixeli
   
3. aceste atribute ajuta navigatorul WEB sa rezerve spațiul destinat imaginii
4. nu este recomandat să scalați o imagine mare la o dimensiune mai mica cu ajutorul acestor atribute, deoarece utilizatorul va fi obligat să descarce imaginea originala, cu toate că aceasta este afișată mai mică în navigatorul WEB
5. atributul usemap:
1. este folosit pentru a mapa porțiuni din imagine
2. acest atribut nu poate fi folosit dacă imaginea se afla în interiorul unui link sau a unui buton
   
3. porțiunilor mapate li se pot atribui linkuri sau acțiuni
6. atributul ismap:
1. marchează imaginea ca find mapata pe partea server
2. atributul poate fi folosit doar dacă acesta se afla în interiorul unui link valid (elementul <a> sa aibă atributul href valid)
3. când se dă click pe imagine se trimit coordonatele punctului către server
7. atributul title:
1. poate fi folosit pentru a afisa un text descriptiv cand mouseul este deasupra imaginii

Tutorial HTML: Prima pagina WEB

1. Introducere

 

Acest tutorial contine pasii pentru a crea o pagina un exemplu "Hello World" pentru limbajul HTML.
Pagina creata va avea un  titlu si continut text.
Pentru realizarea exemplului este nevoie de un editor text precum Notepad.

2. Crearea exemplului

1. Se deschide aplicatia "Notepad" (se pot folosi si alte editoare precum Notepad++, Eclipse).
2. Se copiaza codul de mai jos:
   <html>
     <head>
       <title>Site WEB HTML </title>
     </head>
     <body>
       Prima mea pagina HTML.
     </body>
   </html>
3. Se salveaza cu comanda "Save As..." folosind extensia ".html". Exemplu: index.html
4. Se deschide fisierul cu un browser WEB precum: Firefox, Chrome sau Internet Exporer
5. Rezultatul va fi o pagina HTML cu titlu "Site WEB HTML" si continutul "Prima mea pagina HTML."

 

3. Explicații

1. Tagul html
1. notifică navigatorul WEB de conținutul html al fișierului
2. acesta este elementul părinte al documentului
   
3. restul tagurilor trebuie introduse în interiorul acestuia
4. doar tagul <!DOCTYPE> face excepție de la regula 3
2. Tagul head
1. reprezintă antetul documentului
2. următoarele elemente pot introduse în interiorul acestuia
1. title - definește titlul paginii WEB
2. meta - definește metadata (Ex: descrierea paginii, cuvinte cheie, autor)
3. script - cu ajutorul acestuia putem folosi scripturi client (Ex: javascript)
4. noscript - este folosit pentru a afișa conținut alternativ în cazul în care scripturile sunt dezactivate
5. style - definește regulile CSS ce se vor aplica documentului
6. link - cu ajutorul acestuia se poate adăuga un fișier extern CSS
3. Tagul body
1. reprezintă conținutul paginii WEB
2. acesta poate conține:
1. imagini - <img>
2. text      - <p>(paragraf) <h1> ... <h6>(titluri de diferite mărimi)
3. tabele   - <table>
4. linkuri   - <a>
5. aplicații folosite pentru afișare de conținut multimedia, jocuri browser, widget-uri, etc 

Tutorial HTML Tabel

În acest tutorial este exemplificată folosirea unui tabel în HTML.
În următoarele rânduri va voi explica cum sa ajungeți de la tabelul simplu la cel complex.
Sursele pentru tabelele din site le puteți găsi la sfârșitul tutorialului.

Cuprins:

1. Tabel HTML simplu
2. Tabel simplu folosind colspan
3. Tabel simplu folosind rowspan
4. Tabele HTML si stilul CSS
5. Tagul style si selectorii CSS
6. Fisiere externe CSS

Tabel HTML simplu

În pagina dumneavoastră HTML adăugați următoarele linii de cod pentru a avea rezultatul din exemplu.


Rezultat:

 Cod:


Explicații:

1. Tagul table:
1. este folosit pentru a defini un tabel
2. Atributul border:
1. este folosit pentru a defini grosimea marginii tabelului
2. acceptă numere pozitive
3. pentru valoarea 0 marginea nu este vizibilă
4. dacă atributul este omis marginea nu este vizibilă
2. Tagul <tr>:
1. definește un rand în interiorul tabelului
2. numele acestuia vine de la Table Row, care înseamna rand de tabel
3. în interiorul acestuia se pot introduce celule de tipul th și td
3. Tagul <th>:
1. definește o celula de tipul titlu (antet)
2. numele acestuia vine de la Table Header, care înseamna titlu de tabel
4. Tagul <td>:
1. definește o celula standard
2. numele acestuia vine de la Table Data, care înseamna date tabel
   

Tabel HTML folosind colspan

Rezultat:

Cod:

Explicatii:

1. Atributul colspan:
1. este folosit pentru a stabili pe câte coloane se întinde celula
2. acceptă numere naturale mai mari ca 0
3. se poate aplica atât la tagul <th> cât și la tagul <td>

Tabel HTML folosind rowspan

Rezultat:

Cod:

Explicatii:

1. Atributul rowspan:
1. este folosit pentru a stabili pe câte rânduri se întinde celula
2. acceptă numere naturale mai mari ca 0
3. se poate aplica atât la tagul <th> cât și la tagul <td>

Tabele HTML și stilul CSS

  
În pasul următor o să vă explic cum se poate adăuga stil CSS.
Formatarea CSS poate fi aplicata cu ajutorul:
    - atributului style din tagul țintă
    - tagului style si a selectorilor CSS
    - fișier extern CSS

Pentru început vom adăuga stilul direct elementelor HTML cu ajutorul atributului style.
Acest atribut este recomandat pentru efecte vizuale minore și care se doresc a fi aplicate individual.
Rezultat:

 Cod:



Explicații:
- border-color
    - este folosit pentru a schimba culoarea marginii
    - accepta culoarea sub forma de cod:
        - hexa  #FF0000
        - RGB rgb(255,0,0)
        - numele culorii "blue"
- border-style
    - este folosit pentru a defini tipul marginii
    - accepta următoarele valori :        

	- dotted	- groove
	- dashed	- ridge
	- solid	- inset
	- double	- outset

- text-decoration:
    - aduce modificări de stil textului la care se aplică
    - poate lua următoarele valori:
         - blink
         - line-through
         - overline
         - underline
         - inherit (moștenește setările de la părinte)
         - none  (șterge decorațiunile)

Tagul style și selectorii CSS

  
Tagul style permite folosirea CSS în interiorul tabelului fără a folosi un fișier extern.

Codul CSS se introduce în interiorul tagului <style></style>.
Regulile CSS se adaugă unui sau mai multor elemente folosind selectorii.
De exemplu, pentru a aplica formatarea CSS tuturor celulelor din tabelele pagini HTML se aplică următorul selector:

td {background-color:red;}

Acesta va face fundalul rosu pentru toate elementele de tipul td din pagina HTML.

    Pentru a selecta elemente specifice se poate folosi atributul id a tagului țintă.
De exemplu, daca doriti sa modificați doar un anumit tabel setati atributul id al acestuia
cu un nume semnificativ, pe care mai tîrziu sa-l folosiți în selector.

#elementulMeu {background-color:red;}

Acest selector va face fundalul rosu pentru toate tagurile HTML care au setate atributul
id cu valoarea "elementuMeu" (Ex: <table id="elementulMeu">).

    Pentru a selecta o anumita clasa de taguri se folosește atributul class. Acesta se completează cu
un nume sugestiv pe care mai apoi se va folosi în selectorul CSS.
Daca doriti sa modificați un grup de tabele completati aceeasi valoare in attributul class si folositi selectorul CSS.

.elementulMeu {background-color:red;}

Acesta modifica toate elementele HTML care au atributul class cu valoarea "elementuMeu"
setînd fundalul la culoare roșie.

În următorul exemplu este demonstrata folosirea regulilor CSS cu ajutorul tagului style.

Rezultat:

 Cod:

Fișiere externe CSS

  
Pentru a adăuga un fișier extern CSS adăugați următoarea linie de cod în pagina HTML:

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

Linia de cod se adaugă în interiorul tagului head a paginii. 
    Atributul href conține calea către fișierul extern de stil. Dacă acesta se află în același
folder cu pagina HTML, este necesar sa scrieți doar numele, dacă nu, este necesar să
completați calea întreaga a acestuia.
    Pe o pagina se poate adăuga unul sau mai multe fișiere CSS. De exemplu puteți avea un fișier general de stil care sa-l aplicați pe tot site-ul și unde este cazul sa adăugați un fișier special pentru pagina dorită.
    Formatarea se aplica la fel ca și la secțiunea "Tagul style și selectorii CSS" , doar că în cazul nostru, regulile de stil se află într-un fișier extern.

Rezultat:

 Cod HTML (in prima caseta) si CSS:



Explicații:
Dupa cum ati observat codul CSS se va salva in fisierul stilulMeu.css pentru a avea acces la continutul acestuia in pagina HTML.
Fiindcă nu apare nimic nou în privința codului HTML am sa trec direct la explicațiile codului CSS.
Mai întîi am sa explic selectorii CSS avansați:

.tabelAvansat td b {}

Acesta va selecta tagurile <b>, care au ca părinte un tag <td>, care la rîndul
lui are ca părinte un element HTML cu clasa "tabelAvansat".
Ca elementul <b> sa fie selectat următoarea structură trebuie sa fie îndeplinită:

<table border="1" class="tabelAvansat">
  <tr>
    <td><b>Celula</b></td>
  </tr>
</table>

    După cum ați observat, ca să se facă selecția nu este necesar ca părintele să fie
exact pe nivelul superior fiului.
În cazul nostru nostru următorii pași sunt luati pentru a face selecția:
- se selectează toate tagurile HTML cu clasa "tabelAvansat"
- din rezultatul obținut(în cazul nostru tagul <table>), se caută mai departe în interiorul
  rezultatului doar elementele de tipul <td>
- din rezultat(dacă am fi avut mai multe elemente de tipul <td> ar fi fost selectate și
  acestea, în cazul nostru avem un singur element) se selectează elementele <b>,
  rămînînd cu tagul <b>Celula</b> ca rezultat final

Un alt selector avansat este:

.tabelAvansat tr:nth-child(odd) {}

Pe acesta l-am folosit ca sa selectez rîndurile impare din tabel, asa am reușit
sa alternez culorile la rînduri.
    Spre deosebire de restul selectorilor de pana acum, selectorul :nth-child(odd)
nu cauta în interiorul rezultatului ci filtrează elementele găsite.
Mai exact, din tagurile <tr> găsite sunt selectate doar cele care îndeplinesc
condiția de a avea un număr impar al nodului(pentru numere pare se folosește
valoarea even).
De exemplu, dacă sunt găsite 3 elemente, regula se va aplica primului(nod cu numărul 1)
și ultimului element(nod cu numărul 3).

    Acum ca am clarificat cum se realizează selectările, am sa trec la regulile
CSS folosite:
- background-image:
    - este folosit pentru a seta imaginea de fundal a elementului
    - acceptă urmatorile valori:
        - url('URL') - unde URL este adresa fundalului, dacă fișierul se află în același
          folder cu fișierul CSS se poate scrie doar numele fișierului de tip imagine
        - none - nu se folosește imagine de fundal (valoare implicita)
        - inherit - imaginea de fundal este moștenită de la părinte
- background-repeat:
    - se specifică dacă fundalul se repeta, în cazul în care elementul HTML are
      dimensiunea mai mare decît imaginea
    - accepta următoarele valori:
        - repeat      : imaginea se repeta pe verticală și pe orizontală
        - repeat-y   : imaginea se repeta numai pe verticală
        - repeat-x   : imaginea se repeta numai pe orizontală
        - no-repeat : imaginea nu se repeta
        - inherit      : comportamentul se moștenește de la părinte
-  background-color
    - este folosit pentru a schimba culoarea fundalului
    - accepta culoarea sub forma de cod:
        - hexa  #FF0000
        - RGB rgb(255,0,0)
        - numele culorii "blue"
- font-weight
    - definește grosimea caracterelor
    - acceptă următoarele valori
        - normal (setare implicita)
        - bold
        - bolder
        - lighter
        - inherit (moștenește setarea de la părinte)
- padding
    - definește spațiul dintre marginea elementului și conținutul acestuia
    - se poate defini in urmatoarele moduri
        - padding:25px 50px 75px 100px;
            - spațiul de sus este 25px
            - spațiul din dreapta este 50px
            - spațiul de jos este 75px
            - spațiul din stanga este 100px
        - padding:25px 50px 75px;
            - spațiul de sus este 25px
            - spațiul din dreapta și din stânga este 50px
            - spațiul de jos este 75px
        - padding:25px 50px;
            - spațiul de sus și de jos este 25px
            - spațiul din dreapta și din stânga este 50px
        - padding:25px;
            - spațiul este uniform și are 25px
- font-size
    - definește mărimea textului
    - accepta următoarele valori:
        - xx-small        - xx-large
        - x-small          - x-large
        - small             - large
        - smaller (setează mărimea textului mai mica decât cea a elementului părinte)
        - larger (setează mărimea textului mai mare decât cea a elementului părinte)
        - inherit (moștenește proprietatea de la elementul părinte)
        - valori de tipul procentaj Ex: 10% , 200%
        - valori de tipul lungime Ex: 20px , 1cm
- font-family       
    - definește tipul caracterelor
    - accepta valori de tipul: arial, times, verdana

Sursele pentru tabel le puteti gasi aici.

Cum sa adaugi un .swf la site-ul tau google

Pentru a adauga aceasta animatie am urmat urmatorii pasi:
1. Am adaugat "Embed gadget" pe pagina site-ului
2. In Embedding snippet am introdus urmatorul cod:

<object/> <embed src="https://sites.google.com/site/exempledeinformatica/hello.swf" width="120" height="200"></embed> </object>

•  https://sites.google.com/site/exempledeinformatica/hello.swf
• este adresa unde se afla .swf-ul
• width si height sunt dimensiunile

Pagina exemplu se poate accesa de aici.

How to add a custom favicon to google sites

To add a custom favicon to your google site follow this steps:

1. Click on 'More' and choose the 'Manage site' option.
   Printscreen
2. From the left menu chose 'Attachments'
   Printscreen
3. On the 'Attachments page click 'Upload' and choose your icon.
1. The file has to be renamed to favicon.ico
2. The file has to be uploaded on the root path (under the 'Location' column it has to be the value: / 
Printscreen
4. After the upload the favicon should be changed automatically, if not please refresh page.

To create your favicon save a .png image with the size 16x16.
Then take the file and change it's extension from .png to .ico .