Html/Css Çalışma Taslağı

[monoscope]

http://responsive.gs/

[cempostaci]

hazır templateler var internette. psd'leri oluyor içlerinde.
o psd'leri kullanarak (biraz photoshop bilgisi lazım) tasarımdan aldığın minik pixel yada görseller ile siteni giydirmeye başla.
css ile yapacaksın tabi bunu zaten. ben böyle yapıyorum. sadece görseline bakarak neyin nerede olmasına karar veriyorsun. görselde beğenmediğin şey içinde sen kendin bir şey belirliyorsun vs.

[aramil]

monoscope said:

http://responsive.gs/

(tu)

[reyou]

monoscope said:

http://responsive.gs/

lannnnnnnnnnnnn!

cok iyi :D

tam aradigin sey.

[valequenta]

abi aradaginiz oyduysa twitter bootstrap var

http://www.initializr.com/

var en babasindan

[reyou]

anam cidden bu babaymis, bookmarkladim!

[reyou]

valequenta said:

bu arada

buna;
https://dev.windowsphone.com/en-us/featured/next-app-star

katiliyormusun? lan ben son gun submit bugun zannediyodum, hafta sonu kicim cikti appi bitircem diye, megersem en son bugun certification dan gecmesi gerekiyomus :D

[valequenta]

ya katildim da dandik 1-2 app ile katildim. Halo 4 gelir iste en kotu :)

[aramil]

burada sorayım hemen;

patidaşlar bu sayfanın orta yerinde sağa ya da sola yaslı küçük butonumsu div'ler oluyor, bastı mıydı divi açılıyor aynı yerde, aynı zamanda sayfayı takip ediyor scroll durumlarında. örnek bulamadım bir türlü :s bir el atın lütfen :)

[monoscope]

position:fixed yabacan

[aramil]

o tamam zaten de anlatamadım sanırım, örnekle geliyorum 1sn :D

[kek]

css'nin en iyi uygulandığı yer:
http://www.csszengarden.com/

[reyou]

baktim degilmis.

[Kojiroh]

http://mashable.com/

HTML'iyle, JS'iyle, CSS'iyle front end konusunda yardırmış bi sitedir. HTML kodunun başında ASCII nyan cat olan bi siteden bahsediyoruz sdfs

[aramil]

......... adresindeki resmi kayıpsız sıkıştırmak, 20,8KiB tasarruf sağlayabilir (%14 azalma).

diyor Google PageSpeed Insights, nedir nasıl yapılır bu sıkıştırma?

[di]

JPEG ve turevleri = kayipli sikistirma (sikistirma orani arttikca kalite dusuyor)

PNG = kayipsiz sikistirma

diyelim kabaca.

Imajin transparan ise ya da matematik fonksiyonlari ile kolayca tanimlanabilecek bir imaj ise -mesela gradient'lerden, geometrik sekillerden ve egrilerden olusuyorsa- PNG kullanman daha mantikli. Yok fotograf galerisi icin imajlari kesip bicip koyacaksan JPG kullanman daha mantikli.

[aramil]

(tu)

[Suark]

yerine

ler kullanılıyor hep baktığım örneklerde, var mıdır görsel bi sebebi? yoksa sadece okunabilirlik veya yazılımsal kolaylık için mi böle?

bide,
ilk yaptığım site şu, daha da yapmadım
-tasarımla dalga geçmeyin çok yeteneksizim baba ben -

http://www.gelincikguzelliksalonu.com/

çok noob işi felanda, işte bişiler örendim yapıoken ( o kayan butonlu yer full css mesela ^^ ) DE çözünürlük değişimlerinde, fotoların yanlarında kalan yazıların yerleri falan değişiyor.
Tabi ben bodoz

kullandım onlar için, bişiler yapmaya çalıştım gene netten bakıp bakıp ama pek beceremedim, var mı pratik bi yolu yoksa absolute layout kullanmamalı mıyız?

[Ractamainus]

semantik sebeplerden li kullanılıyor. senin de tercihin olsun.

[Kojiroh]

Ne için li kullanılmış? Menü ise evet menülerde genelde

-
• kullanılır, hem semantik (anlamlı) olması açısından, hem de kolaylıkla stillendirilebilir olmasından dolayı. Mantıksal olarak bi liste belirten şeyler için
  -
  • kullanılır ki menüler bunun en güzel örneği. Mesela bi anketteki sorular ve cevapları için de iç içe
    -
    • 'ler kullanılabilir.
      
      Mesela o menüde sen bi tane
      koyup içindeki 'lara ID'ler verip o ID'ler bazında margin tanımlamışsın. Üstelik a'ların hepsinde aynı classı vermişsin. İşini görmüş ama doğru bi yaklaşım değil.
      
      Şöyle bi yaklaşım daha doğru olur:
      

      HTML

      
      

      
      
      • Anasayfa
      
      
      • Hizmetlerimiz
      
      
      • Şubelerimiz
      
      
      • İletişim
      
      

      
      

      
      

      CSS

      
      .menu {
      list-style: none outside none;
      }
      
      .menu li {
      float: left;
      margin-right: 30px;
      }
      
      .menu a {
      background-color: #FFFFFF;
      border: 1px solid #FFFFFF;
      border-radius: 10px 5px 10px 5px;
      color: #E90305;
      display: block;
      padding: 1px 15px;
      text-decoration: none;
      }
      

      
      
      Özetle li'lere float: left vererek yeni satır oluşturmadan birbirlerinin yanına sola doğru yaslan demiş oluyosun.
      
      Ama HTML yapısından tut CSS kurallarıan kadar genel olarak çok eksik var tabi sayfada, hatta bu verdiğim HTML'i CSS'i eklesen başına daha çok iş açacaksın (clearfix'ler olsun, reset/normalize CSS olayı olsun) sdf. Gerçi nerdeyse her projede kullanılan olaylar oldukları için yavaştan o yaklaşımları öğrenmen iyi olur.
      
      Şimdi teker teker hepsini anlatırsam burdan aya yol olur o yüzden şu konuları kendin bi araştır derim sdf:
      - İçeriği ortalamak için genel olarak nasıl bi HTML ve CSS yapısı kullanılıyo
      - Neden p/span/a gibi tag'lerin içinde div olmamalı vb. (bu tarz biçok kural var)
      - Semantic HTML
      - Clearfix olayı http://nicolasgallagher.com/micro-clearfix-hack/
      - Reset/normalize CSS olayı http://meyerweb.com/eric/tools/css/reset/ https://github.com/necolas/normalize.css http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css

[di]

Aga ne ne icin yaratilmissa onun icin kullanicaniz iste.

Liste yaratiyosan ol/ul bunun icin. Tablo yaratiyosan table bunun icin. Baslik kullanicaksan h1-h6 bunun icin. Div dedigin division'dan ya da divider'dan geliyor. Haliyle web sitesini header, footer, sidebar, content gibi bloklara ayirmak icin.

Uzayip gidiyor iste liste.

[Suark]

kojiroh terazini kırdım adamım

[toggie]

header, footer'ı falan gidip list ile yapmıyoruz iste. di yine sinirlenmis sdfgh.

[di]

Lan niye sinirleyeyim durduk yere. Manyak miyim ?

[toggie]

azcık manyaklık yok degil :)