과거에는 일부 HTML, CSS 및 PHP 코딩을 수행했지만 이미 "완료"된 작업 만 수행했으며 웹 사이트를 처음부터 시작한 적이 없습니다. 그러나 최근에 도메인과 일부 호스팅을 저렴하게 구매했으며 HTML, CSS 및 Javascript 기술을 향상시켜 웹 개발자 / 웹 마스터로서 좀 더 시장에 내놓을 수 있기를 바라고 있습니다.
일반적으로 웹 사이트를 시작하기 위해 어떤 프로세스를 사용합니까? 종이에 레이아웃을 그린 다음 코드를 작성합니까? 아니면 코딩을 시작하고 원하는대로 출력을 조정합니까?
답변:
내 프로세스는 일반적으로 다음과 같습니다.
1. 특징 . 연필과 종이를 사용하여 사이트를 구성 할 고유 한 기능 / 페이지를 배치하십시오. 이것은 광범위한 뇌졸중 문제를 겪습니다. 엄마를위한 간단한 정보와 그래픽 사이트를 만들고 있습니까? 소규모 비즈니스를위한 전자 상거래 솔루션? 사진사 친구를위한 블로그 / 갤러리? 귀하의 답변에 따라야 할 빌드 경로가 많이 결정됩니다. 이 단계는 또한 고객 또는 보트를 운전하는 사람과의 상당한 토론을 포함 할 수 있습니다 (귀하가 아닌 경우).
2. 와이어 프레임 . 필요한 모든 기능을 배치 한 후 와이어 프레임을 구성하십시오. 종이나 불꽃 놀이와 같은 도구를 사용하여 매우 간단한 탐색 기능을 구축 할 수 있습니다. 워드 프레스와 같은 CMS를 사용하는 경우 정적 콘텐츠는 어떻게 처리됩니까? 파일 구조에 대해 생각하기에 좋은시기 일 수도 있습니다. 프로젝트에 사용자 정의 데이터베이스가 필요한 경우 이제 설계 및 구현 계획을 시작해야합니다. 현명한 계획은 많은 역 추적 및 재 작업을 저장하고, 오류가 발생하거나 프로젝트 크립이 발생하는 경우 중요한 단계입니다.
3. 기술 . 계획 단계가 상대적으로 해결되면 기술을 선택하십시오. 당신은 똑바로 HTML을하고 있습니까? 램프 환경에서 PHP cms? .net mvc 점포? 이러한 질문은 필요한 호스팅 환경과 운영 비용에 영향을 줄 수 있습니다. 상점 첫 화면을 수행하는 경우 보안이 주요 관심사입니다 (예 : SSL 및 PCI 준수). 훌륭한 테스트 환경 (로컬 호스트 또는 기타)이 설정되어 있는지 확인하십시오.
4. 디자인 / 레이아웃 . 피처리스트와 와이어 프레임이 결정되면 사이트 디자인에 대해 생각할 수 있습니다. 페이지를 채울 내용을 아는 것은 분명히 전제 조건입니다. 저는 포토샵에서 일하고 마크 업 구조와 유사하게 폴더를 많이 사용하고 싶습니다. 의도 한 마크 업 및 CSS 식별자를 사용하여 이름을 지정합니다. 실제로 자세하게 설명하기 전에 자유형 그리기를하는 것이 현명 할 수도 있습니다. 요소를 가져 와서 "프로세스"파일 (프로덕션 그래픽을 출력하는 데 사용하는 파일)에 넣을 "레이아웃"파일을 사용하는 경향이 있습니다.
5. 마크 업 / CSS . 꽤 깨끗한 디자인이 완성되면 (프로덕션 모드에 들어갈 때 약간 유연 해 지므로) 마크 업을 시작할 수 있습니다. 일반적으로 사이트의 모든 콘텐츠를 수용 할 수있는 표준 레이아웃을 원합니다. 따라서 깨끗하고 유연해야합니다. CSS 작성을 시작하기 전에 레이아웃 마크 업이 상당히 완료되어야하지만 서로에게 많은 정보를 제공한다는 것을 알았습니다. 또한이 단계에서 많은 SEO 최적화를 수행합니다 (이미지 또는 A 태그의 적절한 이름 지정, 메타 정보, 문서 유형 등) 철저히하십시오.
5.1 테마 관리 . CMS로 작업하고 있고 디자인이 사용자 지정 테마로 사용되는 경우 의도 한 응용 프로그램에서 정확히 수행하는 방법에 대한 자습서를 찾으십시오. 솔직히 까다로울 수 있습니다.) 테마 요소로 자르기 전에 항상 완전한 CSS로 정적 마크 업 레이아웃을 작성합니다.
6. 행동 . 마크 업과 CSS가 꽤 완벽 해 보이고 테마가 제자리에있을 때 비헤이비어 (롤오버 등) 개발을 시작할 수 있습니다. 절대적으로 필요한 기능 (아약스가 많은 기능)을 사용하지 않는 한 눈에 거슬리지 않는 자바 스크립트가 중요합니다. 갤러리 또는 데이터 기반 플래시 콘텐츠). 일반적인 규칙은-누군가가 자바 스크립트를 끈 상태로 사이트를 방문하면 무엇을 보게 되나요? 때로는 정적 요소를 제거하고 런타임에 대화식 버전으로 바꿉니다.
7. 내용 . 디자인이 컨텐츠에 의존하지 않는 한 (예를 들어 이미지는 때때로 컨텐츠 임) = 일반적으로 디자인과 동작이 잘 확립 될 때까지 자리 표시 자 텍스트 / 그래픽을 사용합니다. 작업을 두 번 이상 수행하지 마십시오. 제품 데이터를 작성하는 경우 신중한 오류 점검 및 테스트가 필요합니다.
그 시점에서 항상 재 작업, 수정 및 연마 기간이있는 것 같습니다. 그러나 본질적으로 그것을 살릴 시간입니다. 그럼 간식 먹어
흠. 나는 그것이 단지 "시작하는 방법"이상이라고 생각합니다. 어쨌든 도움이 될 수 있습니다. 행운을 빕니다!
워크 플로의 첫 번째 부분은 왜? 고객과 함께 일하는 경우 고객이 웹 사이트에서 달성하고자하는 것에 대한 명확한 비전을 가지고 있는지 확인해야합니다.
자신에 대해 그리고 왜이 일을하는지에 대해 조금 말해주세요.
고객은 누구입니까? 그들의 특정한 필요 / 고통은 무엇입니까? 다양한 유형의 고객에 대한 몇 가지 구체적인 예, 필요한 것, 웹 사이트가 고객을 위해 할 일을 알려주십시오.
사업에 대해 알려주세요. 정확히 무엇을합니까?
다음 사람보다 나은 점이 무엇입니까?
서비스를 검색하는 중이라면 업체에서 Google에 무엇을 입력하여 찾을 수 있습니까?
자신의 사이트를 구축하는 경우 이러한 답변이 무엇인지 이미 잘 알고 있습니다.
위의 질문에 대한 답변을 바탕으로 이러한 사람들이 진지하고 실제로 좋은 아이디어를 가지고 있다고 판단하면. 그런 다음 계속하십시오 (아직 돈을 받고 있지는 않지만 양말을 빌리려면 양말을 벗으십시오.)
클라이언트와 그의 사업을 조사하는 데 시간을 보내십시오. 과거의 성공과 그들이 겪은 문제를 알아보십시오. 그들이 고용 한 세 번째 개발자입니까? 다른 두 사람은 어떻게 되었습니까?
고객이 원하는 것을 찾으십시오. 이 사이트를 누가 만들 것인가? 하루 종일 Facebook에서 Farmville을 연기하는 60 세의 퇴역 군인 또는 16 세의 여드름 환자입니다.
경쟁자가 누구인지 알아보십시오. 그들은 심지어 알지 못할 수도 있습니다. 5-10 명의 경쟁자에 대한 경쟁 분석을하고 우리가 누가 Serps에서 뛸 필요가 있는지 알아보십시오. 핵심 목표가 무엇인지 알아야하는 단계입니다. 나중에 그리고 이미 실패했습니다.
그들의 사업에 대한 지식으로 그들을 날려 버리고 웹 사이트 계약 / 제안서를 작성하고 그들이 동의하면 계약을 준비하십시오. 서명 된 계약서와 50 % 보증금을 받고 3 단계로 진행하십시오.
여기에는 공통된 주제가 있습니다. 이러한 모든 경우에있어 미션은 제품에 관한 것이 아닙니다. 당신이 정말로 진지하게 생각한다면, 그 제품은 절대적으로 놀라운 것이되어야하므로, 그렇게하는 것이 "그냥"사명입니다. 원하는 경우 : 이러한 미션이 모두 해답입니다. 왜 새 기능을 추가 했습니까? 새 기능이 아닌 새로운 기능은 무엇입니까? - 벤자민 폴락.
모든 사람이 관점에서 기대를 갖도록 타임 라인을 설정해야합니다.
이것은 대부분의 사람들이 시작하는 곳이므로 내 프로세스를 설명하지만 상황, 팀, 고객 등에 가장 적합한 워크 플로우를 결정해야합니다.
나를 위해 내용 이 먼저옵니다. 코드가 작성되기 전에 클라이언트가 대부분의 작업을 수행했는지 확인합니다. 우리는 최종 초안 교정 편집을 말하는 것이 아니라 페이지에있을 텍스트의 단어를 다소 줄입니다. 마케팅 팀이 관여하는 경우 시간이 걸릴 수 있습니다.
사이트의 모양에 대해 이미 알고 있어야합니다. 내용이 있어야합니다. 이제 3 단계에서 달성 한 목표를 달성 할 수있는 레이아웃 및 일반 디자인 원칙에 대해 작업해야합니다.
나는 와이어 프레임을 싫어하지만 그것들이 필요하다는 것을 이해합니다. 귀하의 사이트가 고객에게 보이지 않을 것임을 알고 있기 때문입니다. 이것은 귀하의 보호와 고객을위한 것입니다. 모든 사람이 행복하면 "이것은 우리가 지불하는 것입니다."
프론트 엔드 개발 및 UI- Andy Clarke의 하드 보일드 기술인 HTML, CSS 및 브라우저 에서의 디자인. 포토샵에서 더 현실적인 시간을 낭비하고 개발에 앞장서 서 더 사실적인 더 빠른 모형을 보여줄 수 있다는 것을 알고 피곤합니다.
당신은 마침내 재미를 누리게됩니다. 귀하와 고객 을 위해 시작하기 전에 버전 제어 를 설정하십시오 . 버전 관리를하고 있으므로 계속 진행 하면서 버그 추적 을 설정해야 합니다.
우리가 가지고있는 내용을 기억하십니까? 이제 복사를 편집해야 할 때입니다. 나는 다른 사람을 고용하거나 많은 사람들이 그것을 읽을 수 있도록 이것을 빨아 먹는다. 2 단계에서 언급 한 키워드가 SEO에 최적화되어 있는지 확인하고 확인하십시오. 우리의 내용이 훌륭하고 실제로 그 핵심 단어에 관한 것이라면 이것은 자연스럽게 나옵니다.
실제 호흡하는 인간에게 사이트 앞에 앉아 사용하도록하십시오. 나는 때때로 전화해서 왜 그녀의 프린터가 인쇄되지 않는지 알고 싶어하는 어머니를 입대하고 싶다 (플러그 엄마, 플러그를 먼저 연결해야한다). 이러한 종류의 사용자는 위의 16 세 여드름 직면 아이 예를 사용하지 않는 한 귀하의 사이트를 탐색 할 수 있어야합니다.
서버 짐승 과 싸울 책임이있는 사람을 모두에게 알리십시오 .
한 달 안에 우리가 한 경쟁 분석을 다시 참조하고 우리 사이트를 분석 한 사이트와 비교합니다. 이 데이터를 사용하여 SEO 계획을 세우십시오. 아니요 뱀 오일 SEO 에 대해 이야기하고 있지 않습니다. 여전히 관련 콘텐츠를 생성하는지 확인하고 사이트가 자연스럽게 당신과 연결되어 있습니다 (굉장히 뛰어 나기 때문에)와 제목 태그 본문과 일치합니다. SEO는 Stack Overflow가 아니라면 141 만 명의 사용자가 양질의 콘텐츠를 생성 하지 않는 한 오랜 과정 입니다.
고품질 콘텐츠와 "하이픈으로 연결된 사이트"에서 찾을 수있는 내용에는 큰 차이가 있습니다. (따로 따르지 않는 주스가 떨어지는 것을 방지하기 위해).
모든 것이 작동합니까? 굉장함을 구축하는 임무가 달성 되었습니까? 발사 계획을 세우고 실행하십시오.
당신이 1 단계에서 모든 권한을 한 경우 - 6 당신의 발사는 바람 수 없습니다 아무 파업 당신이 수 문제가있을 것이다. 그 (것)들을 위해 준비하고 실수를 고치십시오.
인보이스를 발송하고 헹구고 반복하십시오.
나는 시작하고 싶다 <!DOCTYPE html>
진지하게 ... 우선 순위 :
대부분의 답변은 이미 깊이 있습니다. 기본 사항을 다시 작성하는 데 시간을 낭비하지 않도록 프레임 워크 또는 템플릿을 사용해야한다고 덧붙입니다.
거기에 사용할 수있는 많은 PHP 프레임 워크 가 있거나 ( Kohana 는 제가 가장 좋아하는 곳입니다) 많은 사람들이 Wordpress를 기본으로 사용합니다. 또한 CSS 프레임 워크를 사용할 수 있습니다. 다시 많은 것이 있습니다. 가장 인기있는 것 중 하나는 960 그리드 시스템입니다
웹 사이트를 디자인 할 때 보통 어떻게 시작 합니까?
당신처럼 나는 몇 년 전에 웹 개발자 / 디자이너로서 나 자신을 마케팅 할 필요성을 발견했다. 웹 사이트를 방문하는 방문자에게 어떤 정보, 이미지 및 메시지를 제공하고 싶은지 마음 속으로 이해하기 시작한 곳을 찾았습니다 . 그리고 내가 웹 사이트를 방문하는 동안 사용자가 성취 / 실행하기를 원했던 것 .
일단 디자인 프로세스를 이해하는 것이 훨씬 명확 해졌습니다. 내 홈페이지의 요소와 그 항목을 전달하는 후속 페이지를 기록 할 수있었습니다.
예를 들어 나는 이력서를 쉽게 찾고 다운로드 할 수있게하려고 애썼다. 따라서 사이트를 디자인 할 때 본인의 이력서에 대한 정보와 정보를 쉽게 찾을 수있는 위치를 확인했습니다.
이야기의 도덕은 관련이 있습니다. 귀하의 웹 사이트에있는 모든 것은 목적에 부합해야하며, 그렇지 않으면 불필요한 소음입니다.