not.user.friendly Posted July 13, 2011 Report Posted July 13, 2011 (edited) Ca sa intelegeti tutorialul aveti nevoie de cunostinte minime de PHP, HTML, CSS si putin Javascript.Javascript este un limbaj care lucreaza in browserul utilizatorului (client-side), cu javascript se poate afla rezolutia utilizatorului, rezolutia este preluata de catre javascript din browser care detecteaza rezolutia folosita la deschiderea sa, adica acea valoare nu se schimba decat atunci cand se redeschide browser-ul (...si se schimba rezolutia).Un exemplu concret:Avem rezolutia 800x600 si deschidem browserul, browserul salveaza rezolutia temporar, acum daca schimbam rezolutia pe 1600x1200, browserul are stocata tot valoarea initiala pe care a avut-o la momentul initierii programului, adica 800x600, pentru a schimba acea valoare trebuie sa inchidem si sa pornim browserul pentru a se verifica rezolutia iar si sa i se schimbe valoarea daca este necesar.Codul Javascript care detecteaza rezolutia este:<script type="text/javascript">var height = screen.height; /* lungimea */var width = screen.width; /* latimea */document.write('Rezolutia ta este: 'width+'x'+height); /* Rezolutia ta este: 800x600 */</script>Deci se poate afla rezolutia cu ajutorul Javascript, dar cum folosim aceste valori pentru a genera cod CSS:Acest lucru se poate face in mai multe limbaje dar eu voi discuta doar despre PHP pentru ca este mai cunoscut decat alte limbaje.Cod<?php/* detect_rez.php */session_start(); /* Folosim sesiuni pentru a evita pierderea informatiei *//* daca utilizatorul intra in pagina cu javascript pornit iar dupa il opreste informatia ramane in sesiune iar daca javascript e pornit seiunea va fi detectata la fiecare incarcare a paginii */$_SESSION['height'] = '<script> document.write(screen.height); </script>'; /* Sesiunea este egala cu valoarea returnata de Javascript */$_SESSION['width'] = '<script> document.write(screen.width); </script>'; /* -||- */$height = $_SESSION['height']; $width = $_SESSION['width']; /* Variabile mai usor de retinut */?>Cam asa ar trebui sa arate fisierul Cascading Style Sheets:<?php/* css.php */include('detect_rez.php'); /* vezi codul de mai sus */header('content-type: text/css'); /* Tipul de continut al fisierului este CSS sub forma de TEXT */if($width=800 && $height=600){ /* daca rezolutia este 800x600, codul de mai jos */?>body{ background-color:#000; /* negru */ width:400px; color:red;}<?php }else if($width=1024 && $height=768){ /* daca rezolutia este 1024x768, codul de mai jos */ ?>body{ background-color:#f00; /* rosu */ width:900px; color:white;}<?php }else{ /* Rezolutia nu este nici una dintre cele de mai sus sau nu a fost detectata */ ?>body{ background-color:#00f; /* albastru */ width:1200px; color:red;}<?php } /* sfarsit if/else */ ?>/* CSS-ul folosit este doar un exemplu. */Acum sa vedem cum arata pagina HTML<!doctype html><html> <head> <title>Pagina HTML</title> <link rel="stylesheet" type="text/css" href="css.php" /> <!-- fisierul cu CSS generat in functie de rezolutie --> </head> <body> Pagina care are CSS generat in functie de rezolutie. </body></html>P.S. Exemplele sunt doar sugiestive, folositi-va imaginatia si incercati sa faceti website-ul la care lucrati sa arate bine si in cele mai mici sau cele mai mari rezolutii.____________________________________________Este ceva simplu si folositor, sper ca ati inteles. Edited July 13, 2011 by not.user.friendly o mica greseala. 1 Quote
robertutzu Posted July 13, 2011 Report Posted July 13, 2011 (edited) Felicitari pt tutorial...folositor cred eu...dar ca idee nu poti face asta si cu css cu strech si procentaj la text si imagini?EDIT: Probat acum...si nu merge am facut tot ce ai zis imi arata doar negru cand ar trebui sa arate albastru...am rezolutie peste 1024ca ideie codul tau ar fi bun sa incarce fisiere separate de css cand detecteaza ce rezolutie ai ca sa nu incarce un fiser urias de css pt toate rezolutiilesau merge si asta:<script type="text/javascript">if(screen.width==1024){document.write("<link rel='stylesheet' type='text/css' href='style_1024.css' />"); // css pentru rezolutie 1024 }else{document.write("<link rel='stylesheet' type='text/css' href='style_other.css' />"); // pt alte rezolutii}</script> Edited July 13, 2011 by robertutzu Quote
not.user.friendly Posted July 13, 2011 Author Report Posted July 13, 2011 (edited) ^Am zis ca se poate in mai multe limbaje, dar totusi cred ca e mai simplu de inteles cu PHP, si merge, nu stiu de ce la tine nu a functionat.L.E. daca folosesti doar javascript este posibil ca utilizatorul sa il opreasca dupa ce intra in pagina si sa nu mai functioneze. Edited July 13, 2011 by not.user.friendly L.E. Quote
robertutzu Posted July 13, 2011 Report Posted July 13, 2011 imi arata doar css cu negru...plm...da-mi un pm cu un id de mess ceva sa vb ceva pe mess Quote
turnback Posted July 13, 2011 Report Posted July 13, 2011 Se numeste layout fluid si nu ai nevoie de php, se poate numai din css + js.Adaptive CSS-Layouts: New Era In Fluid Layouts? - Smashing Magazinele: sau http://www.maxdesign.com.au/articles/liquid/ Quote
not.user.friendly Posted July 13, 2011 Author Report Posted July 13, 2011 Se numeste layout fluid si nu ai nevoie de php, se poate numai din css + js.Adaptive CSS-Layouts: New Era In Fluid Layouts? - Smashing Magazinele: sau Liquid layouts the easy way | Max DesignFoarte bune articole, nu am mai auzit de "Fluid Layouts", multumesc pentru link-uri. Quote
