DEV SERİ Frontend | Temel Kavramlar #1

teux

Katılımcı Üye
23 Ocak 2023
959
1,329
vcRcLMS.png
dpxeqyj.png


Merhaba Türk Hack Team Ailesi ben teux.

Aklımda "Frontend" ile alakalı güzel bir seri başlatma fikri var, nasipse En temelden alıp Temel kavramlardan başlayıp Html Css Scss Bootstrap Javascript Angular gibi konulara giriş yapmayı hedefliyorum çeşitli web projeleri çeşitli iş imkanları github reporlarını içinde barındırdığı sizlere aktarırken kendimde bazı yerleri öğreneceğim güzel bir seri düşünüyorum :)

m41W18.png



Seriden Maximum fayda alabilmek açısından bu alanda sıfır veya temel olan kişilerin konulardaki tüm projeleri uygulamalı denemelerini tavsiye ederim.

İstek ve Önerilere açık bir seridir : )

Devamlılığının olması dileğiyle : D

Konuya geçmeden önce web alanında kafanız frontend mi backend mi kararsızsanız veya web ile alakalı aklınıza takılan bir soru olursa aşağıdaki konuma göz atmanızı tavsiye ederim.


https://www.turkhackteam.org/konular/tum-detaylariyla-web-programlama-sss.2038644/

F3beZqk.png



FRONTEND | Temel Kavramlar #1 KONU İÇERİĞİ ;
Konu nezlinde çok kavram var ancak bazılarını sırası geldiğinde ele alacağız ilk konu olduğundan yeni başlayan kişilerin gözünü korkutmak istemem :)
Seri genelinde bazı anlatım gerektiren alanlarda yapay zekadan ve internet araştırmalardan alıntı illaki olacaktır konular en detaylı şekilde hazırlanmaya çalışıldığından mazur görün !!!

1-) Frontend istiyorum nelere hakim olmam gerek ?
2-) Web Nedir?
3-) Domain, Hosting, Paylaşımlı Hosting Nedir?
4-) Web Tasarım Aşamaları
5-) HTTP ve HTTPS Nedir ?
6-) URL Nedir ?
7-) Seri Boyunca Kullanılacak Kaynaklar


KAPANIŞ

F3beZqk.png


1-) Ya iyi güzel hoşta ben frontend istiyorum nelere hakim olmam gerek ?

frontend-nedir.png



Dostum sen frontend yani ön yüz geliştirici olmak istiyorsan ilk başta
Frontend Developer, nedir ne değildir bir kavraman için yukarıda linkini verdiğim konuma bir göz at, genel manada ele alacak olursak bir Frontend geliştirici web sitesinin veya web uygulamasının kullanıcı arayüzünü oluşturur ve geliştirir. İyi bir Frontend Developer olmak için aşağıdaki temel beceri ve teknolojilere hakim olmanız önemlidir:

  • HTML: Web sayfalarının yapısal olarak oluşturulması için HTML (Hypertext Markup Language) diline hakim olmalısınız. HTML, içeriği organize etmek ve semantik olarak doğru bir yapı oluşturmak için kullanılır.

  • CSS: Web sayfalarının stilini düzenlemek ve görsel olarak tasarlamak için CSS (Cascading Style Sheets) kullanılır. CSS ile renkler, düzen, tipografi, animasyonlar gibi görsel özellikler belirlenir.

  • JavaScript: Web sayfalarına etkileşim ve dinamizm kazandırmak için JavaScript dilini kullanmanız gerekmektedir. JavaScript, kullanıcı etkileşimleri, veri işleme, API entegrasyonları ve web sayfası davranışları gibi birçok işlevi gerçekleştirebilir.
78Ilde35SFSD5y1v.gif

  • Responsive Web Tasarımı: Farklı cihazlarda (mobil, tablet, masaüstü) uyumlu çalışabilen web sayfalarını tasarlamak önemlidir. Responsive web tasarımı, medya sorguları ve CSS teknikleriyle sayfanın boyutunu ve düzenini cihaz ekranına göre ayarlamak demektir.

  • CSS Preprocessorleri: SASS veya LESS gibi CSS preprocessorlerini kullanarak CSS kodunuzu daha organize, yönetilebilir ve tekrar kullanılabilir hale getirebilirsiniz. Bu preprocessorler, değişkenler, fonksiyonlar ve modüller gibi gelişmiş CSS özelliklerini destekler.

  • JavaScript Frameworkleri ve Kütüphaneleri: Popüler JavaScript frameworkleri ve kütüphaneleri (örneğin, React, Angular, Vue.js) öğrenmek ve kullanmayı öğrenmek önemlidir. Bu araçlar, bileşen tabanlı geliştirme, veri yönetimi ve state yönetimi gibi karmaşık görevleri kolaylaştırır.

  • Version Control Sistemleri: Git gibi version control sistemlerini kullanmayı öğrenmek önemlidir. Bu sistemler, kodunuzu takip etmenize, sürümleri yönetmenize ve ekip üyeleriyle işbirliği yapmanıza olanak tanır.

  • Web İletişim Protokolleri: HTTP, REST, AJAX gibi web iletişim protokolleri hakkında bilgi sahibi olmalısınız. Bu protokoller, sunucularla veri alışverişini sağlar ve API entegrasyonları için önemlidir.

  • İyi Tasarım İlkeleri: İyi bir kullanıcı deneyimi sunmak için temel tasarım ilkelerini bilmek önemlidir. Kullanıcı dostu arayüzler oluşturmak, erişilebilirlik, performans ve kullanılabilir




F3beZqk.png



1-) Web Nedir? ( Tarihçesi, Nereden Neden Çıktığı, Çalışma Mantığı, Protokolleri, Web 1.0 - Web 1.4 )

Web Nedir demeden webin tarihçesine çıkış amacınada bir göz atalım dostlar, işi en temelden alacaksak bunlarada kulağımıza küpe olmalı :) Web'in tarihçesi, 1989 yılında İngiliz bilgisayar bilimcisi Tim Berners-Lee'nin CERN'de çalışırken World Wide Web'i (web) geliştirmesiyle başlar. Berners-Lee, bilim insanlarının bilgi paylaşımını kolaylaştırmak için bir sistem oluşturmayı amaçlıyordu.

kod-yaz%C4%B1n-yaz%C4%B1l%C4%B1m-yap%C4%B1n.gif


Web sayfaları, HTML (Hypertext Markup Language) adı verilen bir dil kullanılarak oluşturulur.
HTML bir programlama dili değil bir işaretleme dilidir aslına bakarsanız bir web sitesinin iskeletidir. HTML, web sayfalarının yapısını ve içeriğini belirlemek için etiketlerden oluşan bir sistemdir. Web sayfaları ayrıca CSS (Cascading Style Sheets) ve JavaScript gibi diğer teknolojileri de kullanarak görüntü ve işlevsellik kazandırabilir. Web, insanların bilgiye hızlı erişimini sağlayan, iletişimi kolaylaştıran ve küresel olarak bilgi paylaşımını teşvik eden önemli bir araç haline gelmiştir. İnternet üzerindeki birçok web sitesi, haberler, e-ticaret, sosyal medya, eğitim, eğlence ve daha birçok konuda bilgi ve hizmet sunmaktadır.

2e4ad780-22d4-11eb-9462-c592865da9eb


Kısaca webin çalışma mantığı şu şekildedir;

Bir ziyaretçi, tarayıcısının adres çubuğuna bir sitenin adresini (alan adı/domain) yazdığında, bilgisayarı, sitenin dosyalarını, kodlarını tutan web sunucusuna bağlanmak için bir istek gönderir. Her web sitesinin adresi veya alan adı, bulunduğu web sunucusunun IP adresine bağlıdır.


HTTP ye konu detaylarında ileride bakacağız ancak şöyle web protokolleri konusu açıldıysa burada da kısaca değinmekten zarar gelmez gibi. Teknik işleyiş olarak ele alındığında web tarayıcıları web sunucularına bağlantı kurarak bir istemde bulunur (web sayfasını sunucudan ister) ve sunucu ilgili dosyanın kaynak kodunu tarayıcıya iletir. Bu iletişim Hipermetin Aktarım Protokol'ü (HTTP) üzerinden yapılır.


E bu Web 1.0 - Web 4.0 Muhabbeti ne teux ? dediğinizi duyar gibiyim :D
Biraz önce webin tarihsel başlangıcını atmıştık e bu teknolojiler zamanla gelişen şeyler

ds6eb5q.jpg


Aslında mevzu tamda tabloda göründüğü gibi detaylara inelim teux forumdaki en iyi frontend konusu bu olsun diyorsanız buyrun detaylar :D ;


Web 1.0

Kullanıcılar o dönemde interneti bilgi edinme amaçlı kullanırdı Günümüzdeki halindenfarklı renk ve gelişmiş görüntü şekilleri yoktu. Geri dönüş yapabilecek bir form veya interaktif bir ortam bulunmaktaydı.

Web 2.0


Bilginin insanlar arasında etkileşimli bir şekilde paylaşılması ihtiyacından dolayı geliştirilmiştir. Web 2.0 karşılıklı bilginin paylaşılması, web üzerinde verilerin kayıt altına alınması, web üzerinde bilgilere ulaşırken bağlantı hızlarının artmasını sağlamıştır ve web – insan arasındaki etkileşimi daha da belirginleştiren web teknolojisi haline gelmiştir. Kullanıcıların web üzerinde ortaklaşa kullandıkları bilgileri birbirleriyle paylaştıkları ağa web 2.0 teknolojisi denebilir.

Web 3.0

Kişiselleştirilmiş web olarak düşünülebilir. Web üzerinde aradığımız bilgilere çok daha kolay ve hızlı ulaşabileceğimiz “Semantik Web” diye adlandırılan web teknolojisidir. “Semantic, anlamsal demektir. Konu itibari ile de web programlamada anlamsal etiketler olarak algılanmaktadır” Web 3.0 gelmesiyle birlikte web üzerindeki bilgilerin sadece içerdiği kelimeler değilde kelimelerin anlamları da önem kazanmıştır.


Web 4.0
Yerel disklerin kullanılmadığı tamamiyle sanallaştırma üzerine kurulu web teknolojisidir. Daha Web 3.0 tam anlamıyla uygulanıp kullanılmaya başlanmadan ve biz kullanıcılar Web 3.0 kavramını benimseyemeden, Web 4.0 hakkında çeşitli çalışmalar yapılmaya başlandı bile Web 4.0 teknolojisinde yapay zeka ve “Zenginleştirilmiş Gerçekçilik” (Augmented Reality) teknolojisi önplana çıkmaktadır. Bununla birlikte kişisel verilerin depolanmasında Bulut Uygulamalarının kullanımının artırılması, fiziksel disklerin kullanım problemlerinin ortadan kaldırılması hedeflenmektedir.



sacasww.webp



F3beZqk.png


2-) Domain ve Hosting Nedir ?


Domain ne aga ???



Domain, bir web sitesinin adresini belirlemek için kullanılan bir isimdir. Örneğin, "www.example.com" gibi bir alan adı bir domaini temsil eder. Bir alan adı seçildiğinde, o domainin kaydedilmesi gerekmektedir. Domain hosting hizmeti, bu kaydetme işlemini gerçekleştirir ve bir web sitesine özel bir alan adı sağlar.


main-domain.gif


Hosting ne aga ???



Hosting ise, bir web sitesinin internet üzerinde yayınlanabilmesi için gereken altyapıyı sağlar. Bir web sitesinin tüm içeriği (sayfalar, resimler, videolar, dosyalar vb.) bir web sunucusunda barındırılır. Web sunucusu, web sitesine gelen istekleri alır ve kullanıcılara web sayfalarını gönderir. Domain hosting hizmeti, kullanıcılara hem bir alan adı kaydetme imkanı sağlar hem de web sitesinin barındırılacağı sunucuyu temin eder. Böylece, bir kullanıcı öncelikle bir alan adı kaydederek web sitesini tanımlar ve daha sonra hosting hizmeti aracılığıyla web sitesini yayınlamak için gerekli sunucuyu temin eder.



giphy.gif




Paylaşımlı Hosting ne aga ???



Paylaşımlı hosting, birden fazla web sitesinin aynı sunucu üzerinde barındırıldığı bir hosting türüdür. Bu hosting modelinde, sunucu kaynakları (bellek, işlemci gücü, disk alanı vb.) birden çok web sitesi arasında paylaşılır. Paylaşımlı hosting, genellikle küçük veya orta ölçekli web siteleri için tercih edilen bir seçenektir. Birden çok web sitesinin aynı sunucu üzerinde barındırılması maliyetleri düşürür, çünkü kaynaklar ve sunucu giderleri paylaşılır. Bu hosting türünde, her web sitesi kendi alan adına sahip olabilir ve bağımsız olarak yönetilebilir. Ancak, sunucunun kaynakları paylaşıldığı için, diğer web sitelerinin trafiği veya kaynak kullanımı bir web sitesinin performansını etkileyebilir. Yani, bir web sitesinin popüler olması veya kaynak yoğun işlemler gerçekleştirmesi diğer web sitelerinin performansını etkileyebilir.



BabyishThickEnglishsetter-size_restricted.gif








F3beZqk.png


2-) Web Tasarım Aşamaları






7fzT.gif

  • İhtiyaç Analizi: Web sitesinin veya uygulamanın hedeflerini ve gereksinimlerini anlamak için müşteriyle iletişim kurulur.
  • Tasarım Brief'i Oluşturma: Web sitesinin tasarım hedefleri, stil tercihleri ve içerik gereksinimleri belirlenerek bir doküman oluşturulur.
  • Wireframe ve Prototip Oluşturma: Sayfaların düzenini ve kullanıcı arayüzünü gösteren basit çizimler ve interaktif prototipler hazırlanır.
  • Grafik Tasarım: Renkler, tipografi, logolar ve görsel unsurların tasarımı yapılır.
  • Kodlama: Tasarım HTML, CSS ve JavaScript kullanılarak web sayfalarına dönüştürülür.
  • İçerik Yönetimi: Web sitesine metinler, resimler ve videolar gibi içerik eklenir.
  • Test ve Geri Bildirim: Web sitesi tarayıcılarda ve cihazlarda test edilir, hatalar düzeltilir ve geri bildirimler dikkate alınır.
  • Optimizasyon ve SEO: Web sitesi performansı, hızı ve SEO uyumluluğu optimize edilir.
  • Canlıya Alma: Web sitesi sunucuya yüklenir ve yayına alınır.
  • Bakım ve Güncelleme: Web sitesi düzenli olarak güncellenir, bakımı yapılır ve kullanıcı geri bildirimleri dikkate alınır.
Tabiki çeşitli projelerde veya çeşitli çalışmalarda farklı yollar izlenilebilir ancak genel manda bu başlıklar altında çalışmalar yapılmaktadır

web-tasarim-s%C3%BCreci-novasta-web-tasarim.jpg

F3beZqk.png

5-) HTTP ve HTTPS Nedir ?

HTTP (Hypertext Transfer Protocol) ve HTTPS (Hypertext Transfer Protocol Secure), web tarayıcıları ve sunucular arasındaki iletişimi sağlayan protokollerdir.

HTTP, internet üzerindeki veri alışverişinde kullanılan standart bir protokoldür. Web tarayıcıları, kullanıcının isteği üzerine sunucudan veri almak için HTTP'yi kullanır. Bu protokol, web sayfalarının ve kaynaklarının sunucudan tarayıcıya nasıl iletilip gösterileceğini belirler. Ancak, HTTP verilerin şifrelenmemiş olarak iletilmesi nedeniyle güvenlik riskleri taşıyabilir.

HTTPS ise HTTP'nin güvenli bir sürümüdür. HTTPS, web sitesi trafiğini şifreleyerek kullanıcı verilerinin gizliliğini ve bütünlüğünü sağlar. Bu protokol, SSL (Secure Sockets Layer) veya daha güncel olan TLS (Transport Layer Security) protokollerini kullanarak veri iletişimini şifreler. Bu sayede, üçüncü kişilerin verilere erişmesini veya verilerin kötü amaçlı şekilde değiştirilmesini önler.

Difference-Between-HTTP-and-HTTPS.png


HTTPS, özellikle kullanıcı giriş bilgileri, kredi kartı numaraları ve diğer hassas verilerin iletilmesi gibi durumlarda güvenlik sağlar. Ayrıca, HTTPS kullanımı web sitesinin güvenilirliğini artırır ve arama motorlarında daha iyi sıralamalar elde etmeyi destekler.

Günümüzde, çoğu web sitesi HTTPS kullanmaktadır. Web tarayıcıları, kullanıcıların HTTPS kullanmayan sitelerle iletişimi sırasında uyarı mesajları vererek kullanıcıları güvenli olmayan bağlantılara karşı korumaya çalışır. Bu nedenle, web tasarımcıları ve geliştiriciler, web sitelerini HTTPS'ye geçirmek için SSL/TLS sertifikaları satın almalı ve yapılandırmalarını yapmalıdır.
F3beZqk.png


6-) URL Nedir ?
URL (Uniform Resource Locator) internet üzerinden metin, resim, kod, css vb kaynağa erişebilmek için kulanılan adres tanımlama sistemi diyebiliriz.

Günümüzde Sunucu sistemlerinin 2'ye ayırırsak
  • Statik Web Sayfalar,
  • Web Uygulamaları; için dinamik URL alanlarının yönetilmesi Web uygulamaları ile mümkün hale gelmiştir. Örneğin REST üzerinden API çağrımlarını Web uygulaması yöneterek bunları farklı fonksiyonlara ve parametreleri ile birlikte yönlendirebilmektedir. Bu sayede 1000 lerce URL üretmek gerekmemektedir.

URL Modeli

1*Meo5sb3f1WriTIvOnV9dXQ.png

Protocol: URL hangi protokol üzerinden erişim sağlanacağını belirtir. Yukarıdaki örnekte http üzerinden url erişeceğini belirtir.

  • https,
  • ftp,
  • mailto,
Domain Name: Arkaplanda sunucular birbirlerini NameServer üzerindeki IP kayıtları üzerinden eriştiğini söylemiştik. Yani www.example.com arka planda 93.184.216.34 adresinde sunulan bir sunucudur. Biz tarayıcıya veya arkaplandan kodla URL bu Domain Name yazdığımızda Network ilerlerken isim sunucuları bunu IP dönüştürerek verinin ilerlemesini sağlarlar.

Port: Sunucu üzerindeki kapı anlamına gelir. Bu sayede aynı IP üzerinden birden fazla sunucu ile hizmet verilebilir. Örneğin 80 HTTP, 443 HTTPS, 25 SMTP vb.. sayesinde aynı sunucu üzerinden farklı farklı hizmetler verilebilir.

Url Alanı Buradan Alıntıdır daha iyi anlatan bir kaynak görmedim abimizin diğer raporlarına da göz atmanızı tavsiye ederim serinin geri kalan kısmında onlarıda ele alacağım inşallah

F3beZqk.png



7-) Seri Boyunca Kullanılacak Kaynaklar ( Yararı Dokunabilecek Kaynaklar )
  1. Grafik Tasarım Araçları:
    • Adobe Photoshop: Profesyonel düzeyde grafik tasarım yapmanıza olanak sağlar.
    • Adobe Illustrator: Vektör tabanlı grafikler oluşturmak için kullanılır.
    • Sketch: Mac kullanıcıları için popüler bir vektör tabanlı tasarım aracıdır.
  2. Mockup ve Wireframe Araçları:
    • Adobe XD: Prototipler oluşturmanızı ve kullanıcı deneyimini simüle etmenizi sağlar.
    • Sketch: Wireframe'ler ve prototipler oluşturmak için tercih edilen bir araçtır.
    • Figma: Çevrimiçi olarak çalışabilen ve çoklu kullanıcı işbirliğine imkan sağlayan bir tasarım aracıdır.
  3. Kod Editörleri:
    • Visual Studio Code: Ücretsiz ve çok yönlü bir kod düzenleyicidir.
    • Sublime Text: Hızlı ve özelleştirilebilir bir kod düzenleyici olarak kullanılır.
    • Atom: Açık kaynaklı bir kod düzenleyici olup, geniş bir kullanıcı topluluğuna sahiptir.
  4. UI Kit ve Framework'ler:
    • Bootstrap: Hazır tasarım şablonları ve bileşenleri içeren popüler bir HTML, CSS ve JavaScript framework'üdür.
    • Material-UI: Google'ın materyal tasarım prensiplerini temel alan bir React UI kitidir.
    • Tailwind CSS: Özelleştirilebilir CSS bileşenlerini içeren bir utility-first CSS framework'üdür.
  5. Renk ve Tipografi Araçları:
    • Coolors: Renk paletleri oluşturmanızı ve keşfetmenizi sağlar.
    • Google Fonts: Farklı tipografi stillerine sahip geniş bir font koleksiyonuna erişim sağlar.
    • TypeScale: İyi dengelenmiş bir tipografi ölçeği oluşturmanıza yardımcı olur.
  6. İmaj ve İçerik Kaynakları:
    • Unsplash: Yüksek kaliteli ve ücretsiz stok fotoğraflar sunar.
    • Freepik: Grafik tasarım kaynaklarını içeren bir platformdur.
    • Google Icons: İkon koleksiyonlarına erişim sağlar.

F3beZqk.png


İLK BÖLÜM KAPANIŞ
DEV SERİ Frontend | Temel Kavramlar #1
Konum Dikkatinizi çekti ise, Forumdaki Diğer Konularıma Göz Atmak İstermisin?

İdor Zafiyeti Nedir | Web Zafiyetleri #1 https://www.turkhackteam.org/konular/idor-zafiyeti-nedir-en-detayli-anlatim.2040685/#post-9798063

Windows Rehberi

Bash Kabuk İzlerini Koruma - ADLİ TIP

Sistem Önerileri

Web SSS

p7uuoyc.png

Google Üzerinde aratma yaparken öne çıkması açısından konu anahtar kelimeler
Frontend Nedir, Backendmi Frontendmi, Frontend, Türk Hack Team, THT, tht, yazılım, web programlama, detaylı anlatım, forum, anlatım, proje, nasıl para kazanırım
 
Son düzenleme:

teux

Katılımcı Üye
23 Ocak 2023
959
1,329
Eline sağlık bomba gibi bir içerik olmuş devamını beklemekteyim
Teşekkür ederim hoaydar ❤️
Şahane olmuş ellerin dert görmesin
Teşekkür ederim iyi forumlar
Teşekkür ederim iyi forumlar dilerim hocam ❤️
Eline sağlık, baya iyi olmuş.
Teşekkür ederim iyi forumlar 🙂
 

teux

Katılımcı Üye
23 Ocak 2023
959
1,329
Mükemmel konu olmuş serinin devamını dört gözle bekliyorum
Teşekkür Ederim konuya veya seriye olan ilgi yüksek olursa yüksek ihtimalle temel kavramların daha çok detaylarına inilmiş bir konu daha gelecek sonrasında html ile devam edecek, hayırlısı diyelim :D
Bende ziyaretimi gerçekleştirdim :ROFLMAO: biraz öğlene doğru kulüp alımına "+++" basarım oradada bi karşılıklı ziyaretleşme :D
 

ACE Veen

Uzman üye
4 Şub 2023
1,100
554
Belirsiz
vcRcLMS.png
dpxeqyj.png


Merhaba Türk Hack Team Ailesi ben teux.

Aklımda "Frontend" ile alakalı güzel bir seri başlatma fikri var, nasipse En temelden alıp Temel kavramlardan başlayıp Html Css Scss Bootstrap Javascript Angular gibi konulara giriş yapmayı hedefliyorum çeşitli web projeleri çeşitli iş imkanları github reporlarını içinde barındırdığı sizlere aktarırken kendimde bazı yerleri öğreneceğim güzel bir seri düşünüyorum :)

m41W18.png



Seriden Maximum fayda alabilmek açısından bu alanda sıfır veya temel olan kişilerin konulardaki tüm projeleri uygulamalı denemelerini tavsiye ederim.

İstek ve Önerilere açık bir seridir : )

Devamlılığının olması dileğiyle : D

Konuya geçmeden önce web alanında kafanız frontend mi backend mi kararsızsanız veya web ile alakalı aklınıza takılan bir soru olursa aşağıdaki konuma göz atmanızı tavsiye ederim.


https://www.turkhackteam.org/konular/tum-detaylariyla-web-programlama-sss.2038644/

F3beZqk.png



FRONTEND | Temel Kavramlar #1 KONU İÇERİĞİ ;
Konu nezlinde çok kavram var ancak bazılarını sırası geldiğinde ele alacağız ilk konu olduğundan yeni başlayan kişilerin gözünü korkutmak istemem :)
Seri genelinde bazı anlatım gerektiren alanlarda yapay zekadan ve internet araştırmalardan alıntı illaki olacaktır konular en detaylı şekilde hazırlanmaya çalışıldığından mazur görün !!!

1-) Frontend istiyorum nelere hakim olmam gerek ?
2-) Web Nedir?
3-) Domain, Hosting, Paylaşımlı Hosting Nedir?
4-) Web Tasarım Aşamaları
5-) HTTP ve HTTPS Nedir ?
6-) URL Nedir ?
7-) Seri Boyunca Kullanılacak Kaynaklar


KAPANIŞ

F3beZqk.png


1-) Ya iyi güzel hoşta ben frontend istiyorum nelere hakim olmam gerek ?

frontend-nedir.png



Dostum sen frontend yani ön yüz geliştirici olmak istiyorsan ilk başta
Frontend Developer, nedir ne değildir bir kavraman için yukarıda linkini verdiğim konuma bir göz at, genel manada ele alacak olursak bir Frontend geliştirici web sitesinin veya web uygulamasının kullanıcı arayüzünü oluşturur ve geliştirir. İyi bir Frontend Developer olmak için aşağıdaki temel beceri ve teknolojilere hakim olmanız önemlidir:

  • HTML: Web sayfalarının yapısal olarak oluşturulması için HTML (Hypertext Markup Language) diline hakim olmalısınız. HTML, içeriği organize etmek ve semantik olarak doğru bir yapı oluşturmak için kullanılır.

  • CSS: Web sayfalarının stilini düzenlemek ve görsel olarak tasarlamak için CSS (Cascading Style Sheets) kullanılır. CSS ile renkler, düzen, tipografi, animasyonlar gibi görsel özellikler belirlenir.

  • JavaScript: Web sayfalarına etkileşim ve dinamizm kazandırmak için JavaScript dilini kullanmanız gerekmektedir. JavaScript, kullanıcı etkileşimleri, veri işleme, API entegrasyonları ve web sayfası davranışları gibi birçok işlevi gerçekleştirebilir.
78Ilde35SFSD5y1v.gif

  • Responsive Web Tasarımı: Farklı cihazlarda (mobil, tablet, masaüstü) uyumlu çalışabilen web sayfalarını tasarlamak önemlidir. Responsive web tasarımı, medya sorguları ve CSS teknikleriyle sayfanın boyutunu ve düzenini cihaz ekranına göre ayarlamak demektir.

  • CSS Preprocessorleri: SASS veya LESS gibi CSS preprocessorlerini kullanarak CSS kodunuzu daha organize, yönetilebilir ve tekrar kullanılabilir hale getirebilirsiniz. Bu preprocessorler, değişkenler, fonksiyonlar ve modüller gibi gelişmiş CSS özelliklerini destekler.

  • JavaScript Frameworkleri ve Kütüphaneleri: Popüler JavaScript frameworkleri ve kütüphaneleri (örneğin, React, Angular, Vue.js) öğrenmek ve kullanmayı öğrenmek önemlidir. Bu araçlar, bileşen tabanlı geliştirme, veri yönetimi ve state yönetimi gibi karmaşık görevleri kolaylaştırır.

  • Version Control Sistemleri: Git gibi version control sistemlerini kullanmayı öğrenmek önemlidir. Bu sistemler, kodunuzu takip etmenize, sürümleri yönetmenize ve ekip üyeleriyle işbirliği yapmanıza olanak tanır.

  • Web İletişim Protokolleri: HTTP, REST, AJAX gibi web iletişim protokolleri hakkında bilgi sahibi olmalısınız. Bu protokoller, sunucularla veri alışverişini sağlar ve API entegrasyonları için önemlidir.

  • İyi Tasarım İlkeleri: İyi bir kullanıcı deneyimi sunmak için temel tasarım ilkelerini bilmek önemlidir. Kullanıcı dostu arayüzler oluşturmak, erişilebilirlik, performans ve kullanılabilir




F3beZqk.png



1-) Web Nedir? ( Tarihçesi, Nereden Neden Çıktığı, Çalışma Mantığı, Protokolleri, Web 1.0 - Web 1.4 )

Web Nedir demeden webin tarihçesine çıkış amacınada bir göz atalım dostlar, işi en temelden alacaksak bunlarada kulağımıza küpe olmalı :) Web'in tarihçesi, 1989 yılında İngiliz bilgisayar bilimcisi Tim Berners-Lee'nin CERN'de çalışırken World Wide Web'i (web) geliştirmesiyle başlar. Berners-Lee, bilim insanlarının bilgi paylaşımını kolaylaştırmak için bir sistem oluşturmayı amaçlıyordu.

kod-yaz%C4%B1n-yaz%C4%B1l%C4%B1m-yap%C4%B1n.gif


Web sayfaları, HTML (Hypertext Markup Language) adı verilen bir dil kullanılarak oluşturulur.
HTML bir programlama dili değil bir işaretleme dilidir aslına bakarsanız bir web sitesinin iskeletidir. HTML, web sayfalarının yapısını ve içeriğini belirlemek için etiketlerden oluşan bir sistemdir. Web sayfaları ayrıca CSS (Cascading Style Sheets) ve JavaScript gibi diğer teknolojileri de kullanarak görüntü ve işlevsellik kazandırabilir. Web, insanların bilgiye hızlı erişimini sağlayan, iletişimi kolaylaştıran ve küresel olarak bilgi paylaşımını teşvik eden önemli bir araç haline gelmiştir. İnternet üzerindeki birçok web sitesi, haberler, e-ticaret, sosyal medya, eğitim, eğlence ve daha birçok konuda bilgi ve hizmet sunmaktadır.

2e4ad780-22d4-11eb-9462-c592865da9eb


Kısaca webin çalışma mantığı şu şekildedir;

Bir ziyaretçi, tarayıcısının adres çubuğuna bir sitenin adresini (alan adı/domain) yazdığında, bilgisayarı, sitenin dosyalarını, kodlarını tutan web sunucusuna bağlanmak için bir istek gönderir. Her web sitesinin adresi veya alan adı, bulunduğu web sunucusunun IP adresine bağlıdır.


HTTP ye konu detaylarında ileride bakacağız ancak şöyle web protokolleri konusu açıldıysa burada da kısaca değinmekten zarar gelmez gibi. Teknik işleyiş olarak ele alındığında web tarayıcıları web sunucularına bağlantı kurarak bir istemde bulunur (web sayfasını sunucudan ister) ve sunucu ilgili dosyanın kaynak kodunu tarayıcıya iletir. Bu iletişim Hipermetin Aktarım Protokol'ü (HTTP) üzerinden yapılır.


E bu Web 1.0 - Web 4.0 Muhabbeti ne teux ? dediğinizi duyar gibiyim :D
Biraz önce webin tarihsel başlangıcını atmıştık e bu teknolojiler zamanla gelişen şeyler

ds6eb5q.jpg


Aslında mevzu tamda tabloda göründüğü gibi detaylara inelim teux forumdaki en iyi frontend konusu bu olsun diyorsanız buyrun detaylar :D ;


Web 1.0

Kullanıcılar o dönemde interneti bilgi edinme amaçlı kullanırdı Günümüzdeki halindenfarklı renk ve gelişmiş görüntü şekilleri yoktu. Geri dönüş yapabilecek bir form veya interaktif bir ortam bulunmaktaydı.

Web 2.0


Bilginin insanlar arasında etkileşimli bir şekilde paylaşılması ihtiyacından dolayı geliştirilmiştir. Web 2.0 karşılıklı bilginin paylaşılması, web üzerinde verilerin kayıt altına alınması, web üzerinde bilgilere ulaşırken bağlantı hızlarının artmasını sağlamıştır ve web – insan arasındaki etkileşimi daha da belirginleştiren web teknolojisi haline gelmiştir. Kullanıcıların web üzerinde ortaklaşa kullandıkları bilgileri birbirleriyle paylaştıkları ağa web 2.0 teknolojisi denebilir.

Web 3.0

Kişiselleştirilmiş web olarak düşünülebilir. Web üzerinde aradığımız bilgilere çok daha kolay ve hızlı ulaşabileceğimiz “Semantik Web” diye adlandırılan web teknolojisidir. “Semantic, anlamsal demektir. Konu itibari ile de web programlamada anlamsal etiketler olarak algılanmaktadır” Web 3.0 gelmesiyle birlikte web üzerindeki bilgilerin sadece içerdiği kelimeler değilde kelimelerin anlamları da önem kazanmıştır.


Web 4.0
Yerel disklerin kullanılmadığı tamamiyle sanallaştırma üzerine kurulu web teknolojisidir. Daha Web 3.0 tam anlamıyla uygulanıp kullanılmaya başlanmadan ve biz kullanıcılar Web 3.0 kavramını benimseyemeden, Web 4.0 hakkında çeşitli çalışmalar yapılmaya başlandı bile Web 4.0 teknolojisinde yapay zeka ve “Zenginleştirilmiş Gerçekçilik” (Augmented Reality) teknolojisi önplana çıkmaktadır. Bununla birlikte kişisel verilerin depolanmasında Bulut Uygulamalarının kullanımının artırılması, fiziksel disklerin kullanım problemlerinin ortadan kaldırılması hedeflenmektedir.



sacasww.webp



F3beZqk.png


2-) Domain ve Hosting Nedir ?


Domain ne aga ???



Domain, bir web sitesinin adresini belirlemek için kullanılan bir isimdir. Örneğin, "www.example.com" gibi bir alan adı bir domaini temsil eder. Bir alan adı seçildiğinde, o domainin kaydedilmesi gerekmektedir. Domain hosting hizmeti, bu kaydetme işlemini gerçekleştirir ve bir web sitesine özel bir alan adı sağlar.


main-domain.gif


Hosting ne aga ???



Hosting ise, bir web sitesinin internet üzerinde yayınlanabilmesi için gereken altyapıyı sağlar. Bir web sitesinin tüm içeriği (sayfalar, resimler, videolar, dosyalar vb.) bir web sunucusunda barındırılır. Web sunucusu, web sitesine gelen istekleri alır ve kullanıcılara web sayfalarını gönderir. Domain hosting hizmeti, kullanıcılara hem bir alan adı kaydetme imkanı sağlar hem de web sitesinin barındırılacağı sunucuyu temin eder. Böylece, bir kullanıcı öncelikle bir alan adı kaydederek web sitesini tanımlar ve daha sonra hosting hizmeti aracılığıyla web sitesini yayınlamak için gerekli sunucuyu temin eder.



giphy.gif




Paylaşımlı Hosting ne aga ???



Paylaşımlı hosting, birden fazla web sitesinin aynı sunucu üzerinde barındırıldığı bir hosting türüdür. Bu hosting modelinde, sunucu kaynakları (bellek, işlemci gücü, disk alanı vb.) birden çok web sitesi arasında paylaşılır. Paylaşımlı hosting, genellikle küçük veya orta ölçekli web siteleri için tercih edilen bir seçenektir. Birden çok web sitesinin aynı sunucu üzerinde barındırılması maliyetleri düşürür, çünkü kaynaklar ve sunucu giderleri paylaşılır. Bu hosting türünde, her web sitesi kendi alan adına sahip olabilir ve bağımsız olarak yönetilebilir. Ancak, sunucunun kaynakları paylaşıldığı için, diğer web sitelerinin trafiği veya kaynak kullanımı bir web sitesinin performansını etkileyebilir. Yani, bir web sitesinin popüler olması veya kaynak yoğun işlemler gerçekleştirmesi diğer web sitelerinin performansını etkileyebilir.



BabyishThickEnglishsetter-size_restricted.gif








F3beZqk.png


2-) Web Tasarım Aşamaları






7fzT.gif

  • İhtiyaç Analizi: Web sitesinin veya uygulamanın hedeflerini ve gereksinimlerini anlamak için müşteriyle iletişim kurulur.
  • Tasarım Brief'i Oluşturma: Web sitesinin tasarım hedefleri, stil tercihleri ve içerik gereksinimleri belirlenerek bir doküman oluşturulur.
  • Wireframe ve Prototip Oluşturma: Sayfaların düzenini ve kullanıcı arayüzünü gösteren basit çizimler ve interaktif prototipler hazırlanır.
  • Grafik Tasarım: Renkler, tipografi, logolar ve görsel unsurların tasarımı yapılır.
  • Kodlama: Tasarım HTML, CSS ve JavaScript kullanılarak web sayfalarına dönüştürülür.
  • İçerik Yönetimi: Web sitesine metinler, resimler ve videolar gibi içerik eklenir.
  • Test ve Geri Bildirim: Web sitesi tarayıcılarda ve cihazlarda test edilir, hatalar düzeltilir ve geri bildirimler dikkate alınır.
  • Optimizasyon ve SEO: Web sitesi performansı, hızı ve SEO uyumluluğu optimize edilir.
  • Canlıya Alma: Web sitesi sunucuya yüklenir ve yayına alınır.
  • Bakım ve Güncelleme: Web sitesi düzenli olarak güncellenir, bakımı yapılır ve kullanıcı geri bildirimleri dikkate alınır.
Tabiki çeşitli projelerde veya çeşitli çalışmalarda farklı yollar izlenilebilir ancak genel manda bu başlıklar altında çalışmalar yapılmaktadır

web-tasarim-s%C3%BCreci-novasta-web-tasarim.jpg

F3beZqk.png

5-) HTTP ve HTTPS Nedir ?

HTTP (Hypertext Transfer Protocol) ve HTTPS (Hypertext Transfer Protocol Secure), web tarayıcıları ve sunucular arasındaki iletişimi sağlayan protokollerdir.

HTTP, internet üzerindeki veri alışverişinde kullanılan standart bir protokoldür. Web tarayıcıları, kullanıcının isteği üzerine sunucudan veri almak için HTTP'yi kullanır. Bu protokol, web sayfalarının ve kaynaklarının sunucudan tarayıcıya nasıl iletilip gösterileceğini belirler. Ancak, HTTP verilerin şifrelenmemiş olarak iletilmesi nedeniyle güvenlik riskleri taşıyabilir.

HTTPS ise HTTP'nin güvenli bir sürümüdür. HTTPS, web sitesi trafiğini şifreleyerek kullanıcı verilerinin gizliliğini ve bütünlüğünü sağlar. Bu protokol, SSL (Secure Sockets Layer) veya daha güncel olan TLS (Transport Layer Security) protokollerini kullanarak veri iletişimini şifreler. Bu sayede, üçüncü kişilerin verilere erişmesini veya verilerin kötü amaçlı şekilde değiştirilmesini önler.

Difference-Between-HTTP-and-HTTPS.png


HTTPS, özellikle kullanıcı giriş bilgileri, kredi kartı numaraları ve diğer hassas verilerin iletilmesi gibi durumlarda güvenlik sağlar. Ayrıca, HTTPS kullanımı web sitesinin güvenilirliğini artırır ve arama motorlarında daha iyi sıralamalar elde etmeyi destekler.

Günümüzde, çoğu web sitesi HTTPS kullanmaktadır. Web tarayıcıları, kullanıcıların HTTPS kullanmayan sitelerle iletişimi sırasında uyarı mesajları vererek kullanıcıları güvenli olmayan bağlantılara karşı korumaya çalışır. Bu nedenle, web tasarımcıları ve geliştiriciler, web sitelerini HTTPS'ye geçirmek için SSL/TLS sertifikaları satın almalı ve yapılandırmalarını yapmalıdır.
F3beZqk.png


6-) URL Nedir ?
URL (Uniform Resource Locator) internet üzerinden metin, resim, kod, css vb kaynağa erişebilmek için kulanılan adres tanımlama sistemi diyebiliriz.

Günümüzde Sunucu sistemlerinin 2'ye ayırırsak
  • Statik Web Sayfalar,
  • Web Uygulamaları; için dinamik URL alanlarının yönetilmesi Web uygulamaları ile mümkün hale gelmiştir. Örneğin REST üzerinden API çağrımlarını Web uygulaması yöneterek bunları farklı fonksiyonlara ve parametreleri ile birlikte yönlendirebilmektedir. Bu sayede 1000 lerce URL üretmek gerekmemektedir.

URL Modeli

1*Meo5sb3f1WriTIvOnV9dXQ.png

Protocol: URL hangi protokol üzerinden erişim sağlanacağını belirtir. Yukarıdaki örnekte http üzerinden url erişeceğini belirtir.

  • https,
  • ftp,
  • mailto,
Domain Name: Arkaplanda sunucular birbirlerini NameServer üzerindeki IP kayıtları üzerinden eriştiğini söylemiştik. Yani www.example.com arka planda 93.184.216.34 adresinde sunulan bir sunucudur. Biz tarayıcıya veya arkaplandan kodla URL bu Domain Name yazdığımızda Network ilerlerken isim sunucuları bunu IP dönüştürerek verinin ilerlemesini sağlarlar.

Port: Sunucu üzerindeki kapı anlamına gelir. Bu sayede aynı IP üzerinden birden fazla sunucu ile hizmet verilebilir. Örneğin 80 HTTP, 443 HTTPS, 25 SMTP vb.. sayesinde aynı sunucu üzerinden farklı farklı hizmetler verilebilir.

Url Alanı Buradan Alıntıdır daha iyi anlatan bir kaynak görmedim abimizin diğer raporlarına da göz atmanızı tavsiye ederim serinin geri kalan kısmında onlarıda ele alacağım inşallah

F3beZqk.png



7-) Seri Boyunca Kullanılacak Kaynaklar ( Yararı Dokunabilecek Kaynaklar )
  1. Grafik Tasarım Araçları:
    • Adobe Photoshop: Profesyonel düzeyde grafik tasarım yapmanıza olanak sağlar.
    • Adobe Illustrator: Vektör tabanlı grafikler oluşturmak için kullanılır.
    • Sketch: Mac kullanıcıları için popüler bir vektör tabanlı tasarım aracıdır.
  2. Mockup ve Wireframe Araçları:
    • Adobe XD: Prototipler oluşturmanızı ve kullanıcı deneyimini simüle etmenizi sağlar.
    • Sketch: Wireframe'ler ve prototipler oluşturmak için tercih edilen bir araçtır.
    • Figma: Çevrimiçi olarak çalışabilen ve çoklu kullanıcı işbirliğine imkan sağlayan bir tasarım aracıdır.
  3. Kod Editörleri:
    • Visual Studio Code: Ücretsiz ve çok yönlü bir kod düzenleyicidir.
    • Sublime Text: Hızlı ve özelleştirilebilir bir kod düzenleyici olarak kullanılır.
    • Atom: Açık kaynaklı bir kod düzenleyici olup, geniş bir kullanıcı topluluğuna sahiptir.
  4. UI Kit ve Framework'ler:
    • Bootstrap: Hazır tasarım şablonları ve bileşenleri içeren popüler bir HTML, CSS ve JavaScript framework'üdür.
    • Material-UI: Google'ın materyal tasarım prensiplerini temel alan bir React UI kitidir.
    • Tailwind CSS: Özelleştirilebilir CSS bileşenlerini içeren bir utility-first CSS framework'üdür.
  5. Renk ve Tipografi Araçları:
    • Coolors: Renk paletleri oluşturmanızı ve keşfetmenizi sağlar.
    • Google Fonts: Farklı tipografi stillerine sahip geniş bir font koleksiyonuna erişim sağlar.
    • TypeScale: İyi dengelenmiş bir tipografi ölçeği oluşturmanıza yardımcı olur.
  6. İmaj ve İçerik Kaynakları:
    • Unsplash: Yüksek kaliteli ve ücretsiz stok fotoğraflar sunar.
    • Freepik: Grafik tasarım kaynaklarını içeren bir platformdur.
    • Google Icons: İkon koleksiyonlarına erişim sağlar.

F3beZqk.png


İLK BÖLÜM KAPANIŞ
DEV SERİ Frontend | Temel Kavramlar #1
Konum Dikkatinizi çekti ise, Forumdaki Diğer Konularıma Göz Atmak İstermisin?

İdor Zafiyeti Nedir | Web Zafiyetleri #1 https://www.turkhackteam.org/konular/idor-zafiyeti-nedir-en-detayli-anlatim.2040685/#post-9798063

Windows Rehberi

Bash Kabuk İzlerini Koruma - ADLİ TIP

Sistem Önerileri

Web SSS

p7uuoyc.png

Google Üzerinde aratma yaparken öne çıkması açısından konu anahtar kelimeler
Frontend Nedir, Backendmi Frontendmi, Frontend, Türk Hack Team, THT, tht, yazılım, web programlama, detaylı anlatım, forum, anlatım, proje, nasıl para kazanırım
eline sağlık
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.