ホーム>CGIソースコード>その他のカテゴリー
ダウンロード
front end

Web開発のリポジトリです

準備: このコンテンツを使用するには、学生はインターネットにアクセスできるコンピュータ、HTML 5 をサポートする Web ブラウザ (Google Chrome、Mozilla Firefox、Microsoft Edge、Safari、Opera など)、テキスト エディタ (VSCode など) を持っている必要があります。 .) およびホスティング プラットフォーム (無料または有料)。

  • 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://html5ボイラープレート.com/
  • https://www.color-hex.com/color-palette/22942
  • https://www.greatfrontend.com/pt-BR
  • https://echarts.apache.org/en/index.html

ウェブサイトとは何ですか?

ウェブサイトについて話すとき、この用語は、ネットワークを意味しワールドワイドウェブを指す「ウェブ」と、場所を意味する「サイト」という英語の 2 つの単語を組み合わせたものであることがわかります。この意味で、Web サイトまたはサイトは、URL を通じてインターネット上でアクセスできる場所であり、何らかの言語でプログラムされた一連のページがあります。

この主題をより深く理解するために、例を見てみましょう。Trybe のブログにアクセスするためにインターネット ブラウザにアドレス blog.betrybe.com を入力すると、ブラウザはこの Web サイトがインターネット上のどこにあるかを検索します。次に、サーバーに対してリクエストが行われます。

Web ページを構成するすべてのテキスト、画像、スタイル ファイルはこのサーバーに保存されます。次に、サーバーはこのドキュメントのセットをブラウザに返し、画面に表示されているとおりにコンテンツを表示できるようにします。

Web サイトではさまざまな形式やコンテンツを表示できます。オプションには次のものが含まれます。Mercado Livre や Amazon など、製品を売買できる仮想店舗。企業や個人が自分自身を紹介し、顧客に見つけてもらうために使用される機関のウェブサイトとポートフォリオ。そして、あなたが読んでいるようなブログ。

さらに、Web サイトは静的または動的に分類することもできます。静的 Web サイトは通常、HTML、CSS、JavaScript を使用して開発されます。その内容はより単純であり、データベースとの対話はありません。

動的 Web サイトでは、HTML、CSS、JavaScript を利用するだけでなく、PHP などのより堅牢なプログラミング言語も使用します。これらのサイトには、データベースに接続された機能があります。このようにして、アクセスされた各ページに特定のデータが表示されます。

ウェブデザイン

Web デザインでは、Web サイト開発におけるインターフェースの重要性、リッチ Web ページの構築に使用されるテクノロジーの進化 (Web 1.0、Web 2.0、Web 3.0、Web 4.0)、インターフェースの進化 (美的、機能的、構造的) を観察する必要があります。 ）。

したがって、オンライン サイトを構築するために過去に使用されたいくつかのテクノロジーを理解し、エンド ユーザーにとって最高のナビゲーションとユーザビリティ エクスペリエンスを目指して、Web サイトを構築するためのリッチなインターフェイスを作成することの重要性を理解する必要があります。このビジョンに基づいて、古い市場のトレンドを観察するだけでなく、インターフェイスの開発における新しいトレンドも確認します。

カラーパレット:

  • 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://カラーパレット.com/
  • https://カラーパレット.net/

グラデーション:

  • https://www.グラビエント.com/
  • http://gradientsguru.com/
  • https://www.eggradients.com/
  • https://uigradients.com/#Zinc
  • https://webgradients.com/
  • https://cssgradient.io/

ウェブ開発

基本的に、Web 開発とは、インターネット用のページをコーディングすることを意味します。ただし、このタスクは、ソース コードを編集することによってのみ変更できる情報を表示する静的ページを作成するための基本ツールである HTML と CSS の使用を超えています。

逆に、Web サイト上のページは動的になる場合があります。これは、ソース コードを妨げることなく、表示されたコンテンツを変更できることを意味します。これを可能にするために、Web サイトの動的部分はデータベースに保存され、このコンテンツを取得する必要があるときはいつでもデータベースにアクセスされます。

この機能により、ビジネス ルール、API (アプリケーション プログラミング インターフェイス) などを使用する複雑なアプリケーションの開発が可能になります。したがって、Web 開発、クライアント側コーディング (フロントエンド) とサーバー側コーディング (バックエンド) に焦点を当てた活動に分かれています。

API の例は、現在 Web およびモバイル アプリケーションで最も使用されている構造である REST API であり、 RESTful APIとも呼ばれます。

Web アプリケーションは、Web 上のサイトの数が増えています。つまり、Web の大部分を構成する従来のドキュメントやテキストと画像の静的リンクではなく、デスクトップ アプリケーションを模倣したものです。一例として、オンライン ワード プロセッサ、写真編集ツール、地図 Web サイトなどがあります。 JavaScript を多用し、HTML4 をその機能の限界まで押し上げました。 HTML5 では、DOM (ドキュメント オブジェクト モデル) 用の新しい API (アプリケーション プログラミング インターフェイス) を指定します。DOM は、HTML、XHTML、および XML のオブジェクトとドキュメントを表現し、操作するための、クロスプラットフォームで言語に依存しない規約です。

これらの新しい API は、サーバーから送信された図面、ビデオなどのオブジェクトをドラッグ アンド ドロップするのに役立ちます。

HTML ページが DOM 内のオブジェクトを介して JavaScript に公開するこれらの新しいインターフェイスにより、不十分に文書化されたギミックではなく、高度に指定されたパターンを使用してアプリケーションを作成することが容易になります。

さらに重要なのは、Adobe Flash や Microsoft Silverlight などの独自の標準と競合できる、(使用も実装も) 無料のオープン スタンダードの必要性です。これらのテクノロジーや企業についてどう思うかは関係なく、Web はメーカーにとって社会、商業、通信にとって不可欠なプラットフォームであると私たちは信じています。

世の中にはすでに何百万もの Web ページが使用されており、それらを複製し続けることが不可欠です。したがって、HTML5 は主に HTML4 の派生であり、 、

などの古いマークアップや、何百万もの Web ページで使用されるその他の新しいマークアップをブラウザがどのように処理するかを定義し続けています。

インタフェース

インターフェースという用語は、研究される分野に応じていくつかの意味を持ちます。情報技術の分野では、インターフェースとは、外部の助けがなければ自然に通信できない 2 つのシステム間の通信の可能性を意味します。

HCI は、人間とコンピューターの間の相互作用を研究するものです。これは、コンピューターサイエンス、芸術、デザイン、人間工学、心理学、社会学、記号論、言語学、および関連分野に関連する学際的な科目です。人間と機械の間の対話は、ソフトウェアとハ​​ードウェアで構成されるユーザー インターフェイスを通じて行われます。

ヒューマンコンピュータインタラクションは、人間が使用するインタラクティブコンピューティングシステムの設計、評価、実装と、それらを取り巻く主な現象の研究に関係する分野です。

例 3: メッセージを電子メールに送信する

メールを送信

[HTML5] マルチメディアタグ

デジタルメディアとは、ビニールの表面に小さな溝に音を記録し、そこに針を通すことで音が再生されるという物質ベースで構成されるアナログメディアの対極にあるものです。デジタル メディアでは、物理的なサポートが実質的になくなり、データが数値または数字のシーケンスに変換されるため、デジタルという用語が使用されます。このように、音声、画像、テキストは実際には一連の数字であり、データの共有、保存、変換が可能になります。最も広い意味では、デジタル メディアは、デジタル技術に基づく一連の通信媒体およびデバイスとして定義でき、書面、音声、または視覚的な知的著作物のデジタル配布または通信を可能にします。ブランドの消費者とのコミュニケーション戦略に使用される電子的発信手段であり、一般にデジタル メディアと呼ばれます。

Web ページにビデオや音楽を追加する必要がある人にとって、 Flash は常に最も実行可能な代替手段です。これは現在もほとんどすべてのブラウザに存在しており、大きな問題なく使用できる形式がありました。

プラグインに呼び出しを追加するだけで機能します。

ブラウザーに一貫性がないため、両方の追加する必要がありました。 コマンドについては、プラグインを使用するための特定のコマンドで、多くの属性を複製します。言うまでもなく、Flash などのプラグインは多くの不安定性を引き起こし、ブラウザーの終了につながるエラーを引き起こすこともあります。

このような理由から、HTML 5 には、不要なプラグインやコマンドの使用を避けるために、言語にネイティブな新しいサポートが付属しています。現時点では、画像であるかのように単純な呼び出しを行うだけで、ファイルがトリガーされます。

 <ビデオ コントロール src="video.mp4" width="426" height="240">

新しいコマンドによって生じる問題は、一部のブラウザではうまく機能しないsrc属性の使用です。また、誰もがどのブラウザでもページを開けられるようにしたい場合は、別のタイプの属性を使用する必要があります。したがって、 タグで属性を使用するのが一般的です。

要素は複数回使用でき、ブラウザごとにビデオ形式を定義できるため、より広範囲にアクセスできます。

ビデオ

">
 < 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 controls >
 < source src =" audio.mp3 " type =" audio/mpeg " >
 < source src =" audio.ogg " type =" audio/ogg " >
 < source src =" audio.wav " type =" audio/wav " >
 audio >

使用可能なコーデックはいくつかありますが、より広範囲に適用するには、少なくとも 2 つのバージョンをエクスポートする必要があります。

注: コーデックは、メディア ファイルのエンコードとデコードに使用されるプログラムです。元の形式を圧縮して保存しやすくし、再生中に解凍して画像または音声に戻します。

言及されているすべてのオーディオとビデオの例は、ディレクトリ内のドキュメントを介してインポートされます。問題は、YouTube や Vimeo などのサイトですでにホストされているビデオをどのようにインポートするかということです。そして、2 つのソリューション (ドキュメント経由またはサーバー経由) のうち、どちらが最も有利でしょうか?

ビデオのインポート

YouTube や Vimeo からビデオをインポートする方法を段階的に見てみましょう。

[HTML5]テーブルタグ

HTML5 が登場するまでは、テーブルはページ レイアウトを設計するためのリソースとして使用されていました。デザイナーは画像やテキストを表示するためのグリッドとしてテーブルを使用しました。これらは広く使用され、Web サイト デザインの主流の形式となり、豊かな外観を作成しました。

しかし、今日、テーブルの使用は実際、特に携帯電話やタブレットなどの新しいメディア向けに、より優れた、よりアクセスしやすく、柔軟で機能的な Web サイトの構築を妨げています。

これらのテーブルは、データベースから取得した情報である表形式のデータを表示するためのリソースとして HTML 5 にまだ存在しています。新しいバージョンの HTML を使用すると、テーブルをまったく使用せずに Web サイトを作成できるため、コンピューターのような大きな画面に表示され、小さなスマートフォンの画面にもよく適応する動的なレイアウトを作成できます。後ほど、HTML5 と CSS3 を使用してレスポンシブ レイアウトを構築する方法について説明します。

table コマンドは言語から削除されませんでしたが、その使用は制限されました。一方で、このリソースを使用する Web サイトがまだいくつかあるため、必要に応じてこのタイプのページを維持できるように、リソースがどのように機能するかを理解することが重要です。

テーブルを挿入するコマンドは

です。行を開始するには、 タグを導入する必要があります。また、テーブルの行を分割するセルの
タグを導入する必要があります。 内容を太字にしてテーブルの行を分割します。これらのコマンドはすべて、それぞれ
、 、 として終了します。 

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

コマンドには、テーブルの書式設定に役立つ一連の属性があります。主なものは次のとおりです。

align=""テーブルをcenter 、 left 、 right 、 justifyの 3 つの位置に配置します。
bgcolor=""テーブルの色を決める
border=""境界線のサイズを決定します。ゼロの場合、境界線は表示されません。
cellspacing=""セル間の間隔を決定します
colspan="" 2 つ以上のテーブル列間のグループ化を決定します (横方向)
rowspan=""テーブル内の 2 つ以上の行間のグループ化を決定します。 （下方向と上方向）
cellpadding=""テキストとセルの境界線の間の間隔を決定します

、キャプションであるかのように、表に対して中央にテキストを表示します。

ルール属性

テーブル内に表示される内部行を選択するには、タグ内でRULES属性を使用します。この属性の補足は次のとおりです。

やなどの特別なタグで定義された、列グループと水平セクションの間の行の場合
none行全体はありません。
allテーブル内の各列と行の間のすべての行を表示します (デフォルト)
rows表の各行間の水平線。
cols表の各列間の垂直線。
groups

いくつかの例を参照してください。

">
 < table border rules =" all " 6 >
">
 
">
 
 
">
 
 
">
 
 
フォームタグ
HTML フォーム部分は、ユーザーが HTML ページにデータを入力するために非常に重要です。このデータの収集は、バックエンド プログラミング言語 (PHP、JavaScript、Python、Java など) を使用してバックエンドによって行われ、このデータをデータベース (MySQL、PostgreSQL、MongoDB、OracleDB など) に保存してクエリします。 ）。フォームタグを見てみましょう。
ログインフォーム (定型文) : 


	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 >
 type属性を通じて使用するinputのタイプを定義でき、 name=''属性を通じてプログラミング言語を通じて送信されたデータを処理できます。
ログインフォーム (定型文) - 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 >
登録フォーム (定型文) : 

	  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 >
 nameが同じ場合にのみ無線間でinputできるようになります。この方法でこの情報をグループ化し、そのうちの 1 つだけがマークされます。
 checkboxを使用すると、複数のオプションを選択できます。
と
タイプとその属性を定義できます。
  •  button
  •  password
  •  text
  、  、および">
 < button type =" button " > Clique Aqui  button >
つまり、ナビゲーション用のボタンを作成する場合は、 を使用します。フォームからデータを送信するボタンを作成する場合は、 または
疑似クラス意味
:hover要素の上にマウスを置くと要素が変更されます。
 :active要素をクリックして変更します。
 :link未訪問のリンクをすべて変更します。
 :visited訪問済みのリンクをすべて変更します。
 :focusフォーカスのある要素を変更します。
 :checkedマークされたすべての要素を変更します。
 :disable無効になっているすべての要素を変更します。
 :enabled有効なすべての要素を変更します。
 :empty子を持たないすべての
要素を変更します。
 :first-child有効な各要素を変更します。
 :enabled有効な各要素を変更します。
 :first-child親要素の最初の子である各
要素を変更します。
 :first-of-type親要素の最初の
要素である各
要素を変更します。
 :in-range 要素を指定された範囲内の値に変更します。
 :invalidすべての要素を無効な値に変更します。
 :lang(language)各
要素を、「 it 」で始まる lang 属性値に変更します。
 :last-child親要素の最後の子であるすべての
要素を変更します。
 :last-of-type親要素の最後の
要素であるすべての
要素を変更します。
 :link未訪問のリンクをすべて変更します。
 :not(selector) 
要素以外のすべての要素を変更します。
 :nth-child(n)親要素から順序付けされた各 
 要素を変更します。
 :nth-last-child(n)最後の子から数えて、親要素から順序付けされた各 
 要素を変更します。
 :nth-last-of-type(n)最後の子から数えて、親から 2 番目の 
 要素である各 
 要素を変更します。
 :nth-of-type(n)親要素の 2 番目の 
 要素であるすべての 
 要素を変更します。
 :only-of-type唯一の 
 要素である 
 要素を親要素から変更します。
 :only-child親要素の唯一の子であるすべての 
 要素を変更します。
 :optional 「required」属性を持たない  要素を変更します。
 :out-of-range  要素を atr で変更します        
        
拡大する

    



    

        

            追加情報
        

        
    





    

        

            関連アプリ
        

        
    





    

        

            おすすめ
        

        
    






    

        

            関連情報
            すべて