Com embellir l'aplicació web HTML5 dinàmica amb eines en línia

Quan començo l'últim article d'aquesta sèrie, espero que hàgiu pogut entendre la importància d'HTML 5 i del desenvolupament web adaptat per a mòbils/responsive.

Independentment de la distribució d'escriptori que trieu, la part 3 us pot ajudar a crear aplicacions excel·lents sense gaire molèstia.

Tanmateix, tingueu en compte que només hem tractat els conceptes bàsics d'HTML 5 i el desenvolupament web en aquesta sèrie i hem suposat que esteu una mica familiaritzat amb HTML, però la WWW està plena de recursos fantàstics (alguns d'ells són FOSS) per ampliar el que fem. He compartit aquí.

En aquesta darrera guia, parlarem d'algunes d'aquestes eines i us mostrarem com utilitzar-les per afegir-les a la pàgina existent en la qual hem estat treballant Embellint la nostra interfície d'usuari (interfície d'usuari).

Embelliment de la interfície d'usuari del lloc web

Font Awesome és un conjunt d'eines complet d'icones/font/CSS que té el potencial d'integrar-se perfectament amb Bootstrap. No només podeu afegir moltes altres icones a les vostres pàgines, sinó que també podeu canviar-ne la mida, fer ombres, canviar de color i moltes altres opcions mitjançant CSS.

Tanmateix, com que tractar amb CSS està fora de l'abast d'aquesta sèrie, només tractarem les icones de mida predeterminada, però us animem alhora a aprofundir una mica més per descobrir fins on us pot portar aquesta eina.

Per descarregar Font Awesome i incorporar-lo al vostre projecte, executeu les ordres següents (o no dubteu a anar directament al Github del projecte i descarregar el fitxer zip fontawesome a través del vostre navegador i descomprimir-lo mitjançant les eines GUI):

$ wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip

(sí, el nom de domini és en realitat FortAwesome, amb una R, de manera que no és una errada).

$ unzip 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

I afegiu el fitxer .css a la llista de referències a la part superior de la nostra pàgina, tal com vam fer amb jQuery i Bootstrap anteriorment (recordeu que no heu d'escriure-ho tot, només arrossegueu el fitxer des de la pestanya Projectes a la finestra del codi):

Agafem la llista desplegable de la nostra barra de navegació, per exemple:

Bonic, oi? Tot el que cal és substituir el contingut de la ul class existent anomenada menú desplegable a la part inferior d'index.php amb:

<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>

Creieu-me: invertir el vostre temps a aprendre a utilitzar aquestes eines serà una experiència molt gratificant.

Com a persona informàtica, heu de conèixer bé els molts recursos d'ajuda que Internet ha posat a disposició. Com que el desenvolupament web no és una excepció, aquí teniu alguns recursos que estem segurs que us seran útils mentre ajusteu les vostres aplicacions.

Quan tracteu amb codi Javascript (per exemple, quan treballeu amb jQuery com vam fer a la part 2), voldreu utilitzar JSHint, un verificador de codi de qualitat Javascript en línia que té com a objectiu ajudar els desenvolupadors a detectar errors i problemes potencials. Quan es troben aquests errors, JSHint indica el número de línia on es troben i us dóna consells per solucionar-los:

Segur que sembla molt bé, però fins i tot amb aquesta gran eina automatitzada, hi haurà moments en què necessitareu que algú altre li faci una ullada al vostre codi i us digui com solucionar-lo o millorar-lo d'una altra manera, la qual cosa implica compartir-lo d'alguna manera.

JSFiddle (un provador de codi Javascript/CSS/HTML en línia) i Bootply (igual que JSFiddle però especialitzat en codi Bootstrap) us permeten desar fragments de codi (també coneguts com a violins) i us proporcionen un enllaç per compartir-los molt fàcilment a Internet (o bé per correu electrònic amb els teus amics, utilitzant els teus perfils de xarxes socials o en fòrums).

Resum

En aquest article, us hem proporcionat uns quants consells per ajustar les vostres aplicacions web i hem compartit alguns recursos que us seran útils si us quedeu encallat o voleu un altre parell d'ulls (i no només un, sinó molts) per fer-hi una ullada. el vostre codi per veure com es pot millorar.

És probable que també conegueu altres recursos. Si és així, no dubteu a compartir-los amb la resta de la comunitat Tecmint mitjançant el formulari de comentaris que trobareu a continuació i, per cert, no dubteu a fer-nos saber si teniu cap pregunta sobre el contingut presentat en aquest article.

Esperem que aquesta sèrie us hagi donat un cop d'ull a les grans possibilitats del desenvolupament web responsiu i adaptat per a mòbils.