Beranda>Kode sumber CGI>Kategori lainnya
Unduh
front end

Ini adalah gudang Pengembangan Web

Persiapan : Untuk konten ini, siswa harus memiliki komputer dengan akses internet, browser web dengan dukungan HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera, dll.), editor teks (VSCode, dll.) .) dan platform hosting (gratis atau berbayar).

  • https://www.frontendmentor.io/
  • https://daily.dev/
  • https://getcssscan.com/css-box-shadow-examples
  • https://whirl.netlify.app/
  • https://flexboxfroggy.com/
  • https://courses.cs.washington.edu/courses/cse154/flexboxducky/
  • http://www.flexboxdefense.com/
  • https://cssgridgarden.com/
  • https://gridcritters.com/
  • https://caniuse.com/
  • https://www.magicpattern.design/tools/blob-generator
  • https://meyerweb.com/eric/tools/css/reset/
  • https://html5boilerplate.com/
  • https://www.color-hex.com/color-palette/22942
  • https://www.greatfrontend.com/pt-BR
  • https://echarts.apache.org/en/index.html

Apa itu situs web?

Ketika kita berbicara tentang website, kita dapat melihat bahwa istilah ini merupakan gabungan dari dua kata dalam bahasa Inggris: “web” yang berarti jaringan dan mengacu pada world wide web, dan “site” yang berarti tempat. Dalam pengertian ini, website atau situs adalah suatu tempat yang dapat diakses di internet, melalui URL, dan memiliki sekumpulan halaman yang diprogram dalam beberapa bahasa.

Untuk lebih memahami subjek ini, mari kita lihat contohnya: ketika Anda mengetikkan alamat blog.betrybe.com ke browser internet Anda untuk mengakses blog Trybe, browser akan mencari lokasi situs web ini di internet. Kemudian permintaan akan dibuat ke server.

Semua file teks, gambar, dan gaya yang membentuk halaman web disimpan di server ini. Kemudian, server akan mengembalikan kumpulan dokumen ini ke browser sehingga dapat menampilkan konten seperti yang Anda lihat di layar Anda.

Website dapat menyajikan bentuk dan konten yang berbeda-beda. Beberapa pilihannya meliputi: toko virtual, seperti Mercado Livre dan Amazon, tempat produk dapat dibeli dan dijual; situs web dan portofolio institusi, digunakan oleh perusahaan dan masyarakat untuk menampilkan diri dan ditemukan oleh klien; dan blog, seperti yang Anda baca.

Selain itu, situs web juga dapat diklasifikasikan menjadi statis atau dinamis. Website statis umumnya dikembangkan menggunakan HTML, CSS dan JavaScript. Isinya lebih sederhana dan tidak ada interaksi dengan database.

Website dinamis, selain memanfaatkan HTML, CSS, dan JavaScript, juga menggunakan bahasa pemrograman yang lebih tangguh, seperti PHP. Situs-situs ini memiliki fungsionalitas yang terhubung ke database. Dengan cara ini, setiap halaman yang diakses dapat membawa data tertentu.

Desain Web

Dengan Desain Web Anda perlu mengamati pentingnya antarmuka untuk pengembangan situs web, evolusi teknologi yang digunakan dalam pembangunan halaman web yang kaya (web 1.0, web 2.0, web 3.0 dan web 4.0), evolusi antarmuka (estetika, fungsional dan struktural ).

Oleh karena itu, Anda perlu memahami pentingnya membuat antarmuka yang kaya untuk membangun situs web, bertujuan untuk pengalaman navigasi dan kegunaan terbaik bagi pengguna akhir, mengetahui beberapa teknologi yang digunakan di masa lalu untuk membangun situs online. Dari visi ini, amati tren pasar lama, serta lihat tren baru dalam pengembangan antarmuka.

Palet warna:

  • https://paletadecolores.online/pt/magenta/
  • https://simpleicons.org/
  • https://colorhunt.co/
  • https://coolors.co/
  • https://colors.muz.li/
  • https://www.toptal.com/designers/colourcode/
  • https://lospec.com/palette-list
  • https://mycolor.space/
  • https://www.pantone.com/articles/color-palettes
  • https://atmos.style/color-generator
  • https://github.com/EmilHvitfeldt/r-color-palettes
  • https://www.color-hex.com/color-palettes/
  • https://visme.co/blog/website-color-schemes/
  • https://colorpalettes.com/
  • https://colorpalettes.net/

Gradien:

  • https://www.grabient.com/
  • http://gradientsguru.com/
  • https://www.eggradients.com/
  • https://uigradients.com/#Zinc
  • https://webgradients.com/
  • https://cssgradient.io/

Pengembangan Web

Pada dasarnya, pengembangan web berarti pengkodean halaman untuk internet. Namun, tugas ini lebih dari sekadar penggunaan HTML dan CSS, alat dasar untuk membuat halaman statis — yang menyajikan informasi yang hanya dapat dimodifikasi dengan mengedit kode sumber.

Sebaliknya, halaman di situs web bisa bersifat dinamis. Artinya konten yang ditampilkan dapat diubah tanpa mengganggu kode sumber. Untuk memungkinkan hal ini, bagian dinamis situs web disimpan dalam database, yang diakses kapan pun diperlukan untuk mengambil konten ini.

Fitur ini memungkinkan pengembangan aplikasi kompleks, yang menggunakan aturan bisnis, API — Antarmuka Pemrograman Aplikasi — dan banyak lagi. Oleh karena itu, terdapat pembagian kegiatan yang fokus pada pengembangan web, pengkodean sisi klien (front-end) dan pengkodean sisi server (back-end).

Contoh API dengan, struktur yang paling banyak digunakan saat ini untuk Aplikasi Web dan Seluler, REST API juga disebut RESTful API .

Aplikasi web adalah situs yang jumlahnya semakin bertambah di Web; artinya, aplikasi tersebut meniru aplikasi desktop dibandingkan dokumen tradisional dan tautan statis berupa teks dan gambar yang membentuk sebagian besar Web. Sebagai contoh, kami memiliki pengolah kata online, alat pengeditan foto, situs pemetaan, dll. Didukung oleh JavaScript, mereka mendorong HTML4 ke batas kemampuannya. HTML5 menetapkan API baru (Application Programming Interface) untuk DOM (Document Object Model), yang merupakan konvensi lintas platform, tidak tergantung bahasa untuk mewakili dan berinteraksi dengan objek dan dokumen HTML, XHTML, dan XML.

API baru ini membantu Anda menarik dan melepas objek yang dikirim oleh server, seperti gambar, video, dan sejenisnya.

Antarmuka baru yang diekspos halaman HTML ke JavaScript melalui objek di DOM membuatnya lebih mudah untuk menulis aplikasi menggunakan pola yang sangat spesifik, dibandingkan hanya gimmick yang tidak terdokumentasi dengan baik.

Yang lebih penting lagi adalah kebutuhan akan standar terbuka yang gratis (untuk digunakan dan diterapkan) yang dapat bersaing dengan standar kepemilikan seperti Adobe Flash atau Microsoft Silverlight. Terlepas dari apa pendapat Anda tentang teknologi atau perusahaan ini, kami percaya bahwa Web adalah platform penting bagi masyarakat, perdagangan, dan komunikasi yang berada di tangan produsen.

Ada jutaan halaman web yang sudah digunakan di luar sana, dan halaman web tersebut harus terus direproduksi. Jadi, HTML5 sebagian besar merupakan turunan dari HTML4 yang terus menentukan bagaimana browser harus menangani markup lama seperti ,

, dan markup baru lainnya seiring jutaan halaman web menggunakannya.

Antarmuka

Istilah antarmuka dapat memiliki beberapa arti tergantung pada bidang studinya. Dalam bidang Teknologi Informasi, antarmuka berarti kemungkinan komunikasi antara dua sistem yang tidak dapat berkomunikasi secara alami tanpa bantuan pihak luar .

HCI adalah studi tentang interaksi antara manusia dan komputer. Ini adalah mata pelajaran interdisipliner yang menghubungkan ilmu komputer, seni, desain, ergonomi, psikologi, sosiologi, semiotika, linguistik, dan bidang terkait. Interaksi antara manusia dan mesin terjadi melalui antarmuka pengguna, yang terdiri dari perangkat lunak dan perangkat keras.

Interaksi manusia-komputer adalah disiplin ilmu yang berkaitan dengan desain, evaluasi, dan implementasi sistem komputasi interaktif untuk digunakan manusia dan studi tentang fenomena utama di sekitarnya.

Contoh 3: Mengirim pesan ke email

 Kirim email

[HTML5] TAG Multimedia

Istilah media digital adalah kebalikan dari media analog, yang dikonfigurasikan berdasarkan bahan dasar: suara direkam dalam alur kecil, pada permukaan vinil dan, ketika jarum melewati alur tersebut, suara direproduksi. Dalam media digital, dukungan fisik praktis hilang, dan data diubah menjadi urutan numerik atau digit – itulah sebabnya istilah digital digunakan. Dengan cara ini, suara, gambar, teks sebenarnya adalah rangkaian angka, yang memungkinkan berbagi, penyimpanan, dan konversi data. Dalam arti luas, media digital dapat didefinisikan sebagai seperangkat sarana dan perangkat komunikasi berbasis teknologi digital, yang memungkinkan distribusi atau komunikasi digital atas karya intelektual tertulis, suara, atau visual. Sarana asal elektronik yang digunakan dalam strategi komunikasi merek dengan konsumennya, umumnya disebut media digital.

Flash selalu menjadi alternatif paling tepat bagi mereka yang perlu menambahkan video dan musik ke halaman Web. Itu dulu dan masih ada di hampir semua browser dan kami memiliki format yang dapat digunakan tanpa masalah besar.

Cukup tambahkan panggilan ke plugin dan itu berfungsi.

Karena ketidakkonsistenan browser, maka perlu menambahkan ; sedangkan untuk perintah ;, perintah khusus untuk menggunakan plugin, menduplikasi banyak atribut. Belum lagi plugin seperti Flash menyebabkan banyak ketidakstabilan, menyebabkan error bahkan menyebabkan browser ditutup.

Karena semua ini, HTML 5 hadir dengan dukungan baru, asli dari bahasa tersebut, untuk menghindari penggunaan plugin dan perintah yang tidak perlu. Saat ini, cukup lakukan panggilan sederhana, seolah-olah itu adalah gambar dan file akan dipicu.

Masalah yang ditimbulkan oleh perintah baru ini adalah penggunaan atribut src yang tidak berfungsi dengan baik di beberapa browser. Dan jika kita ingin semua orang dapat membuka halaman tersebut, dengan browser apa pun, maka perlu menggunakan jenis atribut lain. Oleh karena itu, atribut biasanya digunakan dalam tag .

Elemen dapat digunakan beberapa kali dan memungkinkan Anda menentukan format video untuk setiap browser, sehingga memberi Anda jangkauan yang lebih luas.

video

">
 < video width =" 426 " height =" 240 " controls >
  < source src =" video.mp4 " type =" video/mp4 " >
  < source src =" video.webm " type =" video/webm " >
  < source src =" video.ogg " type =" video/ogg " >
 video >

audio

">
 < audio controls >
 < source src =" audio.mp3 " type =" audio/mpeg " >
 < source src =" audio.ogg " type =" audio/ogg " >
 < source src =" audio.wav " type =" audio/wav " >
 audio >

Ada beberapa kemungkinan codec dan Anda perlu mengekspor setidaknya dua versi untuk mendapatkan jangkauan yang lebih luas.

Catatan : Codec adalah program yang digunakan untuk menyandikan dan mendekode file media. Mereka mengompresi format asli, mengutamakan penyimpanan, dan mendekompresinya selama reproduksi, mengubahnya kembali menjadi gambar atau audio.

Semua contoh audio dan video yang disebutkan diimpor melalui dokumen di direktori. Dan pertanyaannya adalah, bagaimana cara mengimpor video yang sudah dihosting di situs seperti YouTube atau Vimeo? Dan manakah dari dua solusi tersebut (Melalui dokumen atau melalui server) yang paling menguntungkan?

Mengimpor video

Mari kita lihat cara mengimpor video dari YouTube dan Vimeo, langkah demi langkah!

[HTML5] Tag Tabel

Hingga munculnya HTML5, tabel digunakan sebagai sumber daya untuk mendesain tata letak halaman. Desainer menggunakan tabel sebagai kisi untuk menampilkan gambar dan teks, dan tabel tersebut digunakan secara luas, menjadi bentuk utama desain situs web, sehingga menciptakan tampilan yang kaya.

Namun, saat ini, penggunaan tabel pada kenyataannya mengganggu pembangunan situs web yang lebih baik, lebih mudah diakses, fleksibel dan fungsional, terutama untuk media baru, seperti ponsel, tablet, dll.

Tabel-tabel ini masih ada di HTML 5 sebagai sumber untuk menampilkan data tabular, informasi yang berasal dari database. Dengan HTML versi baru, kita dapat membuat website yang dibuat sepenuhnya tanpa tabel, sehingga menciptakan layout dinamis yang muncul di layar besar seperti di komputer dan beradaptasi dengan baik di layar smartphone kecil. Nanti Anda akan melihat cara membuat layout responsif dengan HTML5 dan CSS3.

Perintah tabel tidak dihapus dari bahasa tersebut, tetapi penggunaannya dibatasi. Di sisi lain, kami masih memiliki beberapa situs web yang menggunakan sumber daya ini, jadi penting bagi kami untuk memahami cara kerjanya sehingga kami dapat, jika perlu, memelihara halaman jenis ini.

Perintah untuk menyisipkan tabel adalah

. Untuk memulai sebuah baris , kita harus memperkenalkan tag dan untuk sel
, yang membagi baris tabel. membagi baris tabel dengan menempatkan konten dalam huruf tebal. Semua perintah ini diakhiri sebagai
, dan masing-masing. 

 < table >
  < tr >
    < td >  td >
    < td >  td >
   tr >
 table >

Perintah

memiliki serangkaian atribut yang membantu pemformatan tabel. Yang utama adalah:

align="" menyelaraskan tabel dalam tiga posisi: center , left , right , dan justify
bgcolor="" menentukan warna meja
border="" menentukan besar kecilnya border, jika nol tidak menunjukkan border
cellspacing="" menentukan jarak antar sel
colspan="" menentukan pengelompokan antara dua atau lebih kolom tabel (menyamping)
rowspan="" menentukan pengelompokan antara dua baris atau lebih dalam tabel. (arah bawah dan atas)
cellpadding="" menentukan jarak antara teks dan batas sel

menampilkan teks yang berada di tengah tabel, seolah-olah itu adalah keterangan.

Atribut aturan

Untuk memilih baris internal yang akan ditampilkan dalam tabel, kami menggunakan atribut RULES , di dalam tag. Pelengkap dari atribut ini adalah:

dan
none tidak ada seluruh baris.
all untuk menampilkan semua baris antara setiap kolom dan baris dalam tabel (default)
rows untuk garis horizontal di antara setiap baris dalam tabel.
cols untuk garis vertikal antara setiap kolom tabel.
groups untuk baris antara grup kolom dan bagian horizontal, ditentukan oleh tag khusus seperti

Lihat beberapa contoh:

">
 < table border rules =" all " 6 >
">
 
">
 
 
">
 
 
">
 
 
 Formulir TAG
 Bagian formulir HTML sangat penting untuk mengisi data yang dimasukkan pengguna ke halaman HTML. Pengumpulan data ini dilakukan oleh back-end dengan bahasa pemrograman back-end (PHP, JavaScript, Python, Java, dll.) yang menyimpan dan menanyakan data ini dalam database (MySQL, PostgreSQL, MongoDB, OracleDB, dll. . Mari kita lihat tag formulir:
 Formulir Login (boilerplate) : 


	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form >
	Login: < br >
	< input type =" email " name =" email " > < br >
	Senha: < br >
	< input type =" password " name =" senha " > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 Melalui atribut type kita dapat menentukan jenis input yang kita gunakan, dengan atribut name='' kita dapat mengolah data yang dikirimkan melalui bahasa pemrograman.
 Formulir Login (boilerplate) - Dengan PHP : 

	Login:

	

	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form action =" processa.php " >
	Login: < br >
	< input type =" email " name =" email " required > < br >
	Senha: < br >
	< input type =" password " name =" senha " required > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 Formulir Pendaftaran (boilerplate) : 

	  Nome Completo:

	  

	  
      Email:

	  

	  Senha:

	  

	  Repita a senha:

	  

	  	
	  Sexo:

	   Masculino

	   Feminino

	  
	  Interesses:

	   Futebol

	   Video-games

	   Academia

	  
	  Estado

	  

	
	  Comente!

	  


	  
       
   
">
 < html >
  < head >
    < title > Cadastro  title >
   head >
  < body >
     < h2 > Cadastre-se  h2 >
       < form action =" processa.php " >
	  Nome Completo: < br >
	  < input type =" text " name =" nome " required > < br >
	  
      Email: < br >
	  < input type =" email " name =" email " required > < br >
	  Senha: < br >
	  < input type =" password " name =" password " required > < br >
	  Repita a senha: < br >
	  < input type =" password " name =" password " required > < br >
	  	
	  Sexo: < br >
	  < input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
	  < input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
	  
	  Interesses: < br >
	  < input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
	  < input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
	  < input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
	  
	  Estado < br >
	  < select name =" estado " >
	    < option value =" RJ " > RJ  option >
	    < option value =" SP " > SP  option >
	    < option value =" MG " > MG  option >
	    < option value =" ES " > ES  option >
	   select > < br >
	
	  Comente! < br >
	  < textarea name =" comentario " >  textarea > < br >

	  < input type =" submit " value =" Cadastrar " >
        form >
    body >
 html >
 Kita hanya bisa melakukan input antar radio jika name sama, dengan cara ini kita bisa mengelompokkan informasi tersebut dan hanya satu yang akan ditandai.
 Dengan checkbox kita dapat memilih lebih dari satu pilihan untuk dipilih.
 Dengan
 Kita dapat mendefinisikan tipe  dan atributnya:
  •  button
  •  password
  •  text
 Elemen  ,  , dan ">
 < button type =" button " > Clique Aqui  button >
 Singkatnya, jika Anda membuat tombol untuk navigasi, gunakan  . Jika Anda membuat tombol untuk mengirimkan data dari formulir, gunakan  atau 
 Kelas semu Definisi
 :hover Itu mengubah elemen dengan mengarahkan kursor ke atasnya.
 :active Ubah elemen dengan mengkliknya.
 :link Mengubah semua tautan yang belum dikunjungi.
 :visited Mengubah semua tautan yang dikunjungi.
 :focus Mengubah elemen  yang memiliki fokus.
 :checked Mengubah semua elemen  yang ditandai.
 :disable Mengubah semua elemen  yang dinonaktifkan.
 :enabled Mengubah semua elemen  yang diaktifkan.
 :empty Mengubah semua elemen 
 yang tidak memiliki turunan.
 :first-child Mengubah setiap elemen  yang diaktifkan.
 :enabled Mengubah setiap elemen  yang diaktifkan.
 :first-child Mengubah setiap elemen 
 yang merupakan anak pertama dari elemen induk.
 :first-of-type Ini mengubah setiap elemen 
 yang merupakan elemen 
 pertama dari elemen induknya.
 :in-range Mengubah elemen  dengan nilai dalam rentang tertentu.
 :invalid Mengubah semua elemen  menjadi nilai yang tidak valid.
 :lang(language) Mengubah setiap elemen 
 dengan nilai atribut lang yang dimulai dengan " it ".
 :last-child Itu mengubah semua elemen 
 yang merupakan anak terakhir dari elemen induknya.
 :last-of-type Mengubah setiap elemen 
 yang merupakan elemen 
 terakhir dari elemen induknya.
 :link Mengubah semua tautan yang belum dikunjungi.
 :not(selector) Mengubah setiap elemen yang bukan elemen 
 .
 :nth-child(n) Mengubah setiap elemen 
 yang diurutkan dari elemen induknya.
 :nth-last-child(n) Mengubah setiap elemen 
 yang diurutkan dari elemen induknya, dihitung dari anak terakhir.
 :nth-last-of-type(n) Mengubah setiap elemen 
 yang merupakan elemen 
 kedua dari induknya, dihitung dari anak terakhir.
 :nth-of-type(n) Ia mengubah setiap elemen 
 yang merupakan elemen 
 kedua dari elemen induknya.
 :only-of-type Mengubah elemen 
 yang merupakan satu-satunya elemen 
 dari elemen induknya.
 :only-child Itu mengubah setiap elemen 
 yang merupakan satu-satunya anak dari elemen induknya.
 :optional Mengubah elemen  tanpa atribut "wajib".
 :out-of-range Mengubah elemen  dengan atr        
        
Memperluas

    



    

        

            Informasi Tambahan
        

        
    





    

        

            Aplikasi Terkait
        

        
    





    

        

            Direkomendasikan untuk Anda
        

        
    






    

        

            Informasi Terkait
            Semua