백엔드 개발자가보다 쉽게 ​​작업 할 수 있도록 HTML, CSS 및 JavaScript를 작성하는 방법

디자이너로부터 디자인을 얻으면 PSD (Photoshop) 파일로 가져옵니다. 나는 항상 올바른 레이어와 폴더 이름, 기본적으로 깨끗하고 관리되는 PSD를 기대합니다. 이 desigbn에서 HTML, CSS 및 JavaScript를 개발하여 백엔드 개발자에게 제공합니다. 그들이 이해하기 쉽도록

• 시맨틱 코드 작성
• 외부 파일에 JavaScript와 CSS를 유지
• HTML, CSS 및 JS 파일에 유용한 주석 추가
• CSS 스프라이트를 사용하십시오 (개발자는 싫어하지만).
• HTML5 보일러 판을 사용하십시오.
• JavaScript에 jQuery를 사용하십시오.
• 가능할 때마다 새로운 HTML5 태그와 CSS3를 사용하십시오.
• HTML, CSS, JS 및 이미지가 포함 된 Zip 파일을 보냈습니다.

레이아웃을 약간 변경해야 할 경우 개발자가이를 처리 할 수있을 것으로 기대합니다.

백엔드 개발자와 다른 CSS 닌자에게 백엔드 시스템과의 통합을보다 쉽게하기 위해 파일 구성 및 마크 업 측면에서 더 많은 작업을 수행하고 싶습니다 (예 : 백엔드 기술, PHP, .NET). , Ruby 등) 클라이언트마다 다른 시스템을 사용합니다.

이 답변 중 많은 부분이 광범위한 아이디어를 다루려고하지만 내 개인적인 아이디어는 다음과 같습니다.

• 오류 메시지를위한 양식 디자인으로 공간을 남겨 두십시오.
• 입력 상자에 레이블을 넣지 마십시오!
• 자신이하고있는 일을 알지 못하고 제대로 느끼지 않는 한 CSS와 JavaScript를 별도의 파일에 넣습니다.
• 페이지간에 디자인 요소를 동일하게 유지하십시오. "최근에 본"상자와 같은 디자인 구성 요소가 페이지마다 다른 마크 업을 가질 때 분노합니다.
• 쉬운 일을하지 말고 옳은 일을하십시오. <button>태그 빨아. backround-image정말 <img>태그 해야 할 것들을 위해 .
• 페이지 컴포넌트를 작성하는 경우 페이지 컴포넌트를 확장 할 수 있는지 확인하십시오. 나는 가장 훌륭한 프론트 엔드 개발자가 이것을하는 것을 알고 있지만, 누군가가 상단 / 하단 캡 상황에서 단일 이미지를 사용하는 경우가 많았습니다. 프로그래머는 Photoshop을 여는 것을 좋아하지 않습니다.
• 템플릿을 교정하십시오. 프로그래머 (좋은 사람)는 헌신적이고 세부적인 사람들입니다. 바닥 글 탐색에 맞춤법 오류가 있거나 맞춤법이 일치하지 않을 수 있습니다. 디자인에서 문제가 발생하면 질문을하고 작업 속도가 느려집니다.

마지막으로, 아마도 가장 중요한 것은 :

• 백엔드에서 개발중인 언어의 기본 규칙을 학습하십시오. PHP 템플릿을보고 a foreach또는 if명령문 의 기본 구문을 이해하고 명령문의 형식을 지정 echo하거나 <?php ?>태그를 이동하는 방법 은 프론트 엔드 개발자로서의 가치를 크게 높일 것입니다. 프론트 엔드 개발자가 필요할 때 좋아합니다. 간단한 변경 작업을 수행하고 모든 파일의 새 우편 번호를 전달하는 대신 템플릿에서 수행 할 수 있습니다.
• 부록으로, 버전 제어 소프트웨어 사용법을 배우십시오. 당신은 전문가가 될 필요는 없지만, 두 개의 zip 파일 사이에 무엇이 바뀌 었는지 알아 내지 않고 diff를 볼 수 있다면 작업이 100 배 더 쉬워집니다.

이것들은 몇 가지에 불과합니다. 더 많은 것이있을 것이라고 확신하지만,이 모든 것을 달성하면 템플릿을 웹 사이트로 전환하는 사람에 대한 존경과 감사를 얻을 수 있습니다.

내가 생각할 수있는 명백한 것은 백엔드 사람의 삶을 더 쉽게 만들 수 있다는 것입니다. 다양한 동작 (롤오버, 메뉴 등)이있는 웹 페이지 요소를 디자인 할 때 개발자가 어떤 기능을 결정하기 위해 지속적으로 일부 차트로 돌아갈 필요가 없도록 이러한 모든 동작을 공통된 방식으로 표준화해야합니다. 페이지가 작동하도록하려면 전화해야합니다.

그리드는 데이터 또는 기능의 셀 조작에 의해 셀이 필요하지 않아야합니다. 페이지의 블록 요소는 공통 요소로 쉽게 정의 할 수 있어야하므로 코드 뒤에서 쉽게 세그먼트화할 수 있습니다. 이를 통해 개발자는 코드를 재사용하거나 페이지의 다양한 측면 사이의 커뮤니케이션을 촉진 할 수 있습니다.

페이지 영역이 특정 디자인 경계를 넘지 않아야합니다. 한 요소의 항목이 다른 요소의 항목에 침입해서는 안됩니다.

그러나 개발자가 불타는 농구 대를 뛰어 넘지 못하게 할 수있는 요점이 있습니다. 일부 인터페이스 요소는 본질적으로 구축하기 까다로울 것입니다.

경우에 따라 백엔드 개발자를위한 솔루션을 쉽게 수정하고 무언가를 최적화하는 것 중에서 선택해야합니다.

인용 한 CSS 스프라이트가 좋은 예입니다. 확장 성과 성능이 중요 할 때 누군가가 웹 사이트를 만드는 방법을 이해하지 못하고 모든 페이지에서 100 개의 이미지, 5 개의 CSS 및 15 개의 JavaScript 파일에 대한 링크가 있습니다. 반면에 CSS 스프라이트는 유지 관리가 쉽지 않으며 디자인을 약간 변경하면 많은 작업이 필요할 수 있습니다.

예를 들어 상태 아이콘이 서로 아래에 3 개 있고 네 번째 상태를 추가해야하는 경우 4 개의 아이콘을 이미지 하단에 3 개의 다른 아이콘과 별도로 추가합니까? 또는 세 번째 아이콘 뒤에 추가하여 빈 공간을 확보하기 위해 다른 모든 것을 맨 아래로 이동합니까?

CSS와 JavaScript 파일을 결합하고 축소하는 것도 마찬가지입니다. 어느 정도 규모의 웹 사이트를 위해해야하지만 추가 노력이 필요합니다.

CDN과 똑같습니다. 큰 웹 사이트에 사용해야하지만 변경하기가 더 어려울 수 있습니다. 당신이 CSS 파일을 변경 한 경우 예를 들어,에 파일로 URI를 수정하여, 새로운 하나를 다운로드하려면 브라우저를 강제로 cdn.example.com/g.css?r=2, 다음 cdn.example.com/g.css?r=3등

또한 "쉬운"은 상대적 입니다. 예를 들어 CSS 코드 작성 지침을 참조하십시오. 개인적으로 공백없이 한 줄에 하나의 스타일을 선호합니다.

#TopMenu a{text-decoration:none;color:#fff;padding:5px 10px;float:left;}

대부분의 사람들은이 구문을 싫어하고 내가 싫어하고 읽기 어려운 것을 선호합니다 (아니, 나는 미쳤지 않습니다).

#TopMenu a
{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    float: left;
}

같은 방식으로 jQuery를 사용한다고해서 백엔드 개발자가 파일을보다 쉽게 ​​수정할 수 있다는 의미는 아닙니다. 일부 개발자는 프로토 타입이나 다른 프레임 워크에 더 익숙하기 때문입니다.

모든 경우에, 개발자가 문서 를 읽으려고하면 자세한 문서 가 도움이됩니다 (대부분은 그렇지 않습니다). 또한 특정 개발자에게 작업 수행 방법을 정확하게 요구 하고 처음부터 나란히 작업 하여 프레임 워크를 구축하는 동안 (예 : 최소화하기 위해 사용할 워크 플로 디자인) 개발자의 삶을보다 쉽게 ​​만들 수 있습니다. 파일을 결합하십시오).

세계에서 가장 좋은 것은 디자이너가 벽에 zip 파일을 던지지 않고 실제로 개발자 중 한 명으로 프로젝트에서 작업하는 경우입니다. 설정하는 데 약간의 핸드 홀드가 필요하지만 디자인과 개발자간에 번역이없고 모든 사람이 동일한 반복에 참여할 수 있으면 정말 좋습니다. 마찰이없는 민첩한 프로세스가 좋은 경우에는 그렇게하기가 어렵지 않습니다.

나는 대부분의 경우 디자이너가 버전 제어 방식으로 작업하고 배포 메커니즘으로 사용하도록 설정했습니다. 나는 작은 변화가있을 때마다 큰 뚱뚱한 zip 파일을 다루고 싶지 않습니다.

유연성은 일반적으로 유연성입니다. 당신이 따르는 모든 모범 사례는 앱의 양쪽 측면에서 승리합니다.

그러나 중요하고 종종 놓치는 요점은 강력한 UI를 작성하는 것입니다. 너무 많은 UI 구성 요소가 하나의 컨텍스트 또는 지나치게 정확한 HTML 집합에 지나치게 고정되어 있으며 CSS가 실패하도록 설정되어 있습니다.

예를 들어 드롭 다운이있는 경우 JQuery 해머를 당기고 좌표를 가져 오는 것보다 절대 위치에 놓인 구성 요소를 좌표가 필요없는 클릭 한 컨테이너에 고정시키는 JS 작업이 훨씬 적습니다. 요소 위에 놓고 고정시킵니다. 또한 페이지 이동 또는 일부 새로운 브라우저 기능으로 인해 위치 정보가 사라지는 경우에는 깨지지 않을 가능성이 큽니다. JS 작업을 피하기 위해 HTML / CSS 기술에 의존할수록 일반적으로 UI가 더 강력 해집니다.

일반적으로 UI 구성 요소에 필요한 유일한 ID는 적절한 ID 또는 클래스와 함께 사용하기위한 HTML 태그입니다. UI가 깨지거나 컨테이너 크기 변경에 따라 확장 / 축소와 같이 실제로 컨테이너가 수용되는 컨테이너로 할 수있는 일이 많을수록 클라이언트 측 필요없이 앱의 모든 부분에서 쉽게 구현 할 수 있습니다 전문가. 그들이해야 할 일은 강의에 충실하는 것입니다.

ui 컨테이너에서 이벤트 위임을 선호하여 버튼과 같은 엔드 포인트 노드에 리스너를 직접 할당하십시오. 해당 UI 구성 요소는 정적 HTML에서 작동하지만 누군가 HTML을 innerHTML 또는 무언가로 내부에서 리핑하고 다시 작성하려고 할 때를 알 수는 없습니다. 컨테이너가 손상되지 않고 모든 이벤트가 위임 된 경우 (jquery 'on'메서드 참조) 걱정할 필요가 없으며 HTML을 바꾸면 리스너가 깨지는 어려운 방법을 배울 수 없습니다.

옵션으로 위임을 유지하려면 stopPropagate를 엔드 포인트 노드 이외의 다른 곳으로 사용하지 말고 스팸 메일을 보내는 바보 프레임 워크 개발자에게 해커 메일을 보내십시오.

레이아웃은 HTML을 최소화하고 의미를 유지하며 div 래퍼를 피하십시오. HTML이 적을수록 레이아웃 신인이 진단하기 쉬운 레이아웃 문제가 발생합니다.

유틸리티 CSS에는 자체 설명 클래스 이름을 사용하십시오. "row"클래스는 "clearfix"보다 CSS 멍청한 자들에게 더 분명 할 것입니다.

항상 고유 한 단면 요소, 고유 한 ID를 제공하십시오. 특정 섹션에서 발생하는 항목을 식별하는 것이 훨씬 쉬워지고, 항목을 재정의하는 것이 더 쉬우 며, 가독성과 성능 JS가 될 수도 있습니다.

분명히 클래스 체계로 과도하게하는 것은 나쁜 소식이지만 백엔드 개발자가 올바른 클래스를 사물에 추가하여 간단하게 설정할 수있을수록 기존 페이지를 쉽게 변경할 수 있습니다.

물론 프로젝트가 시작될 때 적어도 한 가지에 동의하게하십시오 : HTML과 JSON을 통해서만 백엔드 및 프론트 엔드 연결. "자바 스크립트를 작성합니다!"를 사용하지 마십시오. 피의 혼란과 유지 보수의 악몽입니다.

개발과 관련된 모든 것과 마찬가지로 DRY와 미니멀리즘을 선호하십시오.

그것은 여전히 ​​댓글 (멍청한)을 허용하지는 않지만 개인적인 메모로 언급 할 것입니다. 나는 매일 PHP 코더로 작업하고 (그의 작업을 지원하며) 우리가 찾은 가장 쉬운 도구는 Komodo 의 도구 상자를 사용 하고 toolboxx에 각보기 / 컨트롤러 / 모델의 "전송 된"변수를 나열하여 언제든지 해당 페이지로 전송 된 데이터 세트 주위에 페이지를 디자인 할 때 도구 상자를보고 어떤 데이터가 전송되고 있고 어떤 "유형"이 전송되고 있는지를 확인할 수 있으며, 그 반대도 마찬가지입니다.