4개 문서로 구성된 이 모바일 웹 개발 시리즈에서는 Netbeans를 IDE(통합 개발 환경이라고도 함)로 설정하는 과정을 안내합니다. Ubuntu에서 모바일 친화적이고 반응성이 뛰어난 HTML5 웹 애플리케이션 개발을 시작하세요.
다음은 HTML5 모바일 웹 개발에 관한 4개 기사 시리즈입니다.
나중에 살펴보겠지만 잘 다듬어진 작업 환경, 지원되는 언어에 대한 자동 완성, 웹 브라우저와의 원활한 통합은 Netbeans의 가장 뛰어난 기능 중 일부라고 생각합니다.
또한 HTML 5 사양은 개발자에게 많은 이점을 제공했다는 점을 기억하세요. 몇 가지 예를 들자면, 많은 새로운 요소 덕분에 더 깔끔한 코드, 내장된 비디오 및 오디오 재생 기능(필요를 대체함) Flash의 경우), 주요 브라우저와의 상호 호환성 및 모바일 장치에 대한 최적화입니다.
처음에는 로컬 개발 시스템에서 애플리케이션을 테스트하겠지만 결국에는 웹사이트를 LAMP 서버로 이동하여 동적 도구로 전환할 것입니다.
그 과정에서 jQuery(클라이언트 측 스크립팅을 크게 단순화하는 잘 알려진 크로스 플랫폼 자바스크립트 라이브러리)와 Bootstrap(인기 HTML, 반응형 웹사이트 개발을 위한 CSS 및 JavaScript 프레임워크). 이러한 HTML 5 도구를 사용하여 모바일 친화적인 애플리케이션을 설정하는 것이 얼마나 쉬운지 기사를 통해 확인하실 수 있습니다.
이 간단한 시리즈를 마치면 다음을 수행할 수 있습니다.
여기에 설명된 도구를 사용하여 기본 HTML5 동적 애플리케이션을 생성합니다.
계속해서 고급 웹 개발 기술을 배워보세요.
그러나 이 시리즈에서는 Ubuntu를 사용하더라도 지침과 절차는 다른 데스크탑 배포판에도 완벽하게 유효합니다(Linux Mint, Debian, CentOS, Fedora 등 이름을 지정하세요.
이를 위해 우리는 일반 tarball(. tar.gz)를 설치 방법으로 사용합니다.
그러면 1부부터 시작하겠습니다.
우분투에 Java JDK 설치
이 튜토리얼에서는 Ubuntu 데스크탑이 이미 설치되어 있다고 가정합니다. 그렇지 않은 경우 계속 진행하기 전에 동료 Matei Cezar가 작성한 Ubuntu 데스크탑 설치 기사를 참조하십시오.
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로 이동하여 /usr/local/bin에 tarball을 추출합니다.
sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
우분투에 넷빈즈 설치하기
HTML5 및 PHP를 지원하는 Netbeans를 설치하려면 https://netbeans.org/downloads/로 이동하여 다운로드<를 클릭하세요. 또는 다음 wget 명령을 사용하여 표시된 대로 다운로드합니다.
Netbeans에서 제공하는 기본 템플릿을 사용하여 새 HTML5 프로젝트를 만들려면 파일 → 새 프로젝트 → HTML5 → HTML5 애플리케이션<으로 이동합니다. /강하게>. 프로젝트를 설명하는 이름을 선택하고 마지막으로 마침을 클릭합니다(현재 외부 사이트 템플릿이나 자바스크립트 라이브러리는 포함하지 마세요).
그런 다음 필요에 따라 사이트 루트에 폴더와 파일을 추가할 수 있는 Netbeans UI로 이동합니다. 우리의 경우 글꼴, 이미지, Javascript 파일(스크립트) 및 계단식 스타일 시트(스타일)에 대한 폴더를 추가하여 다음 기사의 콘텐츠를 더 잘 구성하는 데 도움이 됩니다.
폴더나 파일을 추가하려면 사이트 루트를 마우스 오른쪽 버튼으로 클릭한 다음 새로 만들기 → 폴더 또는 HTML을 선택합니다. 파일.
이제 몇 가지 새로운 HTML5 요소를 도입하고 페이지 본문을 수정해 보겠습니다.
및 는 각각 문서 또는 섹션의 머리글 또는 바닥글을 정의합니다.
은 문서의 주요 내용을 나타내며 중심 주제나 기능이 표시됩니다.
<그림>은 몇 가지 예를 들자면 이미지나 코드와 같은 독립된 자료에 사용됩니다.
은 요소에 대한 캡션을 표시하므로 태그 내에 배치되어야 합니다.
는 일반적으로 페이지 콘텐츠와 관련된 콘텐츠를 위해 예약되어 있습니다. CSS의 도움을 받아 사이드바로 배치할 수 있습니다(이에 대한 자세한 내용은 다음 기사에서 설명).
이제 다음 코드 조각을 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 linux-console.net</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의 다른 컨트롤을 자유롭게 실험해 보시고 질문이나 의견이 있으면 아래 양식을 사용하여 알려주시기 바랍니다.
