Desenvolupament i disseny web 101

desenvolupament web_101Voleu conèixer les bases del desenvolupament i disseny web? Impressionant …


Però hi ha un problema amb aquesta idea de pensament, o en alguns d’ells, realment …

  • Quin és l’objectiu de tenir un lloc web? Realment tothom en necessita un?
  • En cas afirmatiu, com es pot crear un lloc web de qualitat? O dit d’una altra manera, com s’aprèn el desenvolupament i el disseny web bàsics que us permetrien crear aquest lloc web de qualitat?
  • Més important encara, pot crear un lloc web de qualitat en el primer intent? O necessiteu anys d’experiència al vostre darrere, abans que pugueu esperar en qualsevol resultat sobre el temible?

Responguem tot això en això Guia per a principiants en desenvolupament i disseny web.

[Alerta spoiler. Sí, podeu crear un lloc web de qualitat al vostre primer intent.]

Què es recull en aquesta guia?

D’acord, primer, primer, ens complau que hàgiu llegit i que hagueu decidit provar el desenvolupament web. Aquí es mostra com es reproduirà:

Els capítols es presenten d’una manera molt senzilla, amb el contingut principal a l’esquerra i els ítems actuables a la dreta. Així:

Introducció de la guia: Capítol 1

Ara, com procedir:

  • Mentre llegiu la primera lectura: Us recomanem que llegiu tot el tema de dalt a baix. Això us donarà una bona visió del tema del tema de 10.000 peus i us ajudarà a comprendre les parts més importants del tema. També us proporcionarà eines i mètodes bàsics sobre com gestionar les tasques individuals.
  • Mentre esteu a la vostra segona lectura i més enllà: Utilitzeu el TOC i aneu a la part que més us interessi. A més, no dubteu a fer servir els botons de compartir al costat de cada capítol i enviar els enllaços a vosaltres mateixos o als vostres amics / seguidors que puguin estar interessats..

A punt? Anem al capítol 1.

Per a qui és aquesta guia?

Si voleu aprendre desenvolupament i disseny bàsics web, aquesta guia us ofereix. Sigui quina sigui la vostra motivació.

A més, no necessiteu cap coneixement tècnic previ per començar (excepte les “habilitats bàsiques web”). L’objectiu complet d’aquesta guia és ser una mena de curs “101” per a tots els interessats a construir llocs web i a aprendre desenvolupament web.

A continuació hi ha alguns motius habituals pels quals us pot interessar:

  • 1. Necessiteu un lloc web per al vostre negoci (i voleu veure si podeu crear-lo vosaltres mateixos).
  • 2. Voleu APRENDRE el desenvolupament web per passió o interès temporal (res dolent d’això).
  • 3. Necessiteu un lloc web per a l’escola.
  • 4. T’ESTUDIU a que un amic o membre de la seva família tingui el seu lloc web en línia.

L’idea principal que ens anirà guiant

Això és important! Si us plau, no ens enyoreu si sou un desenvolupador web avançat que ho llegeix, però la idea principal que ens guiarà durant tot el recurs web de desenvolupament i disseny 101 és:

“L’enfocament de la menor resistència”

Aquests són els tres principis del plantejament de menys resistència:

  • Ho som no descompondre les coses a nivell molecular. I.e. No anirem al detall de com funcionen els llenguatges de programació ni de com funciona un servidor web.
  • Ho som no reinventant la roda. I.e. si algú ja ha resolt un problema determinat i ha posat a la seva disposició la farem servir.
  • Ho som fent una solució senzilla impressionant, més que una solució complicada i aparentment més funcional i no comprensible.

CAPÍTOL 1: El Pla

La vostra idea, tipus de lloc web, nom de domini i allotjament.

Abans de configurar un lloc web, necessitareu un pla

Irònic com pot semblar: el xou dels anys 80 demostra “A-Team” ens ha ensenyat, un bon pla és un clau per a l’èxit.

Si ja teniu un lloc web assegut durant un temps, segurament estareu emocionats amb l’única idea d’aconseguir que finalment puguin llegir-los i navegar pels altres..

Vostè vol que el seu lloc web sigui impressionant. Probablement sabreu què serà fins a cert punt. O potser fins i tot tens el logo perfecte a punt.

Però …

Això no és en absolut on hauríeu de començar. Si comenceu amb expectatives preestablertes, això només us portarà a molta confusió en el camí i un resultat sub-par al final..

En canvi, penseu en el següent:

  1. Separeu-vos dels objectius tècnics que pugueu tenir. Com, per exemple, l’objectiu d’aprendre tecnologies de llocs web o determinats programes de llocs web.
  2. Fes-te una pregunta principal: “Per a què necessito el lloc?”

No es tracta de tu, sinó de l’objectiu del lloc.

Preguntes que necessiteu preguntar-vos abans de configurar el vostre lloc web

  1. Què pretén assolir el lloc?
  2. Quina serà la principal “cosa” presentada a través del lloc? (per exemple, la vostra empresa, un producte, les publicacions del vostre blog, etc.)
  3. El lloc web tindrà algun propòsit especial? (per exemple, una botiga de comerç electrònic, una cartera de fotògrafs, etc.)
  4. Qui és el públic objectiu?
  5. Per què els interessa el tema del lloc?
  6. Quin dolor resol el lloc per als membres de l’audiència individual?

Sobre aquestes tres últimes preguntes, anem a parlar durant un minut al públic …

Hi ha 2 regles principals per a la creació de llocs web. Aquí es troba la regla núm:

 El lector / visitant arriba primer. Són la persona principal que el vostre lloc web ha d’agradar.

En certa manera, el vostre lloc web no és vostre. Els seus.

(Regla núm. 2 discutirem en un minut.)

Oblidar-se d’aquesta senzilla pauta pot conduir-te d’una manera totalment equivocada fins al punt en què et trobes amb un lloc web que confon a tots els que l’envolten, però tu.

“Ugh! La gent no entén de què es tracta aquest lloc. Com poden ser tan ignorants? ” – acabes pensant. Però, segons resulta, l’ignorant éreu vosaltres.

L’única manera d’evitar-ho és crear el vostre lloc web tenint en compte el lector des del primer moment.

Així que … agafeu aquest paper i responeu totes les preguntes anteriors.

Un cop acabat, teniu el darrer conjunt de directrius sobre les quals actuareu mentre treballeu al vostre lloc web.

Aquestes respostes seran una eina excepcionalment potent a mesura que es vagi acompanyant. Podreu tornar-los quan tingueu alguna decisió sobre el vostre lloc web.

Hauríeu de fer * això * o * això *? Vés al full de respostes i esbrina. Heu d’utilitzar una barra lateral ampla o estreta? Vés a les respostes, esbrina quina és la possibilitat de ressonar amb el lector objectiu. I etc.

Noms de domini i allotjament web

Si voleu ser propietari d’un lloc web, necessiteu un nom de domini i un amfitrió web.

Bé, d’acord, tècnicament parlant, podeu crear un lloc web de prova tot al vostre propi ordinador i després executar-lo des d’un servidor web local (també instal·lat com a programari al vostre ordinador), però això no seria una solució útil per al 99% del casos, així que anem a saltar-lo.

Per tant, un amfitrió i un domini …

La mala notícia aquí és que tots dos costen diners.

La bona notícia … no es tracta de diners en el gran programa de coses. A més, a mesura que esteu aprenent, podeu fins i tot llançar diversos llocs web petits amb un nom de domini únic i sota un amfitrió web.

Però comencem al principi.

Hosts web:

  • En termes senzills, un allotjament web és on es troba el vostre lloc web i on els poden visitar els usuaris. En certa manera, els amfitrions web per a llocs web són com apartaments per a humans. Sota el capó, els amfitrions web són empreses que lloguen els servidors a canvi de diners (… petits apartaments per als vostres llocs web).
  • Per començar, es farà un pla d’allotjament estàndard compartit. Podeu obtenir els de qualsevol cosa a partir de 3 dòlars / mes. Aquí teniu una bona comparació d’amfitrions web populars. Consulteu-lo i decidiu quina d’aquestes empreses us sembla adequada. Tot i això, les nostres recomanacions van per a SiteGround, A2 Hosting i Dreamhost.

Dominis:

  • Si un amfitrió web és un apartament, un domini és l’adreça d’aquest apartament. Per exemple, el domini d’aquest lloc web és hostingfacts.com.
  • La manera de començar és triar el nom de domini desitjat i comprar-lo a un registrador. Aquí teniu una guia completa sobre com comprar un nom de domini i aquí teniu una llista de generadors de noms de domini.

 

Suggeriments i consells per triar un nom de domini

Està bé, per tant, anar a algun registrador de dominis i comprar realment un domini és una cosa, però com trieu el nom de domini adequat?

Hi ha un parell d’escoles:

  • Noms de domini de marca. Es tracta d’un domini format per paraules inexistents. Penseu, coses com Google.com o Yahoo.com. Abans que es presentessin aquestes empreses, aquestes paraules no significaven res. La desavantatge d’un nom de domini és que és… bé, altament marca, memorable, i és fàcil distingir el vostre lloc dels altres.
  • Noms basats en paraules clau. Es componen de paraules existents, que es col·loquen en una seqüència que descriu el propòsit del lloc. Penseu, coses com Pizza.com o StartBloggingOnline.com. Amb un nom de domini com aquest, els visitants podran predir amb precisió el tipus de lloc web que estan a punt de visitar. L’avantatge és que aquests dominis són generalment menys marcables.
  • Noms combinats. Es tracta de dominis de marca i de dominis basats en paraules clau. Penseu, Facebook.com o Copyblogger.com. Aquests noms suggereixen una part de la naturalesa del lloc web per al visitant, però segueixen sent molt marcables.

Algunes pautes generals independentment del tipus de domini que trieu:

  • Facilitar la memorització del domini.
  • Que sigui breu i senzill. Com més llarg sigui el domini, més confús és.
  • Obteniu un .com (si és possible). .Com és el principal “domini de primer nivell” disponible. No us conformeu amb res més.
  • Intenteu evitar guionets. Obteniu el vostre nom de forma única, com ara “cakerecipes.com”, en lloc de “cake-recipes.com”

Coses a tenir a punt després d’aquest capítol:

  • Un nom de domini.
  • Un amfitrió web.
  • El vostre full de respostes: els objectius del vostre lloc i com servirà per a l’audiència.

Necessiteu més ajuda? Aquí hi ha més lectura:

  • Per què allotjament compartit? En comparació dels principals tipus d’amfitrions
  • 10 coses que fan que un allotjament web sigui bo
  • 12 regles per triar el nom de domini adequat
  • Una guia completa de planificació de llocs web

CAPÍTOL 2: Disseny i trama de fil

Agafeu un paper i bolígraf i rasconeu juntament amb l’estructura del vostre lloc web

D’entrada, anem a la fase de disseny.

Primer aspectes, aquí es tracta de l’ètica del treball que passarem aquí:

  • Utilitzem bolígraf i paper el màxim temps que puguem i només aleshores canviem a l’ordinador. Creieu-nos, cada minut dedicat a treballar en el vostre disseny en paper és una hora que estalvieu una vegada que comenceu a afegir coses a l’ordinador.
  • Estem fent treballs iteratius … fem »comproveu els resultats» milloreu »comproveu els resultats» repetiu fins que no s’acabi.

Al capítol 1, esmentàvem alguna cosa que anomenem la regla nº 1 de creació de llocs web. Ara és el moment de la regla 2:

Regla nº 2 de la creació de llocs web:

Penseu en primer lloc el contingut.

El contingut és el que importa en un lloc web. No el disseny. Contingut.

La gent ve pel contingut. No vénen pel disseny. El disseny només és un vehicle per lliurar el contingut.

Mai no comenceu amb el aspecte del vostre lloc web. Comença amb el contingut. Contingut. Contingut. Contingut.

Què volem dir amb “contingut”? En resum, és el que volen obtenir els usuaris del vostre lloc web. Publicacions de blocs, productes a la botiga, fils de fòrum si creeu un fòrum, articles de notícies, la vostra oferta comercial i etc..

“De debò? Els aspectes reals no importen? ” – Demanes.

En lloc de bategar això, feu una ullada a aquesta pàgina:

Lloc web senzill

Aquesta senzilla pàgina web és, amb molt, la millor explicació de què és el disseny i per a què serveix la línia.

Recordeu-ne el contingut primer!

Contingut i estructura del lloc web

D’acord, per la qual cosa el contingut és el més important, cal que el tingueu (la majoria) a punt prèviament. O, almenys, haureu de tenir una bona idea de la quantitat de contingut que hi haurà i de quina forma.

Nota. Sabem que aquesta part pot ser dura. Començar amb contingut sembla poc natural pel disseny de llocs web, però realment és la millor manera d’obtenir un resultat excel·lent al final. Penseu, doncs, sobre el contingut que voleu compartir amb el lector i com voleu presentar-lo.

El següent pas és seleccionar els tipus de pàgines que necessiteu (com una pàgina d’inici, una pàgina de producte, una pàgina de categories, una pàgina sobre, una pàgina de contacte, la pàgina principal de vendes, alguna pàgina de destinació de subscripcions a butlletins, fitxa principal del bloc, publicacions individuals, potser una botiga i qualsevol cosa que sembli necessària).

Penseu, quina és la manera més eficaç d’organitzar el vostre contingut al lloc web?

Feu tot això en paper. Probablement us resulti més fàcil i ràpid que aprendre algun programari de dibuix de gràfics en aquest lloc.

Exemple:

estructura de contingut

Rastreu junts un fotograma

Una trama de disseny web en el disseny web és simplement un esquema de pàgina o un model: una guia visual que representa el marc d’un lloc web (la Wikipedia ens diu).

Els wireframes són fantàstics. Les utilitzem per a la majoria de coses que fem que estan pensades per aparèixer en línia. Per exemple, aquí teniu un fotograma per a aquesta guia:

Rastreu junts un marc de fil

Com veieu, de nou, es troba en paper. Tot i que hi ha diverses aplicacions per a aquest tipus de treballs, en realitat no aconsellem utilitzar-les. Pot ser que siguin excel·lents per a dissenyadors professionals, però un principiant o una persona intermedia només perdrà el temps aprenent-los i, al final, no obtindran gaire millores respecte al que aconseguirien mitjançant el bolígraf i el paper.

Així, com fer un fotograma?

Bé, hi ha dos enfocaments si ets un principiant:

  • Aneu amb el flux si us sentiu forts i aconsegueu atraure (no sempre una solució perfecta).
  • Obteniu uns coneixements ràpids sobre com fer un fotograma correctament (normalment millor).

Per a aquest últim, aneu aquí: una gran guia.

(Assegureu-vos de crear un fotograma de cada tipus important de pàgina que hàgiu indicat al pas anterior.)

Coses a tenir a punt després d’aquest capítol:

  • La major part del contingut del lloc o, almenys, la majoria previst (per exemple, si es basa en el contingut generat per l’usuari, serà difícil tenir-lo prèviament).
  • L’estructura de contingut del vostre lloc web està preparada com a gràfic.
  • Un quadre fotogràfic dels tipus de pàgines que necessitareu.

Per llegir més:

  • 9 passos per planificar el contingut del lloc web
  • Nou a disseny web? Comença aquí.

CAPÍTOL 3: UX i interfície d’usuari

Mai subestimeu la importància de l’experiència i de la interfície d’usuari

Com en, Experiència d’usuari i Interfície d’usuari.

WebDesignerDepot ens proporciona una definició força poètica de les dues coses:

La interfície d’usuari és la sella, els estreps i els regnes.

UX és la sensació que aconsegueixes muntar el cavall i cordar el bestiar.

Per a una definició més pràctica:

  • L’UI és el que veu l’usuari quan mira el vostre lloc.
  • UX és la seva sensació al respecte.

La parella, i el seu funcionament definit, bàsicament defineix la utilitat del vostre lloc web per a l’usuari final / visitant.

Tant el disseny d’UX com l’UI són temes importants per si mateixos, i hi ha molts elements més petits que tenen un paper important en el resultat final.

En resum, hi ha molt per aprendre si tot just comences el teu viatge.

Així que, en lloc d’intentar fer servir tot un curs de disseny d’UX i d’UI aquí, deixem-vos un detall d’elements importants i, a continuació, us enviem a un altre lloc per a més lectura..

Objectius dels usuaris

UX tracta d’objectius de l’usuari … No és tant dels teus objectius … Objectius de l’usuari.

D’acord, què vol dir això? En primer lloc, torneu al propòsit del vostre lloc web: el que heu treballat als capítols anteriors. El motiu pel qual creeu el lloc web i com ajuda aquest usuari / visitant.

Com es tradueix en l’objectiu del visitant? … Què és l’única cosa que el visitant vol obtenir o aconseguir quan arriba al vostre lloc? Aquest és el seu objectiu.

Què tan fàcils són d’aconseguir aquests objectius?

A continuació, centra’t en la següent pregunta:

  • El visitant pot assolir el seu objectiu fàcilment? – Poden arribar a la informació exacta a la qual van arribar de manera senzilla??

Per respondre a això, heu de tornar al vostre trame de filferro, a l’estructura de contingut i a les revisions.

Assegureu-vos que l’estructura del contingut i les pàgines que heu pensat tenen sentit des del punt de vista d’un usuari. Assegureu-vos que sigui possible navegar entre les pàgines importants lliurement i de manera no confusa.

Essencialment, aquí, ens assegurem que el lloc web doni valor als vostres visitants.

Difícil de comprendre tot això pel vostre compte, no ho és?

És molt recomanable que consulteu els recursos que figuren a la secció de “lectura posterior” d’aquest capítol … però també podeu provar “un pirateig”, per dir-ho.

És a dir, penseu en què us frustra quan visiteu llocs web similars als que voleu crear? Potser hi ha informació que és realment difícil arribar o algun element d’interfície que faci que el lloc sigui confús.

Preneu notes, traieu conclusions i no cometeu els mateixos errors amb el vostre lloc web.

L’ús de l’Emoció com a eina

Quan treballeu la interfície d’interès i la UX del vostre lloc, el que voleu bàsicament és invocar una certa emoció al vostre visitant.

Voleu que se sentin d’una manera determinada, cosa que els convençrà perquè actuïn d’una determinada manera. Per tant, el vostre lloc web és realment útil.

Per treballar la part emocional de la feina, una de les millors eines és el color.

Els colors tenen significats diferents en diferents cultures. Entendre aquestes diferències pot facilitar-vos la feina. Aquí teniu un bon full de trampes.

Una vegada que esteu al pal de ball de quins colors voleu (possiblement) utilitzar, aquí teniu un parell de directrius generals quan treballeu amb el color:

  • Trieu un esquema de colors principal format per un parell de colors que es combinen bé. Aquí teniu un gran generador d’esquemes de colors.
  • Trieu un color que serà el vostre accent d’accent: el color que s’utilitzarà per als botons d’acció, botons de compra i etc. Bàsicament, qualsevol cosa que necessiti l’atenció de l’usuari..

Tipografia

En molts casos, la tipografia és on es guanya (o es perd) el joc de creació de llocs web.

És tan fàcil oblidar-nos completament de la tipografia i fer servir només Arial per a tot.

No es recomana.

Avui dia, treballar amb tipus de lletra personalitzats és fàcil, i ni tan sols és necessari fer res tècnic per habilitar aquests tipus de lletra personalitzats al vostre lloc..

La tipografia gran i gran està molt de moda en aquests dies i també facilita la tasca d’un dissenyador, especialment el treball d’un dissenyador principiant.

Consulteu aquest lloc, per exemple:

bonobos

Heu notat res? Sí, els tipus de lletra són enormes i tenen un aspecte excel·lent!

Aquí teniu la manera de treballar:

  • En general, cada disseny de llocs web necessita dos tipus de text: títols i paràgrafs. En la majoria dels casos, només ho farà un tipus de lletra per cadascun.
  • Vés a Google Fonts: la biblioteca pròpia de fonts de Google gratuïta que podeu utilitzar al vostre lloc web i cerqueu un tipus de lletra que de debò us agradi.
  • Aleshores, agafeu el nom d’aquest tipus de lletra i busqueu-lo al parell de fonts. És una biblioteca de maridatges de lletra preconeguts que van junts.
  • Trieu un maridatge que sembli fantàstic.
  • Anoteu els noms dels dos tipus de lletra i els necessitareu més endavant.

Si ho feu d’aquesta manera, accelereu el vostre procés i encara us donarà un gran resultat.

Per exemple, hem trobat un tipus de lletra anomenat Bree Serif a les fonts de Google que ens agrada molt:

Bree-Serif

Aleshores, el vam portar a Font Pair i el lloc va suggerir que Bree Serif vagi bé amb Open Sans. Perfecte:

Bree-Serif-open-sans

L’estructura final

Finalment, l’últim pas!

L’objectiu complet d’aquest capítol és establir un disseny / estructura final que fareu servir per al vostre lloc. En aquest moment, hauríeu d’estar gairebé segur sobre les coses que voleu fer amb el vostre disseny i la interfície d’interès.

Coses a tenir a punt després d’aquest capítol:

  • Els seus objectius d’usuari figuren clarament.
  • El marc de filferro s’ha verificat dues vegades per assegurar-se que aquests objectius no siguin confusos.
  • L’esquema de colors seleccionat.
  • La tipografia es va esbrinar.
  • Tot el disseny / estructura / organització del lloc.

Per llegir més: 

  • Revista UX
  • UX Booth
  • La psicologia i l’emoció del color en el disseny web
  • Què és el disseny de l’experiència de l’usuari? Visió general, eines i recursos
  • Definició d’objectius de negoci intel·ligents per a un lloc web
  • 8 regles per crear una tipografia efectiva

CAPÍTOL 4: WordPress, HTML o Plantilles?

Decidiu quina ruta voleu fer servir: sistemes de gestió de contingut o codifiqueu-la des de zero

Aquí és on comença el treball real, brut i brut, a la mà!

Probablement també és la part més espantosa del procés (admet-ho!).

Per una vegada, és el moment adequat per deixar de banda la ploma i el paper i començar a treballar amb algun programari.

I a la porta, hi ha un munt de preguntes …

  • Hauria d’aprendre HTML?
  • Què passa amb CSS??
  • Les plantilles de lloc web HTML ja estan preparades per a mi?
  • Necessito aprendre un llenguatge de programació com PHP?
  • He sentit que WordPress és la manera de construir un lloc en aquests dies.
  • Vaig veure aquell anunci de Squarespace Super Bowl. Què passa amb això??
  • Com es diu això de Joomla? O Drupal?
  • i endavant i endavant.

La resposta a tots és que sí.

Com en, sí, podeu fer totes o totes aquestes coses i només us correspon decidir quin camí heu de triar.

El que intentem dir és que aquí no hi ha cap millor enfocament # 1. Tot depèn del grau d’implicació que voleu obtenir amb el desenvolupament de la web, de la quantitat d’elements bàsics de creació de llocs web que voleu aprendre, de la rapidesa que necessiteu d’un lloc de qualitat realitzat i de la personalització que desitge que sigui posterior..

Així, doncs, es mostra com procedirem a partir d’aquest capítol endavant Primer, tria la persona que et defineix millor:

  • a) Vull aprendre de què es tracta el desenvolupament web, tots els fonaments bàsics, tot el funcionament interior d’un lloc web i tots els mecanismes que fan funcionar un lloc web..
  • b) Vull aprendre a utilitzar un creador de llocs web fiable que s’encarregui de gestionar la major part de l’elevació pesada per a mi.
  • c) No sé què fer. Només vull un lloc web que pugui construir-me i que funcioni correctament.

Va respondre a)? Vés al capítol 5.

Va respondre b)? Vés al capítol 6.

Respost c)? No dubteu en veure aquest article i després tornar (us hauria d’ajudar a seleccionar el camí perfecte):

  • 8 millors plataformes de creació de blogs i creació de llocs web revisades … Cada plataforma es descriu juntament amb els seus avantatges i contres i el recurs també suggereix la millor elecció disponible (Wix o SB) per a les vostres necessitats específiques..

L’heu llegit? Genial! Així que quina de les persones de dalt us descriu millor – a) o b)?

Les eines que us poden resultar útils:

  • Gràfics: Paint.NET, Gimp, Pixlr.
  • Escriptura de codis: bloc de notes ++, TextWrangler, SublimeText.
  • Gestió del treball: Trello.
  • Disseny: esquemes de colors, fonts Google, les eines d’aquí.
  • Fotografia: Unsplash, AllTheFreeStock

CAPÍTOL 5: Introducció a HTML, CSS & Javascript

Com són els llocs web una realitat integrada

En aquest capítol, exposarem els fonaments bàsics del desenvolupament web, explicarem els termes més importants i us enviarem a alguns recursos específics per aprofundir els vostres coneixements i habilitats..

HTML

L’HTML és l’idioma dels llocs web. Cada pàgina web es crea o es converteix en HTML en algun moment.

Per exemple, per veure l’estructura HTML d’aquesta guia que llegiu aquí, només cal que premeu “Ctrl + U” al vostre teclat.

HTML defineix tots els blocs que veieu en una pàgina web. Al final del dia, per visualitzar qualsevol cosa en una pàgina web, s’ha de convertir en HTML.

Per aprendre HTML eficaçment, us aconsellem que us inscriviu en un dels cursos (gratuïts o de pagament) disponibles al web. Alguns dels millors es poden trobar a Codeacademy o Treehouse.

Per exemple, aquí hi ha una secció específica sobre Codeacademy tot sobre HTML i CSS.

Pàgina inicial del CodeCademy

Així, aquest és l’enfocament complet de l’HTML.

CSS

CSS, per saltar els avorrits detalls tècnics, és l’encarregat de dissenyar tot el que sigui visible a una pàgina web.

CSS agafa etiquetes HTML i, a continuació, estructura i els hi afegeix estil. Com ara: text en negreta, ajustaments de color, ombres, dissenys, fins i tot animacions, ara es fan principalment amb CSS.

Per a una millor comprensió de com funciona exactament, espereu a Codeacademy aquest curs ràpid.

Per obtenir més aprenentatge en profunditat, consulteu també les seccions CSS de Codeacademy o Treehouse.

JavaScript, jQuery, Bootstrap, etc.

JavaScript és un llenguatge de programació que us permet introduir algunes accions dinàmiques al vostre lloc web. Per exemple, podeu fer coses com validar formularis web o interactuar amb l’usuari d’una manera més senzilla sense haver de tornar a carregar la pàgina en la qual es troben. Aquí teniu un bon tutorial per w3schools.

Tenint això en compte, jQuery és una biblioteca JavaScript que permet crear coses avançades amb menys codificació. Molt útil per a un desenvolupador web. Més informació aquí.

Finalment, Bootstrap és un invent molt interessant. Inicialment introduït per Twitter, és bàsicament un entorn de front-end que accelera el procés de construcció d’un lloc web proporcionant la majoria dels elements comuns del lloc ja construïts. Sembla complicat, no??

Però no ho és. Feu un cop d’ull a aquest curs d’inici a Codeacademy (per cert, així és com vam aprendre originalment Bootstrap).

Coses a tenir a punt després d’aquest capítol:

  • Bàsicament, el primer esborrany del vostre lloc web HTML / CSS està completament creat. A partir d’aquí, podeu començar a iterar i millorar el resultat final.

CAPÍTOL 6: Plataformes de creació de llocs web

Configuració del primer lloc? Proveu plataformes de llocs web gratuïtes com WordPress, Joomla o Drupal

Capítol 6: Plataformes de creació de llocs web

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Hi ha més creadors de llocs web que hi pot donar un cop. (Si sou del tipus de persona que agita les coses.)

D’acord, bromes a part.

És evident que, si no teniu el desig d’aprendre a codificar les coses a mà, segurament són múltiples solucions que us poden ajudar.

Nota. Tingueu en compte que tot el que hem comentat als capítols 1-4 encara s’aplica aquí. Tot i que aneu amb una solució de creació de llocs que sigui un tipus de dispositiu, encara heu d’anar amb compte de fer que el producte final sigui agradable per als usuaris i que s’ajusti als objectius de tothom. Les eines de creació de llocs són exactament aquestes … eines.

Començant per les més fàcils d’agafar:

SquareSpace

L’única plataforma web que fa publicitat durant el Super Bowl.

En definitiva, una solució molt útil que pot utilitzar qualsevol persona. No calen habilitats prèvies.

Permet crear llocs web clàssics, blocs, fins i tot botigues de comerç electrònic fins i tot escriure una ressenya sobre ells. La interfície i tot el procés d’ús són molt fàcils de comprendre, a més dels nois de Squarespace ofereixen molts tutorials interessants. Consulteu-les aquí.

WordPress

Sincerament, ens encanta WordPress.

Moltes vegades, és la plataforma perfecta per construir un lloc web. Té l’equilibri perfecte entre complexitat i facilitat d’ús, i és bàsicament personalitzable.

Animació WordPress

Actualment, actualment és la plataforma de llocs web més popular de tots. Com ha compartit el creador de WordPress, Matt Mullenweg, WordPress pot acumular el 25% de tota Internet. Totes aquestes persones poden equivocar-se?

D’acord, així que per començar amb WordPress, bàsicament només necessiteu el vostre domini i hosting. El propi programa de WordPress és completament gratuït.

Per començar, no dubteu en seguir un d’aquests camins:

a) “El camí d’inici ràpid”

  • Vés aquí per conèixer la manera simplificada d’instal·lar WordPress i llançar el teu lloc en una tarda.
  • Trieu un tema gratuït del directori oficial; assegureu-vos que estigui en sintonia amb els objectius del vostre lloc i que la disposició / disseny no estigui lluny de la vostra estructura desitjada (l’ajustareu lleugerament).
    • Consulteu aquests dos recursos per aprendre a personalitzar un tema existent.
    • També podeu triar un tema premium polivalent que es pot ajustar mitjançant una interfície d’usuari útil (sense codificació). El tema X és un bon exemple de tal cosa.
  • Instal·leu alguns dels complements més populars i millors per obtenir funcions addicionals.

b) “El camí en profunditat”

  • Comença per aprendre WordPress mitjançant un curs en línia. Treehouse ofereix un lloc impressionant.
  • Trieu el vostre tema i els vostres complements tal i com heu dit anteriorment Alternativament, creeu el vostre propi tema des de la base.

Al final, WordPress és probablement la plataforma de webs més versàtil del mercat. Amb ell, podeu crear pràcticament qualsevol tipus de lloc web, no només blocs o llocs de negocis simples. A continuació, es mostra una llista de 47 (!) Maneres diferents d’utilitzar WordPress, només per pensar.

Joomla i Drupal

Tot i que són lleugerament diferents, Joomla i Drupal són sistemes de gestió de continguts excel·lents per a projectes web més avançats.

No són tan forts en el disseny, però són personalitzables i són capaços de manejar qualsevol tipus de lloc web que pugueu tenir previst..

De vegades, depenent de la complexitat del vostre projecte, potser requereixen molt més temps per dominar-ho i molts més esforços en això.

Per a una formació més àmplia, hi ha cursos impressionants a Lynda.com, tant per a Joomla com per a Drupal.

Coses a tenir a punt després d’aquest capítol:

  • El primer esborrany del vostre lloc web es va construir completament, independentment de si decidiu fer servir WordPress o alguna altra plataforma.
  • Assegureu-vos que estigui en sintonia amb els vostres objectius inicials, el públic objectiu i que ofereixi una bona UX.

CAPÍTOL 7: Disseny mòbil responsive

Més del 60% de les persones utilitzen mòbils i tauletes per navegar per la web

La resposta mòbil ara és un aspecte molt important de la creació de llocs web, probablement més que mai.

Aquí teniu el tema complet:

Bàsicament, ara mateix, hi ha més persones que utilitzen dispositius mòbils per accedir al web que mai. De fet, es calcula que ara hi ha més usuaris d’internet per a mòbils que no pas usuaris d’escriptori (75,1% enfront del 52,7%).

Però hi ha un problema.

No tots els dissenys de llocs web s’optimitzaran perquè es visualitzin en dispositius mòbils a la porta.

Alguns problemes comuns inclouen:

  • els tipus de lletra són massa petits,
  • el disseny en si no s’ajusta en absolut a una pantalla més petita,
  • o la tecnologia utilitzada per crear el lloc no està disponible en mòbil.

Aquí és quan entra en joc la idea de resposta mòbil.

Un lloc web sensible respon a l’entorn en què s’està veient. Si es tracta d’un ordinador d’escriptori, el lloc web es mostra d’una manera determinada. Si és un mòbil, es mostra d’una altra manera.

Aquí teniu una explicació millor: què és el disseny web sensible de Heck?

Així que el que cal fer ara seria comprovar i assegurar-se que el vostre lloc web funciona en dispositius mòbils. Utilitzeu els vostres propis dispositius per comprovar-ho, però també proveu la prova per a mòbils de Google o feu un salt a una eina com el Responsive Design Tester..

Si hi ha problemes, heu d’arreglar-los.

Algunes solucions:

  • Disseny web responsiu: com fer
  • Com fer que el lloc web respongui en uns 15 minuts

CAPÍTOL 8: reunir-ho tot

Ja coneixeu el bàsic, ara és el vostre torn

Manteniu-vos-hi, hi som gairebé!

Aquest és l’últim capítol del nostre recorregut força llarg.

En aquest moment, hauríeu de crear el vostre primer lloc web … Ja sigui amb WordPress, HTML / CSS construïts a mà, algun creador de llocs web o qualsevol altra eina que hagueu seleccionat per al treball..

En resum, felicitats! Però encara hi ha un parell de coses que val la pena fer:

  • Comproveu el doble de les coses que hem comentat als capítols 1 i 2. Assegureu-vos que els objectius funcionin efectivament per a l’usuari final i que el lloc web no sigui confús.
  • Valideu l’estructura de codi mitjançant el servei de validació de marques de W3C.
  • Comproveu si no hi ha cap problema de seguretat amb el lloc. Utilitzeu l’escàner de Sucuri per això.
  • Obteniu comentaris de la comunitat. Comproveu què pensen altres persones de la vostra feina. Els fòrums a Sitepoint poden ser bons per a això.

Si és la primera lectura d’aquest recurs, ara us animem a tornar-hi un parell de vegades i tractar-lo com a fitxer de referència per a la vostra formació més gran.

Com dèiem al principi, no dubteu a utilitzar el TOC i navegueu de capítol a capítol i recurs a recursos que cregueu adequats..

Per últim, som curiosos … quin és el vostre repte més gran quan es tracta de la creació de llocs web, el desenvolupament web o el disseny web? Si us plau, compartiu els comentaris o a través de Twitter. Tots som orelles!

Gràcies per llegir, sou impressionant!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map