cateva intrebari

Buna,sunt incepator in web design.sunt atras de Photoshop,de macromedia flash,pe scurt imi place sa creez site`uri.ma ajut de macromedia dreamweaver in lipsa cunostintelor html :).stiu cate ceva,dar nu cred ca m-as descurca daca mi s-ar pune un Notepad in fatza:).
vreau sa va intreb daca tb sa trec la alte metode pt ca eu creez pagini in photoshop (le "desenez") ,iar pe urma le impart in slice-uri si le import in dreamweaer.este o metoda invechita pentru un webdesigner?daca ma pot numi web designer ;)).
site-ul Forno d`oro nu l`am terminat sau mai bine spus nu l`am predat pentru ca nu am fost platit.am lucrat mult si gratuit,dar imi place ceea ce fac si consider ca nu e chiar degeaba pt ca lucrand inveti.astept niste pareri...sfaturi.multumesc!

Si intrebarea care e? :D
Daca o faci din pasiune este foarte bine, asa ajungi mare.
Daca o faceai doar de dragul de a stoarce pe cineva de bani, atunci nu aveai nici un viitor.

Ce pot sa-ti spun, succes in continuare si bun venit pe forum.

multumesc de urare darkangelbv :)
intrebarea era dak e o metoda gresita de a face un site.
tu cum lucrezi ? cu ce?

Edited by dwhite, 21 October 2007 - 14:17.

Notepad++ ;)
Cel mai bun cod este codul scris de mana.
Invata ceva HTML si CSS pentru inceput, apoi iti va fi foarte usor sa creezi un website ca la carte.

Un mic logo facut de mine in Photoshop...era pt un site de constructii case la cheie,dar nu a mai fost nevoie.Poate inspir si eu pe cineva cu el.. :P (incerc doar sa ma fac util:P) poate daca o sa am nevoie o sa fiu ajutat si eu la randul meu.
astept cateva...pareri...si critici :) mai multe...

Primul lucru pe care l-am remarcat sunt acele linii care dau un aspect oriental (japonez...), e frumos da' vezi sa se potriveasca cu firma respectiva :D

Quote

eghhh.. pe masura ce inveti o sa descoperi ca e tot mai greu sa definesti "un site ca la carte". Mai ales cand dai de notiuni de semantica care pot fi interpretabile. si nu e singurul exemplu :)

@dwhite: metoda ta e gresita din mai multe puncte de vedere:
1: photoshopul nu e capabil sa genereze cod care sa fie corect (atat din punct de vedere semantic cat si la nivel de cod)
2: o sa ai super surpriza ca la o rezolutie diferita de 1024x768 sa arate ca naiba
3: codul generat e foarta greu de controlat (daca nu chiar imposibil), de cele mai multe ori ducand la rescrierea sa in intregime.
4: CSS?

Eu nu cred sa fi facut vreodata export de html dintr-un psd.. si nici nu o sa o fac vreodata. :P

Recomandari:
1: sa ai ca prim scop nu banii, ci site-ul respectiv
2: sa inveti html/css (pt amandoua www.w3schools.com e un loc bun de start. ATENTIE! e un loc bun de start si cam atat)
3: descoperi tu dupa ce stapanesti tehnologiile astea mai intai.

Edited by xnoise, 23 October 2007 - 15:49.

xnoise, on Oct 23 2007, 16:45, said:

El se referea la împărțirea unei imagini în felii, treabă care nu știu cum o faci cu HTML/CSS. Numa dați din gură aiurea, credeți că dacă scrieți 3 rînduri de CSS într-un site, gata ați dat pe spate pe toți vizitatorii și voi sînteți mari profesioniști. Ce treabă are felierea unei poze cu rezoluția de 1024x768 ?

dwhite, în multe cărți se recomandă împărțirea unei poze în feliuțe mai mici, dar asta numai dacă poza este mare și ca suprafață și ca fișeir în KBites. (se spune că mai multe feli ale unei poze se încarcă mai repede decît un întreg)

Și eu folosesc ImageReady de feliere a unei poze și apoi generarea tabelului și a întreg codului necesar pt plasarea fiecărei felii în celula corespunzătoare.
Apoi dau Copy la tot tabelul și îl copiez în fișieru HTML. Desigur, în acest caz acel tabel trebuie să aibă dimensiunile stabilite în pixeli (nu %), astfel că inghețat nu va fi nici o problemă dacă vizitatorul schimbă rezoluția monitorului.
Prezentul site al lui Softpedia se lățește sau se îngustează după cum e setată rezoluția monitorului. Dar sînt situri www.mediaimobiliare.ro sau www.invitatile.go.ro, sau marele http://www.yahoo.com și multe altele, la care conținutul are aceeași lățime, indiferent de ce rezoluție ai la monitor.


Continuă, succes :)

Edited by darkangelbv, 24 October 2007 - 21:27.

altu care sare aiurea

1: nu stiu cat de multe stii despre semantica, dar sa stii ca tabelele NU SUNT PT LAYOUT. OK????
2: Photoshop-ul NU STIE sa exporte altceva decat chestii pozitionate absolut sau tabele, ceea ce nu e prea agreabil.
3: Am destula experienta sa pot sustine ceea ce am spus, si cred ca stiu ceva mai bine CSS descat tine (poate ma insel, dar ma indoiesc).
4: Eu prefer imagini mai mari pt simplul motiv ca la multe vizite faci mai multe request-uri. Fiecare imagine din pagina este de fapt un obiect (btw, o imagine se poate introduce in pagina si cu tagul object), ceea ce duce la supraincarcarea serverului (iti pot da date de pe unul dintre cele mai vizitate site-uri din romania sa vezi cam ce trafic este generat lunar)
5: Este fix problema ta ce folosesti, asta nu inseamna ca e si corect.
6: Think again inainte sa vbesti. In tot ce ai zis nu ai dat niciun sfat, nu ai facut decat sa te iei de mine. Cred ca aproape orice incepator vede ca exista site-uri lichide si site-uri fixe nu? Eu macar am dt niste sfaturi care mi s-au parut folositoare, si mi-am si argumentat spusele. How about you?

Nu vreau sa intrati in polemici .poate eu nu m-am exprimat bine si imi cer scuze.Asta era de fapt.Impart imagini in Photoshop cu slice-uri.nu stiu cat e de bine sau cat e de rau...chestia e ca mi-ati cam taiat elanul...adica m-am chinuit mult sa invat si ma gandeam ca am ajuns cat de cat la un nivel...si acum ..cand ma gandesc ca tb sa invatz Css...si multe altele...planul meu era sa invat php...dar se pare ca ar tb sa o iau de la alt capat.
nu stiu daca e bine cum procedez si daca dimensiunile tabelului sunt stabile.multumesc pentru replay.
http://web.clicknet....white/test.html  pagina impartita in photoshop cu slice-uri si editata in dreamweaver.Va rog daca se poate sa-mi mai spuneti doar daca e incadrata corect in centru...si daca se vede urat la alte rezolutii sau daca asa trebuie sa se vada.(eu am incercat la dif. rezolutii dar nu stiu exact daca asa trebuie sa se comporte).
multumesc!


un mic logo...daca se poate numi :D

xnoise, on Oct 24 2007, 20:37, said:

ai tu ce ai cu tabelele. Situl Softpedia încă este tabelar  :P  TABELELE SÎNT PT LAYOUT, sînt mai ușor de folosit și de înțeles de către începători (ori dwhite vrea să facă situri acum), plus că riscul de a vedea diferențe de afișare între IExplorer și vulpea de foc sau alte browsere, este minim.
Folosești cumva CSS 2? Să nu-mi zici că pagina e afișată identic în toate browserele.

pt mine codu javaS ce mi l-a făcut ImageReady a fost foarte bun. L-am copiat în fișieru HTML la locul în care a trebuit și OK
la fel, nu toți cei care nu lucrează după stilu tău, greșesc.
sfaturile nu erau pt tine, ci i-am confirmat lui dwhite că nu este greșit ceea ce face.

Succes la amîndoi

Edited by Nigel, 25 October 2007 - 09:00.

asta tot nu inseamna ca ai dreptate. Si tabelele sunt pt DATE TABULARE. Nu pt layout. Faptul ca softpedia foloseste tabele nu inseamna ca e si corect. Si de fapt IPB foloseste tabele, nu softpedia. Sunt si eu curios, daca erau pt layout, de ce se numesc tabele? oare la tine definitia tabelelor suna altfel decat la mine? probabil.

2: Da ... fisierele CSS pe care le creez fac ca pagina sa arate exact la fel in toate browserele mari (de la IE 5.5 la IE7, de la FX 1.5 la FX 3.x alpha, Opera-8 si 9, Konqueror, Flock etc etc etc). Nu am zis ca nu e mai usor cu tabele, dar din pucnt de vedere semantic este incorect sa le folosesti.

Ca sursa de informatie:
http://hotdesign.com...everything.html
http://web.archive.o...bleless_layouts

si un citat din specificatia w3c pt elementul table:

Quote

BTW: imageready genereaza cod javascript?? poate html, javascript ma indoiesc. Cred ca faci niste confuzii destul de grave, ce nu prea demonstreaza ca ai avea cum sa dai sfaturi.

O alta mica problemuta cu tabelele: se incarca INTAI tabelele la intrarea pe o pagina, si abia dupa aceea elementele grafice. Afirmatia asta e bazata pe ceea ce am remarcat eu in momentul accesarii unui site cu tabele pt layout si cu o durata de incarcare destul de mare. E suparator. In afara de asta, mai sunt probleme legate de comportamentul tabelelor cross-browser si de controlul CSS asupra tabelelor (nu stiu daca ai dat vreodata de bug-uri legate de imagini in table-cells, da eu am dat).

revin cu cateva screenshot-uri luate in timpul incarcarii paginii de care vbea dwhite. A se observa cum se incarca tabelele. Pt mine aste e chinul final. Loading time final: 1.4 secunde (si am banda).

@dwhite: da e corect incadrata. In 1 ora maxim o sa revin cu aceeasi pagina facuta cu CSS. O sa atasez atat fisierul html cat si CSS-ul ca un mic demo.

xnoise iti multumesc mult pentru replay-uri la fel si tie nigel.va multumesc mult.ma bucur ca pot invatza lucruri noi de la oameni care stiu.pana acum nu m-am gandit sa dau pe forum,am invatzat tot din tutoriale ...nu am prea avut in jurul meu oameni cu experienta sau cunostinte avansate in acest domeniu.oricum nu cred ca e prea tarziu sa invatz css.doar ca unele proiecte tb sa le termin si ...nu stiu daca mai am timp sa invat css si sa le creez asa.o sa invat pe parcurs si cand stiu bine bine o sa imi schimb stilul.
ah si inca ceva...se poate ca pozele sa se incarce mai greu pentru ca din Photoshop nu le-am salvat optimizate,adica am vrut sa le vad mai clare.banuiesc,ca din cauza ca photoshop nu lucreaza vectorial,pozele,optimizate pentru web se vad putin mai rau decat daca erau modificate vectorial...sau nu stiu dar atunci cand incerc sa le modific pentru a fi exportate ca slice-uri (ma refer la claritate) ele isi pierd foarte mult din aceasta.

Edited by dwhite, 25 October 2007 - 11:38.

uite si testul: scuze ca a durat atat de mult, dar am mai avut si alte treburi:

http://www.xpertweb.ro/testcss/

@dwhite poti sa il iei sa il studiezi. Mai sunt cateva chestii care nu se pot face prea usor din css, dar eu cred ca este overall mult mai bun decat cel cu tabele. Problemele ar fi cam astea: daca coloana de contact devine mult prea mare, coloanele din stanga ei nu se vor lungi (de fapt doar prima trebuie sa se lungeasca pt a avea efectul scontat). problema rezolvabila prin javascript. La fel cu celelelte coloane. Se pot crea din JS metode de comunicare intre aceste elemente.

Imbunatatiri:
1: oricat de mult text ai baga in oricare dintre casete, designul ramane stabil (nu cum e acum).
2: teste de comparatie: se pot face pe http://www.websiteop...analyze/wso.php (intre versiunea veche si cea noua). (atentie la imagini, nu am optimizat deloc pt ca nu am avut timp). Este posibila scaderea dimensiunii paginii undeva in jur de 120 KB (e destul de mult, dar sunt destule imagini pe acolo asa ca aici nu am ce face). Atentie totusi, dimensiunea html-ului pt cel in css este de aproape 5 ori mai mica decat cea a celuilalt. De asemenea se fac numai 15 request-uri , spre deosebire de 37.
3: Site-ul in CSS este valid HTML 4.01 Strict (recomandarea oficiala de doctype pt documente HTML), in timp ce cel vechi pe langa ca nu are doctype, este si plin de greseli:

versiunea veche: http://validator.w3....%...ine&group=0
versiunea noua:
http://validator.w3....%...ine&group=0

Cateva hint-uri pt viitor: Nu orice este posibil din HTML. Data viitoare cand ai de desenat un site, gandeste-te cum sa arate frumos dar sa poata fi si implementat usor si fara prea multa bataie de cap. Renunta la prea multe gradiente, pentru ca sunt extrem de dificil de manipulat (uneori chiar imposibil). Un alt motiv pt renuntarea la gradiente este faptul ca acestea sunt imagini, deci duc la request-uri suplimentare.
Daca totusi te decizi sa le folosesti, incearca sa le folosesti numai pe cele verticale si orizontale (unde din CSS poti adauga si o culoare care sa fie in continuarea background-ului cand acesta se termina), si nu pe cele oblice (la care nu ai ce sa faci, decat sa incerci sa le mentii la o anumita dimensiune).
Cand faci un design, incearca sa identifici pe pagina "patratelele" sau mai bine zis "dreptunghiurile" care contin diverse zone ale layout-ului. Iti va fi mult mai usor sa structurezi HTML-ul dupa aia.

Am uitat sa mentionez ceva: Browsere pe care am testat: IE5.5, IE 6, Opera 9, FX 2.0, Flock 0.9. Pe linux inca nu am cum sa testez, dar banuiesc ca rezultatele vor fi multumitoare.

Edited by xnoise, 25 October 2007 - 13:46.

ma cam uit ca bou` la poarta noua :D ...din nou imi dau seama ca...ce credeam eu despre cunostintele mele...era doar o mare iluzie :D eu chiar nu stiu nimic si e cazul sa ma pun sa invat calumea si sa-mi restructurez modul de lucru daca se poate spune asa.mie imi e f usor sa le aranjez si arata bine pagina daca nu stii webdesign :),dar daca te uiti in sursa cred ca iti vine sa te iei cu mainile de cap si sa fugi nu-i asa ? :(
eu le tai ca slice-uri in Photoshop si le asez in dreamweaver...si asta nu cere prea multe cunostinte html sau css...dar daca e gresit prefer sa invat...sau nu neaparat gresit,dar...sa spunem nepotrivit pentru un webdesigner.
nu am prea inteles ce ai facut dar cred asa...ca ai luat toate imaginile ce formau site-ul si ai facut un style.css pentru ele si le-ai rearanjat dar de data asta cu tabele css.gresesc ? sunt afon rau de tot la css ...
daca asa e...sau aproximativ...eu am deschis codul sursa la pagina html si am vazut ca ai acolo un file style.css am downloadoat-o si ma uit la ea din dreamweaver.acolo scrie cum au fost formate si aranjate coloanele unde vin iserate pozele ?vizibil se incarca mult mai repede si cand testez pagina,in comparatie cu paginile facute de mine nu contine erori :)
una dintre putinele erori ale paginii mele "This page is not Valid (no Doctype found)!" daca se poate spune eroare..oricum cand vreau sa testez pagina imi scrie : the page is not valid ...si cu asta cred ca spune destule si despre stilul meu si despre cat stiu.. :) imi e rusine :D
multumesc.

nu exista tabele CSS. CSS este doar un limbaj utilizat pentru formatarea html-ului.

Quote

Cat despre erorile tale, W3C (autoritatea ce emite specificatiile CSS, HTML, XHTML, XML, SOAP, etc etc etc) specifica foarte clar ca este element obligatoriu. La fel cum sunt <html>, <head>, <title>, <body>. Fara ele documentul nu va fi niciodata valid. De asemenea W3C recomanda utilizarea unui doctype HTML 4.01 Strict, si nu a unuia tranzitional, loose sau frameset.

De ce html si nu XHTML? pt ca XHTML-ul nu este suportat chiar de cel mai raspandit browser: IE (nici versiunea 7 nu are parser de XHTML).

Pe masura ce inveti HTML, o sa descoperi multe alte chestii care iti pot face viata mai usoara. CSS e unul dintre aceste "chestii". Daca vrei se poate face o paralela intre XSLT si CSS (destul de aproximativa). XSLT este tot un limbaj, dar el specifica cum XML-ul ar trebui sa arate. In principiu treaba cu HTML si CSS este o chestie de separatie intre doua lucruri distincte: interfata si display-ul grafic. Un exemplu foarte elocvent este www.csszengarden.com. Ce este uimitor la acea colectie de "template-uri" sa le zic asa, este ca au ACEEASI SURSA HTML, DAR CSS DIFERIT. O sa ramai uimit cate lucruri se pot face cu ajutorul CSS-ului. poti schimba complet aspectul unui site fara sa ai nevoie sa schimbi HTML-ul (cel putin in teorie).

Pentru inceput, www.w3schools.com e un loc bun pt a incepe invatarea HTML-ului. Recomand sa te apuci de acolo, si sa inveti intai HTML (nu sa treci la CSS direct). Notiuni de genul: block-level elements, inline elements, replaced elements, flow, etc etc etc ar trebui sa devina parte a limbajului tau profesional pana sa te apuci sa inveti CSS.

Sper ca te ajuta sfaturile mele, si sper sa devii un coder bun, cu orientari spre standarde, nu un coder hit and run.

imi sunt de folos desigur.iti multumesc si..va multumesc pt tot replay-uri si tot :).O sa invat treptat pentru ca la facultate fac si c++ si tb sa invatz ...(invatat consider ca presupune si exercitiu daca nu cumva cel mai mult exercitiu )credeti ca e prea mult? :) html,C++...si cu timpul dupa ce o sa inteleg bine html o sa ma apuc si de css.e gresit ?
multumesc inca o data pt tot...mi-au fost si imi sunt tare de folo sfaturile.ma apuc de invatzat :P ..cu siguranta o sa mai am intrebari pe parcursul lecturarii :D
p.s.: am mai gasit un site interesant   http://www.worklance...ial/primiipasi/ ...cum vi se pare ? sper sa ajute si pe altcineva.