정보실

웹학교

정보실

Git Reveal.js 및 Git을 사용하여 웹 학습서 작성

본문

이 쉬운 워크 플로우를 통해 모든 브라우저, 장치 및 플랫폼에서 워크숍 슬라이드를 일관되게 볼 수 있습니다.


학습자이든 교사이든 관계없이 지식 전달을 위한 슬라이드 쇼와 같은 온라인 워크샵의 가치를 알고 있을 것입니다. 페이지별로, 장별로 설정되는 잘 구성된 이 자습서 중 하나를 우연히 본 적이 있다면 그러한 웹 사이트를 만드는 것이 얼마나 어려운지 궁금했을 것입니다.


https://opensource.com/article/20/4/create-web-tutorial-git 


완전 자동화 된 프로세스를 사용하여 이러한 유형의 워크샵을 생성하는 것이 얼마나 쉬운 지 보여 드리겠습니다.


소개 


학습 컨텐츠를 온라인으로 시작하기 시작했을 때 좋은 경험이 아니었습니다. 따라서, 제가 가르치는 기술이 발전함에 따라 컨텐츠가 변경되므로 반복 가능하고 일관성 있는 것을 원했습니다.


Asciidoctor와 같은 저수준 코드 생성기에서 단일 PDF 파일로 워크샵을 배치하는 것에 이르기까지 많은 제공 모델을 시도했습니다. 모두 나를 만족시키지 못했습니다. 현장 워크숍을 라이브로 진행할 때 슬라이드 쇼를 사용하는 것이 좋기 때문에 온라인 자체 진도에 있는 워크숍 환경에서 동일한 작업을 수행 할 수 있을지 궁금했습니다.


약간의 파기 후, 나는 고통 없는 워크샵 웹 사이트를 만들기 위한 기초를 구축했습니다. 웹 사이트 친화적인 형식 (HTML)으로 된 프레젠테이션 생성 프레임 워크를 이미 사용하고 있었습니다.


설정 


이 프로젝트에 필요한 기본 구성 요소는 다음과 같습니다.


  • 워크샵 아이디어 (이것은 당신의 문제입니다, 여기서 당신을 도울 수 없습니다)
  • 워크샵 슬라이드를 위한 Reveal.js
  • GitLab 프로젝트 저장소
  • 가장 좋아하는 HTML 코드 편집기
  • 웹 브라우저
  • 기계에 설치된 Git


이 목록이 위협적인 것처럼 보이면 시작하는 빠른 방법이 있습니다. 모든 조각을 하나씩 하나로 묶지 않아도 됩니다. 템플릿 프로젝트를 사용하여 슬라이드 및 프로젝트 설정으로 킥 스타트 할 수 있습니다.


이 기사에서는 Git 및 GitLab과 같은 Git 플랫폼에서 호스팅 되는 프로젝트에 익숙하다고 가정합니다. 새로 고침 또는 튜토리얼이 필요한 경우 소개 Git 시리즈를 확인하십시오.


템플릿 프로젝트를 로컬 시스템에 복제하여 시작하십시오.


git clone https://gitlab.com/eschabell/beginners-guide-automated-workshops.git 


이를 위해 새 GitLab 프로젝트를 설정하고 템플릿 프로젝트를 초기 가져 오기로 가져옵니다.


워크샵 웹 사이트에 대한 중요한 파일이 많이 있습니다. 루트 디렉토리에는 .gitlab-ci.yml이라는 파일이 있는데,이 파일은 마스터 브랜치 (즉, 풀 풀 요청을 마스터로 병합)에 대한 변경 사항을 커밋 할 때 트리거로 사용됩니다. 슬라이드 디렉토리의 전체 내용을 GitLab 프로젝트의 웹 사이트 폴더로 복사합니다.


나는 이것을 GitLab 계정에서 초보자 가이드 자동 작업장이라는 프로젝트로 호스팅 했습니다. 배포 할 때 다음을 탐색하여 브라우저에서 슬라이드 디렉토리의 내용을 볼 수 있습니다.


https://eschabell.gitlab.io/beginners-guide-automated-workshops 


사용자 계정 및 프로젝트의 경우 URL은 다음과 같습니다.


https://[YOUR_USERNAME].gitlab.io/[YOUR_PROJECT_NAME] 


웹 사이트 콘텐츠 제작을 시작하는 데 필요한 기본 자료입니다. 변경 사항을 적용하면 업데이트 된 워크샵 웹 사이트가 자동으로 생성됩니다. 기본 템플릿에는 여러 예제 슬라이드가 포함되어 있습니다.이 슬라이드는 리포지토리에 대한 전체 체크인을 완료 한 후 첫 번째 워크샵 웹 사이트입니다.


워크샵 템플릿을 사용하면 모든 브라우저에서 실행할 수 있는 reveal.js 슬라이드 쇼가 생성되며 자동 크기 조정을 통해 거의 모든 사람이 모든 장치에서 볼 수 있습니다.


편리하고 접근하기 쉬운 워크샵을 만드는 것은 어떻습니까?


작동 원리 


이 배경 지식을 갖추면 워크샵 자료를 살펴보고 컨텐츠를 정리할 수 있습니다. 필요한 모든 것은 프로젝트의 슬라이드 디렉토리에서 찾을 수 있습니다. 브라우저에서 워크숍 슬라이드 쇼를 만들기 위해 reveal.js로 모든 마법이 발생하는 곳입니다.


워크숍 제작을 위해 작업 할 파일과 디렉토리는 다음과 같습니다.


  • default.css 파일
  • 이미지 디렉토리
  • index.html 파일

자주 사용하는 HTML / CSS 편집기에서 각각 열고 아래 설명 된대로 변경하십시오. 사용하는 편집기는 중요하지 않습니다. 로컬 브라우저에서 페이지 미리보기를 제공하기 때문에 RubyMine IDE를 선호합니다. 이것은 워크샵 웹 사이트로 온라인으로 푸시하기 전에 콘텐츠를 테스트 할 때 도움이 됩니다.


Default.css 파일 


css/theme/default.css 파일은 워크샵 슬라이드에 대한 중요한 전역 설정을 설정하는 기본 파일입니다. 관심 있는 두 가지 주요 항목은 모든 슬라이드의 기본 글꼴 및 배경 이미지입니다.


default.css에서 GLOBAL STYLES라는 레이블이 붙은 섹션을 보십시오. 현재 기본 글꼴이 다음 줄에 나열됩니다.


font-family: "Red Hat Display", "Overpass", san-serif; 


비표준 글꼴 유형을 사용하는 경우 (오버 패스 글꼴 유형에서와 같이) 다음과 같이 해당 글꼴을 가져와야 합니다.


@import url('SOME_URL'); 


배경은 만드는 모든 슬라이드의 기본 이미지입니다. 이미지 디렉토리 (아래 참조)에 저장되고 아래 줄 (이미지 경로에 초점)에 설정됩니다.


background: url("…/…/images/backgrounds/basic.png") 


기본 배경을 설정하려면 이 선을 사용하려는 이미지를 가리키십시오.


이미지 디렉토리 


이름에서 알 수 있듯이 images 디렉토리는 워크샵 슬라이드에 사용하려는 이미지를 저장하는 데 사용됩니다. 예를 들어, 나는 보통 개별 슬라이드에 워크숍 주제의 진행 상황을 보여주는 스크린 샷을 넣습니다.


지금은 배경 이미지를 하위 디렉토리 (배경)에 저장하고 슬라이드에서 사용하려는 이미지를 이미지 디렉토리에 저장해야 합니다.


Index.html 파일 


이제 두 파일을 정렬 했으므로 index.html로 시작하여 HTML 파일에 슬라이드를 만드는 데 나머지 시간을 소비하게 됩니다. 워크샵 웹 사이트가 구체화되기 시작하려면 이 파일의 다음 세 섹션에 주의하십시오.


  • 제목, 작성자 및 설명을 설정하는 헤드 섹션
  • 디자인 할 개별 슬라이드를 찾을 수 있는 본문 섹션
  • 개별 슬라이드의 내용을 정의하는 각 섹션

헤드 섹션은 상단에 있으므로 시작합니다. 템플릿 프로젝트에는 업데이트 할 세 개의 자리 표시 자 줄이 있습니다.


<title>INSERT-YOUR-TITLE-HERE</title>
<meta name="description" content="YOUR DESCIPTION HERE.">
<meta name="author" content="YOUR NAME"> 


title 태그에는 파일을 열 때 브라우저 탭에 표시되는 텍스트가 포함됩니다. 워크샵 제목 (또는 워크샵 섹션)과 관련된 것으로 변경하되 탭 제목 공간이 제한되어 있으므로 짧게 유지하십시오. description 메타 태그에는 워크샵에 대한 간단한 설명이 포함되어 있으며 author 메타 태그에는 이름 (또는 다른 사람을 위해 이 작업을 수행하는 경우 워크샵 제작자의 이름)을 입력해야 합니다.


이제 본문 섹션으로 이동하십시오. 이 섹션은 여러 섹션 태그로 나뉘어져 있습니다. 본문의 오프닝에는 각 열림 태그와 닫는 태그 레이블 섹션에 대해 슬라이드를 작성하고 있음을 설명하는 주석이 포함되어 있습니다.


<body>
        <div class="reveal">

        <!-- Any section element inside of this container is displayed as a slide -->
        <div class="slides"> 


그런 다음 각 슬라이드를 섹션 태그로 묶어 개별 슬라이드를 만듭니다. 템플릿에는 시작하는 데 도움이 되는 몇 가지 슬라이드가 포함되어 있습니다. 예를 들어 다음은 첫 번째 슬라이드입니다.


<section>
      <div style="width: 1056px; height: 300px">
            <h1>Beginners guide</h1>
            <h2>to automated workshops</h2>
      </div>
      <div style="width: 1056px; height: 200px; text-align: left">
            Brought to you by,<br/>
            YOUR-NAME<br/>
      </div>
      <aside class="notes">Here are notes: Welcome to the workshop!</aside>
</section> 


이 슬라이드에는 두 개의 영역이 div 태그로 구분되어 있습니다. 간격은 제목과 저자를 구분합니다.


HTML 사용에 대한 지식이 있다고 가정하면 워크샵을 개발하기 위해 다양한 것을 시도하십시오. 결과를 미리 볼 때 브라우저를 사용하는 것이 정말 편리합니다. 일부 IDE는 로컬로 변경 사항을 볼 수 있지만 index.html 파일을 열고 변경 사항을 리포지토리로 푸시하기 전에 볼 수도 있습니다.


워크샵에 만족하면 변경 사항을 적용하고 지속적 통합 파이프 라인을 통과 할 때까지 기다립니다. https://eschabell.gitlab.io/beginners-guide-automated-workshops의 템플릿 프로젝트처럼 호스팅 됩니다.


더 알아보기 


이 워크 플로우로 수행 할 수 있는 작업에 대해 자세히 알아 보려면 다음 예제 워크샵 및 워크샵 모음을 호스팅 하는 사이트를 확인하십시오. 이들 모두는 이 기사에서 설명하는 워크 플로우를 기반으로 합니다.


워크샵 예 :


워크샵 모음 :



이 초보자 안내서와 템플릿 워크샵 프로젝트를 통해 워크샵 웹 사이트를 일관된 방식으로 개발하고 유지 관리하는 것이 쉽고 고통스럽지 않기를 바랍니다. 또한 이 워크 플로를 통해 워크숍 대상이 거의 모든 장치에서 컨텐츠에 대한 모든 액세스 권한을 가지므로 공유 지식을 통해 배울 수 있기를 바랍니다.


페이지 정보

조회 30회 ]  작성일20-06-25 15:47

웹학교