Sayfayı yeniden boyutlandırdığınızda, bu blok elemanları incelikle birbirlerinin altına düşer. Harici bir stil sayfasında birkaç farklı medya sorgusu örneği kurdum. Bu, daha sonra bir şeyler düzenlemek için geri dönerken stilleri takip etmeyi kolaylaştırır.

 
 
 
Jake Rocheleau
 
Serbest Yazar ve Web Geliştirici
  Hudson, Massachusetts, Amerika Birleşik Devletleri  [email protected] Portföyüm • @jakerocheleau 
 
  
 
 

Detaylı CSS'ye geçmeden önce mikro verilerin kullanımı hakkında daha fazla bilgi vermek istiyorum. Yakından bakarsanız isimleri ile birçok farklı öğelerin içinde nitelikleri çöp öğe türü, itemscope, ve itemprop. Bunların hepsi web için bir veri yapısı sunmayı planlayan Schmea projesiyle ilgilidir..

Faydalı Mikro Verileri Biçimlendirme

Google, Yahoo! Ve Bing dahil tüm büyük arama motorları, Schema’yı veri işaretlemesi için en iyi sözdizimi olarak kabul etmiştir. Kendiniz hakkındaki ayrıntıları etiketleyerek, bu arama motorlarının içeriğiniz için çevrimiçi olarak alakalı sonuçları görüntülemesine yardımcı olur. Bunları nasıl ayarlayacağımızı parçalayalım.

İtemscope özelliği, bir şema maddesi hakkında bilgi içeren herhangi bir kaba uygulanır. Bunu her zaman, bu senaryoda bir kişiyi tanımlayan itemtype niteliği izler. Bu sarmalayıcı div içindeki herhangi bir içeriği, dokümantasyon sayfasında listelenen ayrıntıların yanı sıra birlikte kullanarak da etiketleyebilirim.

Önerilen yöntem, içeriğinizi doğrudan öğeye eklemek yerine bir yayılma etiketinin içine sarmaktır. Bir fotoğraf gibi bir şeyi etiketlerken, img doğrudan eleman. Ancak, aksi takdirde verilerinizi span etiketlerine sararak daha temiz bir işaretlemeye sahip olursunuz..

Ne Kadar Çok Ne Kadar?

İçine girebileceğiniz ayrıntı miktarında bir sınır olmadığını iddia ediyorum. Mikro veriler, bilgisayarların insanları, kuruluşları, ürünleri ve diğer öğeleri çevrimiçi bir bağlamda tanımalarına yardımcı olmak için kullanılabilir. Ne kadar çok bilgi sunabilirseniz, o kadar iyi.

Aklımızı tutup açıp bu mikro verileri kendi web sitenizde nasıl kullanabileceğinizi görmek faydalı olacaktır. Schema dokümantasyonuna geçmek için 10-15 dakika harcarsanız, düşündüğünüzden çok daha kolaydır. Özgeçmiş demosundan iki sağlam örneğe bakabiliriz:

 
 
Yetenek Seti
 
 
gelişme
 
 
HTML5 / CSS3
 
JavaScript ve jQuery
 
PHP Backend
 
SQL Veritabanları
 
Wordpress
 
Pligg CMS
 
Bazı Amaç-C
 
 
 
 
Yazılım
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel ve phpMyAdmin
 
Xcode 4
 
 
 
 

Çeşitli yeteneklerimi sıralarken, ItemList şemasını tanımlayan yeni bir konteyner hazırladım. Bir Kişi altında listelenecek herhangi bir beceri seti ya da deneyimi yoktu, bu yüzden bu güvenli bir alternatif. Buradaki değer, Google’ın her birini anlayabilmesidir. itemListElement birbirleriyle ilgilidir. Bu durumda nasıl çalışacağımı bildiğim bir dil ve yazılım listesine sahibiz..

 
 
son Makaleler
 
  CSS ve Javascript İçin 10 Yararlı Geri Dönüş Yöntemi • Yayınlanan Temmuz 2012
 
  URL'leri WordPress'te Yeniden Yazma: İpuçları ve Eklentiler • Yayınlanan Temmuz 2012
 
  Web İçin JPEG Optimizasyonu - Ultimate Guide • Yayınlanan Temmuz 2012
 
  Mükemmel HTML Bültenini Tasarlamak İçin 9 Püf Noktaları • Yayınlanan Mayıs 2012
 
  Google Web Sitesi Optimize Edici ile A / B Testi Kılavuzu • Yayınlanan Mart 2012
 
 

Bir başka güzel örnek ise en altında bulunan makalelerin listesidir. Hepsi çevrimiçi olarak bulunan içerikle ilgili makaleler ve blog gönderileri için bir şema ayarı var. Bu arama motoru tarayıcıları için makale URL’sini ve yayınlanma tarihini, bu bilgiler yeterli.

Sadece mikro verilerin tümünün bilgisayarlar tarafından düzenlenecek içeriği biçimlendirme ile ilgili olduğunu unutmayın. Bu tek sayfalık özgeçmiş, belirli bir kişi hakkındaki özellikleri tanımlamak için mükemmel bir örnektir. Bunlar her web sitesinde faydalı olmayacak, ancak anlamak için heyecan verici bir metodoloji..

Göreceli CSS Stilleri

Bu son bölümde, tüm bu web sayfasının nasıl düzenleneceğine bir göz atalım. Stil sayfamızın en üstüne doğru bazı başlangıç ​​sıfırlamaları ve temel eleman özelliklerini tanımlıyorum. Bunlar, başlıkları, liste öğelerini ve bağlantıya getirme vurgusu efektlerini içerir.

* marj: 0; dolgu maddesi: 0;  html yükseklik:% 101;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); yazı tipi boyutu:% 62,5; dolgu tabanı: 65 piksel;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; renk: # 454545; yazı tipi boyutu: 3.6em; marj-alt: 6 piksel;  h2 font-ailesi: "Simonetta", "Trebuchet MS", Arial, sans-serif; renk: # 484848; yazı tipi boyutu: 2.5em; marj-alt: 10 piksel; metin dekorasyon: altı çizili;  h3 font-ailesi: "Trebuchet MS", Verdana, Arial, sans-serif; renk: # 777; yazı tipi ağırlığı: normal; yazı tipi boyutu: 1.8em; marj-alt: 10 piksel;  h4 font-ailesi: "Trebuchet MS", Verdana, Arial, sans-serif; renk: # 656565; yazı tipi ağırlığı: kalın; yazı tipi boyutu: 1.75em; marj-alt: 4 piksel;  p font-family: "Balthazar", "Droid Şerif", Times New Roman, serif; renk: # 565656; yazı tipi boyutu: 1.8em; hat yüksekliği: 1.4em; marj-alt: 15 piksel; dolgu-sol: 35 piksel;  small font-family: "Balthazar", serif; renk: # 656565; yazı tipi boyutu: 1.6em; Ekran bloğu; marj-alt: 6 piksel;  ul display: block; liste tarzı: yok;  ul li doldurma-sol: 45 piksel; list-style-type: yok; dikey hizalama: üst; arkaplan: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25 piksel 5 piksel no-tekrar; marj-alt: 5 piksel; font ailesi: "Balthazar", serif; renk: # 666; yazı tipi boyutu: 1.6em; hat yüksekliği: 2.3em;  img kenarlık: 0; maksimum genişlik:% 100;  a renk: # 5582d6; metin dekorasyon: yok;  a: vurgulu text-decoration: altı çizili;  

Özel yazı tipi yığınlarının bazıları dışında çok ilginç bir şey yok. Ayrıca varsayılanı kullanmak yerine benzersiz bir kurşun simgesi aldım. “disk”. Benzer bir tasarım bulmaya çalışırken Icon Finder gibi bir dizinde arama yapmayı deneyebilirsiniz.

/ ** @group çekirdek düzeni ** / #w marj: 0 piksel 50 piksel; dolgu maddesi: 20px 40px; dolgu üst: 35px; arkaplan: #fff; min-genişlik: 260 piksel; maksimum genişlik: 900px; sınır-alt-sağ yarıçapı: 8px; sınır-alt-sol yarıçapı: 8px; -webkit-border-sol-yarıçapı: 8 piksel; -webkit-border-alt-sağ yarıçapı: 8px; -moz-sınır-yarıçapı-alt-yarıçapı: 8px; -moz-border-radius-dip altı: 8 piksel;  başlık genişlik:% 100;  / ** @group kişisel ayarlar ** / #info float: left; marj-alt: 12 piksel;  #photo float: sağ;  #photo img -webkit-border-radius: 3px; -moz-sınır yarıçapı: 3px; sınır yarıçapı: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-kutu-gölge: 0 2px 4px rgba (0, 0, 0, 0.2); kutu-gölge: 0 2px 4px rgba (0, 0, 0, 0,2); arkaplan rengi: #fff; kenarlık: 1px katı #ccc; dolgu maddesi: 5px;  

Sayfada, dikkat gerektiren yalnızca birkaç önemli blok alanı vardır. Elbette, sarmalayıcı div, ilave kenar boşlukları ve dolgu ile kurulur. Ayrıca maksimum genişlik 900px'te sınırlıdır, çünkü daha büyük boyutlarda sayfa çok fazla boşluk olduğu hissediyor. Ayrıca, gözler üzerinde daha yumuşak bir etki için sayfanın altındaki köşeleri yuvarlattım..

Duyarlı tasarım

Muhtemelen bu çevrimiçi özgeçmişin en önemli yönü duyarlı işlevselliktir. Tarayıcı penceresini yeniden boyutlandırırken çeşitli efektler elde etmek için beş farklı kesme noktası kurulumum var.

@ sadece medya ekranı ve (maksimum genişlik: 740 piksel) h1 font-size: 4.5em;  h3 yazı tipi boyutu: 2.2em;  h2 ekran: blok; metin hizalama: orta;  #info float: none; Ekran bloğu; metin hizalama: orta;  #photo float: yok; Ekran bloğu; metin hizalama: orta;  #w dolgu maddesi: 20 piksel 15 piksel;  p doldurma: 0;  

İlk 740px fotoğraf görüntüsünün başlık metnimizle çakışacağı yerin tam ortasındadır. Fotoğrafın sağ tarafa düşmesine izin vermek yerine, her iki öğeyi temizler ve tüm düzeni ortalarız. Daha sağlam bir etki bırakmak için başlık metni boyutunu da artırdım.

Pencere küçüldükçe, sarmalayıcı div ve paragraflarından bazı ekstra dolguları çıkardım. Başlıktan sonra karşılaştığımız bir sonraki problem UL listeleme becerilerinden. İki sütunlu yaklaşımı yıkarım ve bunun yerine yan yana kayan liste öğelerini kullanırım.

@ sadece medya ekranı ve (maksimum genişlik: 570 piksel) ul li ekran: satır içi blok; sol doldurma: 15 piksel; genişlik: 140px; arka plan konumu: -5px 0px; kenar boşluğu: 6 piksel; hat yüksekliği: 1.7em;  # beceriler-sol, beceriler-sağ marj-alt: 15px;  

Bu, varsayılan metin özelliklerinin çoğunun yeniden konumlandırılmasını da gerektirir. Satır yüksekliğini güncellemeli ve her bir öğenin madde işareti simgesini yeniden konumlandırmalıyız. Sabit bir genişlik belirledim, böylece kılavuz bir sonraki kesme noktasına kadar daha organize görünecek.

Akıllı Telefonlar için Kodlama

Son üç medya sorgusu küçük ama çok önemli. Manzara ve portre modu arasında geçiş yaptığınızda, iPhone herhangi bir mobil tarayıcıyı yeniden boyutlandıracak. Bu, çoğu Android cihazında ve Windows Mobile telefonlarında da geçerlidir..

@ sadece medya ekranı ve (maksimum genişlik: 480 piksel) ul li genişlik: 120 piksel;  #w marj: 0 20 piksel;  @media only screen ve (maksimum genişlik: 320px) #w margin: 0 10px;  / ** Yalnızca iPhone ** / @media ekran ve (en fazla aygıt genişliği: 480 piksel) ul li genişlik: 150 piksel;  

İlk önce 480 piksele veya daha küçük bir sayıya ulaştığında, paketleyiciden biraz daha fazla dolgu maddesi çıkarır ve ayrıca liste öğelerini yeniden boyutlandırırız. Sonra 320px'de, belgenin dışındaki kenar boşluğunun bir kısmını kaldırdım. Dokulu arka planı hala görebilirsiniz, ancak bu kadar ince bir dikey görünüm alanında çok önemli değil.

Son olarak kullanıyorum Maksimum aygıt genişliği iPhone cihazının kendisini veya maksimum 480 piksel genişliğe sahip herhangi bir mobil ekranı hedeflemek için. Bu durumda liste öğelerini biraz daha genişletmek istiyorum, böylece tüm ekranı dolduracaklar. Bu, sadece manzara görünümündeki beceri listelerini etkileyecektir, çünkü portre herhangi bir farklılığı farkedemeyecek kadar sıskadır..

• gösteri
• Kaynak Kodunu İndir

Son düşünceler

İnternet üzerinden çalışmak genellikle en az bir tür çevrimiçi portföy gerektirir. Tek bir sayfaya bağlantı verebileceğiniz zaman, birlikte düzenlenen tüm ayrıntılarınızla devam edersiniz, bu iş demek istediğinizi gösterir. Ciddi işverenler ve potansiyel müşteriler, web tasarımında profesyonellik konusunda karizmatik bir görüntü sergilemesi için topukların üstesinden gelecektir..

Umarım bu eğitimden bazı önemli noktaları alabilirsin. Dünyanın herhangi bir yerindeki serbest çalışanlar, kendilerini biraz teknik çaba ile pazarlayabilirler. Yukarıdaki demo kaynak kodumu indirmekten çekinmeyin ve bu yazı hakkındaki düşüncelerinizi yorum bölümümüzde paylaşın.