Share
Welkom terug! In dit deel van de tutorial zullen we ons ontwerp coderen in HTML en enkele CSS-stijleigenschappen van Facebook illustreren die het native gevoel geven. Dus blijf bij mij, maak een kopje thee en blije codering!
Welkom bij deel 2 van ons ontwerp en codeer een native Facebook-app. In het laatste artikel hebben we achter de schermen gekeken naar enkele van de denkprocessen die betrekking hebben op het creëren van een native look and feel Facebook-app. Hoewel we niet uitvoerig ingegaan zijn op het daadwerkelijke ontwerp ervan in Photoshop; we hebben besproken hoe de ontwerpprincipes van Facebook u kunnen helpen bij het ontwerpen van uw app. Voor mijn voorbeeld heb ik ervoor gekozen om de webdesigntuts + blog opnieuw te creëren als een Facebook-app. Ik veronderstel dat je allemaal comfortabel genoeg bent in Photoshop om het te repliceren of op maat te maken om je eigen native look and feel-ontwerp te maken.
In dit deel van de tutorial zullen we dat ontwerp coderen in HTML en enkele CSS-stijleigenschappen van Facebook illustreren die het die native feel zullen geven. Dus blijf bij mij, maak een kopje thee en blije codering!
Het is altijd een goed idee om met een beetje planning vooraf te beginnen. Sommigen van jullie zullen je lay-out in Photoshop willen ontwerpen, terwijl sommigen van jullie die ervan overtuigd zijn dat ze direct van het draadframe naar de HTML / CSS-markering willen springen. Persoonlijk maak ik altijd graag wat ik eerst in Photoshop zal coderen, omdat het me een sterk visueel idee geeft van wat ik ga coderen. Het kan ook van pas komen in de toekomst als u uw app wilt updaten. Het kan veel eenvoudiger zijn om dingen in Photoshop te ordenen en te conceptualiseren dan in uw code-editor.
Soms print ik ook graag mijn draadframe en markeer de afmetingen erop met een pen. Dit maakt het leven ook gemakkelijker als ik dingen codeer. Als je doorgaat, weet ik zeker dat je met je eigen methoden en manieren van doen komt en een deel ervan is de beste manier vinden die bij je past.
De structuur van mijn map is als volgt (en dit is zowat mijn standaardmanier om dingen voor elk project in te stellen). U kunt uzelf een hoop tijd besparen door eenvoudig dit lege mapsjabloon op uw harde schijf te maken en het te kopiëren telkens wanneer u een nieuw project aanmaakt
Ontwerp en codeer een geïntegreerde Facebook-app
Voor dit project heb ik het HTML5-doctype gebruikt, waarvan ik denk dat de meeste van jullie het nu al hadden moeten uitproberen. Voor mijn CSS-reset heb ik een link gemaakt naar de CSS-reset van Yahoo vanuit hun YUI-bibliotheek. Als u niet bekend bent met een CSS-reset, kan deze in de meest eenvoudige vorm worden beschreven als:
een stylesheet om de inconsistenties van browsers te verminderen in zaken als standaardlijnhoogten, marges en lettergroottes van koppen, enz
Ik ga hier niet te gedetailleerd op ingaan in deze tutorial, maar u kunt hierover meer informatie vinden in de volgende sectie hieronder..
Na de reset heb ik vervolgens een link gemaakt naar mijn eigen CSS-bestand met de naam 'style.css'. Ik heb dit vervolgens gevolgd door de nieuwste include van jQuery en een include naar mijn eigen javascript-bestand dat ik 'myjava.js' heb genoemd (hoewel we dit bestand in het volgende deel van de tutorial zullen maken). Met dit bestand kunnen we onze filterzoekopdracht uitvoeren en de inhoud van onze paginatabbladen wijzigen
Tijdens het maken van de html-versie van onze Facebook-app wil ik alles in een wikkel plaatsen die 760px breed is. Dit is alleen maar om te zorgen dat ik binnen 760px blijf; de breedte van het canvas waarop Facebook je app toestaat om in te zitten. Ik verwijder deze wrapper en de CSS ervoor voordat ik deze in Facebook plaats.
Zodra we onze include en 'wrapper' hebben opgezet, is het tijd om door te gaan naar de belangrijkste bouwstenen van onze app. In dit voorbeeld is het relatief eenvoudig omdat we alleen de hoofd- en zijbalk-div's hebben. Hierop zullen we klassen van dezelfde naam toepassen. U zou, als u wilt, 'id's' kunnen gebruiken in plaats van 'classes', omdat deze div-instanties niet zullen worden herhaald. Iets waar ik altijd voor opga (hoewel ik zeker weet dat sommigen het daar niet mee eens zijn) is om lessen op de meeste items te gebruiken. Ik gebruik zelden id's. Ik merk dat dit het simpelweg voor mij eenvoudig houdt. Ik moet me nooit afvragen of ik iets een 'id' of een 'klas' heb gegeven. Dit kan opmerkelijk handig zijn, vooral als je jQuery begint te integreren in je apps. Hoewel u wel moet overwegen of het haalbaar is voordat u begint met coderen, hoeft u absoluut nergens id's te gebruiken.
Het is ook raadzaam om altijd uw markup-blokken te eindigen met een slotcommentaar waarin staat welk deel van de markup is voltooid. Op deze manier weet je waar elke sectie eindigt. Ik moet toegeven dat ik vrij laat was in het adopteren van deze techniek en achteraf gezien had ik mezelf vele uren kunnen besparen van mijn weg door opeenvolgende stapels code, om erachter te komen waar bepaalde blokken beginnen en eindigen.
- Allemaal
- Wat betreft
- Schrijf voor ons
- Andere blogs
Voor deze app vond ik het niet nodig om een header te gebruiken om alleen het logo te plaatsen, dus ik heb dit bovenaan de 'hoofdverdieping' div geplaatst in zijn eigen div met een klasse genaamd 'logo'. Dit wordt gevolgd door een ongeordende lijst voor de tabbladen. Ik heb de tabs een klassenaam gegeven; ja je raadt het al 'tabs'. Deze zullen fungeren als onze tabbladmenubalk die de verschillende pagina's van onze blog-app zal weergeven.
De pagina's van onze blog-app zijn verpakt in een div-container, die ik een klasse 'tab_container' heb gegeven. Hierbinnen heb ik dan vier divs (één voor elke tab / pagina). Ik heb ze alle vier een klasse 'tab_content' gegeven met elk een eigen klasse voor zijn positie binnen de pagina. De eerste tab heeft een extra klasse van 'tab1', de tweede 'tab2', de derde 'tab3' enz. Deze individuele klassennamen zullen worden gebruikt om ons te helpen bij het identificeren van elk tabblad in het volgende deel van de tutorial wanneer we het jQuery implementeren.
Accentsconagua
