Primii pasi cu Ajax

Salut. Tema 3 la Interfete Evoluate mi-a oferit ocazia de-a invata sa lucrez cu Ajax. Mi-a placut atat de mult incat m-am gandit sa va impartasesc si voua cateva din "tainele" acestei metode inedite de actualizare dinamica a continutului paginilor Web. "Primii pasi cu Ajax" poate fi citit aici. El este gazduit de binecunoscutul nostru site http://www.zeit.3x.ro/

Puteti de asemenea vedea Ajax in actiune navigand catre http://www.zeit.3x.ro/despre.html si apasand pe numele membrilor echipei. Enjoy! :)

Ionutz

Tutorial & Quiz JavaScript

Intra pe www.zeit.3x.ro si vei gasi un tutorial de JavaScript proaspat scris de colega noastra, Alexandra.

Dupa ce l-ai citit, poti sa testezi cat de mult ai retinut.

WebDesign: structurarea continutului & include-uri

Deoarece blogul acesta a fost cam tacut in ultima vreme, m-am gandit sa scriu un articol inspirat din propria experienta a realizarii site-ului nostru.

Web Design pentru incepatori

Despre structurarea continutului si include-uri

Majoritatea site-urilor pe care le vizitam zi de zi au o structura bine definita, care ofera utilizatorului (chiar si celui care se afla pentru prima data acolo) o modalitate simpla si intuitiva de a naviga prin ceea ce uneori este o veritabila jungla de informatie.

Cel mai important element al acestei structuri este bara de navigare--de fapt, este atat de important incat uneori exista chiar doua: o bara orizontala de navigare, plasata in partea de sus a paginii, si una verticala, plasata de obicei in stanga paginii. In bara de navigare, web designerul trebuie sa structureze continutul astfel incat orice vizitator sa se descurce pe site la fel de usor ca in propria casa.

In afara de bara de navigare, exista in mod obisnuit si un header care afiseaza numele site-ului cu litere mari si colorate in partea de sus a paginii, si un footer, mai modest in aspect si care contine detalii de copyright si contact, in partea de jos.

Toate aceste elemente constituie partea fixa a site-ului, interfata acestuia cu utilizatorul. Orice pagina de pe site trebuie sa le contina, nu doar pagina principala. Am comparat mai sus un site web cu o casa, dar analogia nu e tocmai potrivita. Un site web ar trebui sa fie mai degraba ca o casa a viitorului, unde poti sa te teleportezi dintr-o camera in orice alta camera, in loc sa treci de fiecare data prin hol. Imaginati-va ce ar insemna sa sa folositi mereu butonul Back pentru a ajunge inapoi la pagina principala pentru ca doar de acolo aveti acces la alte sectiuni ale site-ului.

Dar oricine a petrecut mai mult de o zi navigand pe Internet a avut ocazia sa observe singur aceste lucruri. Ceea ce poate unii dintre voi nu s-au intrebat pana acum este: Si asta cum se face?

Cineva care creeaza pentru prima data un site poate cadea in capcana atat de indragitei combinatii de taste CRTL-C, CRTL-V. Da, ati ghicit--omniprezentul Copy-Paste. De ce sa nu scriu codul HTML pentru pagina principala, s-ar gandi un web designer incepator, si apoi sa-l refolosesc, modificand doar partea de continut efectiv, lasand restul neschimbat? In aparenta, totul va merge bine... pana cand web designer-ul nostru isi va da seama ca a uitat sa adauge un nou link in sectiunea de navigare, ca a scris gresit numele site-ului in header sau ca trebuie sa modifice adresa de contact. Moment in care, pus in fata a cateva zeci de pagini care necesita acum modificari, va fi probabil foarte tentat sa arunce tastatura pe fereastra.

Solutia pentru un continut fix, usor de modificat, care se repeta pe toate paginile site-ului o reprezinta include-urile. Dupa cum sugereaza si numele, include-urile sunt portiuni de pagina (fisiere externe) care pot fi incluse in alte pagini web. Deoarece HTML-ul nu ofera facilitatea de a include direct alte fisiere HTML, va fi nevoie sa apelati la un limbaj de programare sau sa folositi un program de management al continutului (Content Management Tool).

Include-uri folosind PHP

Pasi

1. Salveaza codul HTML pentru partile fixe ale site-ului tau in fisiere diferite: navigare.html, header.html, footer.html etc. Alternativ, poti salva fisierele cu extensia php, in loc de html.

2. In fiecare pagina HTML in care vrei sa incluzi fisierele de mai sus, scrie urmatoarele linii de cod:

<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>

Avantaje

• Simplitate

Dezavantaje

• Scriptul se executa pe server (serverul trebuie sa suporte PHP)

Include-uri folosind ASP

Pasi

1. Salveaza codul HTML pentru partile fixe ale site-ului tau in fisiere diferite: navigare.html, header.html, footer.html etc. Alternativ, poti salva fisierele cu extensia asp, in loc de html.

2. In fiecare pagina HTML in care vrei sa incluzi fisierele de mai sus, scrie urmatoarea linie de cod:

<!--#include file="path to file/include-file.html"-->

Avantaje

• Simplitate

Dezavantaje

• Scriptul se executa pe server (serverul trebuie sa suporte ASP)

Include-uri folosind JavaScript

Pasi

1. Salveaza codul HTML pentru partile fixe ale site-ului tau in fisiere diferite, cu extensie js: navigare.js, header.js, footer.js.

2. Ia fiecare linie din fisier si da-o ca parametru functiei de afisare:

document.print("<p>o linie din fisierul HTML</p>");

Atentie, daca apare simbolul ", ca de exemplu in <a href="index.html">Home</a>, acesta trebuie precedat de \:

document.print("<a href=\"index.html\">Home</a>");

3. In fiecare pagina HTML in care vrei sa incluzi fisierele de mai sus, scrie urmatoarea linie de cod:

<script type="text/javascript" src="path to file/include-file.js"> </script>

Avantaje

• Scriptul este executat de browser

Dezavantaje

• Cod mai complicat de scris

Alte variante pentru include-uri

Cele trei metode prezentate mai sus nu sunt singurele care pot fi folosite pentru a include portiuni fixe in pagini web. Exista si alte metode, care folosesc:

• SSI (Server Side Includes)
• CGI
• Flash
• frame-uri*

* Dar nimeni nu mai foloseste frame-uri in prezent, din cauza numeroaselor lor dezavantaje.

Un nou look!

Site-ul de Interfete Evoluate a suferit o modificare radicala de look. Un aspect mai tanar, mai vesel! Check it out!
Momentan avem un articol interesant despre primii pasi pentru indexarea Google, quizuri de XML/CSS pentru cei care cred ca "stiu", si desigur tema 1 la IE rezolvata.

http://www.zeit.3x.ro/

Pe google!

Primii pasi pentru indexarea Google

Cui i se adreseaza acest articol/tutorial?

Celor care tocmai au creat un site si vor ca intr-un timp sa fie indexat de google si sa apara printre primele intr-un google search. (probabil despre asta vom vorbi intr-un articol viitor).

Primii pasi…

Pentru inceput ceea ce trebuie sa faci este sa urmezi linkul http://www.google.com/addurl/ si acolo sa introduci datele care ti se cer pentru ca crawlerul google sau google bot sa indexeze si siteul tau.

Ai schimbat locatia sau numele? Nu e nicio problema poti indica lui google bot sa nu

indexeze siteul tau urmand instructiunile http://www.google.com/support/webmasters/bin/answer.py?answer=35301&topic=8459

(nu e nevoie decat sa plasezi un fisier cu numele robots.txt si cu continutul indicat de google in rootul siteului tau)

Urmatorul tool despre care cred ca ar trebui sa vorbim este Google Webmaster (https://www.google.com/webmasters/tools/).

In principiu toolul poate fi utilizat pentru statistici si diagnostice google pentru siteul tau.

Cum la momentul in care scriu acest articol siteul care face obiectul articolului (http://zeit.3x.ro/) nu a fost inca indexat voi reveni asupra acestei parti.

Ceea ce putem face este sa oferim un sitemap pentru site-ul nostru spre a fi evaluat si verificat de catre google.

Ce este un sitemap?

Un fişier Sitemap vă permite să ne furnizaţi toate datele despre toate paginile site-ului dvs. şi, opţional, informaţii despre acestea, cum ar fi care sunt cele mai importante pagini şi cât de des se modifică.

Prin trimiterea unui fişier Sitemap puteţi controla prima parte a proceselor de accesare cu crawlere/indexare: părerea noastră despre pagini.

Practic, exista un protocol pentru crearea unui astfel de fisier (https://www.google.com/webmasters/tools/docs/en/protocol.html). Aceasta este specificatia google ce deriva din http://www.sitemaps.org/protocol.php.

Cum ne creem un sitemap? Pai putem citi specificatiile protocolului si putem incepe sa scriem singuri xmlul sau putem utiliza un site care face exact acelasi lucru (http://www.xml-sitemaps.com). Trebuie sa-i furnizam adresa site-ului nostru iar el va face apoi cereri pentru fiecare pagina din site, ii va pune o prioritate default (aici putem interveni noi) si ca data a ultimei modificari data de pe server (in caz ca nu speficam noi alta).

Iata cum arata sitemapul siteului http://zeit.3x.ro/: http://zeit.3x.ro/sitemap.xml.

Ar mai fi de spus ca exista niste reguli furnizate de google pentru ca siteul tau sa fie gasit si indexat mai usor de google. Adresa este: http://www.google.com/support/webmasters/bin/answer.py?answer=35769.

Urmatorul pas pentru a grabi indexare siteului nostru este inscrierea lui in cat mai multe directoare web.

Mai jos gasit o lista cu cateva directoare web free:

http://www.dmoz.org

http://www.webworldindex.com

http://www.maxdirectory.eu

http://www.diroot.com/

Cam atat pentru primii pasi pentru obtinerea unui loc cat mai bun in google search.

Urmatorul articol va fi despre Page Ranking si desigur voi aduce completari acestui prim articol.

© Ovidiu-Catalin Silica

Testeaza-ti cunostintele de XML si CSS

Vrei sa vezi cat de multe stii despre XML si CSS? Pe www.zeit.3x.ro, in sectiunea Quiz, vei gasi doua teste noi-noute scrise de colega noastra, Alexandra. Sau poti sa dai clic direct aici.

ZEITeam iti ureaza succes!

Name change

Am aflat ca lui Ionut nu ii placea Z=Zero, asa ca am gasit altceva... Z=Zetta! 10^21 :). Now *that's*some evolution.

Suntem adaugati la traffic.ro, si cateva motoare de cautare, dar mai dureaza pana ne indexeaza, if ever. Traffic.ro ne vor da raspunsul in 24h daca avem probleme cu site-ul si nu vor sa ne adauge la statistics monitoring. Nu am mai avut timp si sa scriu un articol azi dimineata, asa ca vin direct la laborator.

Pentru inceput

Hello everyone.

Fiindca nu am avut o idee mai buna in timpul cursului de CI de azi, ne-am gandit sa folosim un acronim care sa aiba in el IE. Si cum orice as fi facut in limba romana suna bizar, am scrijelit jumatate de pagina de A4 cu Evolved Interfaces (EI) si alte litere pe langa astea 2, doar doar imi iese ceva pronuntabil si care sa aduca a nume de echipa. In final, a iesit ZEIT, pe motivul ca e cuvantul din germana care inseamna timp (nu stiu germana, btw :P), si suna cool Zero Evolved. Asadar, a luat fiinta Zero Evolved Interfaces Team. Yay!

Ar trebui sa va bagati conturile de pe gmail la admin, folosind invitatii de pe contul facut de Catalin, ca sa avem o accesibilitate mai usoara si username diferiti pentru post-urile pe care le facem.

Tema 1

Intrucat am inteles ca xmlurile cu profilurile noastre trebuie puse pe site si sa creeze ideea FOAF trebuie sa putem referi xmlurile colegilor de echipa din al nostru. Deci cred ca cel mai ok e ca fiecare sa aleaga un nume pentru xml-ul sau si sa ni-l comunice. Numele fisierului meu va fi catalin.xml.

Bafta!
Catalin.