문서로 작업의 콘텐츠 변경 미리보기 DesignMode – Smashing Magazine
document.designMode
? Victor Ayomipo는 컨텐츠 변경을 미리보기에 사용될 수있는 방법을 설명하고 기본 컨텐츠 편집에서 팀 협업 개선에 이르기까지 모든 용도로 제공되는 몇 가지 사용 사례를 보여줍니다.
따라서 웹 사이트 변경을 배포했습니다. 축하해요! 모든 것이 계획에 따라 진행되었지만 이제는 생산에서 작업을보고 변경에 의문을 제기하기 시작합니다. 아마도 그 변화는 새로운 제목만큼 단순했고 공간에 맞지 않는 것 같습니다. 어쩌면 이미지를 추가했을 수도 있지만 특정 상황에서는 느끼지 않습니다.
당신은 무엇을합니까? 더 많은 변경 사항을 배포하기 시작합니까? 개방형 일러스트 레이터 나 피그마를 깨뜨릴 필요는 없지만 작은 변화를 조롱 할 필요는 없지만 변경을 배포하기 전에 변경 사항을 미리 보는 것은 여전히 도움이 될 것입니다.
입력하다 document.designMode
. 새로운 것이 아닙니다. 사실, 나는 최근에 처음으로 그것을 만났고 그 중 하나를 가졌습니다. “잠깐만 요, 이것이 존재합니까?” Internet Explorer 6에서도 우리가 영원히 가진 도구이기 때문에 순간. 그러나 어떤 이유로 든 지금은 그것에 대해 듣고 있으며, 많은 동료들도 처음으로 그것에 대해 듣고 있습니다.
정확히 무엇인가 document.designMode
? 아마도 작은 비디오 데모는 페이지를 직접 편집 할 수있는 방법을 보여줄 수 있습니다.
document.designMode
공장.가장 간단하게 document.designMode
텍스트 편집기와 유사하게 웹 페이지를 편집 가능하게 만듭니다. 나는 그것이 가지고 있다고 말하고 싶습니다 웹의 편집 모드 – 웹 페이지의 어느 곳에서나 클릭하여 기존 텍스트를 수정하고, 물건을 이동하며, 요소를 삭제할 수 있습니다. Beck과 Call에 Apple의 “산만 제어”기능이있는 것과 같습니다.
이것은 개발자, 디자이너, 고객 및 일반 사용자 모두에게 유용한 도구라고 생각합니다.
당신은 이것이 단지 어떤지 궁금 할 것입니다 contentEditable
한눈에, 둘 다 비슷해 보이기 때문입니다. 그러나 두 사람은 다른 목적을 제공합니다. contentEditable
특정 요소를 편집 할 수있는 데 더 중점을두고 있습니다. document.designMode
만든다 전체 페이지 편집 가능.
활성화 document.designMode
브라우저의 개발자 도구에서 수행 할 수 있습니다.
- 웹 페이지의 어느 곳을 마우스 오른쪽 버튼으로 클릭하고 클릭하십시오 검사.
- 클릭하십시오 콘솔 꼬리표.
- 유형
document.designMode = "on"
그리고 누르십시오 입력하다.
끄려면 페이지를 새로 고치십시오. 그게 다야.
다른 방법은 클릭하면 모드를 활성화하는 북마크를 만드는 것입니다.
- 브라우저에서 새 책갈피를 만듭니다.
- “edit_mode”와 같은 이름을 지정할 수 있습니다.
- URL 필드 에이 코드를 입력하십시오.
javascript:(function(){document.designMode = document.designMode === 'on' ? 'off' : 'on';})();
그리고 이제 당신은 전환하는 스위치가 있습니다 document.designMode
켜고 꺼져 있습니다.
사용 사례
이 도구를 사용하는 흥미롭고 창의적이며 유용한 방법이 많이 있습니다.
기본 콘텐츠 편집
나는 이것이 핵심 목적이라고 감히 말한다 document.designMode
어떤 이유로 든 웹 페이지의 텍스트 요소를 본질적으로 편집하는 것입니다. 제목, 단락 또는 총알 포인트 일 수도 있습니다. 어떤 경우이든, 브라우저는 효과적으로됩니다 “당신이 보는 것은 당신이 얻는 것입니다”(Wysiwyg) 편집자그 자리에서 변경하고 미리 볼 수있는 곳.
document.designMode
.방문 페이지 A/B 테스트
기존 사본이있는 제품 웹 사이트가 있지만 경쟁사를 확인하면 해당 사본이 더 매력적으로 보입니다. 당연히 테스트하고 싶습니다. 백엔드에서 편집하거나 나중에 메모를하는 대신 사용할 수 있습니다. document.designMode
해당 사본 변동이 랜딩 페이지 레이아웃에 어떻게 맞는지 즉시 확인한 다음 두 버전을 쉽게 비교하고 대조하십시오.
document.designMode
.이것은 카피라이터 또는 솔로 개발자에게도 유용 할 수 있습니다.
SEO 제목 및 메타 설명
모든 사람은 웹 사이트가 검색 결과의 최상위에 순위를 매기기를 원합니다. 이는 더 많은 트래픽을 의미하기 때문입니다. 그러나 SEO만큼이나 넓은
태그와 설명은 방문자와 검색 엔진 모두에 대한 웹 사이트의 첫 번째 인상입니다.
발생하는 질문은 검색 결과에서 특정 텍스트가 잘린지 어떻게 알 수 있습니까? 제 생각에는 document.designMode
밀어 내기 전에 고칠 수 있습니다.
document.designMode
.이 도구를 사용하면 키워드가 즉시 보이는지 여부와 동일한 검색 결과에서 다른 경쟁 업체와 얼마나 강력한 지 여부에 관계없이 제목 길이가 잘 보이는 것이 훨씬 쉽다고 생각합니다.
개발자 워크 플로우
완전히 솔직히 말하면 개발자는 아마도 사용하고 싶지 않을 것입니다. document.designMode
실제 개발 작업을 위해. 그러나 웹 사이트에서 물건을 깨고, 주변의 요소 이동, 이미지를 재배치하고, UI 요소를 삭제하고, 삭제 된 것을 실시간으로 취소하는 데 여전히 유용 할 수 있습니다.
요소의 위치에 대해 회의적이거나 버튼이 맨 위보다 상단에서 더 나을 수 있다고 느끼면 도움이 될 수 있습니다. document.designMode
확실히 도움이 될 수 있습니다. 그것은 코드베이스의 재배치 요소를 능가하기 위해 요소가 다르게 배치되는지 확인하기 위해서는 확실히 요소를 능가합니다. 그러나 다시 말하지만, 대부분의 시간, 우리는 이러한 일들이 효과적으로 수행 할 수있는 지역 환경에서 개발 중이므로 마일리지가 찾을 수있는 정도까지 달라질 수 있습니다. document.designMode
개발 작업에서.
고객 및 팀 협업
일부 고객은 거의 항상 마지막 순간 변경 요청을하는 것은 쉬운 일입니다. “이 버튼을 제거 할 수 있습니까?” 또는 “무료 계층의 가격 책정 기능을 편집합시다.”
클라이언트에게는 이것들이 거의 조정하지는 않지만, 당신에게는 이러한 변화를 만들기 위해 개발 환경을 시작하는 것이 번거 롭을 수 있습니다. 나는 믿는다 document.designMode
프로덕션을 건드리지 않고 클라이언트와 스크린 샷을 공유하지 않고 몇 초 만에 이러한 경우를 도울 수 있습니다.
document.designMod
.또한 유용해질 수 있습니다 UI 변경에 대해 논의 할 때 팀 회의. 화면 공유를 통해 실시간 변경을 보면 토론을 촉진하고 더 빠른 결론을 이끌어 낼 수 있습니다.
라이브 돔 튜토리얼
웹 개발을 배우는 초보자에게는 기분이 좋습니다 document.designMode
웹 페이지를 조작하고 즉시 결과를 보는 것이 어떻게 느끼는지에 대한 첫 번째 모습을 제공하는 데 도움이 될 수 있습니다. 전 웹 개발 단계코드 편집기를 터치하기 전에도.
학습자들이 물건을 움직이는 것을 실험함에 따라 강사는 각 변화가 어떻게 작동하는지 설명하고 페이지의 흐름에 영향을 미치는 방법을 설명 할 수 있습니다.
소셜 미디어 컨텐츠 미리보기
우리는 동일한 아이디어를 사용하여 소셜 미디어 게시물을 게시하기 전에 미리보기를 미리 볼 수 있습니다! 예를 들어, document.designMode
다른 통화 유도 문구의 효과를 측정하거나 플랫폼을 스크롤 할 때 사용자가 우연히 발견 될 때 광고 사본이 어떻게 보이는지 시각화 할 수 있습니다. 이것은 모든 소셜 미디어 플랫폼에서 효과적입니다.
document.designMode
.밈
나는 이것을 추가하지 않는 것이 공정하다고 생각하지 않았다. 그것은 제대로 보이지 않을 수도 있지만 솔직 해 보자 : 밈을 만드는 것은 아마도 누군가가 발견 할 때 가장 먼저 떠오르는 것 중 하나 일 것입니다. document.designMode
.
소셜 게시물의 패러디 버전을 만들고, 기사 헤드 라인을 조정하고, 제품 가격을 변경하며, YouTube보기 또는 Reddit 의견을 조작하여 몇 가지 방법을 말할 수 있습니다. 기억하십시오 : 이것은 허위 정보를 전파하거나 실제 피해를 입히는 데 사용해서는 안됩니다. 존중하고 윤리적으로 유지하십시오!
결론
document.designMode = "on"
처음으로 발견 할 때 즉시 유용 할 수있는 유쾌한 브라우저 트릭 중 하나입니다. 생생하고 원시적 인 도구이지만 유용성과 목적을 부정 할 수는 없습니다.
따라서 시도해 보거나 동료에게 보여 주거나이 기사를 편집하십시오. 당신은 언제 필요한지 알지 못합니다.
추가 독서

(GG, YK)
Post Comment