フロントエンド開発:CodePenまたはSublime Text?

CodePenまたは崇高なテキスト?
CodePenまたはSublimeText? Webプログラミングについて言えば、HTML、CSS、JavaScriptの名前がす​​ぐにわかります。 そこにたどり着くにはいくつかの方法があります。 でも、 メモ帳を開くと、「html」の作成に取り掛かることができます。。 確かに、パッドからプログラミングした結果を確認するには、進行状況を確認するための面倒な手順が必要になります。

これらのサイトは、その日のユーザーのアプリケーション開発者にとっての主要な遊び場です。。 これらのプログラムの長所と短所について詳しく知るために、この記事でそれらを深く分析します(少なくとも、私たちが知っているすべてのこと)。 私がいつも言っているように、確かにここにいるあなた方の何人かは主題をもっと知っています。 もしそうなら、ここで私たちを逃れるすべてについてコメントしてください。 喜んでご相談させていただきます!

今日はCodePen、JSBin、Plunkr、sublimeを分析します、CSSDeck、Dabblet、およびLiveWeave。 この環境で最もよく知られているツールと最も使用されているツールはどれですか。 もちろん、もっとあります。

しかし、フロントエンドまたはバックエンドが何であるかを知らないすべての人のために、少し説明しましょう。 フロントエンドまたはインターフェースは、ナビゲートしているユーザーがWeb上で見ることができる視覚的な部分です。。 バックエンドは、サイト管理者が制御する部分になります。 プログラミングでは、結果を同時に表示するツールを使用してコードを入力すると、これはフロントエンドと呼ばれます。.

コードペン

多くの最も完全なツール 私たちが話しているすべての中で。 あなたの作品を表示するためにコミュニティに最も近いものであるWebツールとして使用されます。 のようなもの Youtube プログラマーから。 ここでは、Webに関連するプログラマーの仕事を確認し、興味がある場合は連絡して、プロフィールを確認し、ネットワークでフォローし、チャンネルに登録して将来のプロジェクトをすべて表示することもできます。

コンテンツ、サポート、およびキーボードショートカットの表示

CodePenプレゼンテーションが最も興味深い数回クリックするだけで、すぐにプロセスを実行できるためです。 html、css、javascriptの非常によく分離された行で。 視覚的な部分に加えて、上下に散在して進行状況を明確に確認できます。 したがって、各言語をうまく区別するのに役立ちます。 新しいプログラマーにとって便利なもの。

あなたのウェブサポート、私たちがあまりよく知らないものを使い始めたいときに、それをより耐えられるようにします。 それはあなたにとってそれがより良いという意味ではありません、それは私たちが持っているニーズに依存します。 しかし、はい、「未知の」起源のコンピュータに何かをインストールすることを約束する前に、環境をもう少しよく知るために。

あなたが使用に慣れている人の一人なら 作業中は完全にキーボードで、CodePenはあなたにとって素晴らしいでしょう。 他のツールが必要 プラグイン キーボードショートカットを使用して環境に入力できるようにします。 これにより、ジョブが少し不快になります(ただし、インストールすると同じように効果的です)。 CP。 これは、リストにある場合と同じように、繰り返される同じコード行を入力できるシステムを標準で統合しています。 リストの表示方法を記述し、[タブ]をクリックします。

Proバージョンでは、基本パッケージが9,00ユーロ、「スーパー」パッケージが29,25ユーロの価格で、さらに多くのオプションを利用できます。 XNUMXつで行うことを複数のデバイスで同時に更新できること。 また、協調モード、「教師モード」など。 ここで必要な場合はメリットがあります。

JSBin

JSBinは、直接の資格を得ることができるツールです。。 Webドメインにアクセスすると、遅滞なく次のプロジェクトの作成を開始できるようになります。 そして、最初のステージングは​​あまり魅力的ではありませんが、快適です.

JSBinはシンプルで、時間を無駄にしないようにhtmlで作成された基本構造で、作業を完了するために異なる言語の間に散在します。 最初にHTML、次にCSS、Javascript、最後に視覚的な作業があります。 難しいように見えますが、何もインストールしなくても同じ種類のショートカットを使用できます。 ブラウザから直接。

ただし、後続の列のためにコードが非表示になっていると、コードを正しく表示するのがより不快になります。 ラップトップでは、あなたはあきらめなければならないので、 トラックパッド そしてそれはあまり流動的ではありません。

無料または有料の120回の分割払いのみです。 これはCodePenよりも少し高価ですが、毎年支払う場合は、XNUMXユーロを支払うことができれば、より収益性が高くなります。

CSSDeck

CSSDeck
の作業環境 CSSDeck 上で見たものとは異なります。 CSSDeckは、ビジュアルコードの3つの列のみに分割されており、XNUMX行下で機能し、さまざまなタイプの言語を分割します。 ソーシャルネットワークの形でのプレゼンテーションと明るい色のよりクリーンな作業環境。 シンプルなツールのようです。 時々それはそれが否定的であるという意味ではありませんが。

XNUMX万人以上の登録ユーザーとXNUMX万人以上のプロジェクトが作成されているので、必要なものを検索して見つけることは難しくありません。 いつものように、英語を知らない人にとっては不便かもしれませんが、これは 赤色の社会 画像はとても重要なので、大きな挑戦ではないと思います。

プランカー

プランカー これは私が今まで出会った中で最も魅力的でないツールです。 プレゼンテーションはメッセージと画像の欠如に凝集しています。 コンテンツの読み込みは遅く、一見あまり役​​に立ちません。 さらに、日付による順序付けにより、どんなに単純なスケジュールであっても、最初の位置に配置できます。 もっと面白いものを見るには、次のようなタブに移動する必要があります。«トップビュー«。 つまり、これまでGoogleで翻訳したことがない場合です。

また、Webによると、バージョン1.0.0であると言います。 したがって、これは、Webを閲覧するときに見つかるデザイン、プレゼンテーション、および考えられるエラーについて少し説明しています。

利点として、アイデアが足りなくなった場合、右側のサイドバーから直接他のプロジェクトを歩いてすぐに表示できるため、Plunkrの別のタブを離れたり開いたりする必要はありません。 これにより、簡単なアイデアを収集し、同時にプロジェクトに適用することが容易になります。

ダブレット

ダブレット それはシンプルなツールです、あなたは入って作成します。 GitHubを介して登録してユーザー名を取得することはできますが、Web上でそれほど目立つものではありません。 背景が黄色から赤のグラデーションで、視覚部分に背景があり、コード部分に白い背景がある場合(通常どおり)、Dabbletプロジェクトが表示されますが、CSSタブから変更できます。 私にとっては、空白にする方が良いです。なぜなら、そのグラデーションが与えるのは少しだけだからです。 生活 a

編集中は、表示されるタブを構成できます 簡単に。 編集者によっては、列や行に切り替えて見やすくしたい場合もあります。 フォントサイズを変更したり、HTMLコードを登録または検証せずに匿名で保存したりすることは、Dabbletが一見したところより多くの可能性を提供します。 これは私が選択する最初のオプションではありませんが、将来のバージョンで更新された場合は考慮に入れる可能性があります。

私が一番好きではなかったが、優れたプログラマーが好きかもしれないことのXNUMXつは、 ラベルを表にして、それ自体を書き込むオプションはありません。 つまり、HTMLを入力してタブをクリックすると、「html」と「/ html」が自動的に書き込まれます。 それが行われた場合、他のアプリケーションで何か。

LiveWeave

liveweave
LiveWeave それは他のものと非常に似ており、他の人が有用性の点で提供できないものは何もありません。 このプロジェクトで強調するのは、CodePenに似ていますが、正方形の分布を持つ暗い色のデザインです。 サイズ変更が可能 味わう. クリアモードと«もあります行外« 編集したコードは、アクティブ化するまでビジュアルに反映されません。 これは非常に便利な機能ではありません。デザイナーとして、編集内容を常にリアルタイムで確認することが重要ですが、誰かがあなたに何らかの用途を確実に見つけるでしょう。 そして、いつものように、あなたは登録することができますが、ユーザーは主役を持っていません。 登録しなくてもプロジェクトを保存できるので.

崇高なテキスト

このツール これまでの分析で見たものとはまったく異なります。 Sublime Textは、Webリソースとしてではなく、アプリケーションとして機能します。 一方では、デスクトップに置く方が便利なはずです。 特に、過剰な作業や作業の損失の可能性によるインターネットのクラッシュまたはフリーズの可能性が原因です。 一方で、それは以前のものほど視覚的なツールではありません。 コミュニティがプロジェクトを共有する可能性がないことに加えて。

ここではすべてがゼロからです。 コード行を配置するタブを作成し、名前を変更して、どれがどれであるかを確認する必要があります。 最初のCSSがHTMLの場合、XNUMX番目のCSS ..またはその逆。 また、それがどうなるかについての近道はありません 引用符を除いて、完全に手動.

結論

すべてのプログラムは類似しており、各企業の特定の個人的なタッチがあり、それには賛否両論があります。 それぞれが自分に最も適したものを選択します、 私の推奨事項は、環境とそれが処理するソーシャルネットワークにCodePenまたはCSSDeckを使用することです。 しかし、もうXNUMXつ気に入ったら、コメントを残して理由を説明してください。きっと役に立ちます。


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

コメントを最初に

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドには付いています *

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。