Clever Geek Handbook

HTML5のセヌリング。 新しいテクノロゞヌが珟代のりェブをどのように倉えおいるか

User Experience`11カンファレンスでの私の講挔をきっかけにした蚘事。



HTML5ずは䜕ですか





今日、HTML5に぀いお、Web開発に䜕らかの圢で関係しおいる人々の数は、怠け者だけに聞かれおいるわけではありたせん。 Webに䜕かが存圚するすべおのファッション䌚議で、ほが確実にHTML5にも䜕かが聞こえるず仮定しおも、倚くを倱うこずはありたせん。 Google、Apple、Microsoft、Amazon、Adobe、Oracle、Facebook、Yandex、Mail.ruなど、ほがすべおの䞻芁なWeb関連䌁業は、HTML5に぀いお語り、䜕䞖玀にもわたっお愛を瀺し、HTML5のプロモヌションず開発に取り組んでいたす。 うん OperaずMozillaも確かにこのリストに茉っおいたす。



この普遍的な欲求は喜ばせるこずができるだけです。 もちろん、垂堎参加者が自分で毛垃を匕っ匵り始めるたで、テヌブルに座っお同意したす。



玠晎らしい展望、新しいWeb開発の波、新䞖代のWebアプリケヌション かっこいい。



HTML5に぀いおは説明したせん。 この蚘事の文脈では、1぀のこずを明確に理解するこずが重芁です。HTML5には2぀の理解がありたす。



1぀はHTML5暙準です。これは、すべおの新しいタグ、属性、新しいAPI、およびCanvas APIなどの远加の詳现を含む倚数の関連文曞を説明するW3C Webサむト䞊の文曞です。



2぀目は、「倧」マヌケティング、トレンドHTML5、HTML5仕様自䜓ず倚くのCSS3モゞュヌル、さたざたなJavaScript API、およびJavaScript自䜓の新しい暙準であるECMAScript5の䞡方を含む、新䞖代の新䞖代の傘です。



原則ずしお、コンテキストにより、䜕が危険にさらされおいるかが明確になり、混乱はあたりありたせん。 HTML5マヌケティングは、すべおの垂堎参加者がサポヌトする確立された抂念です。 しかし、倚くの堎合指を指すこずはありたせん、HTML5゜ヌスの倚くの興味深いこずを話すこずができるため、Web暙準やW3Cずは関係ありたせんが、議論されおいるこずを垞に意識するこずが重芁です。りェブ党䜓の粟神をサポヌトしたす。 たた、各技術の背埌にあるもの、初期のプロトタむプ、および既に確立され合意された仕様がある堎所を理解するこずも重芁です。



私の話は、「倧きな」HTML5にささげられたすが、議論される特定の暙準を参照しようずしたす。



HTML5およびHTML5の革呜



共進化

珟代のWebがどこに向かっおいるのかをよりよく理解するために、最初に泚意する必芁があるのは、IT業界党般、特にWeb業界で起きおいる特城的な倉化です。 今日芋おいる䞖界は、5〜10幎前ずは著しく異なりたすHTML 4.01は11幎以䞊前に承認されたこずを思い出しおください。



これらの倉曎のうち、次の点に泚意する必芁がありたす。



これらはすべおさたざたなWeb暙準で明確に具䜓化されおいるため、今日では本圓に新しい䞖代のテクノロゞヌがありたすごく最近、AdobeはAdobe MAXカンファレンスで新しい暙準ずその実装オプション-CSSのフィルタヌずシェヌダヌの提案を発衚したした



たた、デバむス、゜フトりェア、サヌビス、暙準、およびさたざたな開発慣行のこれらすべおの革新には密接に絡み合っおいるこずを理解するこずも重芁です。Web開発およびWeb暙準の分野で珟圚目撃しおいるこずは、さたざたなこれらの暙準を実装およびサポヌトする゜フトりェア開発ツヌルからブラりザヌやOSたで、そしお鉄のレベルおそらくGoogleの倢さえ実珟し、webm、ハヌドりェアサポヌトは䞻芁なデバむスに珟れるでしょう。



それでは、実際に、珟代のWebがどのように倉化しおいるか、その背埌にあるテクノロゞヌずプラクティスに぀いお話したしょう。



5A



5A倉革する最新のWeb



これらの倉換の本質を説明するいく぀かの重芁な傟向を匷調しようずしたした。 そのため、すべおのナヌザヌが文字「A」英語の特城的な単語を遞択でき、WebサむトたたはWebアプリケヌションの開発および理解プロセスにおけるアプリケヌションの順序は、䞀般にアルファベット順ず䞀臎したす。 :)



AAAAAが倚ければ倚いほど良いです。 少なく、鈍い。 ああ -良い。 ああ-悪い。



次のプロゞェクトを怜蚎したり、珟圚のプロゞェクトを分析したりするず、これらの「A」のプリズムを通しお芋るこずができたす。



A1。 アクセシブル



アクセシブル

最初のAはアクセス可胜です。 サむトにアクセスできる必芁がありたす。 もちろん、これには、障害を持぀人々アクセシビリティのアクセシビリティの問題が含たれたすが、それだけではありたせん。 このサむトには、すべおのむンタヌネット参加者がアクセスできる必芁がありたす。これには、怜玢゚ンゞンや、ドキュメントの意味を抜出するこずをタスクずするプログラムも含たれたす。



セマンティックマヌクアップず、JavaScriptのマヌクアップ、スタむル、ロゞックの適切なバランスに぀いお芚えおおくべき堎所ず時間を次に瀺したす。 今日、珟実には、可胜であれば、コンテンツプレれンテヌションの䞀郚に関連するすべおのものがマヌクアップから取り出されるだけでなく、JSの䞀郚もCSSの宣蚀的な蚘述に取り蟌たれたす。



セマンティクスの芳点から、構造的なマヌクアップずコンテンツの盎接マヌキングの䞡方のために、HTML5に倚くの新しいタグが登堎したした。



html5セマンティクス



HTML5のいく぀かの既存のタグは、新しい意味を持ちたす。 したがっお、以前にiずemの遞択 bずstrongに䌌おいるが短いスペルを奜む堎合が倚かった堎合、これらはデフォルトでむタリックたたはボヌルドで同じ衚珟を持っおいる堎合でも、異なるセマンティックロヌドを持぀タグです。



HTML5の蚘事も参照しおください。 セマンティクスたたは意味のあるマヌクアップ 。



䞀般に、マヌクアップのセマンティックが倚く、ゎミが少ないほど、情報がどこにあるのかを自動的に理解しやすくなりたす。



むノベヌションの別の郚分は、アクセシビリティの問題に盎接関連しおいたす。ここでは、たず、コンテンツの目的ず圹割をマヌクできるアリア属性ずロヌル属性に぀いお説明したす。 この情報は、たずえばスクリヌンリヌダヌで䜿甚できたす。 アクセシビリティを確保するこずは最も些现な䜜業ではなく、HTML5ではこの問題にほずんど初めお泚意が払われたず蚀わなければなりたせん。



アクセシビリティのもう1぀の偎面は、コンテンツずの察話の容易さ、特に入力速床の問題です。 HTML5には、入力倀、範囲、およびその他のパラメヌタヌのタむプを指定する远加の属性を指定できるWebフォヌムの新機胜が導入されおいたす。 そのため、フィヌルドに電話のみを入力できる堎合、モバむルたたはタブレットデバむスなどのナヌザヌのブラりザヌは、デゞタルデヌタの入力専甚にキヌボヌドを調敎できたす。



最埌に、このブロックで蚀及せざるを埗ないトピックはHMTL Microdataです。 microdataは、microformatsのアむデアの発展を衚しおおり、1぀たたは別のスキヌムに埓っおデヌタ泚釈ルヌルを提䟛したす。 



<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Konstantin Kichinsky</span> <img src="http://a1.twimg.com/profile_images/1464844323/avatarh5f_reasonably_small.png" itemprop="image" /> <span itemprop="jobTitle">ADE</span> <a href="http://constantin.kichinsky.ru" itemprop="url">constantin.kichinsky.ru</a> </div>




Bing、Google、Yahooでサポヌトされおいるテンプレヌトのコレクションに぀いおは、 http//schema.org/のサンプルスキヌムを参照しおください。



レむアりト、スタむル、ロゞック間のコヌドのバランスの芳点から、私が蚀ったように、2぀の興味深い傟向がありたす。 最初の明癜なものは、HTML5からのすべおのスタむル芁玠の眮き換えです。これは、パフォヌマンスの芳点を含め、むンラむンスタむルを䜿甚する䞀般的な望たしくないこずです。



htmlからcssぞ



衚レむアりトずブロックレむアりトを思い出す必芁はないず思いたすが、今日はセマンティックレむアりトに近づいおいたす。



2番目の傟向は、CSS機胜の拡倧ず、JavaScriptコヌドの代わりに適切なルヌルによるさたざたな効果、アニメヌション、および倉換の宣蚀的蚘述の出珟です。



jsからcssぞ



䞡方の傟向の兆候が耇数回衚瀺されたす;



A2。 アダプティブ



A2。アダプティブ



2番目のAは適応型です。 サむトは、呚囲の環境に適応し、倖郚環境に適応する必芁がありたす。 ここで、適応性はサむトのアクセシビリティに関連しおそれほど远加的なものではなく、むしろ拡匵性ず開発であるず蚀わなければなりたせん。適応性はアクセシビリティのアむデアから生たれるべきだからです。



さたざたな画面解像床、さたざたなフォヌムファクタヌ、さたざたなフォントサむズ、さたざたな情報出力デバむス、およびその他のパラメヌタヌに適応するこずは、これらすべおのシナリオで利甚できるこずを意味したす。



原則ずしお、適応は特定の暙準だけでなく、Webサむトの蚭蚈ず開発に䜿甚できるさたざたな手法ずアプロヌチ、およびそれらのあらゆる組み合わせにも基づいおいたす。 これに関連しお、間違いなく泚目すべき2぀の重芁な甚語に蚀及したいず思いたす。レスポンシブデザむンEthan MarcotteによるレスポンシブWebデザむンを参照ずプログレッシブ゚ンハンスメントスティヌブンチャンペオンによるプログレッシブ゚ンハンスメントずWebデザむンの未来を参照 。



1぀目は、さたざたな画面解像床ずフォヌムファクタヌに適応する方法です。 2番目は、サむトでの䜜業䞭に、より単玔なスクリプトからより高床なスクリプトたずえば、叀いブラりザヌから最新のブラりザヌに移行する方法です。



どこかで、たずえば、さたざたな条件小さなデバむスでは小さく、倧きなデバむスでは倧きいでクラむアントに異なる画像を提䟛するために、特定の暙準たたは特定の手法を適甚する問題です。 どこかに、これは適切な機胜が利甚可胜になったずきに機胜を開発する問題です。



さたざたなシナリオの倧芏暡な図を想像できたす。氎平方向にはすべおの皮類の画面解像床および関連するフォヌムファクタヌがあり、垂盎方向にはあたり高床でないブラりザヌから最新のブラりザヌに移動したす。 レスポンシブデザむンずプログレッシブ゚ンハンスメントは、䞊䞋巊右に移動するおよび考える方法です。



いく぀かの特定のテクノロゞヌずWeb暙準を芋おみたしょう。



CSS3メディアク゚リ



皆さんが盎面する最初のタスクは、さたざたな画面解像床にサむトを適応させるこずです。 ここでの問題は、それらがたくさんあり、それらが異なっおいお、新しいものが垞に登堎しおいるこずです。 Web開発たたはデザむンに1幎以䞊携わっおいるすべおの人が、最小サむズの800x600pxから1024x768pxのより倧きなサむズに切り替える時期であるかどうかに぀いおのこれらすべおの䌚話を芚えおおり、平均的なナヌザヌの画面サむズの統蚈ず傟向を研究しおいるず思いたす。



䞀般的に蚀えば、今日、この質問、およびそのような質問の定匏化はもはや関係ありたせん。 理由を知っおいたすか 実際、埐々に画面サむズが倧きくなるのではなく、画面サむズがたすたす倚様になり、䞡偎では-480x800pxのような小さなモバむルサむズになり、珟代のモニタヌでは1920x1080px以䞊になりたした。



さらに、この党範囲で、最新のブラりザヌぱンドデバむスで動䜜できたす-IE゚ンゞンWindows PhoneからデスクトップWindowsたたはWebkitベヌスの゚ンゞンiPhoneおよびiPadからMacOS XおよびデスクトップWindowsのいずれか、たたは完党にさたざたなモバむルデバむスのJavaブラりザの巚倧な動物園を含むさたざたな゚ンゞン。



特定の範囲では、ゎムの組版を䜿甚できたすが、党胜ではなく、その甚途は制限されおいたす。 そしお、そのような倚様性においお、適応には远加のツヌルが必芁です。 䞀般的に...



CSS3メディアク゚リ



数分間最新の゚ンゞンにずどたるず、それらはすべおMedia QueriesこれはCSS3モゞュヌルの1぀ず呌ばれる特別なテクノロゞヌをサポヌトしおいるこずがわかりたす。



CSS3 Media Queriesは、HTML 4.01およびCSS 2.1で利甚可胜な埓来のメディアタむプを拡匵し、さたざたな再生コンテキスト蚭定、画面サむズ、デバむスの向き、色深床、モノクロ、カラヌ印刷などに応じおCSSルヌルをより厳密に定矩できたす。 n。



http://www.palantir.net/



メディアク゚リの背埌にある考え方は、これらすべおのパラメヌタヌの倀に応じお、コンテンツの投皿方法、衚瀺するコンテンツ、衚瀺しないコンテンツを決定できるずいうこずです。 画面が小さい堎合は、すべおの芁玠を再配眮しお、小さな画面に合理的に収たるようにする必芁がありたす。倧きい堎合は、利甚可胜なスペヌスをより最適に利甚でき、他の堎所はもっず衚瀺されたす。 サむトhttp://mediaqueri.esで収集された䟋で、すべおがどのように機胜するかを自分で確認できたす。



ずころで、メディアク゚リを䜿甚するこずは、コンテンツのマヌクアップずプレれンテヌションを実際に分離するずいう事実に匷く結び぀いおいたす。 したがっお、アクセシビリティおよびセマンティクスは最前線にありたす。 利点は、異なるデバむス甚に1぀のサむトを䜜成するこずです。 メディアク゚リを知らないデバむスは、ルヌルを無芖したす。



通垞、単玔なシナリオでは、CSS 2.1ずMedia Queriesモゞュヌルのみの機胜で十分ですが、耇雑な組版の堎合、䜕か䟡倀のある効果的な実行を行うために远加のツヌルが必芁です。



Media Queriesのアむデアずうたく機胜する他の倚くのCSS3モゞュヌルをきっず気に入っおいただけるでしょう。



CSS3 Exclusions and Shapes formerly Positioned Floatsに泚目しおください。これにより、個々の芁玠の呚囲に流れるコンテンツに察する盞察的な䜍眮を調敎でき、コンテンツの動䜜は画面サむズや配眮モヌドなどの他のパラメヌタヌによっお決定できたす。







䞊蚘の䟋では、CSS3 Exclusionsは、耇数列レむアりトおよびグリッドを䜿甚したレむアりトず組み合わせお䜿甚​​されたす。



CSS3グリッドリレむアりト



埌者は別々に蚀わなければなりたせん。 グリッド䞊にブロックを配眮するこずは、すべおのタむプセッタヌにずっお倧きな頭痛の皮です。 テヌブルレむアりトになるず、流行がなくなり、ほずんどの人がこのアプロヌチを間違っおいるず認識したした。 2列たたは3列のレむアりトよりも耇雑な凊理が必芁な堎合、圌らは耇数階建おのcss-rulesでブロックレむアりトを䜿甚し始めたした。



新しいCSS3モゞュヌルには、この特定のタスク専甚のモゞュヌルであるCSS3 Grid Layoutもありたす。 グリッドを䜿甚するず、仮想グリッド䞊に芁玠を構築できたす。 これは非垞に匷力なツヌルです-異なる画面拡匵でブロックに異なるグリッドを䜿甚できるこずを想像しおください すぐにできたす;







別の興味深いモゞュヌルはCSS3 Flexible Boxです 。これにより、ブロックは、空きスペヌスを埋めおいるか、特定の割合でブロック間にスペヌスを配分しおいるかにかかわらず、垌望に応じお割り圓おられたスペヌスを埋めるこずができたす。 今日、倚くの同様のタスクはレむアりトおよびスタむルルヌルのさたざたなトリックを䜿甚しお解決されたすが、明日は必芁なものを正確に瀺すだけで十分ですリチャヌドシェパヌドによるCSS3フレキシブルボックスレむアりトの説明も参照。







䞀般的に、珟圚たたは近い将来に利甚可胜な技術を䜿甚しお、さたざたな条件に適応する意思決定を簡単に行うこずができたす。 技術的には1぀の゜リュヌションであるため、条件の異なるサむトは異なるグルヌプに再線成され、それぞれの堎合に最適な顔を芋せるこずができたす。



では、Progressive Enhancementに戻りたしょう。



プログレッシブ゚ンハンスメント



簡単に蚀えば、プログレッシブ゚ンハンスメントのアむデアは、挞進的な改善ずしお定匏化たたは芆すできたす。すべおのブラりザヌで機胜する基本機胜を䜜成し、パフォヌマンスを䞭断するこずなく、叀いバヌゞョンから新しいバヌゞョンに移行するこずでさらに改善したすが、最新の゜リュヌションのナヌザヌに远加のバンを远加したす。



最終的に、これはサむトのすべおのナヌザヌが最䜎限の機胜を保蚌されるこずを意味したすが、同時に、最新の゜リュヌションを奜む人にずっおは、たずえばサむトはより矎しくなりたす。



はい、サむトがどこでも同じように芋えるずいう考えをただ持っおいるなら、それをひずたずめにしお、最も近い投祚箱に投げ蟌む時です。 どこでも同じように芋えるこずは蚱容できない゚ネルギヌの浪費であり、倚皮倚様なデバむスの珟代の状況では、゚ンゞニアリングに乗るずいうよりも、進化の誀算お金の蚀語に翻蚳するナヌザヌは適応する方法を知っおいる人を奜むのようです。



どのように機胜したすか ずおも簡単です。



CSS3 BordersBackgroundsの歊噚を䜿甚するこずを考えおいたすか ラりンドをサポヌトしおいない人のために四角を䜜り、ラりンドをサポヌトしおいない人のために䞞くしたす。 ラッパヌの構築を囲み、ここで独自のテヌプでクロヌルするこずはありたせん。 叀いブラりザの堎合は無地の背景を䜜成し、最新のブラりザの堎合はグラデヌションを䜜成したす。 IE6-8で単䞀の背景画像で十分な堎合は、IE9 +で耇数の背景を䜿甚したたたにしおください。



基本的な機胜を䜜成し、新しい機胜を远加したすが、倚くの束葉杖は必芁ありたせん。 ナヌザヌは、新しい最新のブラりザに切り替えるず喜んでくれるでしょう。圌らはあなたのサむトで本圓に違いを感じたす。



プログレッシブ゚ンハンスメントは、テレビのアナロゞヌの粟神で考えるこずができたす。 私たちは、癜黒攟送からカラヌ、さらに高粟床のビデオぞず長い道のりを歩んできたした。 アナログテクノロゞヌに぀いお話しおいる間、叀いテレビでも最新の番組を癜黒で衚瀺できたす。 芖聎者は、珟代のテレビでは画像が良くなるこずを知っおいたす。 ただし、送信される信号はテレビから独立しおいたす。



A3。 アゞャむル



A3。アゞャむル



3番目のAはアゞャむルです。 䞖界は耇雑で、時には異なるが䞀般的なパラメヌタヌにアクセスしお適応するだけでは䞍十分な堎合がありたす。 サむトは柔軟でなければならず、技術的な決定は柔軟でなければなりたせん。



実際、この蚘事の前半で「柔軟」ずいう蚀葉を䜿甚するこずを控えるこずはかなり困難でしたが、それは䟡倀がありたした-そしおそれが理由です。



サむトの適応がその可甚性に基づいおいる堎合、柔軟性は順応に基づいおおり、アクセシビリティも拡匵したす。 これはしゃれのように思えるかもしれたせんが、適応性ず柔軟性には違いがありたす。



適応には通垞制限があり、さたざたな環境倉化に応じお倖芋や行動に倉化が生じたす。 たずえば、私たちの目は、さたざたなレベルの照明や問題の被写䜓たでの距離に適応したす。 倚くの生物の行動は枩床の倉化に適応したす。 そのため、サむトは特定の画面サむズたたはブラりザ機胜に適応したす。



段階的な適応が䞍可胜な堎合、より意味のない堎合、たたは2぀の極端なポむント間の距離が倧きくなりすぎお、それらの間のパスが別々のシナリオに匕き裂かれるような倉化の範囲である堎合、柔軟性は重芁なポむントで珟れたす。 原則ずしお、柔軟性は技術プラットフォヌムを超えお倉化するこずを特城ずしおいたす。



柔軟性は新しいものではなく、実践から倚くの人に銎染みのあるものであり、このようなシナリオのいく぀かに぀いおは少し埌で説明したす。 さお、珟圚ず最近の過去に戻りたしょう。 最新のモバむルブラりザは通垞のりェブサむトで非垞によく機胜し、ズヌムを䜿甚しおそれらずやり取りするこずができたす。 前述の適応により、倖芳を調敎するこずでこのシナリオを改善できたすが、これは同じサむトです。 珟圚実際に頻繁に䜿甚されおいる゜リュヌションは、モバむル版のサむトです。



それをさたざたな方法で芋るこずができたすが、芖点の1぀は、決定の技術的柔軟性です。 プラットフォヌムずそれぞれのプラットフォヌムに必芁な特定の機胜が非垞に異なる堎合、適応型シナリオに過床のストレスがかかり、それらを砎る時が来たした。 そしお、それに぀いお䜕も悪いこずはありたせん。



本質的に、柔軟性は限界ぞの適応で起こるこずです。 技術的柔軟性-思考の適応であり、その目的は問題に察する効果的な解決策です。 これは、特に、䜿甚されおいるテクノロゞヌの劥協点の探玢ず、完党にクロスプラットフォヌムではないシナリオの出珟の䞡方に぀ながる可胜性がありたす。







たずえば、HTML5で䜜成された有名なゲヌムAngry Birdsは、Adobe Flashを䜿甚しお音楜やオヌディオ゚フェクトを再生したす。 これは奇劙に思えるかもしれたせんが、通垞の柔軟な技術゜リュヌションであり、幅広いブラりザで利甚でき、非垞に効果的に機胜するテクノロゞヌを䜿甚できたす。 この堎合、開発者はHTML5のオヌディオ芁玠を介しおオヌディオを再生する際に倚くの問題に盎面したしたちなみに、Internet Explorerではなく、別の䞀般的なブラりザでした;圌らは問題を解決するためにフラッシュを䜿甚したした。 これは、宗教的な感情を䌎わない柔軟な技術の組み合わせの䟋です。







別の兞型的な䟋は、AmazonのKindle Cloud Readerです。 これは、ブラりザを介しお盎接本を読むこずができるブラりザベヌスのアプリケヌションであり、オフラむンモヌドでも動䜜したす。 この玠晎らしい瞬間を少し埌で怜蚎したす。 私たちが今興味を持っおいるのは、技術の柔軟性です。



Amazonの動機に関するビゞネスの詳现はすべおわかりたせんが、最終的には、Kindle Cloud Readerは、アプリケヌションストアをバむパスしお、ブラりザヌを介しお゚ンドナヌザヌず盎接やり取りするずいう䌚瀟の願望を明確に瀺しおいたす。 䞻な察象ナヌザヌを芋るず、これらはiPadずAndroidタブレットのナヌザヌです。



次の瞬間、技術的な解決策を考えるず、さらに読むためにナヌザヌのデバむスにファむルを保存できるロヌカルストレヌゞの技術が必芁であるこずがわかりたす。 ここでテクノロゞヌの怜玢を開始したす。これは、䞡方のプラットフォヌムがブラりザヌで接続されおいるずいう事実に十分なほど早く圓おはたりたす。ブラりザヌは異なりたすが、どちらもWebkit゚ンゞンに基づいおいたす。



WebSLQデヌタベヌス



WebkitはWebSQLデヌタベヌステクノロゞヌをサポヌトしおいたす。これにより、ロヌカルストレヌゞにデヌタを保存するずいう、たさに必芁なこずを行うこずができたす。 この時点で、新しいWeb暙準に粟通しおいる堎合は、䜕かをクリックする必芁がありたす。 実際、W3CのWebサむトでは、フレヌム内に赀い文字が衚瀺され、黄色の円䞊蚘を参照が付いた黒い背景にさらに癜い文字が衚瀺されおいたす。 珟実には、今日、W3Cずブラりザヌの開発者は、代替テクノロゞヌであるIndexedDB および比范的単玔なシナリオの堎合はロヌカルストレヌゞを怜蚎しおいたす。



Amazonの開発者は、将来のステヌタスが䞍確実で、他のブラりザヌでのサポヌトが限定的であるにもかかわらず、開発時に利甚可胜なテクノロゞヌを䜿甚するこずを止めたせんでした。



これはテクノロゞヌの柔軟性であり、ある意味ではすべおの朜圚的なナヌザヌすべおに有効な決定を䞋そうずしないで、䞻に䞻芁な芖聎者向けに補品を䜜るこずを決定する勇気さえありたす。 柔軟性はトレヌドオフを認識したす。







最埌に、柔軟性の別の䟋。 IE9では、远加機胜を䜿甚しおWebサむトをタスクバヌに固定するこずが可胜になりたした-アプリケヌションたたはWebサむトアむコンに加えお、これはコンテキストメニュヌ静的および動的、プレビュヌりィンドりのボタンによるアプリケヌション管理、およびナヌザヌぞの通知です。



この技術はIEでのみ䜿甚できたすが、サむトの機胜を拡匵し、アクセスしやすくし、远加機胜に適応させるためのわずかな劎力で枈みたす。 これは、サむトず連動したナヌザヌのUXの柔軟な拡匵機胜です。



柔軟性は技術的な玔床の問題ではなくこの問題は垞に関連性を保ちたすが、劥協が必芁な堎合もありたす、既存の機胜の䜿甚ず珟圚の問題解決の有効性の問題です。



倚くの堎合そしお、より倚くの堎合、新しいテクノロゞが実際に䜿甚したいずいう状況に陥りたすが、ブラりザの既存の゚コシステムを振り返るず、私たちは自分自身を匕っ匵っお停止しなければなりたせん。 柔軟性は、グレヌスフルデグラデヌションのアむデアに目を向け、可胜な限り最新の゜リュヌションを䜿甚できるようにし、これが䞍可胜な代替シナリオの提䟛に努めおいたす。



これらはいわゆるフォヌルバックスクリプトです。たずえば、叀いブラりザヌでは、サポヌトされおいない特定のルヌルずしお、ブラりザヌが悪いからではなく、叀いためメカニズムが他の利甚可胜なテクノロゞヌを通じお実装されおいたす。



堎合によっおは、珟圚のレベルず叀いブラりザにあるものずの間に生じる違いは、いわゆるポリフィルの助けによっお満たされたすポリフィルずは Remy Sharpによる。



たた、ブラりザの゚コシステムの䞀郚を遮断する勇気がある堎合もありたすが、ナヌザヌぞの敬意を忘れるこずはありたせん。 これは本圓に重芁です。



そしおもちろん、機胜怜出アプロヌチずModernizrラむブラリの䜿甚を忘れないでください。



A4。 非同期



A4。非同期



4番目のAは非同期です。 サむトは、特に私たちの䞖界ずそのWebパヌツの非同期性を理解する必芁がありたす。 , — - , , , , .



, , . , , , .



, :





, , , .



, , ? : . : , . Application Cache HTML5 , .



, ? , , , timeout? , , ? ( ) . : - . AJAX , Web Sockets , .



, - , , , , File API? UI, . Web Workers Web Messaging, JavaScript .



, , . .



A5. Attractive



A5。 魅力的



, A — Attractive. . , , , . , .



, , , - ( , ). .



— . - ( ) — , . , .



HTML5 — Canvas SVG, HTML5 Audio Video, CSS, , , .







, , , HTML5 Canvas. , , . !







Never Mind the Bullets . , CSS3 , . .







, Bing, , Bing - HTML5 Video ( , USA).



, .



5A. おわりに



クッキヌ



. 5A — , . . , , , -.



, , -, , , , .



5A. , !



ps IE



:





, IE .


More articles:


All Articles