html css trikovi smartfoni testiranje rezolucije

html css trikovi smartfoni testiranje rezolucije

Trick 16 - Smartfoni (testiranje rezolucije)



Nazad


Smartfoni - testiranje rezolucije


U IFRAME čiji je način funkcinisanja i stilizovanja opisan u času 55.1. uneti web adresu (domen) U nastavku se daje render web strane u nekim standarnim rezolucijama (smartfone). Svaki IFRAME ima svoju klasu kod stilova koja ima neka svoja svojstva. U ovom slučaju jedina razlika izmedju klasa su dimenzije IFRAME-a po pitanju širine i visine što u renderu daje prikaze ekrana u različitim rezolucijama za neke standarne smartfone. NAPOMENA: Ovu vežbu pregledati preko DESKTOP računara (ne preko mobil uredjaja) jer IFRAME ima fiksne dimenzije pa kod nekih mnjaih ekrana ti Div Tag-ovi mogu da "izadju" iz ekrana mobil uredjaja. Ovu vežbu pregledati samo preko DESKTOP računara kada se želi testirani pregled web sajta ili aplikacije (raspored formi) preko standarnih dimenzija ekrana.

Head


<style type="text/css">
.smart1 {                         
 width: 280px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 340px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart2 {                         
 width: 280px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 393px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart3 {                         
 width: 280px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 428px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart4 {                         
 width: 280px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 500px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart5 {                         
 width: 320px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 500px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart6 {                         
 width: 335px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 527px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart7 {                           
 width: 374px;                   /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 596px;                  /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
</style>

Body


<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Apple Iphone 3/4 i LG Optimus S - 320 x 480</h3>  
<iframe class="smart1" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Samsung Galaxy S2 i ASUS Galaxy 7 - 320 x 533 </h3>  
<iframe class="smart2" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Apple iPhone 6 - 320 x 568 </h3>  
<iframe class="smart3" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Samsung Galaxy S3/4 - 320 x 640</h3>  
<iframe class="smart4" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Samsung Galaxy S5 - 360 x 640</h3>  
<iframe class="smart5" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Apple iPhone 6 - 375 x 667</h3>  
<iframe class="smart6" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Apple iPhone 6 plus - 414 x 736</h3>  
<iframe class="smart7" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

Prikaz u Browser-u


 

Saradnje posle završene obuke

Kada završite obuku i krenete da samostalno dizajnirate web sajtove, postoji mogućnost da naiđete na projekte koji Vam se mogu učiniti zahtevni po pitanju više stavki - tehnologija, klijent zahteva da sajt ima neke posebne opcije itd. TEKOMS nudi opciju saradnje po pitanju realizacije web projekata odnosno da zajednički realizujemo web sajt ili web aplikaciju. Ukoliko Vam se stvore određeni zahtevi za realizaciju nekog web projekta a niste sasvim sigurno da možete da samostalno odgovorite na njih slobodno nam pošaljite na email i vrlo brzo daćemo sve potrebne sugestije, savete kako da taj web projekat zajednički realizujemo.

Sertifikat kao opcija

Ukoliko mislite da imate dovoljno znanja možete uraditi određene vežbe posle koga možete dobiti Potvrdu da se uspešno savladali - Kurs web dizajna - HTML,CSS. Polaganje predstavlja izradu web stranica prema tačno definisanim smernicama kako trebaju da izgledaju. Polaganje je ozbiljno i prolaznost je oko 50%. Polaganje podrazumeva da posle 3-5 dana pošaljete komplet urađene vežbe na email (komplet izvorni kod sa pratećim folderima) nakon čega Vam stiže email sa sugestijama. Ukoliko se vidi da su neke greške lako rešive, rad se vraća na reviziju da se koriguje i vrati u određenom roku. Na taj polaganje predstavlja realnu situaciju u kojoj ćete se nalaziti u saradnji sa firmama kojima radite web sajt - a to je da tačno isprogramirate web stranicu kako se klijent tražio. Cene polaganja možete videtu na stranici - Cene obuka