新しいHabrAjaxテーマ

HabAjax-約1年前から存在していたスクリプトは、サイトページのデザインで大小さまざまな作業を行います。 約20ページの処理機能から始めて、新しい機能を開発して獲得しました。 これは、Firefox、Opera、Chromeの3つの主要なブラウザーでサポートされており、4番目のブラウザーであるSafariのサポートからやや離れています。 その主な目標は、ページをよりコンパクトにし、グラフィックのゴミを少なくすることです-不要な要素です。



サイトのレイアウトとコンテンツのいくつかの変更に続いて、ユーザースクリプトの次のバージョンがリリースされました(0.892)。 今回は、外観に関するいくつかの変更を加えました。 「コンパクト」バージョンには、すでに標準テーマともう1つのZenCommentがあります。 しかし、その後、標準レイアウトとHabrAjaxスクリプトの組み合わせを高貴にして、全体的な利便性の印象を構成する多くの小さな設計上の欠陥を排除するというアイデアが生まれました。 そして、今回はZenCommentスタイルを使用していませんが、標準テーマはほとんど変更されていることがわかりました。 多くのZenCommentスタイル要素がHabrAjaxにコピーされ、その他のCSSの機能強化により、軽微な設計の不整合が補完されます。



クローズアップでは、3か月以上前に既に「デザインのために戦うためにすべて!」( スクリプトの公式ページにセクションがあります)という叫びが投げかけられたという事実にもかかわらず、デザイナーの手はスタイルに忠実ではありませんでした。 したがって、おそらくサイトのグローバルなデザインは何らかの形で影響を受けるでしょう。 しかし、小さなディテール(グラフィックのゴミの除去、過度の突起、リンクの微視的サイズ、象のボタン)の接合部には進歩があります。 スクリプトによって追加された要素は、可能な限りスタイルで処理されます。



何が起こったかはスクリーンショットから見ることができます。 読者の90%が以前に古いデザインを気に入っていた場合、そのランクの中で新しい(古いものに非常に類似した)デザインが多くのファンを獲得するはずです。 同時に、30を超えるスクリプト関数がサポートされており、新しい関数が追加され続けています。



最初のスクリーンショット: テープ全体:





質問と回答:





記事のコメント始まり:



ここに、スタイルの比較的小さな使用法、非常に新しい種類の純粋なHabrAjaxがあります。



比較のために、追加のスタイル、 ZenCommentスタイルが適用された一連のスクリーンショットがあります。





1〜3日での最新の変更



最新の追加のうち、そのようなものをリストできます。



*メニューの左隅の情報は「le [nta]」ではなく、ページの読み込み時間と曜日です。 リンクは同じフィードにつながります。 1ページを読む瞬間は、サイトメニューの左側にあります。 曜日がありますが、「今日」と「昨日」の日付の曜日は他のどこにも示されていません(情報ゴミとの戦い)。 Ajaxで記事を読んだ瞬間(記事のアップロード)は、記事またはコメントを折りたたむためにパネルの記事の下部に表示されます。

*画像引数の入力:Ctrl +入力フィールドの上のボタンをクリック-引数align = rightで、Shift +クリック-引数align = leftで、Ctrl + Shift +クリック-引数align = centerで;

*日付から空気が放出されます。時計から「今日」を表示する必要はありません。昨日の日付からは「昨日」という単語で十分です。

*質問の見出しは、記事の見出しよりもわずかに減らされており、一般的なテープの記事と簡単に区別でき、スペースをとらないように斜めになっています。

*巨大なヘッダーは長い間適応スクリプトに置き換えられてきました-名前が長いほどフォントは小さくなります。 しかし、小さな活字は、対照的でなければ読みやすさを失い始めます。 見出しのコントラストの改善。

*ハブの名前は、ZenCommentの場合のように右側に移動され、(設定により)短縮されます。 日付-日付の行はニュースフィードにとってはなんとなく非常に豪華なため、 また、記事名と競合するハブ名もフィードの左側にあります。

*日付は署名(情報パネル)で複製されます-注釈の上部と下部の両方に日付を表​​示すると便利です(さらに、記事全体)情報パネルよりも;

*少ない単語-回答ボタンの文字数が増えました。 すでに多くの実質的な言葉の情報があるサイトでは、多くの同一の単語が疲れています。 代わりに「2つの回答」という単語と2つのチェックマークを表示する方が良いですが、厳密に単語や記号ではなく、応答ボタン全体の領域をクリックします。

*リンクではなく、記事のコメントのボタン、強調表示されたボタンの色。 答えについては、コメントに切り替えることも、ボタンのように見える場合に読みやすくなります。 もちろん、2、3の数字を狙うのではなく、これらの数字が書かれている大きなボタンに入るほうが便利です。

* URLの記事番号に基づくおおよその日付。 これで、記事のリンク(ページの下部にある3つのランダムな記事を含む)の上にマウスを移動して、発行の月と年を表示できます。

*質問と回答についても同じです。 このセクションは2年間存在しますが、同様の質問が行われた日付を見るのは非常に便利です。 また、同様の問題の公式の日付はありません。 マウスオーバーはこのギャップを修正します。



数日前に行われた変更



*「類似の投稿」および「類似の回答」ブロックは、注目を集めた新しい場所、記事の下にあるがコメントの上にあるボタンにクロールされました。 9月、今週3ブロックがこの場所で公式に試着していましたが、そこで慣れることはありませんでした。 しかし、この間に、ブロックをドロップダウンリストに変更するスクリプトが作成されました。これは成功したようです-スペースを占有せず、サイドバーにもありませんが、同様の記事タイトルを表示したい場合のみ常に手元にあります。

*すべてのコメントのタイトルは、ZenCommentのようにカーキ色で強調表示されます。 これにより、ページをスクロールするときに視覚的に認識できます。

*入力フィールドにタグを入力し、ZenComentから借用したボタンを強調表示するためのボタンの配置。

*タグ「ソース」の言語は2つのボタンに散らばっています。 216色すべてが3つのボタンに散らばっており、それぞれに72個あります(あまりよくありませんが、後で説明します)。

*「プレビュー」と「書き込み」は、ZenCommentのように特定の距離に配置されます。

*グラフィックガベージ-サイドバーのリンクに下線を引きます。 結局のところ、そこに-すべてのテキスト-リンク。 揺るぎない手で、私たちは公式サイトの伝統から撤退します。 以下の3つのリンクでも同じ

*純粋なCSSの5種類のフラグ:サイズと色を柔軟に調整し、基本的なサイトフラグよりも著しく小さくすることができます。

* ZenCommentの透明な「次へ」ボタンが純粋なHabrAjaxに追加されました。

*右側の冗長ブロックを非表示にすることはZenCommentから移行され、スクリプト設定を選択する機会がありました。 たとえば、「仕事」セクションが関係のない人には、それを無効にするオプションがあります。

*以下の3つのリンクのプレゼンテーションの処理-テキストのボリュームに応じた高さの中央揃え、幅の不均等、ソフトなデザイン、ヒントのおおよその日付。

*一部の企業のトップのパネルを最終的に修正。

*ユーザーメニュー-リンクは、メニューを開いたときにジャンプしないように再配置されます。 メッセージおよびトラッカーの通知中の重複リンクの削除。 メニューセクションの領域全体をクリックすると、アクションが実行されます(リンクの領域は、デッドエリアを残さずに引き伸ばされます)。



過去1〜2か月の変更



*すべての外部リンクが新しいウィンドウで開きます。 外部リンクのサインとして-その上矢印。 矢印がない場合、これはサイトへのリンクです。つまり、チップにはおよその発行日があります。

*テープ内のイベントに関するメッセージは、最大2文字まで最小化されます(設定がオンの場合)-ブロックやゴミはありませんが、行にカーソルを合わせると、イベントのタイトルと日付が読み取られます。

*フッターを下部に固定-短いページの場合、フッターがウィンドウの下部に固定されるようにDOMを変更します。



古いが特徴的な変更:

*ライブリンクはわずかに再配置されています。 コメンテーターの個人ページにはアクセスしたくないが、コメント:リンク-コメントを読みたいからです。 そして、記事の名前で、記事にアクセスしたい-記事へのリンク。



多くのことが書かれていますが、一度見てから3日間使用してアメニティの量を把握することをお勧めします。



ZenCommentのように、フッターを3行に減らすとよいでしょう。 しかし、すでに非常に多くの借入があります...これは計画中です。



見出しのコントラストがまだ十分に上手く見えない場合、または使いやすさについて別のコメントがある場合は、特に改善のための提案とともに建設的に書いてください。 これまで、コメントの大部分には提案がなかったため、著者と一部のユーザーは、1年間、以前のバージョンのスクリプトとスタイルを使用できませんでした。



今年の3月に、スクリプトのユーザー数とスクリプトが使用されたブラウザに関する調査が行われました。 例として60の回答を使用すると、ブラウザーごとの分布パターンが表示され、OSごとにわずかに表示されます。 pollservice.ru/p/dd12f28d55258167c83e/results



スクリプトを使用して調査に参加したい場合は、 pollservice.ru / p / dd12f28d55258167c83eに入力してください



UPD:すぐにお答えします:批判に感謝しますが、建設的な提案が必要です。 さらに、この機能は無効になっています-スクリーンショットでは、通常の想定された形式で簡単に示されています。 私はこれらの機能を絶えず使用し、意識的に導入されています-各要素がその役割を果たします。 イノベーションには多くのことが記載されていますが、その一部はすでに約1年前から存在しています。



All Articles