Com crear un projecte HTML5 bàsic a Ubuntu mitjançant Netbeans
En aquesta sèrie de 4 articles de desenvolupament web per a mòbils, us guiarem a través de la configuració de Netbeans com a IDE (també conegut com a entorn de desenvolupament integrat) a Ubuntu per començar a desenvolupar aplicacions web HTML5 adaptades per a mòbils i sensibles.
A continuació es mostren la sèrie de 4 articles sobre el desenvolupament web per a mòbils HTML5:
Un entorn de treball ben polit (com veurem més endavant), la compleció automàtica per als idiomes compatibles i la seva perfecta integració amb els navegadors web són, segons la nostra opinió, algunes de les característiques més distintives de Netbeans.
Recordem també que l'especificació HTML 5 va aportar molts avantatges per als desenvolupadors, per citar alguns exemples: codi més net gràcies a molts elements nous), capacitats de reproducció de vídeo i àudio integrades (que substitueix la necessitat de Flash), compatibilitat creuada. amb els principals navegadors i optimització per a dispositius mòbils.
Tot i que inicialment provarem les nostres aplicacions a la nostra màquina de desenvolupament local, finalment traslladarem el nostre lloc web a un servidor LAMP i el convertirem en una eina dinàmica.
Al llarg del camí, farem ús de jQuery (una coneguda biblioteca de Javascript multiplataforma que simplifica enormement l'script del costat del client) i Bootstrap (el popular marc HTML, CSS i JavaScript per desenvolupar llocs web responsius). Veureu els articles entrants com de fàcil és configurar una aplicació per a mòbils amb aquestes eines HTML 5.
Després de revisar aquesta breu sèrie, podreu:
utilitzeu les eines descrites aquí per crear aplicacions dinàmiques HTML5 bàsiques i
continua per aprendre habilitats de desenvolupament web més avançades.
Tanmateix, tingueu en compte que tot i que utilitzarem Ubuntu per a aquesta sèrie, les instruccions i els procediments també són perfectament vàlids per a altres distribucions d'escriptori (Linux Mint, Debian, CentOS, Fedora, si us plau).
Per a això, hem optat per instal·lar el programari necessari (Netbeans i el Java JDK, com veureu en un minut) utilitzant un tarball genèric (.tar.gz) com a mètode d'instal·lació.
Dit això, comencem amb la part 1.
Instal·lació de Java JDK a Ubuntu
Aquest tutorial suposa que ja teniu una instal·lació d'escriptori d'Ubuntu al seu lloc. Si no ho feu, consulteu Matei Cezar abans de continuar.
Com que la versió de Netbeans que es pot descarregar des dels dipòsits oficials d'Ubuntu està una mica obsoleta, baixarem el paquet del lloc web d'Oracle per obtenir una versió més nova.
Per fer-ho, teniu dues opcions:
Elecció 1: baixeu el paquet que inclou Netbeans + JDK, o
Elecció 2: instal·leu les dues utilitats per separat.
En aquest article triarem el número 2 perquè això no només significa una descàrrega una mica més petita (ja que només instal·larem Netbeans amb suport per a HTML5 i PHP), sinó que també ens permetrà tenir un instal·lador de JDK autònom en cas que el necessitem. un altre conjunt que no requereix Netbeans ni implica desenvolupament web (principalment relacionat amb altres productes Oracle).
Per descarregar JDK, aneu al lloc d'Oracle Technology Network i navegueu a la secció Java → Java SE → Descàrregues.
Quan feu clic a la imatge destacada a continuació, se us demanarà que accepteu l'acord de llicència i després podreu descarregar-vos la versió JDK necessària (que en el nostre cas és la tarball per a màquines de 64 bits). Quan us ho demani el vostre navegador web, trieu desar el fitxer en lloc d'obrir-lo.
Quan s'hagi completat la descàrrega, aneu a ~/Downloads i extreu el fitxer tarball a /usr/local/bin:
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Instal·lació de Netbeans a Ubuntu
Per instal·lar Netbeans amb suport per a HTML5 i PHP, aneu a l'ordre wget per descarregar-lo tal com es mostra.
A partir d'aleshores, seguiu les instruccions a la pantalla per completar la instal·lació deixant els valors predeterminats:
i espereu que finalitzi la instal·lació.
Creació d'un projecte bàsic HTML5 a Ubuntu
Per obrir Netbeans, seleccioneu-lo al menú Dash:
Per crear un projecte HTML5 nou amb la plantilla bàsica proporcionada per Netbeans, aneu a Fitxer → Projecte nou → HTML5 → Aplicació HTML5. Trieu un nom descriptiu per al vostre projecte i, finalment, feu clic a Finalitza (no inclogueu una plantilla de lloc externa ni biblioteques javascript en aquest moment):
A continuació, serem portats a la interfície d'usuari de Netbeans, on podem afegir carpetes i fitxers a la nostra arrel del lloc segons sigui necessari. En el nostre cas, això significarà afegir carpetes per a tipus de lletra, imatges, fitxers Javascript (scripts) i fulls d'estil en cascada (estils) per ajudar-nos a organitzar millor el nostre contingut en els propers articles.
Per afegir una carpeta o un fitxer, feu clic amb el botó dret a l'arrel del lloc i, a continuació, trieu Nou → Carpeta o fitxer HTML.
Ara introduïm alguns elements HTML5 nous i modifiquem el cos de la pàgina:
i
representa el contingut principal d'un document, on es mostra el tema central o la funcionalitat.
s'utilitza per a material autònom, com ara imatges o codi, per citar alguns exemples.
mostra un títol per a un element i, per tant, s'ha de col·locar dins de les etiquetes .
. Ara copieu el següent fragment de codi al vostre fitxer index.html a Netbeans.
SUGGERIMENT: no només copieu i enganxeu des d'aquesta finestra al vostre entorn de desenvolupament, sinó que preneu-vos el temps d'escriure cada etiqueta per visualitzar les funcions d'emplenament automàtic de Netbeans, que us seran útils més endavant.
!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>
Podeu veure la pàgina seleccionant un navegador web (preferiblement Firefox, com a la imatge següent) i fent clic a la icona Reproduir:
Ara podeu veure el progrés del vostre desenvolupament fins ara:
Resum
En aquest article, hem revisat alguns dels avantatges d'escriure les vostres aplicacions web amb HTML 5 i configurar un entorn de desenvolupament amb Netbeans a Ubuntu.
Ens vam assabentar que aquesta especificació del llenguatge introduïa nous elements i, per tant, ens oferia la possibilitat d'escriure codi més net i de substituir components que consumeixen recursos com ara pel·lícules Flash per controls integrats.
En els propers articles, presentarem jQuery i Bootstrap perquè no només pugueu utilitzar aquests controls i veure que les vostres pàgines es carreguen més ràpidament, sinó que també les podeu adaptar a mòbils.
Mentrestant, no dubteu a experimentar amb altres controls a Netbeans i feu-nos saber si teniu cap pregunta o comentari mitjançant el formulari següent.
