4개 기사로 구성된 이 모바일 웹 개발 시리즈에서는 Netbeans를 Ubuntu에서 IDE(통합 개발 환경이라고도 함)로 설정하여 모바일 친화적이고 반응이 빠른 HTML5 웹 애플리케이션 개발을 시작하는 과정을 안내합니다.
다음은 HTML5 모바일 웹 개발에 대한 4개 기사 시리즈입니다.
잘 다듬어진 작업 환경(나중에 보게 될 것임), 지원되는 언어에 대한 자동 완성, 웹 브라우저와의 원활한 통합은 Netbeans의 가장 두드러진 기능입니다.
또한 HTML 5 사양이 개발자에게 많은 이점을 가져다주었다는 점을 기억하십시오. 몇 가지 예를 들자면, 많은 새로운 요소 덕분에 더 깔끔한 코드, 내장 비디오 및 오디오 재생 기능(Flash의 필요성을 대체함), 상호 호환성 주요 브라우저 및 모바일 장치에 대한 최적화.
처음에는 로컬 개발 머신에서 애플리케이션을 테스트하지만 결국에는 웹사이트를 LAMP 서버로 옮기고 동적 도구로 전환할 것입니다.
그 과정에서 jQuery(클라이언트 측 스크립팅을 크게 단순화하는 잘 알려진 크로스 플랫폼 Javascript 라이브러리)와 Bootstrap(반응형 웹 사이트 개발을 위한 인기 있는 HTML, CSS 및 JavaScript 프레임워크)을 사용할 것입니다. 이러한 HTML 5 도구를 사용하여 모바일 친화적인 애플리케이션을 설정하는 것이 얼마나 쉬운지 들어오는 기사를 보게 될 것입니다.
이 간단한 시리즈를 완료하면 다음을 수행할 수 있습니다.
"
여기에 설명된 도구를 사용하여 기본 HTML5 동적 애플리케이션을 만들고
"
고급 웹 개발 기술을 배우십시오.
그러나 이 시리즈에서는 Ubuntu를 사용하지만 지침과 절차는 다른 데스크톱 배포판(Linux Mint, Debian, CentOS, Fedora 등)에서도 완벽하게 유효합니다.
이를 위해 일반 tarball(.tar.gz)을 설치 방법으로 사용하여 필요한 소프트웨어(Netbeans 및 Java JDK)를 설치하기로 결정했습니다.
즉, 파트 1부터 시작하겠습니다.
우분투에 자바 JDK 설치하기
이 튜토리얼에서는 이미 Ubuntu 데스크탑이 설치되어 있다고 가정합니다. 그렇지 않은 경우 계속 진행하기 전에 Matei Cezar를 참조하십시오.
Ubuntu 공식 리포지토리에서 다운로드할 수 있는 Netbeans 버전이 약간 구식이므로 Oracle 웹 사이트에서 패키지를 다운로드하여 최신 버전을 얻습니다.
이렇게 하려면 두 가지 선택이 있습니다.
"
선택 1: Netbeans + JDK가 포함된 번들 다운로드 또는
선택 2: 두 유틸리티를 별도로 설치합니다.
"
이 기사에서 우리는 #2를 선택할 것입니다. 왜냐하면 다운로드가 조금 더 작을 뿐만 아니라(HTML5 및 PHP를 지원하는 Netbeans만 설치하기 때문) 필요에 따라 독립 실행형 JDK 설치 프로그램을 가질 수 있기 때문입니다. Netbeans가 필요하지 않고 웹 개발이 필요하지 않은 또 다른 세트(주로 다른 Oracle 제품과 관련됨).
JDK를 다운로드하려면 Oracle Technology Network 사이트로 이동하여 Java → Java SE → 다운로드 섹션으로 이동하십시오.
아래 강조 표시된 이미지를 클릭하면 라이센스 계약에 동의하라는 메시지가 표시되며 필요한 JDK 버전(이 경우 64비트 머신용 tarball)을 다운로드할 수 있습니다. 웹 브라우저에서 메시지가 표시되면 파일을 여는 대신 저장하도록 선택합니다.
다운로드가 완료되면 ~/Downloads로 이동하여 tarball을 /usr/local/bin에 추출합니다.
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
우분투에 넷빈 설치하기
HTML5 및 PHP를 지원하는 Netbeans를 설치하려면 표시된 대로 wget 명령으로 이동하여 다운로드하십시오.
Netbeans에서 제공하는 기본 템플릿을 사용하여 새로운 HTML5 프로젝트를 생성하려면 파일 → 새 프로젝트 → HTML5 → HTML5 애플리케이션으로 이동합니다. 프로젝트를 설명하는 이름을 선택하고 마지막으로 마침을 클릭합니다(현재 외부 사이트 템플릿 또는 자바스크립트 라이브러리를 포함하지 않음).
그런 다음 필요에 따라 사이트 루트에 폴더와 파일을 추가할 수 있는 Netbeans UI로 이동합니다. 우리의 경우 이것은 글꼴, 이미지, 자바스크립트 파일(스크립트), 계단식 스타일 시트(스타일)에 대한 폴더를 추가하여 다음 기사에서 콘텐츠를 더 잘 구성하는 것을 의미합니다.
폴더 또는 파일을 추가하려면 사이트 루트를 마우스 오른쪽 버튼으로 클릭한 다음 새로 만들기 → 폴더 또는 HTML 파일을 선택합니다.
이제 몇 가지 새로운 HTML5 요소를 도입하고 페이지 본문을 수정해 보겠습니다.
"
및
은 중심 주제나 기능이 표시되는 문서의 주요 내용을 나타냅니다.
"
는 몇 가지 예를 들자면 이미지나 코드와 같은 독립적인 자료에 사용됩니다.
"
은 요소에 대한 캡션을 표시하므로 태그 내에 있어야 합니다.
"
. "이제 다음 코드 조각을 Netbeans의 index.html 파일에 복사합니다.
팁: 이 창에서 개발 환경으로 복사하여 붙여넣지 말고 Netbeans의 자동 완성 기능을 시각화하기 위해 각 태그를 입력하는 데 시간을 할애하십시오. 나중에 편리하게 사용할 수 있습니다.
!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header style="background-color: #6699CC">THIS IS A HEADER</header>
<main>
<article>
<p>This is some sample text.</p>
<p>Another line of sample text for this HTML 5 article</p>
<aside>
<figure>
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
<figcaption>Figure 1: The HTML 5 logo</figcaption>
</figure>
<h2>Web development basics series at Tecmint.com</h2>
<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
<p>Some text here</p>
</aside>
</article>
</main>
<footer style="background-color: #CC6699">THIS IS A FOOTER</footer>
</body>
</html>
웹 브라우저(아래 이미지와 같이 Firefox 권장)를 선택하고 재생 아이콘을 클릭하여 페이지를 볼 수 있습니다.
이제 지금까지의 개발 진행 상황을 볼 수 있습니다.
요약
이 기사에서는 HTML 5를 사용하여 웹 애플리케이션을 작성하고 Ubuntu에서 Netbeans를 사용하여 개발 환경을 설정할 때의 몇 가지 이점을 검토했습니다.
우리는 이 언어 사양이 새로운 요소를 도입하여 더 깨끗한 코드를 작성하고 Flash 영화와 같이 리소스를 많이 사용하는 구성 요소를 내장 컨트롤로 대체할 수 있는 가능성을 제공한다는 것을 배웠습니다.
다음 기사에서 jQuery와 Bootstrap을 소개하여 이러한 컨트롤을 사용하고 페이지가 더 빨리 로드되는 것을 볼 수 있을 뿐만 아니라 모바일 친화적으로 만들 수 있습니다.
그동안 Netbeans의 다른 컨트롤을 자유롭게 실험하고 질문이나 의견이 있으면 아래 양식을 사용하여 알려주십시오.
