웹 개발 및 디자인 101

web_development_101웹 개발 및 디자인의 기본 사항을 알고 싶습니까? 대박…


하지만 이런 사고 방식에 문제가 있거나 실제로는 여러 가지가 있습니다.

  • 웹 사이트의 목적은 무엇입니까? 모두가 정말로 하나를 필요로 하는가?
  • 그렇다면 양질의 웹 사이트를 어떻게 구축합니까? 다른 말로하면, 당신은 어떻게 당신이 그 양질의 웹 사이트를 직접 만들 수있게하는 기본 웹 개발과 디자인을 배우는가?
  • 더 중요한 것은 첫 번째 시도에서 양질의 웹 사이트를 구축 할 수 있습니까?? 또는 끔찍한 결과를 기대하기 전에 수년간의 경험이 필요하십니까??

이 모든 것에 대답합시다 웹 개발 및 디자인에 대한 초보자 안내서.

[스포일러 경고. 그렇습니다. 첫 번째 시도에서 양질의 웹 사이트를 구축 할 수 있습니다.]

이 안내서에서 다루는 내용?

먼저, 먼저 읽어 주셔서 감사합니다. 웹 개발을 시도하기로 결정하셨습니다. 그것이 어떻게 진행되는지는 다음과 같습니다.

이 장은 왼쪽에 주요 내용이 있고 오른쪽에 실행 가능한 항목이있는 매우 간단한 방식으로 제공됩니다. 이렇게 :

가이드 소개 : 1 장

이제 진행하는 방법 :

  • 첫 번째 읽을 때: 전체를 위에서 아래로 읽는 것이 좋습니다. 이렇게하면 주제를 10,000 피트까지 잘 볼 수 있으며 가장 중요한 부분을 이해하는 데 도움이됩니다. 또한 개별 작업을 처리하는 방법에 대한 기본 도구와 방법을 제공합니다.
  • 두 번째 읽기 및 추가 정보: TOC를 사용하여 가장 관심있는 부분으로 이동하십시오. 또한 모든 챕터 옆에있는 공유 버튼을 자유롭게 사용하고 자신이나 관심있는 친구 / 팔로어에게 링크를 보내십시오..

준비된? 1 장으로 갑시다.

이 안내서의 대상?

기본 웹 개발 및 디자인을 배우려면이 안내서가 적합합니다. 동기 부여가 무엇이든.

또한 시작하기 위해 사전 기술 지식이 필요하지 않습니다 (기본 “웹 기술”제외). 이 안내서의 요점은 웹 사이트 구축 및 웹 개발 학습에 관심이있는 모든 사람들을위한 일종의 “101”코스입니다..

관심을 가질만한 몇 가지 일반적인 이유는 다음과 같습니다.

  • 1. 귀하의 비즈니스를위한 웹 사이트가 필요합니다 (그리고 직접 만들 수 있는지 확인하고 싶습니다).
  • 2. 열정이나 일시적인 관심에서 웹 개발을 배우고 싶습니다 (그것에 대해 나쁜 것은 없습니다).
  • 삼. 학교 웹 사이트가 필요합니다.
  • 4. 친구 나 가족을 도와 웹 사이트를 온라인에 연결하고 있습니다..

우리를 인도 할 주요 아이디어

이것은 중요합니다! 이 글을 읽고있는 고급 웹 개발자라면 우리에게 화 내지 말고이 웹 개발 및 디자인 전체에 걸쳐 우리를 안내 할 주요 아이디어는 다음과 같습니다.

“최소 저항 접근법”

가장 저항이 적은 세 가지 원칙은 다음과 같습니다.

  • 우리는 분자 수준에서 물건을 분해하지 않음. 즉 프로그래밍 언어의 작동 방식이나 웹 서버의 작동 방식에 대해서는 다루지 않습니다..
  • 우리는 바퀴를 재발 명하지 않음. 즉 누군가 특정 문제를 이미 해결하고 솔루션을 사용할 수있게했다면이를 사용할 것입니다.
  • 우리는 간단한 솔루션을 멋지게 만들기, 복잡하고 겉으로는 더 기능적인 솔루션 버그가 있고 이해할 수없는.

1 장 : 계획

아이디어, 웹 사이트 유형, 도메인 이름 및 호스팅.

웹 사이트를 설정하기 전에 계획이 필요합니다

80 년대 히트작 인“The A-Team”이 우리에게 가르쳐 준 좋은 계획은 성공의 열쇠.

한동안 웹 사이트를 보유한 적이 있다면 다른 사람들이 읽고 탐색 할 수있는 유일한 아이디어에 대한 기대에 틀림 없습니다..

당신은 당신의 웹 사이트가 멋지 길 원합니다. 당신은 아마 그것이 어떤 모습 일지 알고있을 것입니다. 아니면 완벽한 로고가 준비되어있을 수도 있습니다..

그러나…

시작해야 할 부분이 아닙니다. 미리 설정된 기대치로 시작한다면, 이것은 길을 따라 많은 혼란과 마지막에 하위 파 결과로 이어질 것입니다.

대신, 다음을 생각하십시오.

  1. 보유하고있는 기술 목표에서 자신을 분리하십시오. 예를 들어 웹 사이트 기술이나 특정 웹 사이트 소프트웨어를 배우는 목표.
  2. 한 가지 주요 질문을 해보십시오. “사이트가 필요한 것은 무엇입니까?”

이것은 당신에 관한 것이 아니라 사이트의 목표에 관한 것입니다.

웹 사이트를 설정하기 전에 스스로 질문해야하는 질문

  1. 이 사이트의 목적?
  2. 이 사이트를 통해 제공되는 주요 “사물”은 무엇입니까? (예 : 비즈니스, 제품, 블로그 게시물 등)
  3. 웹 사이트에 특별한 목적이 있습니까? (예 : 전자 상거래 상점, 사진가의 포트폴리오 등)
  4. 대상 고객은 누구입니까?
  5. 사이트 주제에 관심이있는 이유?
  6. 사이트가 개별 청중에게 어떤 고통을 해결합니까??

마지막 3 가지 질문에 대해 잠시 동안 잠재 고객과 대화 해 보겠습니다.

웹 사이트 구축에는 2 가지 주요 규칙이 있습니다. 여기 규칙 # 1:

 독자 / 방문자가 먼저 온다. 당신의 웹 사이트가 가장 좋아하는 사람은.

어떤 식 으로든 귀하의 웹 사이트는 귀하의 웹 사이트가 아닙니다. 그것은 그들의 것이다.

(규칙 # 2 잠시 후에 논의하겠습니다.)

이 간단한 가이드 라인을 잊어 버리면 다른 사람에게 혼란을주는 웹 사이트를 찾을 때까지 완전히 잘못된 길로 인도 할 수 있습니다..

“아! 사람들은이 사이트의 내용을 이해하지 못합니다. 그들은 어떻게 그렇게 무지한가?” – 당신은 생각하게됩니다. 그러나 밝혀 졌 듯이, 무지한 사람은 당신이었습니다..

이를 피할 수있는 유일한 방법은 바로 독자를 염두에두고 웹 사이트를 구축하는 것입니다..

그래서… 그 종이를 가지고 위의 모든 질문에 답하십시오.

완료되면 웹 사이트에서 작업하는 동안 수행 할 궁극적 인 가이드 라인을 갖게됩니다.

그 대답은 당신이 따라갈 때 매우 강력한 도구가 될 것입니다. 당신은 당신의 웹 사이트에 관한 결정에 직면 할 때마다 그들에게 다시 돌아올 수 있습니다.

당신은 * this * 또는 * that *를해야합니까? 답안지로 가서 알아보십시오. 넓거나 좁은 사이드 바를 사용해야합니까? 답변으로 이동하여 타겟 리더와 공진 할 가능성이 높은 것을 찾으십시오. 그리고 등.

도메인 이름 및 웹 호스팅

웹 사이트 소유자가 되려면 도메인 이름과 웹 호스트가 필요합니다.

글쎄, 기술적으로 말하자면, 테스트 웹 사이트를 모두 자신의 컴퓨터에 구축 한 다음 로컬 웹 서버 (컴퓨터에 소프트웨어로 설치)에서 실행할 수는 있지만 99 %의 사용 가능한 솔루션은 아닙니다. 사례를 건너 뛰겠습니다..

호스트와 도메인은 …

여기서 나쁜 소식은 둘 다 돈이 든다는 것입니다.

좋은 소식은 … 대단한 계획에서 그렇게 많은 돈이 아닙니다. 또한 학습하면서 단일 도메인 이름과 단일 웹 호스트에서 여러 개의 작은 웹 사이트를 시작할 수도 있습니다..

하지만 처음부터 시작합시다.

웹 호스트 :

  • 간단히 말해서 웹 호스트는 웹 사이트가있는 곳이며 방문자가 웹 사이트를 찾을 수있는 곳입니다. 어떤면에서 웹 사이트의 웹 호스트는 인간의 아파트와 같습니다. 기본적으로 웹 호스트는 돈을 대가로 서버를 임대하는 회사입니다 (… 귀하의 웹 사이트를위한 작은 아파트).
  • 시작하려면 표준 공유 호스팅 계획이 필요합니다. 월 $ 3 정도의 저렴한 비용으로 구입할 수 있습니다. 인기있는 웹 호스트를 비교 한 내용은 다음과 같습니다. 그것을 확인하고 당신에게 딱 맞는 회사를 결정하십시오. 그러나 SiteGround, A2 Hosting 및 Dreamhost에 대한 권장 사항이 있습니다..

도메인 :

  • 웹 호스트가 아파트 인 경우 도메인은 해당 아파트의 주소입니다. 예를 들어,이 웹 사이트의 도메인은 hostsfacts.com입니다.
  • 시작하는 방법은 원하는 도메인 이름을 선택한 다음 등록 기관에서 구입하는 것입니다. 다음은 도메인 이름을 구매하는 방법에 대한 포괄적 인 가이드와 도메인 이름 생성기 목록입니다..

 

도메인 이름 선택을위한 제안 및 팁

자, 도메인 등록 기관에 가서 실제로 도메인을 구입하는 것이 한 가지입니다. 그러나 올바른 도메인 이름을 어떻게 선택합니까??

몇 개의 학교가 있습니다 :

  • 브랜드 도메인 이름. 존재하지 않는 단어로 구성된 도메인입니다. Google.com 또는 Yahoo.com과 같은 것을 생각해보십시오. 그 회사들이 등장하기 전에, 그 말은 아무 의미가 없었습니다. 브랜드 도메인 이름의 장점은 브랜드 이름이 우수하고 기억하기 쉬우 며 사이트를 다른 사이트와 쉽게 구별 할 수 있다는 것입니다..
  • 키워드 기반 이름. 그것들은 사이트의 목적을 설명하는 순서로 놓인 기존 단어들로 구성됩니다. Pizza.com 또는 StartBloggingOnline.com과 같은 것을 생각하십시오. 이와 같은 도메인 이름을 사용하면 방문자가 방금 방문하려는 웹 사이트의 종류를 정확하게 예측할 수 있습니다. 단점은 이러한 도메인이 일반적으로 브랜드 성이 떨어진다는 것입니다.
  • 결합 된 이름. 이들은 브랜드 도메인과 키워드 기반 도메인으로 구성됩니다. Facebook.com 또는 Copyblogger.com을 생각하십시오. 이러한 이름은 방문자에게 웹 사이트의 “일부”부분을 제안하지만 여전히 높은 브랜드.

선택한 도메인 유형에 관계없이 몇 가지 일반적인 지침 :

  • 기억하기 쉬운 도메인 만들기.
  • 짧고 간단하게. 도메인이 길수록 혼동됩니다.
  • .com 받기 (가능한 경우). .com은 사용 가능한 기본 “최상위 도메인”입니다. 다른 것에 안주하지 마십시오.
  • 하이픈을 피하십시오. “cake-recipes.com”대신“cakerecipes.com”과 같은 단일 형태로 이름을 입력하십시오.

이 장 이후에 준비해야 할 것들 :

  • 도메인 이름.
  • 웹 호스트.
  • 답안지 – 사이트의 목표 및 잠재 고객에게 서비스를 제공하는 방법.

도움이 더 필요하세요? 자세한 내용은 다음과 같습니다.

  • 공유 호스팅이 필요한 이유 주요 호스트 유형 비교
  • 웹 호스트를 좋게 만드는 10 가지
  • 올바른 도메인 이름을 선택하기위한 12 가지 규칙
  • 포괄적 인 웹 사이트 계획 가이드

2 장 : 설계 및 와이어 프레이밍

웹 사이트 구조와 함께 종이와 펜을 가지고 긁어 라

이제 디자인 단계에 들어 갑시다.

먼저, 여기 우리가 겪을 직업 윤리는 다음과 같습니다.

  • 우리는 가능한 한 오랫동안 펜과 종이를 사용하고 있으며 컴퓨터로만 전환합니다. 컴퓨터에서 물건을 튜닝하기 시작하면 종이에서 디자인 작업에 소요되는 모든 시간이 1 시간 절약됩니다..
  • 우리는 반복 작업을하고 있습니다… 우리는»결과 확인»개선»결과 확인»끝날 때까지 반복.

1 장에서는 웹 사이트 구축의 규칙 # 1이라고하는 것을 언급했습니다. 이제 규칙 # 2의 시간입니다.

웹 사이트 구축 규칙 # 2 :

내용을 먼저 생각하십시오.

콘텐츠는 웹 사이트에서 중요합니다. 디자인이 아닙니다. 함유량.

사람들은 내용을 찾아옵니다. 그들은 디자인에 오지 않습니다. 디자인은 컨텐츠를 전달하는 수단 일뿐입니다.

웹 사이트의 모습으로 시작하지 마십시오. 컨텐츠로 시작하십시오. 함유량. 함유량. 함유량.

“콘텐츠”란 무엇을 의미합니까? 즉, 사람들이 귀하의 웹 사이트에서 얻고 싶어하는 것입니다. 블로그 게시물, 상점의 제품, 포럼을 작성하는 경우 포럼 스레드, 뉴스 기사, 비즈니스 제안 등.

“정말? 외모는 중요하지 않습니까?” – 물어.

우리가 이것을 꺾지 말고 다음 페이지를 확인하십시오.

간단한 웹 사이트

이 간단한 웹 페이지는 디자인이 무엇이며 온라인에서 어떤 용도로 사용되는지에 대한 최고의 설명입니다..

콘텐츠를 먼저 기억하십시오!

웹 사이트 컨텐츠 및 구조

내용이 가장 중요하기 때문에 미리 준비해야합니다. 또는 최소한 콘텐츠의 양과 형식을 잘 알고 있어야합니다..

노트. 우리는이 부분이 힘들 수 있다는 것을 알고 있습니다. 웹 사이트 디자인에는 콘텐츠로 시작하는 것이 부자연 스럽지만 실제로는 최상의 결과를 얻는 가장 좋은 방법입니다. 독자와 공유하고 싶은 콘텐츠와 프레젠테이션 방법에 대해 생각해보십시오..

다음 단계는 필요한 개별 유형의 페이지 (예 : 홈페이지, 제품 페이지, 카테고리 페이지, 정보 페이지, 연락처 페이지, 기본 판매 페이지, 일부 뉴스 레터 구독 방문 페이지, 기본 블로그 목록, 개별 게시물, 상점 및 기타 필요한 것).

웹 사이트에서 콘텐츠를 구성하는 가장 효과적인 방법은 무엇입니까??

이 모든 작업을 종이에하십시오. 현장에서 차트 그리기 소프트웨어를 배우는 것보다 쉽고 빠를 것입니다..

예:

내용 구조

와이어 프레임 스크래치

웹 디자인의 와이어 프레임은 단순히 웹 페이지의 프레임 워크를 나타내는 시각적 가이드 인 페이지 회로도 또는 청사진입니다 (Wikipedia가 알려줍니다).

와이어 프레임은 대단합니다! 우리는 온라인상에서 보이는 대부분의 일에 사용합니다. 예를 들어 다음은이 가이드를위한 와이어 프레임입니다.

와이어 프레임을 스크래치

보시다시피, 그것은 종이에 있습니다. 이런 종류의 작업을위한 여러 앱이 있지만 실제로는 사용하지 않는 것이 좋습니다. 프로 디자이너에게는 좋을지 모르지만 초보자 또는 중급자는 배우는 데 시간을 잃을뿐 아니라 결국 펜과 종이를 통해 달성 할 수있는 것보다 크게 개선되지는 않습니다..

와이어 프레임 방법?

초보자라면 두 가지 방법이 있습니다.

  • 강하다고 느끼면 흐름을 따라 가고 그냥 빼십시오 (항상 완벽한 솔루션은 아님).
  • 올바르게 와이어 프레임하는 방법에 대한 간단한 지식을 얻으십시오 (보통 더 좋습니다)..

후자를 위해 여기로 가십시오 – 훌륭한 가이드.

(이전 단계에서 나열한 모든 중요 페이지 유형의 와이어 프레임을 만들어야합니다.)

이 장 이후에 준비해야 할 것들 :

  • 사이트의 콘텐츠 대부분 또는 최소한 예상 콘텐츠 (예 : 사용자 생성 콘텐츠에 의존하는 경우 사전에 콘텐츠를 보유하기가 어렵습니다).
  • 웹 사이트의 콘텐츠 구조를 그래프로 준비.
  • 필요로하는 개별 페이지 유형의 와이어 프레임.

더 읽을 거리 :

  • 웹 사이트 컨텐츠를 계획하는 9 단계
  • 웹 디자인을 처음 사용하십니까? 여기서 시작.

3 장 : UX 및 UI

사용자 경험과 사용자 인터페이스의 중요성을 과소 평가하지 마십시오

“사용자 경험”및 “사용자 인터페이스”에서와 같이.

WebDesignerDepot은 두 가지에 대해 다소 시적인 정의를 제공합니다.

UI는 안장, 등자 및 통치.

UX는 말을 타고 소를 밧줄로 묶을 수있는 느낌입니다..

보다 실용적인 정의를 위해 :

  • UI는 사용자가 사이트를 볼 때 표시되는 것입니다.
  • UX는 그들이 어떻게 느끼는가.

쌍과 실행 정도는 기본적으로 최종 사용자 / 방문자에게 웹 사이트의 유용성을 정의합니다.

UX와 UI 디자인은 그 자체로 큰 주제이며 최종 결과에 중요한 역할을하는 작은 요소가 많이 있습니다.

요컨대, 여행을 막 시작했다면 배울 점이 많습니다.

여기서 전체 UX 및 UI 디자인 과정을 진행하는 대신 몇 가지 중요한 요소를 지적한 다음 추가 자료를 위해 다른 곳으로 보내 드리겠습니다..

사용자 목표

UX는 사용자 목표에 관한 것입니다 … 목표만큼 많지 않습니다 … 사용자 목표.

좋아,이게 무슨 뜻이야? 우선, 이전 장에서 작업했던 웹 사이트의 목적으로 돌아가십시오. 웹 사이트를 만드는 이유와 웹 사이트가 사용자 / 방문자를 돕는 방법.

방문자의 목표로 어떻게 해석됩니까? … 방문자가 귀하의 사이트를 방문 할 때 얻고 싶어하는 한 가지는 무엇입니까? 그것이 그들의 목표입니다.

그 목표를 달성하기가 얼마나 쉬운가?

다음 질문에 집중하십시오.

  • 방문자가 쉽게 목표를 달성 할 수 있습니까? – 간단한 방법으로 그들이 찾은 정확한 정보를 얻을 수 있습니까??

이에 대한 답을 얻으려면 와이어 프레임, 컨텐츠 구조로 돌아가서 다시 확인해야합니다..

생각한 내용 구조와 페이지가 사용자의 관점에서 합리적이어야합니다. 중요한 페이지를 자유롭게 그리고 혼란스럽지 않게 탐색 할 수 있도록하십시오..

기본적으로 여기서는 ‘웹 사이트에서 방문자에게 가치를 제공합니다’.

이 모든 것을 스스로 알아 내기가 어렵습니다.?

이 장의 “추가 정보”섹션에 나열된 리소스를 확인하는 것이 좋습니다. 그러나 “핵심”을 시도 할 수도 있습니다..

즉, 구축하려는 웹 사이트와 유사한 웹 사이트를 방문 할 때 어떤 불만이 있습니까? 어려울 정도로 어려운 정보 나 사이트를 혼란스럽게 만드는 인터페이스 요소가있을 수 있습니다..

메모를하고 결론을 내리고 웹 사이트에 실수를하지 마십시오..

감정을 도구로 사용

사이트의 UI 및 UX에서 작업 할 때 기본적으로 목표는 방문자에게 특정 감정을 불러오는 것입니다..

당신은 그들이 특정한 방식으로 느끼기를 원하기 때문에 그들이 특정한 방식으로 행동하도록 설득 할 것입니다. 따라서 귀하의 웹 사이트를 진정으로 유용하게 만드십시오.

작업의 정서적 부분을 다루기 위해 가장 좋은 도구 중 하나는 색상입니다..

문화마다 색의 의미가 다릅니다. 이러한 차이점을 이해하면 작업이 훨씬 쉬워집니다. 여기 좋은 치트 시트가 있습니다.

어떤 색상을 사용하고 싶은지 야구장에 들어간 후 색상을 사용할 때의 몇 가지 일반적인 지침은 다음과 같습니다.

  • 잘 어울리는 몇 가지 색으로 구성된 하나의 기본 색 구성표를 선택하십시오. 훌륭한 색 구성표 생성기입니다..
  • 액센트 색상이 될 하나의 색상을 선택하십시오. 액션 버튼, 구매 버튼 등에 사용될 색상입니다. 기본적으로 사용자의주의가 필요한 모든 것.

타이포그래피

대부분의 경우, 타이포그래피는 웹 사이트 구축 게임에서이기거나 잃는 곳입니다..

타이포그래피를 완전히 잊어 버리고 모든 것을 위해 Arial을 사용하는 것이 너무 쉽습니다..

권장하지 않음.

요즘 사용자 지정 글꼴로 작업하는 것은 쉬운 일이 아니며 사이트에서 해당 사용자 지정 글꼴을 사용하기 위해 기술적 인 작업을 수행 할 필요조차 없습니다..

요즘 크고 큰 활판 인쇄 법은 패션이 매우 뛰어나며 디자이너의 작업, 특히 초보자 디자이너의 작업을 훨씬 쉽게 만듭니다..

이 사이트를 확인하십시오 (예 :

보노보

눈치 채 셨나요? 네, 폰트는 엄청 크고 멋져요!

이 작업을 수행하는 방법은 다음과 같습니다.

  • 일반적으로 모든 웹 사이트 디자인에는 두 가지 유형의 텍스트가 필요합니다. 제목 과 문단. 대부분의 경우 각각에 하나의 글꼴 만.
  • 웹 사이트에서 사용할 수있는 Google의 무료 글꼴 라이브러리 인 ‘Google Fonts’로 이동하여 실제로 즐길 수있는 헤드 라인 글꼴을 찾습니다..
  • 그런 다음 해당 글꼴 이름을 가져 와서 “글꼴 쌍”에서 찾으십시오. 사전에 만든 글꼴 쌍으로 구성된 라이브러리입니다..
  • 멋져 보이는 페어링 선택.
  • 두 글꼴의 이름을 적어 두었다가 나중에 필요합니다.

이 방법을 사용하면 프로세스 속도가 빨라지고 여전히 좋은 결과를 얻을 수 있습니다..

예를 들어 Google Fonts에서 Bree Serif라는 글꼴을 찾았습니다.

브리 시리 프

그런 다음 글꼴 쌍으로 가져 와서 사이트는 Bree Serif가 Open Sans와 잘 어울린다고 제안했습니다. 완전한:

브리-세리프-오픈-산

최종 구조

마지막으로, 마지막 단계!

이 장의 핵심은 사이트에 사용할 최종 레이아웃 / 구조에 착수하는 것입니다. 이 시점에서 디자인과 UI로하고 싶은 일에 대해 확신해야합니다..

이 장 이후에 준비해야 할 것들 :

  • 사용자 목표가 명확하게 나열 됨.
  • 목표가 혼동되지 않도록 와이어 프레임을 다시 확인했습니다..
  • 선택된 색 구성표.
  • 타이포그래피는 알아 냈습니다.
  • 웹 사이트의 전체 사이트 레이아웃 / 구조 / 조직.

더 읽을 거리 : 

  • UX 매거진
  • UX 부스
  • 웹 디자인에서 색상 뒤의 심리학과 감정
  • 사용자 경험 디자인이란 무엇입니까? 개요, 도구 및 리소스
  • 웹 사이트를위한 스마트 한 비즈니스 목표 설정
  • 효과적인 타이포그래피를 만드는 8 가지 규칙

4 장 : 워드 프레스, HTML 또는 템플릿?

어느 경로로 갈지 결정 – 컨텐츠 관리 시스템 또는 처음부터 코딩

여기서 실제적이고 더럽고 실제적인 작업이 시작됩니다.!

이것은 아마도 프로세스에서 가장 무서운 부분 일 것입니다..

한 번은 펜과 종이를 제쳐두고 일부 소프트웨어로 작업을 시작해야 할 때입니다.

그리고 바로 문 밖으로, 많은 질문이 있습니다 …

  • HTML을 배워야합니까?
  • CSS는 어떻습니까?
  • 기성품 HTML 웹 사이트 템플릿이 나를 위해 속일 것입니다?
  • PHP와 같은 프로그래밍 언어를 배워야합니까?
  • 요즘 WordPress가 사이트를 구축하는 방법이라고 들었습니다..
  • Squarespace Super Bowl 광고를 보았습니다. 그게 무슨 일이야?
  • Joomla라는 것이 무엇입니까? Or Drupal?
  • 그리고 계속해서 그리고 계속해서.

그 모든 것에 대한 대답은.

마찬가지로, 예, 이러한 작업 중 하나 또는 모두를 수행 할 수 있으며 어떤 경로를 선택해야하는지 결정하는 것은 귀하의 책임입니다..

우리가 말하려는 것은 여기에 최고의 접근 방식이 없다는 것입니다. 그것은 모두 웹 개발에 참여하고자하는 정도, 배우고 싶은 웹 사이트 구축 기초의 양, 양질의 사이트가 얼마나 빨리 필요한지, 그리고 나중에 원하는대로 사용자 정의 할 수있는 정도에 달려 있습니다..

다음은이 장에서 진행하는 방법입니다. 먼저, 자신을 가장 잘 나타내는 인물을 선택하십시오.

  • ㅏ) 웹 개발에 대한 내용, 모든 기본 사항, 웹 사이트의 모든 내부 작업 및 웹 사이트 작동을 만드는 모든 메커니즘을 배우고 싶습니다..
  • 비) 무거운 작업을 대부분 처리하는 신뢰할 수있는 웹 사이트 빌더를 사용하는 방법을 배우고 싶습니다.
  • 씨) 어떻게해야할지 모르겠습니다. 나는 내가 만들 수 있고 제대로 작동하는 웹 사이트를 원합니다..

답변 됨 a)? 5 장으로 가십시오.

답변 b)? 6 장으로 가십시오.

답변 c)? 이 기사를 확인한 다음 다시 방문하십시오 (완벽한 경로를 선택하는 데 도움이 됨).

  • 8 가지 최고의 블로깅 및 웹 사이트 구축 플랫폼 검토… 각 플랫폼은 장단점과 함께 설명되며, 리소스는 특정 요구에 가장 적합한 선택 (Wix 또는 SB)도 제안합니다.

읽어 보셨습니까? 큰! 위의 인물 중 어느 것이 당신을 가장 잘 묘사하는지 – a) 또는 b)?

그 과정에서 유용한 도구 :

  • 그래픽 : Paint.NET, Gimp, Pixlr.
  • 코드 작성 : 메모장 ++, TextWrangler, SublimeText.
  • 작업 관리 : Trello.
  • 디자인 : 색 구성표, Google Fonts, 여기의 도구.
  • 사진 : Unsplash, AllTheFreeStock

5 장 : HTML, CSS 소개 & 자바 스크립트

웹 사이트가 내장 된 현실

이 장에서는 웹 개발의 기본 사항을 설명하고 가장 중요한 용어를 설명한 다음 지식과 기술을 향상시킬 수있는 특정 리소스로 안내합니다..

HTML

HTML은 웹 사이트의 언어입니다. 모든 웹 페이지는 특정 시점에 작성되거나 HTML로 변환됩니다.

예를 들어이 안내서의 HTML 구조를 보려면 키보드에서 “Ctrl + U”를 누르십시오..

HTML은 웹 페이지에 표시되는 모든 블록을 정의합니다. 하루가 끝나면 웹 페이지에 아무것도 표시하려면 HTML로 변환해야합니다..

HTML을 효과적으로 배우려면 웹에서 제공되는 (무료 또는 유료) 과정 중 하나에 등록하는 것이 좋습니다. Codeacademy 또는 Treehouse에서 가장 좋은 것을 찾을 수 있습니다..

예를 들어 다음은 Codeacademy의 HTML 및 CSS 관련 섹션입니다..

CodeCademy 홈페이지

이것이 HTML에 대한 포괄적 인 접근 방식입니다.

CSS

CSS – 지루한 기술적 세부 사항을 건너 뛰기 – 웹 페이지에 보이는 모든 것을 스타일링하는 책임.

CSS는 HTML 태그를 가져 와서 구조화하고 스타일을 추가합니다. 굵은 글씨, 색상 조정, 그림자, 레이아웃, 심지어 애니메이션까지는 주로 CSS로 수행됩니다..

이것이 정확히 어떻게 작동하는지 더 잘 이해하려면 Codeacademy에서이 빠른 과정으로 넘어가십시오..

보다 심층적 인 학습을 원하면 Codeacademy 또는 Treehouse에서 CSS 섹션을 확인하십시오..

자바 스크립트, jQuery, 부트 스트랩 등.

자바 스크립트는 귀하의 웹 사이트에서 동적 인 액션을 소개 할 수있는 프로그래밍 언어입니다. 예를 들어 웹 페이지를 다시로드하지 않고도 웹 양식의 유효성을 검사하거나보다 능률적 인 방식으로 사용자와 상호 작용하는 등의 작업을 수행 할 수 있습니다. w3schools의 멋진 튜토리얼입니다..

이를 염두에두고 jQuery는 자바 스크립트 라이브러리로 코딩없이 고급 항목을 만들 수 있습니다. 웹 개발자에게 매우 편리합니다. 더 알아보기.

마지막으로, 부트 스트랩은 매우 흥미로운 발명품입니다. 원래 트위터에서 소개 한이 프로그램은 기본적으로 프런트 엔드 환경으로, 이미 구축 된 일반적인 사이트 요소를 대부분 제공하여 웹 사이트 구축 프로세스를 가속화합니다. 복잡해 보이지 않습니까?

하지만 그렇지 않습니다. Codeacademy 에서이 초보자 코스를 확인하십시오 (그런데, 이것이 우리가 처음으로 부트 스트랩을 배운 방법입니다).

이 장 이후에 준비해야 할 것들 :

  • 기본적으로 HTML / CSS 웹 사이트의 첫 번째 초안은 완전히 구축되었습니다. 거기에서 최종 결과 반복 및 개선을 시작할 수 있습니다.

6 장 : 웹 사이트 구축 플랫폼

첫 번째 사이트를 설정 하시겠습니까? WordPress, Joomla 또는 Drupal과 같은 무료 웹 사이트 플랫폼을 사용해보십시오

Chapter 6 : 웹 사이트 구축 플랫폼

  • SquareSpace
  • 워드 프레스
  • 줌라 & 드루팔

당신이 막대기를 흔들 수있는 것보다 더 많은 웹 사이트 빌더가 있습니다. (당신이 물건을 흔드는 사람이라면 요.)

좋아, 농담은 제쳐두고.

손으로 직접 코딩하는 방법을 배우고 싶지 않다면 분명히 도움이 될 수있는 여러 가지 솔루션 일 것입니다..

노트. 1-4 장에서 논의한 다른 모든 내용이 여전히 여기에 적용됩니다. 일종의 현장 구축 솔루션을 사용하더라도 최종 제품을 사용자에게 친숙하고 모든 사람의 목표에 맞게 조정해야합니다. 이러한 사이트 구축 도구는 정확히… 도구입니다..

가장 이해하기 쉬운 것으로 시작 :

SquareSpace

슈퍼 볼 기간 동안 광고하는 유일한 웹 사이트 플랫폼.

요컨대, 누구나 사용할 수있는 매우 편리한 솔루션입니다. 사전 기술이 필요하지 않습니다.

그것은 당신이 고전적인 웹 사이트, 블로그, 심지어 전자 상거래 상점을 구축 할 수있게 해줍니다. 인터페이스와 그것을 사용하는 전체 과정은 이해하기가 쉽고 Squarespace 사람들은 많은 흥미로운 튜토리얼을 제공합니다. 여기에서 확인하십시오.

워드 프레스

솔직히, 우리는 WordPress를 좋아합니다.

대부분의 경우 웹 사이트를 구축하기에 완벽한 플랫폼입니다. 복잡성과 사용 편의성 사이의 완벽한 균형을 유지하며 기본적으로 끝없이 커스터마이징 가능.

워드 프레스 애니메이션

또한 현재 가장 인기있는 웹 사이트 플랫폼입니다. MattPress – Matt Mullenweg – WordPress 제작자가 공유 한 것처럼 WordPress는 이제 전체 인터넷의 25 %를 지원합니다. 모든 사람들이 틀릴 수 있습니까?

좋습니다. WordPress를 시작하려면 기본적으로 도메인과 호스팅 만 있으면됩니다. 워드 프레스 소프트웨어 자체는 완전 무료입니다.

시작하려면 다음 경로 중 하나를 자유롭게 따르십시오.

a)“빠른 시작 경로”

  • 오후에 WordPress를 설치하고 사이트를 실행하는 간단한 방법을 알아 보려면 여기로 이동하십시오..
  • 공식 디렉토리에서 무료 테마를 선택하십시오. 사이트 목표와 조화를 이루고 레이아웃 / 디자인이 원하는 구조와 멀지 않은지 확인하십시오 (약간 조정)..
    • 기존 테마를 사용자 정의하는 방법을 배우려면이 두 가지 리소스를 확인하십시오.
    • 또는 편리한 사용자 인터페이스를 통해 조정할 수있는 다목적 프리미엄 테마를 선택할 수 있습니다 (코딩 없음). X 테마는 그런 것의 좋은 예입니다.
  • 추가 기능을 사용하기 위해 가장 인기 있고 최고의 플러그인 중 일부를 설치.

b)“심도 깊은 길”

  • 온라인 과정을 통해 WordPress를 배우는 것으로 시작하십시오. Treehouse는 멋진 것을 제공합니다.
  • 위와 같이 테마와 플러그인을 선택하십시오. 또는 처음부터 자신의 테마를 구축.

결국 워드 프레스는 아마도 시장에서 가장 다양한 웹 사이트 플랫폼 일 것입니다. 이를 통해 블로그 나 간단한 비즈니스 사이트뿐만 아니라 거의 모든 유형의 웹 사이트를 구축 할 수 있습니다. 다음은 47 (!) WordPress를 사용하는 다른 방법의 목록입니다..

줌라와 드루팔

Joomla와 Drupal은 서로 약간 씩 다르지만 고급 웹 프로젝트를위한 뛰어난 컨텐츠 관리 시스템입니다..

디자인 측면에서 강력하지는 않지만 사용자 정의가 가능하고 계획에있는 모든 종류의 웹 사이트를 처리 할 수 ​​있습니다..

때로는 프로젝트의 복잡성에 따라 마스터 링하는 데 더 많은 시간이 걸리고 더 많은 노력이 필요할 수 있습니다..

좀 더 심층적 인 교육을 위해 Lynda.com에 Joomla 및 Drupal을위한 멋진 코스가 있습니다..

이 장 이후에 준비해야 할 것들 :

  • WordPress 또는 다른 플랫폼을 사용하기로 결정하더라도 웹 사이트의 첫 번째 초안은 완전히 구축되었습니다..
  • 초기 목표, 대상 고객 및 적절한 UX를 제공하는지 확인하십시오..

7 장 : 모바일 반응 형 디자인

60 % 이상의 사람들이 모바일과 태블릿을 사용하여 웹을 탐색합니다.

모바일 응답 성은 이제 웹 사이트 구축에서 매우 중요한 측면으로, 이전보다 훨씬 더 중요합니다..

전체 문제는 다음과 같습니다.

기본적으로 지금은 그 어느 때보 다 모바일 장치를 사용하여 웹에 액세스하는 사람들이 더 많습니다. 실제로 데스크톱 인터넷 사용자보다 모바일 인터넷 사용자가 더 많은 것으로 추정됩니다 (75.1 % 대 52.7 %)..

하지만 문제가 있습니다.

모든 웹 사이트 디자인이 모바일 기기에서 바로 볼 수 있도록 최적화되는 것은 아닙니다..

몇 가지 일반적인 문제는 다음과 같습니다.

  • 글꼴이 너무 작습니다,
  • 더 작은 화면으로 레이아웃 자체가 전혀 조정되지 않습니다.,
  • 모바일에서 사용할 수없는 사이트를 구축하는 데 사용되는 기술.

모바일 반응에 대한 아이디어가 시작됩니다..

반응 형 웹 사이트는 현재보고있는 환경에 반응합니다. 데스크톱 컴퓨터 인 경우 웹 사이트는 특정 방식으로 렌더링됩니다. 모바일 인 경우 다른 방식으로 렌더링됩니다..

더 나은 설명은 다음과 같습니다. 대응 응답 성이 뛰어난 웹 디자인?

따라서 지금해야 할 일은 웹 사이트가 휴대 기기에서 작동하는지 확인하고 확인하는 것입니다. 자신의 기기를 사용하여이를 확인하고 ‘Google 모바일 테스트’를 시도하거나 ‘응답 성 디자인 테스터’와 같은 도구를 사용해보십시오..

문제가 있으면 해결해야합니다.

일부 솔루션 :

  • 반응 형 웹 디자인 – 방법
  • 약 15 분 안에 웹 사이트를 반응 적으로 만드는 방법

8 장 : 모든 것을 하나로 모으기

당신은 기본을 알고, 이제 네 차례 야

잠깐, 우리는 거의 다 왔어!

이것은 우리의 긴 여행의 마지막 장입니다.

이 시점에서 첫 번째 웹 사이트를 구축해야합니다. WordPress, 수작업 HTML / CSS, 일부 웹 사이트 작성기 또는 작업에 대해 선택한 다른 도구를 사용하십시오..

한마디로 축하합니다! 하지만 여전히 가치있는 일이 몇 가지 있습니다.

  • 1 장과 2 장에서 논의한 내용을 다시 확인하십시오. 최종 사용자를위한 목표가 실제로 작동하고 웹 사이트가 혼동되지 않는지 확인하십시오.
  • W3C의 마크 업 검증 서비스를 통해 코드 구조 검증.
  • 사이트에 보안 문제가 없는지 확인하십시오. Sucuri의 스캐너를 사용하십시오..
  • 커뮤니티로부터 피드백을받습니다. 다른 사람들이 당신의 일에 대해 어떻게 생각하는지 확인하십시오. “사이트 포인트에있는 포럼”은 그 점에 도움이 될 수 있습니다.

이것이이 자료를 처음 읽은 경우, 몇 번 다시 찾아 와서 향후 교육을위한 참고 자료로 취급하시기 바랍니다..

처음에 말했듯이 TOC를 자유롭게 사용하고 장에서 장으로, 자원에서 자원으로 탐색하십시오..

마지막으로 웹 사이트 구축, 웹 개발 또는 디자인과 관련하여 가장 큰 과제는 무엇입니까? 의견이나 트위터를 통해 공유하십시오. 우린 모두 귀야!

읽어 주셔서 감사합니다.!

  • 합계 116
  • 페이스 북 116
  • 트위터 0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector