Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

Web Design pentru copii: Bine ați venit în orașul Tuts+!

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website

Romanian (Română) translation by Adelina Vasiliu (you can also view the original English article)

Bine ați venit în orașul Tuts+, unde toată lumea iubește web designul! În această serie vom învăța despre proiectarea și construirea unui website. Pentru a ne fi mai ușor, vom construi un website împreună.

Aceste lecții (sau tutoriale) oferă un ghid pas cu pas pentru aducerea unui site la viață. Aceste fișiere cu exerciții vor fi incluse la finalul fiecărei lecții, pentru putea compara oricând este nevoie.

Te rog, așază-te confortabil și hai să creăm ceva pentru locuitorii orașului Tuts+!

Cum funcționează Webul?

Să facem un pas înapoi și să ne gândim la cum funcționează webul.

Două computere pot comunica între ele, atunci când sunt conectate la Internet (simbolizat aici de linia galbenă din imaginea de mai jos).

Un server (cutia albastră) este un computer special care stochează fișierele cu paginile web. Computerul de acasă sau de la școală nu este un server, pentru că nu este conectat direct la Internet. Ne conectăm la Internet printr-un Internet Service Provider (ISP).

Conținutul unui site (toate lucrurile pe care le găsim acolo) este organizat în cadrul unui set special de reguli pe care computerele pe înțeleg, o vorbire în secret, un limbaj codat, dar pe care în curând îl vom pătrunde și noi!

Cum se conectează computerul tău la web

În această imagine, browser-ului i se cere să vizualizeze www.tutsplus.com de pe serverul unde sunt localizate fișierele site-ului. Serverul trimite fișierele înapoi și browserul le traduce pentru afișa o pagină pe ecran. Și acest lucru se întâmplă foarte rapid!

Este vorba despre comunicare și distribuirea informației.

Tot din acest motiv, un site pe care îl creezi la nivel local (pe calculator) nu poate fi vazut de alte persoane de pe un alt computer, până când nu sunt mutate fişierele pe un server. Ne vom apleca asupra acestui lucru în mod corespunzător mai târziu.

Jobul unui Designer Web 

Atribuțiile unui designer web sunt foarte importante. Toate lucrurile ce au loc în imaginea de mai sus se întâmplă pentru un motiv: a vizualiza un site web. Munca unui designer web este să decidă modul în care arată și funcționează acest site, dar și să se asigure că site-ul este utilizabil pentru vizitatorii cu dizabilități (și tu ești acum vizitator pe Tuts+).

Jobul unui Designer Web 

Proiectul nostru

În această serie, vom crea un site web pentru oraşul Tuts +. Oraşul are nevoie de un loc unde turiștii pot obţine informaţii utile despre oraş, înainte de a vizita.

Aici este o previzualizare a site-ului:

Ce vom construi

Acest site va include toate elementele de design web pe care le vom fi învățat. Va fi un prim proiect de web design foarte potrivit pentru tine!

Schițarea și construirea

Acum să vorbim puțin despre ceea ce avem nevoie pentru a ajunge acolo.

În primul rând, vom face o schiță pentru site şi apoi vom include într-un fișier special ceea ce vrem să avem pe pagină. Vom adăuga, de asemenea, link-uri pentru vizitatori pentru a accesa alte locuri, cum ar fi site-urile magazinelor.

Schiţa este importantă!

Stilul

După ce desenăm şi scriem fişierul special pentru site, vom avea nevoie să îl facem să arate bine. Aceasta este partea în care vor prinde viață toate ideile noastre despre culori și organizare (decizia despre unde vor fi amplasate pe ecran toate elementele).

Cum putem face site-ul nostru uşor de utilizat? Ce impresie vrem să confere culorile noastre? Unde ar trebuie totul plasat pe ecranului smartphonului? Dar pe ecranul complet al computerului? Ce font va arăta cel mai bine? Acestea sunt toate lucrurile la care va trebui să ne gândim, dar nu te îngrijora, este un proces distractiv și toate aceste întrebări vor primi în mod natural un răspuns, pe măsură ce vei realiza mai multe site-uri.

Harta Seriei

Mai jos avem un itinerar complet al călătoriei pe care o vom face pentru a crea site-ul web. Fiecare bloc are o introducere în subiect şi apoi este împărțit în bucăţi mai mici.

Itinerarul nostru

Introducere

Poți vedea după steaua roz că citești în acest moment secțiunea Intro. Acum ai o idee de bază despre cum funcţionează webul, despre jobul unui designer web, şi ai aruncat o privire asupra proiectului pe care îl vom construi împreună.

Realizarea unui site web

Următoarea parte este cea în care venim cu idei și începem să schițăm. Schițarea este un mod distractiv de a ne aduna gândurile asupra unui design înainte de începe să codăm. Acest pas ne ajută să salvăm timp și să ne abatem de la drum.

Apoi vom vorbi despre fişierele şi instrumentele de care avem nevoie pentru a începe cu partea de codare a site-ul nostru.

HTML

HyperText Markup Language (HTML) este acel limbaj secret (dar nu pentru mult timp!) folosit pentru a organiza fişierul nostru text despre care am vorbit pe scurt mai devreme. Acest limbaj ajută browserele noastre să înţeleagă şi să afișeze fişierele site-ului web.

Totul pe site-ul nostru, şi pe toate site-urile, trăiește în interiorul elementelor HTML. Elementele sunt părticele din acest limbaj, care au o semnificaţie şi ajută la descrierea a tot ce punem pe pagină.

Nu îți face griji despre ceea ce înseamnă de fapt codul în acest moment, atâta timp cât ştii că orice site este făcut dintr-un document scris.

CSS

Cascading Stylesheets (foi de stil în cascadă) sau CSS, ne permite să setăm stiluri (culori, fonturi, impresie generală) pentru site, făcându-l atractiv şi cât mai uşor de utilizat pentru vizitatori.

Cum arată CSS

Organizarea CSS

CSS ne poate ajuta, de asemenea, să punem toate piesele pe pagină.

Imagini

În această parte a călătoriei, vom vorbi rapid despre tipul de imagini care vor fi incluse pe site-ul nostru şi cum li se vor aplica stiluri. Vor fi patru imagini minunate de adăugat, ce părere ai despre ele?

Our images

Principii de bază în design

În această parte, ne vom uita la "blocuri de construcție" ale designui web. Vrem să ne asigurăm că realizăm ceva ce va fi folosit cu ușurință de oameni și va arăta bine.

Tipografie

Tipografia este arta de aranjare a textului şi o minunată continuare pentru lecția noastră de design, deoarece poate contribui la succesul site-ului sau îl poate defavoriza semnificativ.

Primul exemplu de tipografie de pe site-ul nostru poate fi găsit în partea de sus:

Heading

Culoare

Culoarea este foarte importantă şi prilej de distracţie. Culoarea poate face un site drăguț și are în același timp diferite semnificații, despre care ne vom vorbi aici.

Sfârşitul seriei

Vom termina această serie de lecţii, învățând despre cum să transferăm fişierele site-ului pe unul dintre acele calculatoare speciale, un server, astfel încât toţi prietenii şi familia să îl vadă pe Internet. De asemenea, vom discuta despre cum vei putea aplica ce ai studiat după ce ai obținut noul titlu "Web Designer pentru Orașul Tuts +".

Dar sa nu ne preocupăm prea mult cu asta, abia am ajuns aici!

Ne vedem curând!

În lecţia următoare, ne vom apuca direct să învățăm cum să ne pregătim pentru construirea unui site web cu HTML. Abia aștept, ne vedem prin oraș!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.