이 시리즈의 마지막 글을 시작하면서 HTML 5와 모바일 친화/반응형 웹 개발의 중요성을 이해하셨기를 바랍니다.
선택한 데스크탑 배포에 관계없이 넷빈 강력한 IDE이며 함께 사용할 때 기본 Linux 명령줄 기술 및 에서 논의된 도구 3부, 많은 번거로움 없이 뛰어난 응용 프로그램을 만들 수 있습니다.
그러나 이 시리즈에서는 HTML 5 및 웹 개발의 기본 사항만 다루었고 귀하가 HTML에 어느 정도 익숙하다고 가정했지만, WWW 여기에서 공유한 내용을 확장할 수 있는 훌륭한 리소스가 가득합니다. 그 중 일부는 FOSS입니다.
이 마지막 가이드에서는 이러한 도구 중 일부에 대해 이야기하고 이를 사용하여 UI(사용자 인터페이스) 미화 작업을 진행해 온 기존 페이지에 추가하는 방법을 보여줍니다.
Font Awesome은 Bootstrap과 원활하게 통합될 수 있는 잠재력을 가진 아이콘/글꼴/css 완전한 툴킷입니다. 페이지에 다른 아이콘을 많이 추가할 수 있을 뿐만 아니라 CSS를 사용하여 크기 조정, 그림자 투사, 색상 변경 및 기타 여러 옵션을 추가할 수 있습니다.
그러나 CSS를 다루는 것은 이 시리즈의 범위를 벗어나므로 기본 크기의 아이콘만 다루지만 동시에 "조금 더 깊이 파고이 도구가 얼마나 멀리 갈 수 있는지 알아보십시오.
다운로드 글꼴 굉장 프로젝트에 통합하고 다음 명령을 실행합니다(또는 자유롭게 프로젝트의 Github로 이동하여 fontawesome zip 다운로드 브라우저를 통해 파일을 만들고 GUI 도구를 사용하여 압축 해제):
$ wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip.
(예, 도메인 이름은 실제로 포트어썸, 와 NS, 그래서 오타가 아닙니다).
$ fontawesome-free-5.15.4-web.zip의 압축을 풉니다. $ cp fontawesome-free-5.15.4-web/css/fontawesome.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles. $ cp fontawesome-free-5.15.4-web/webfonts/* /home/ubuntu/NetBeansProjects/TecmintTest/public_html/fonts.
그리고 추가 .css
우리가 했던 것처럼 페이지 상단의 참조 목록에 파일을 제이쿼리 그리고 부트스트랩 이전에 (모든 것을 입력할 필요가 없음을 기억하십시오. 프로젝트 탭에서 코드 창으로 이동):
가져 가자 쓰러지 다 예를 들어 탐색 모음의 목록:
좋아요, 맞죠? 기존의 내용을 교체하기만 하면 됩니다. UL 클래스
명명 된 드롭 다운 메뉴 맨 아래에 index.php 와 함께:
저를 믿으십시오 – 이러한 도구를 사용하는 방법을 배우는 데 시간을 투자하면 매우 보람 있는 경험이 될 것입니다.
로 그것 귀하는 인터넷이 제공하는 많은 도움을 받을 수 있는 자원에 대해 잘 알고 있어야 합니다. 웹 개발을 하는 것도 예외는 아니므로 다음은 애플리케이션을 조정하는 동안 유용할 것으로 확신하는 몇 가지 리소스입니다.
자바스크립트 코드를 다룰 때(예를 들어, 우리가 에서 했던 것처럼 jQuery로 작업할 때 2 부), 당신은 사용하고 싶을 것입니다 JSHint, 개발자가 오류 및 잠재적인 문제를 감지하도록 돕는 온라인 Javascript 품질 코드 검사기입니다. 그 함정을 발견했을 때, JSHint 위치의 줄 번호를 표시하고 문제를 해결하기 위한 힌트를 제공합니다.
확실히 좋아 보이지만 이 훌륭한 자동화 도구를 사용하더라도 누군가가 필요할 때가 있을 것입니다. 그렇지 않으면 코드를 살펴보고 수정 또는 개선하는 방법을 알려줍니다. 이는 공유를 의미합니다. 어떻게 든.
JSFiddle (온라인 자바스크립트/CSS/HTML 코드 테스터) 및 부트플라이 (같은 JSFiddle 하지만 부트스트랩 코드에 특화되어 있음)을 사용하면 코드 조각(또는 바이올린) 인터넷을 통해 매우 쉽게 공유할 수 있는 링크를 제공합니다(친구와 이메일을 통해, 소셜 네트워크 프로필을 사용하거나 포럼에서).
이 기사에서는 웹 응용 프로그램을 조정하기 위한 몇 가지 팁을 제공하고 앞으로 제공될 몇 가지 리소스를 공유했습니다. 막히거나 다른 한 쌍의 눈(하나가 아니라 여러 개)이 코드를 살펴보고 어떻게 될 수 있는지 확인하기를 원하는 경우 편리합니다. 향상.
다른 리소스도 알고 있을 수 있습니다. 그렇다면 다른 사람들과 자유롭게 공유하십시오. 테크민트 아래 의견 양식을 사용하여 커뮤니티에 문의하십시오. 그런데 이 기사에 제공된 콘텐츠에 대해 질문이 있는 경우 주저하지 말고 알려주십시오.
이 시리즈를 통해 모바일 친화적이고 반응이 빠른 웹 개발의 광대한 가능성을 엿볼 수 있기를 바랍니다.