HTML ve CSS'nin birkaç nedenden dolayı görüşmesi zor:
Örneğin bir programlama diliyle karşılaştırıldığında çok temeldirler,
İşin içeriğine çok bağlılar. Örnekler:
Google ölçeğini, oldukça hızlı ve optimize edilmiş web sitelerini oluşturursanız, iş için röportaj yaptığınız kişiler, CSS spritelarının ne olduğunu görmezden gelemezler.
XHTML W3C geçerli web siteleri oluşturursanız, adayların XHTML 1.0 ve XHTML 1.1 arasındaki farkı bilmesini veya zorunlu niteliklerin neler olduğunu <img/>vb.
Hack'lerle dolu korkunç web siteleri oluşturursanız, röportaj yaptığınız kişilere bu tür hack'leri nasıl yapacakları, farklı tarayıcılar için farklı CSS'leri nasıl sundukları vs.
vb.
Saf bir HTML ve CSS işi ise, kişi bir yandan tasarımcılarla, diğer yandan da geliştiricilerle çalışmak zorunda kalacaktır. HTML ve CSS'yi bilmeleri gerekir, ancak çok daha değerli olan, bu insanlarla etkileşimde bulunabilmeleri ve tasarımcıların ihtiyaçlarını, geliştiricilerin gereksinimlerini ve HTML ile CSS'nin sınırlarını anlamalarını sağlamaktır.
Örneğin, HTML’lerini JavaScript geliştiricinin daha sonra etkileşim eklemesi kolay olacak şekilde nasıl yapılandırılacağını bilmeleri gerekir.
Bazı temel sorularla başlamak isteyebilirsiniz:
Favori tarayıcın hangisi?
Kişi "Internet Explorer" ı yanıtlarsa hemen röportajı durdurun: böyle birine ihtiyacınız yok.
Hayır şaka yapıyorum. Cevap önemli değil. Bunun yerine, aşağıdakileri sorabilirsiniz:
Bana en sevdiğiniz tarayıcıda kullandığınız hata ayıklama araçlarından bahsedin.
Chrome'u kullanarak birincil olarak, Geliştirici Araçları ile günlük olarak çalışıyorum. Bu araçlar bana:
Sayfadan gelen istekleri görüntüleyin,
Bir sayfanın ve ilgili kaynakların, özellikle de DNS arama, bekleme ve alma sürelerinin yüklenmesi için gereken süreyi inceleyin,
Önbellek göstergesinin yanı sıra gönderilen öğelerin başlıklarını inceleyin,
DOM’i görüntüleyin ve CSS seçicilerin nasıl uygulandığını inceleyin,
Ayrıca yüksek ölçeklenebilirlik gerektiren bir web sitesinin optimizasyonu için kontrol listesi olarak hizmet veren YSlow'u kullanıyorum. YSlow ayrıca sunucunun doğru yapılandırılıp yapılandırılmadığını belirleme konusunda iyi bir araçtır (doğru başlıkların gönderilmesi vb.).
Firefox'ta, Chrome'daki Geliştirici Araçları'na çok benzeyen araç olan Firebug kullanıyorum. Geliştirici araçları ayrıca Internet Explorer’ın yeni sürümlerinde de bulunmaktadır ve ayrıca IE7’den IE10’la uyumluluk görünümlerine geçmemi sağlıyor. Bu son özellik çok faydalıdır, çünkü onsuz birkaç sanal makineyi sadece eski testler için kurmam ya da Litmus gibi ücretli hizmetleri kullanmam için zorlanacağım .
Lütfen, <dl/>etiketin ne hakkında olduğunu açıklayın. Bu etiket için kullanım amacı neydi? Uygulamada nasıl kullanılır? Bu genişletilmiş kullanım hakkında ne düşünüyorsunuz?
Burada, kişinin <dl/>sözlükler için, bir anahtarı, <dt/>bir veya birkaç değerle ilişkilendirmesini açıklayabilmesini istersiniz <dd/>. Bu etiketin birincil kullanımı tamamen anlambilim ile ilgili olsa da, pratikte tabloları değiştirmek için yaygın olarak kullanılıyordu, buna iyi bir örnek PHPBB3 idi. Bu, tablolar sayfanın oluşturulmasını yavaşlatırken iyi bir şeydir, ancak dikkatli kullanılmalıdır: Verileri daha iyi tanımlamak için birçok durumda yalnızca tablolar hala uygun değildir, aynı zamanda normal gibi başka araçlar da olabilir. içeriği kullanmadan tanımlamak için listeler <dl/>.
Sabit ve akışkan yerleşimleri arasındaki fark nedir? Her birinin avantajları ve dezavantajları nelerdir?
Sabit düzen elemanların önceden tanımlanmış genişliklerine sahiptir. Sıvı düzeninin elemanları, sayfanın genişliğine bağlıdır.
Sabit düzen, özellikle çok sayıda tam genişlikli grafik olduğunda, sayfanın tasarlanmasını kolaylaştırır. Grafik olmasa bile, bu daha kolay, çünkü sadece hassas bir durumu önemsiyorsunuz. Örneğin, Programcılar.S sabit bir düzen web sitesi olduğundan, soruları ve cevapları gösteren sütun her zaman aynı boydadır. Bu sütun için bir akışkan düzeni kullanılacaksa, bu bir sorun yaratacaktır: küçük ekranlarda, metin okunamayacaktı, çünkü satırlar çok kısa olacak, büyük ekranlarda ise satırlar çok büyük olacaktı; de okunamaz olurdu.
Sabit düzen ile ilgili sorun birkaç, en çok kullanılan çözünürlüklerde iyi sonuç vermesi, fakat diğer her şey için az çok başarısız olması. Çok geniş, geniş ekran monitörlerin benimsenmesi ve internetin küçük, mobil cihazlarda kullanımının artması nedeniyle özellikle önem kazanıyor.
Akışkan yerleşimi bu konuda yardımcı olur, ancak böyle bir web sitesi için tasarım yapmak daha zordur. Kötü yönetilen projelerle ilgili bazı senaryolarda, bu HTML ve CSS saldırılarına, büyük sayfalara, düşük bakım yapılabilirliğe ve geliştirme sırasında daha yüksek maliyetlere ve kaçırılmış son teslim tarihlerine neden olabilir.
Sıvı düzenine sahip bir sayfada, bir metin sütununun okunaklı kalmak için çok büyük olduğu durumdan nasıl korunabilirsiniz?
max-widthÖzellik kullanarak bir metin bölgesinin genişliğini sınırlayabilirsiniz .
Eğer bu kod parçası hakkında ne düşünüyorsunuz: <p color="Red" align="Center">Text here</p>?
Kod parçası, HTML içindeki sunum mantığını karışma kusuruna sahiptir. Sunum mantığı birkaç nedenden dolayı CSS'ye yerleştirilmelidir:
- Kaygıların ve temiz kodların ayrılmasına yardımcı olur, daha sonra daha ucuz bakım anlamına gelir,
- Stilleri sayfadan sayfaya yeniden kullanılabilir kılar (bakımların dışında tutulması dışında) tüm web sitesinde aynı stilleri kullanmanıza yardımcı olur,
- CSS dosyaları önbelleğe alınacağından bant genişliğinin azaltılmasına yardımcı olur.
Bunun gibi birkaç temel sorudan sonra, biraz daha zor sorular sorabilirsiniz:
Bu renkler veya fontlar, tek bir seçicinin hedefleyemediği birden fazla öğeye uygulandığında, CSS’deki renkleri veya fontları çoğaltmaktan nasıl kaçınıyorsunuz? Dezavantajları var mı?
Bunu, Sass veya LESS gibi CSS ön işlemcileri kullanarak yaparsınız. Renkleri, yazı tiplerini ve stilin diğer kısımlarını, stillerinizde daha sonra kullanabileceğiniz değişkenlerin içinde tanımlamaya izin verir.
CSS önişlemcilerinin sakıncaları şudur:
Tarayıcıda güncel CSS kodunun bulunması için bazen geliştirme ve dağıtım iş akışını değiştirmeleri gerekir.
Sadece birkaç geliştirici tarafından bilinir ve bu da yeni bir kişinin projeye daha sonra katılmasını veya sürdürmesini zorlaştırır.
Sass veya LESS için hem iyi hem de hızlı IDE yoktur ve en popüler IDE'lerin içindeki entegrasyon oldukça hayal kırıklığı yaratmaktadır.
hrefCDN'de bulunan ve bu görüntünün hem HTTP hem de HTTPS üzerinden erişilebilen bir web sitesinde gösterilmesi koşuluyla, bana bir görüntünün değerine bir örnek verin .
HTTPS, çağrılan her kaynağın HTTPS'de de bulunmasını gerektirdiğinden (aksi takdirde, birçok durumda kullanıcıya bir güvenlik uyarısı görüntülenir), bağlantıyı şu şekilde belirtmek mümkün değildir http://cdn.example.com/image.png. Resme düzgün bir şekilde bağlanmak için //cdn.example.com/image.pngkullanılmalıdır; Tarayıcı daha sonra içeriği http:ya https:da içeriğe bağlı olarak hazırlar .
Bir web sitesindeki sayfaların boyutu ve istek sayısının optimize edilemediği ve içerik değiştirilemediği veya AJAX eklenemediği göz önüne alındığında, kullanıcıya web sitesinin daha hızlı olduğu izlenimini nasıl veriyorsunuz? HTML perspektifinden neler içeriyor?
HTTP 1.1 kullanılıyorsa, sayfa tıkanmış olabilir . Bu, ilk bölümlerin daha hızlı görüneceği anlamına gelir ve web sitesinin gerçekte olduğundan daha hızlı olduğu izlenimini verir. Parçalanmış aktarım kodlaması HTTP 1.0'da imkansızdır, bu durumda yapacak bir şeyin olmadığı anlamına gelir.
Öğütülmüş içeriğe hizmet verebilmek için, öğeleri yeniden düzenlemek için HTML perspektifinden, en kritik olanları dosyanın üstüne koymak gerekir (bu, sayfanın başında görünmeleri gerektiği anlamına gelmez). Örneğin, bir e-ticaret web sitesinde, kullanıcı ürünün ayrıntılarını görmek istediğinde, ilk parça <head/>ve ürün ayrıntılarını içerebilir . Bir sonraki öbek, web sitesinin logosu, ana menü, telif hakkı vb. Gibi temel unsurları içerebilir. Son olarak, son öbek, "Bunu ayrıca satın alan kişiler" bölümünü, yorum ve puanlarını içerebilir. "Facebook'ta Paylaş" vb.
Son olarak, adaydan gerçek dünyadaki bir senaryo üzerinde çalışmasını isteyebilirsiniz. Aşağıdakilerden en kolay olanı gibi, kişinin CSS sprite veya diğer gelişmiş optimizasyon teknikleriyle, tarayıcı tutarsızlıklarıyla uğraşması gereken karmaşık senaryolar için herhangi bir şey olabilir.
Lütfen iki bölgeli bir XHTML sayfası oluşturabilir misiniz: Soldaki, bir listeli ve sağdaki, metin içeren. İki bölge, sayfanın en üstünden en altına uzanan dikey bir çizgiyle ayrılır. Liste ve metin boyutuna göre değişir, hangisinin en büyük yüksekliğe sahip olacağını tahmin edemezsiniz. <table/>S kullanamazsınız
Aslında, oldukça basit ama kişinin yükseklikler hakkında düşünmek için refleks var olup olmadığını gösterir. Deneyimsiz bir aday float:leftbölgeyi ve bölgeyi yaratacaktır border-left:solid 1px #ccc;, ancak sınırın sol bölgeye eklenmesini ve genişletilmesinin iki sınırın aynı yerde olmasını sağlayacak şekilde genişletilmesini unutacaktır.
