私の最初のWEBアプリ

孫娘は成長しています。 シニアは学校に落ちる。 娘の算数のトレーニングでWEBアプリケーションの形で生まれ変わる正当な理由。 それは約10年でしたが、すべての手がhtmlレイアウトおよびフロントエンドに到達せず、直接遭遇しませんでした。 カットの下-TKから完成品までのプロセス。これは、私が初心者であるのと同じように興味深いかもしれません。

彼はgif-draftsmanとVB5の助けを借りて2002年に訓練を受けました。 履歴は.exeのみを保存し、そのスクリーンショットは新しいアプリケーションのグラフィックスの基礎になります。


...しかし、「教育的概念」は少し修正する必要があります。

• プロセスの本質は、以前と同様に、第三者（学生ミシャ）を支援することです。
• エラーが発生した場合、正しい答えを提供する必要があります。
• 推定はキャンセルされます（ゲームスコアの特徴を与えて、時間と正解と誤答の比率をポイントに変換するとよいでしょう）。
• 最後の3つまたは4つの解決されたタスク（30〜40の例）と最小限の統計情報が保存されている「日記」によるペアレンタルコントロール（どのようにそれがないのですか？）。
• 仮想専用キーボードが望ましい。
• 拡散するには、プリミティブアニメーションを追加する価値があります。

合計で、3つの主なシーンを実装する必要があります。複雑さの設定、タスクの解決、およびファブレット以上のデバイスの「日記」（画面の自然な垂直方向のスマートフォンでは、シーンのレイアウトは異なります）。
記載されたTKとマスター[1]と[4]からの短い別れの言葉で武装して、彼はワーキングタイトル「Arifmisha」のプロジェクトに乗り出しました。

開発ツールの選択

キーワード 'htmlエディター' YaSTはBluefishを提案しました。 インターフェースの開発環境は、忘れられたVB5から視覚化されるにはほど遠い。 レイアウトを表示するには、スタンバイブラウザを呼び出す必要があります。
htmlおよびjs構文が強調表示されます。 オートコンプリートは利用できますが、ペアの言語構成要素（タグ、括弧）が邪魔になる場合があります。 Javaスクリプトコードビルダーがあります。
開発中、エディターのすべての機能を評価する時間はありません。

ホスティング

ホスティングをすぐに処理して、さまざまなプラットフォームのレイアウトを確認する必要があります。 Toasterでsim3xのアドバイスを受けました。 GitHub Project Pagesを少し試してみたところ、私は欲しいものを手に入れました。 index.htmlテンプレートはStackOverflowから取得されましたが、これは必須ではありません。リポジトリのgh-pagesブランチのルートページに単純にリンクできます。

アプリケーション構造

アプリケーションは、表示された要素を含む単一のhtmlファイルと、ロードされたスタイルファイル、javaスクリプト、およびグラフィックスで構成されます。 コンポーネントはほとんどありません。 考えた後、彼は./imgと./jsの2つの構造フォルダーを追加しました。

レイアウト

headタグで、彼はページエンコーディング、見出し、検索ロボットへの指示、そして念のため、開発期間のキャッシュの禁止を決定しました。

開発は、レイアウトとシーンの切り替えから始まりました。 個人的な経験不足により、このプロセスには実験の特徴がありました。シーンを形成し、ブラウザで確認してください。

シーンは3つしかないため、個別のhtmlファイルに分割しませんでしたが、シーンレイヤー要素のルートdivの可視性プロパティを切り替えることで規制しました。 シーンのすべての要素はベース画像に結び付けられ、クリック可能なカードが装備され、仮想キーボードとともに下層に配置されます。
シーンを水平方向に中央に配置するために、ベースレイヤーに幅740ピクセル（絶対配置）を選択しましたが、画像と仮想キーボードを覆う余剰があります。 その後、彼はアニメーション化されたMarvannaとMishaを追加し、マージンを使用して隅に分散させました。


要素のグループを列に整理するために、ディスプレイを使用しました。インラインブロックスタイル属性。

合意

契約を使用すること自体が目的ではありません。良いトーンであり、プロ意識の兆候の1つです。 ポイントは、インデント内のスペースの数ではなく、コンポーネントの単一の読み取り可能なデザインです。 ネーミングシステムをすぐに検討することをお勧めします。 この意味で、私の製品は理想とはほど遠いものです。

HTML検証

バリデーターvalidator.w3.org/nu/#fileは、レイアウトの間違いを見つけ 、冗長性を排除し、align = "center"のような古い属性の問題の解決策を提案するのに役立ちました。 バリデーターは、逸脱をエラーとみなしました。 マップエリアで必須のaltの場合、エラーは明らかです。別のことが興味深いのはなぜですか？ W3Cのalt属性について何がそんなに重要ですか？

Javaスクリプト

スクリプトからアクセスする場合、ページのアドレス可能な要素はすでにロードされているはずです。 この場合、body要素のonloadイベントがあります。 シーケンスは次のとおりです。

• ヘッダーからスクリプトを呼び出し、グローバル変数を宣言して初期化します。
• ページ本体要素の読み込みと組み込みスクリプトの作成。
• onloadイベントプロシージャを呼び出します。

ページの特定の要素へのアクセスは、id属性の値によって行われます。 クラス属性を使用して要素をグループ化しました。 getElementsByClassName（）およびgetElementsByTag（）メソッドによって返される要素のリスト（NodeList）は、配列のようにインデックス付けされますが、そうではありません。
要素は、スペースで区切られた複数のクラスに属することができます。 タグ名とは異なり、idおよびclass属性値では大文字と小文字が区別されます。
html要素の属性にはいくつかの二重性があります：ページのチェックボックスタイプの入力要素のchecked = 'checked'属性の場合、jsではこれはel.checked == true要素のプロパティであり、el.getAttribute（ 'checked'）メソッドはnullを返します。

算術例の生成は、間隔から整数をランダムに選択することに基づいています。 VB5実装での応答の検証は、eval関数によって返された論理値（ '2 * 2 = 5'）に基づいていました。 この実装では、正解とユーザーの応答の文字列比較。 この点で、次の形式のあいまいさを排除する必要がありました：2？ 2 = 4で、数値の周期的な小数部分を四捨五入します。

イベント

onclickイベントハンドラーをイメージマップの領域要素に割り当てることは、スクリプトからのみ可能です。 デフォルトのアクション（イベントが機能しないHTMLリンクに続く）を抑制するには、ハンドラーはfalseを返す必要があります。

 document.getElementById("areaBlackboard").onclick = function() { showTask(); return false; //disable default action }; 

データ入力は、仮想キーボードと物理キーボードの両方から直接要素に編成されます（innerHTML）。 カーソルの代わりに、 点滅する CSSを使用しました。 物理キーボードの場合、ページ本体のonkeypressイベントハンドラー（表示される文字）とonkeydown（制御文字）が定義されます。 ポイントはこれです：

• すべてのブラウザがBackspaceのonkeypressを開始するわけではありません。
• ブラウザでキーのアクションを抑制する必要があります（Backspace-ホームページに戻り、Enter-フォーカスされた要素をクリックします）。

デバッグ

ブラウザーのデバッガーはメニューのかなり奥に隠れています（FFの場合：「メニュー」-「開発」-「デバッガー」）が、ホットキーがあります。
何か問題が発生した場合は、実行可能なスクリプトの構文エラーが表示される「コンソール」タブを確認する必要があります。 ひとつひとつ、これは解釈するのが自然です。 コンソールが空の場合は、js-validator www.jslint.comに連絡してください 。

ランタイムには、デバッグツールの完全なセットがあります。クライアントからのバックエンドデバッグと比較した場合の曲です。コントロールシールしかない場合もあります。

グラフィックとアニメーション。

私はプログラム駆動のアニメーションを計画していなかったので、CSSとjsソリューションに焦点を合わせませんでした。 それでも、私は[2]へのコメントでメフィストの提案が好きでした。 フレームを接着して垂直に移動すると、完全に映画のようになります。
APNGはChromeで定着しませんでした。 独自のgifではなく、古くて親切なgifを選択しました。
スクリーンショットの処理とgifの形成にはGIMPを使用しました。 エディターには、gifオプティマイザーなど、必要なものがすべて含まれています。 最適化の効果を自分で評価できます。
GIMPのアニメーションについて簡単かつ視覚的に、こちらをご覧ください ： http : //www.progimp.ru/articles/sposobyi_sozdaniya_animatsii_v_gimp/
animizer.net/ru/gif-apng-assemblerを試しました 。 興味深いことに、ロードされたフレームを複製する方法はなく、アニメーションを分割するときに遅延値が失われます。

データ保存

設定と日記を保存するために、2週間のCookieを使用しました。 制限があります-Cookieは特定のブラウザーに関連付けられています。
私のニーズはネットワークからのパケットによって徹底的に満たされました。 コードは、著者の同意を得て使用されます。

ローカリゼーション

これは必須項目ではありませんが、考える価値はあります。 ローカリゼーションの目的は、ローカル言語（lang_ru.js）に対応する接尾辞付きのスクリプトであり、要素とグローバルアプリケーション変数のプロパティに従ってテキスト行をプッシュします。 HTML自体-デフォルトで私の不気味な英語。 ローカライズスクリプトを選択してロードするには、ページ本文の最後に次のコードを追加します。

 <html> <body> ... <script> var script = document.createElement("script"); script.type = "text/javascript"; script.src = "./js/lang_"+ (window.navigator.userLanguage || window.navigator.language).split("-")[0] + ".js"; document.body.appendChild(script); //       </script> </body> </html> 

ローカル設定には、算術演算の代替記号、除算（スラッシュ/、コロン：、obelus÷）および乗算（アスタリスク*、クロス×、ドット∙）が含まれます。 そして、もちろん、小数の「ポイント」の表現。

まとめ

開発プロセスは喜びでした。 プログラミングの魅力は何ですか-マテリアルではないにしても、常にありますが、結果はhttps://miktim.imtqy.com/arithmisha/です。

Habro参考文献：

1. 「ウェブサイトの作成。 若い戦闘機のコース”
2. Lord_D 、 「Firefox、Opera、およびWebKitのアニメーションPNG？ 簡単！」
3. 「HTML検証が必要ですか？！」
4. splincodewdの翻訳、 「HTML / CSS / JavaScriptガイド」

はい、はい

収益化

シャツの熊にはスポンサーのロゴの場所があります:)。 確かに、ホストを変更する必要があります...