大邱AI学校実務プロジェクト

クリエイティブサイトリンク:http://hangdongkinder.com/
約1ヵ月間、大邱AI学校の最後の実務事業は9月に終了した.開発者としての第一歩である今回のプロジェクトの進捗過程を記録したいと思います.😚

📕 プロジェクトの概要

プロジェクト名称:「九老港ワルドフキンサー教育院」ウェブサイト建設

サイト目的:広報機関

総開発期間:21年9月6日~21年9月27日

📙 Web開発研究

注意:
(1) http://plandas.kr/ui-ux-design/uxui-5/
(2) http://fureweb.com/web-development-process-from-planning-to-deploy/
一般的に、ウェブサイトの建設は大体計画、設計、発表、開発の4つの段階を経験した.
デマンド分析>プランニング>設計>パブリッシュ>開発>テスト>デバッグ>オン
これらの段階を基準に、お客様とプロジェクトパーソナリティとKickoff Meeting(プロジェクト構築開始会議)から、企画者、デザイナー、パブリッシャー、開発者の協力によりプロジェクトを行います.通常、計画通りに各分野で重複して並列に行われ、クライアントの要求によって様々な変数がもたらされる可能性があります.

けいかく

一般的に、契約によって開発を行う場合は、お客様と会った後、ニーズを整理し、どのような機能が存在するべきか、どのようにユーザーに展示するかを定義する必要があります.画面、機能、プロセス、データベースなどが設計されます.
サイトマップの作成->スクリーン設計(シーケンスイメージボード)->スクリーン設計プロセス別->データベース設計

デザイン

画面のデザインが整い、ページ範囲が確定するとfront-endと呼ばれるすべてのユーザーが見るページが作成されます.
ウェブサイト戦略に基づいて設計理念を確立し、多種のメディアと視覚要素を運用して設計案を作成し、顧客の概念検証過程を通じて完成する.企画者とのコミュニケーションを通じて、お客様とユーザーの立場を考慮して、UX/UI戦略を制定し、概念を設定します.これによりシナリオを作成し,確定して実際の設計を行う.PCWeb、Mobile Webなどの範囲で、適応性、反応性、混合型の使用性に応じて作成します.

公開された

完成したUX/UI設計をHTMLページに符号化するプロセス(設計された画像を実際のWebプログラムに利用可能に符号化する)は、実際にはWebに適した規格を制定する職業であるため、HTML、CSS、Java、Web規格、Webアクセス性、さらにはWeb設計についてより広く理解する必要がある.

かいはつ

開発段階はWebを実現するプロフェッショナルプログラム開発者が行い,PHP,ASP,JSP,JQuery,JavaScriptなど多様な言語で作成する.機能実施等

📒 けいかくフェーズ

私たちのチームは「九老港バルドフキンド教育院」に招待され、機関の宣伝ページを作った.
2週間の開発時間とバックエンド実装の限界から,全体符号化ではなくWebビルダーを用いることにした.そこで,まずウェブサイト作成用のウェブコンストラクタを選定した.習い始めたばかりのHTML、CSS、JSはあまり使えないのが残念ですが、クライアントに専門家がいないので、事後管理のためにWebビルダーを使うのがベストです.
いただいた企画書には簡単なページレイアウトがあるので、まずはサイトマップとストーリーボードを作りました.



その後,機能要求定義書を作成し,クライアントに配布した.

📗 設計、パブリケーション、および開発フェーズ

Webビルダーを使用しているため、上記のすべての手順を統合しています.
デザインを担当する専門家がいないため、ロゴは簡単にテキストに挿入され、「幼稚園」と「虹」のテーマをベースに、清新で活発な雰囲気を方向としています.また、全体的な作業が完了した後、お客様へのフィードバックを繰り返して修正します.
フォントアプリケーション全体がHTMLとCSSで動作します.@font-face指示語で使用されるウェブページフォントを呼び出し、開発者ツールを使用して各要素のクラス名を検索し、属性値を与えます.

<style>
 
 /* 웹폰트 호출 */
 @font-face {
   font-family: 'Yuni_ddingddang';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Yuni_ddingddang.woff') format('woff');
	font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Bareun_hipi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Bareun_hipi.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Mingyung';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Mingyung.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'SlowSlow';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SlowSlow.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Amsterdam';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Amsterdam.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'White_angel';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/White_angel.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }

 /* 폰트 적용 */
 /* 로고 */
 .doz_sys #logo_w20210914f4117f905bcd5.logo .logo_title a {
	font-family: 나눔 손글씨 백의의 천사, White_angel;
	font-size: 77px;
 }
 
 .inline-col-group {
   overflow: visible;
   text-overflow: unset;
	 white-space: nowrap;
 }
 
 /*모바일 로고*/
 .doz_sys #logo_w202109143cf3f9f8faa58.logo .logo_title a {
   font-family: 나눔 손글씨 백의의 천사, White_angel;
   font-size: 37px;
	
	display: flex;
	flex-wrap: nowrap;
 }
 
 /* 상단메뉴 및 서브메뉴*/
 #w20210914f39aca5df7dc5 .viewport-nav {
	font-family: 나눔 손글씨 백의의 천사, White_angel;
 }
 
 #w20210914f39aca5df7dc5 .viewport-nav > li.dropdown > .notranslate a, #w20210914f39aca5df7dc5 .viewport-nav > li.dropdown > a {
   font-size: 26px;
   font-weight: bold;
 }

 #w20210914f39aca5df7dc5 .dropdown-menu {
   font-size: 22px;
	font-weight: bold;
 }

 /* 모바일 상단 메뉴 및 서브메뉴 */
 .mobile_carousel_nav .nav-item > a {
   font-size: 22px;
	font-family: 나눔 손글씨 백의의 천사, White_angel;
	font-weight : bold;
 }
  
 .mobile_carousel_nav .mobile_nav_depth {
	text-align : center;
 }
 
 /* 킨더소개 왼쪽 메뉴바 */
 #w20210914f55ab45c8a159 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w20210914a8dedae817be5 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w20210914bcd79fe66f9c9 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w20210914aa5cfd410d744 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w2021091493fe48dd07f7a .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 /* 교육과정 왼쪽 메뉴바 */
 #w20210924c835367293320 .nav li a {
   font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
}
 
 #w20210915521aedf839750 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w20210915e63148a6ee74c .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w202109150d6fca91b5328 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 /* 킨더소식 왼쪽 메뉴바 */
 #w2021091583a5354cb1e97 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w2021091535095b3c9f776 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w2021091566d274b94d5a7 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 /* 입학 왼쪽 메뉴바 */
 #w2021091672d937a4958b8 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }
 
 #w2021091618c3f69fd7055 .nav li a {
	font-family : 나눔 손글씨 암스테르담, Amsterdam;
	font-weight : bold;
	font-size : 29px;
 }


/* 배너 폰트 */  
h4.banner {
 font-family: Bareun_hipi !important;
   font-size: 50px;
   line-height: 1.2;
}

p.banner-txt {
 font-family: Bareun_hipi !important;
 font-size: 37px;
}

span.author {
 font-size: 29px
}

</style>

PCバージョンを使用して作成され、自動的に作成されるモバイルバージョンの一部のレイアウトに歪みが発生したため、モバイルバージョンの歪み要因を取り除き、モバイルバージョンのみを使用して再挿入します.

📘 デバッグ手順

1.「教育活動」>「リズム活動」ページにoverlayとして挿入されたアイコンのサイズを縮小

マウスのサスペンションアニメーションを使用して、Webビルダーに組み込まれている基本コンポーネントにアイコンを挿入しますが、アイコンのサイズは画像全体を上書きするのに十分な大きさに縮小されていません.background-sizw: 100px !important;を挿入して固定します.同じレベルの異なるbackground-sizeの影響を受けたためかもしれません.

<style>

/* 교육활동 hover 이미지 설정 */
.hover_img{
  position: relative;
  margin: -270px auto auto; 
  width: 270px; 
  height: 270px; 
  background-image: url(&quot;https://cdn.imweb.me/thumbnail/20210927/e55db235cbfac.png&quot;);   
  background-size: 100px !important; 
  background-repeat: no-repeat;
  background-position: 50% 50%; 
  top: 0px;   
  left: 0px;
}

</style>

2.ブラウザをpcバージョンから移動バージョンに縮小すると、挿入したロゴがテキストにねじれます。

最初の変更min-width、display: flex;、flex-wrap: nowrap;を適用するが、適用されない

二次修正flex-wrap: nowrapが機能しないと推定されるのは、display: table-cell;であり、最下位のクラスを見つけ、以下の値を挿入するためである.

.inline-col-group {
overflow: visible; text-overflow: unset; white-space: nowrap;

=>デバッグ完了

📚 Review

プロジェクトのすべてのソース:💾
初めて試みたWeb開発はWebビルダーとして行われ,最初からパニックに陥り,3カ月間学習した符号化要素が自由に使えないことに不満を抱いた.しかし、最終的にはWeb開発にとって、私の実力を示すのではなく、クライアントがこのサイトをよく使用できるようにすることが最終的な目標です.今回のプロジェクトを通じて、私はバックエンドを学ぶ限界がなく、開発期間中にお客様のニーズを満たすために仕事を完成しなければならないことを認識しました.
また,Webビルダーを使用する過程で,マウスを用いてドラッグアンドドロップ操作を行っただけでなく,開発者ツールを用いてこれらの機能を実現する方法についても深く理解した.実際,Webビルダーは使用していないが,Github Branchを学び,開発者連携の方法を習得した.その結果、このプロジェクトを担当するチームの中で、私たちのチームのウェブサイトが選定され、フロントエンドの開発者として、一つの段階に成長したことを喜んでいます.