Volg ons op Facebook Abonneer op onze RSS

Frontend-corner

[Begin] |1|2|3|4|5|6|7(8)  [Eind]
TDG
Door TDG (687 reacties) op 04-03-2012 11:45
Skull_kid edit: Titel veranderd van "website bouwen" naar "frontend corner"!

Ik ben begonnen een website te bouwen voor een band, maar had toen ik (2 dagen geleden) begon echt 0,0 ervaring ermee. Ik heb een toturial gebruik van 'how-to-build-websites.com' waar ik ook al helemaal doorheen ben gegaan, en heb eigenlijk wat hulp nodig
Ik heb geen hulp nodig wat betreft domeinen, uploaden ofzo, maar echt puur het schrijven van de site. ik gebruik als programma nu aceHTML freeware.

mijn idee was om een index links te hebben, daarboven het logo van de band, en bovenaan de pagina een soort van balk met de naam van de band / langwerpige foto. dus vierkantje linksboven in de hoek, en in de horizontale verlenging een balk met foto/naam, en in de verticale verlenging daarvan de index (duidelijk zo?).
Ik heb aan de hand van de tutorial wat bijelkaar getypt, maar helaas hield de tutorial er na de index mee op...
wat de tutorial me heeft opgebracht is dit: een CSS file waarin div id's staan voor de index en het 'blok tekst' wat de echte pagina wordt.
nu wil ik daar nog een div id toevoegen voor de balk bovenaan, en misschien een aparte voor dat logo links boven, maar dat is niet te doen als je niet weet waar je mee bezig bent
ook heb ik een paar links erin gelegd om bijv. naar de 'agenda' pagina of de 'contact' pagina te komen. dit zijn bij mij wel allemaal losse html files met elke keer dezelfde stukken code voor die balken erin, en ik verwacht dat dit veel makkelijker kan (dus één keer de index, topbalk, en zo definieren, en dan alleen de verschillende tekst blokken maken of zo....)
en dan natuurlijk alles mooi en aantrekkelijk maken.

ik zoek niet perse iemand die de hele site voor me gaat maken, want het is de bedoeling dat ik hem zelf bouw en update. tips en tricks zijn wel welkom.
Het liefst zou ik een paar links naar wat handige tutorials hebben, zodat ik weer wat meer kan uitproberen. als het mogelijk is iets waar verdergaat op de zelfde manier als ik nu begonnen ben.
als ieman zin heeft om de code die ik tot nu toe heb te bekijken, en op basis daarvan tips te geven, stuur maar een berichtje met je email erin.

Last edited on: 17-09-2015 14:08

Last edited on: 17-09-2015 14:09
ChrissieOne
Door ChrissieOne (4742 reacties) op 04-03-2012 12:06
Pastebin linkje met de code? Dat is makkelijker voor op-/aanmerkingen

Overigens heb ik nog wel 2 Html/Css 'workshops' (lessen van vorig jaar @ Hs Leiden) hier staan, misschien wil je die nog doorlezen?

Die 'dezelfde stukken code' kan idd met Css gefixd worden
There's no kill switch on awesome.
CrippledKiller
Door CrippledKiller (6581 reacties) op 04-03-2012 12:10
Handigste is de talen apart te leren... HTML en CSS eerst... Vervolgens wat je eraan wil toevoegen.
Vergeet niet dat het bouwen van websites echt een vak apart is.

Als je deze twee hebt kun je nog overwegen om met Javascript/jQuery en PHP aan de slag te gaan.
Maar dat is alweer voor een heel stuk verder in de toekomst.

Je kunt je code naar mij toe sturen/mailen, kan ik er als professional eens naar kijken.
Overigens raad ik sterk aan iets anders dan een profilerend pakket te gebruiken.
Mijn voorkeur gaat momenteel heel sterk uit naar PHPstorm, anders dan de naam doet vermoeden kun je hier vrijwel alle talen in schrijven, en wordt je code in kleur weergegevens waardoor alles een stuk makkelijker gaat.


Danny's Hardcore Cafe: https://www.youtube.com/channel/UCB9oBtkioMbjtpGC0Z4m3rQ
Skull_kid
Door Skull_kid (39435 reacties) op 04-03-2012 12:20
Rol: Forum Moderator
Hey TDG. Flinke onderneming als je er nog niets van weet/wist! Wel leuk hoor.

Probeer w3schools eens. Die hebben echt hele goede tutorials en daar kan je echt heel veel leren. Zo kan je elk voorbeeld live bekijken en wijzigen, om te zien wat er gebeurt als je iets weghaalt.

Ik raad je wel aan om het design eerst (ruw) in Photoshop ofzo te maken, zodat het makkelijker is om om te zetten. Voor mij is het namelijk niet helemaal duidelijk wat je wil doen met die topbalk.

Even over die
:
Elk tekstblok en elke afbeelding kan zijn eigen id hebben. Heb je één ID die je voor meerdere blokken wil gebruiken, dan moet je voor een class gaan ipv een id.

Stel: Je hebt één blok dat je
geeft, dan spreek je die aan in je CSS door dit te typen:

#tekstblok {
color: red; // lettertype kleur
}


Gebruik je twee blokken, die dezelfde stijl moeten hebben, dan gebruik je
. In CSS vervang je dan de # voor een punt.

Het wordt dan dus:

.tekstblok {
color: red; // lettertype kleur
}


Wil je een ID aanspreken, gebruik dan #
Wil je een class aanspreken, gebruik dan .

Verder kan je oneindig veel classes en id's gebruiken.

Hoop dat je daar wat mee kan

Edit: Ik gebruik trouwens gewoon een simpele text-editor (BBedit) om in te programmeren Ben nu bezig om een complete app te programmeren voor Flabber. Dit doe ik in HTML5, CSS3 en Javascript/Ajax/Jquery.
❍ᴥ❍
CrippledKiller
Door CrippledKiller (6581 reacties) op 04-03-2012 12:32
@Skull, heb ja daarmee ook support voor oudere browsers of hoe denk jij daarover?
Al die verschillende platforms is echt waardeloos.

Overigens is je uitleg helemaal prima!

Mocht een class of ID nou niet werken dan is er een conflict in je CSS... Kun je dan oplossen door de ID of Class van het element waar je object in staat ervoor te zetten

.parent #afbeelding
{ /*css hier */}

#afbeelding
{ /*css hier */ }

In dit geval werkt de CSS in #afbeelding niet als de eigenschap al gedefinieerd is in .parent #afbeelding.
Er is een heel puntensysteem voor CSS waarbij je kunt zien welke selectors hoeveel waard zijn, maari n basis komt het hier op neer:

Element (div, p, a, enz): 1pnt
.class (.div, .link, etc): 100 pnt
#id (#afbeelding): 1000 pnt
Danny's Hardcore Cafe: https://www.youtube.com/channel/UCB9oBtkioMbjtpGC0Z4m3rQ
TDG
Door TDG (687 reacties) op 04-03-2012 13:52
thanks allemaal.
@skull kid: in photoshop kan ik nog minder dan in paint
Ik doe normaal niet zo veel achter mijn pc. Ik heb wel een ruwe layout in mijn hoofd zitten. Ik ga die w3 site maar eens helemaal doorspitten.

@chrissie: ik zal eerst al die tutorials hierboven gaan doorkijken, dan weer wat proberen te coderen, en dan wel eens uploaden wat ik dan heb.
extra lessen/workshops zijn altijd handig. ik stuur je een bericht met mijn mail adres!

@crazydance: javascript zag ik idd al voorbijkomen in een andere tutorial, maar html en css zijn voor de komende tijd meer dan genoeg. ik zal kijken of ik wanneer ik wat meer getypt heb met behulp van die w3 site, ik de code kan uploaden op de manier die chrissie noemde.
TDG
Door TDG (687 reacties) op 04-03-2012 21:55
ok specifieke vraag:

ik heb een aantal boxen gebouwd die ik op elke pagina van mijn site exact hetzelfde wil hebben. ik geef ff als voorbeeld de index:
in mijn CSS file staat

#navigation (=index dus)
met alle properties daarvan, dus absolute locatie in pixels, borders enzo.

nu staat er in elke html pagina dit:


maar dan met wat meer items erin

kan ik ipv dit op elke pagina te moeten zetten, die allemaal gewoon 1x in de CSS file zetten? en hoe doe ik dat...
ktugach
Door ktugach (21786 reacties) op 04-03-2012 21:58
Rol: Administrator
Normaal gesproken stop je dat in een apart bestand en doe je een include van dat bestand via php of iets dergelijks, dan hoef je het niet op elke page te zetten en kun je het in 1x aanpassen.
TDG
Door TDG (687 reacties) op 04-03-2012 22:33
Quote:
Normaal gesproken stop je dat in een apart bestand en doe je een include van dat bestand via php of iets dergelijks, dan hoef je het niet op elke page te zetten en kun je het in 1x aanpassen.
Gepost door: ktugach op 04-03-2012 21:58

php ken ik niet
heb je een link naar een tutorial of zo waar dat beschreven staat?
Syphrone
Door Syphrone (4274 reacties) op 05-03-2012 10:44
Waarom niet een CMS systeem gebruiken?
Zoiets als Joomla ofzo. Stukken gemakkelijker en ziet er ook vaak snel professioneel uit.
CrippledKiller
Door CrippledKiller (6581 reacties) op 05-03-2012 11:12
Voor het leren van HTML/CSS zou ik er niet direct een complex CMS als Joomla, Wordpress of welk ander systeem ook bij betrekken. Het is handiger om eerst een hoop testpagina's te maken, en vervolgens een CMS er tegenaan te plakken.
Danny's Hardcore Cafe: https://www.youtube.com/channel/UCB9oBtkioMbjtpGC0Z4m3rQ
Skull_kid
Door Skull_kid (39435 reacties) op 05-03-2012 11:21
Rol: Forum Moderator
Quote:
[..]

php ken ik niet
heb je een link naar een tutorial of zo waar dat beschreven staat?
Gepost door: TDG op 04-03-2012 22:33

Voor PHP moet je een server hebben (lokaal of online), anders kan je het niet uitvoeren. Vandaar dat het momenteel voor jou het makkelijkste is om gewoon in elk html bestand het stukje te copy/pasten.
❍ᴥ❍
EPMD
Door EPMD (7552 reacties) op 05-03-2012 13:57
Probeer gewoon eerst Xhtml en CSS onder de knie te krijgen.

Je gaat alles natuurlijk niet in een dag een week of een maand leren. Deze dingen nemen veel tijd in beslag. Maar met vallen en opstaan kom je er wel.

Xhtml en CSS leer je vooral door veel te doen en te oefenen. Fouten maken zal je zeker. Maar daar ga je uiteindelijk alleen van leren.

Ik ben zelf een Designer met 7 jaar ervaring. Als je deze opdracht liever wil uitbesteden kan je me altijd een PM sturen. Er valt altijd wel iets te regelen.

Ik zou zeker de site van w3schools bekijken. Elke webdeveloper is wel op die site begonnen. Voor de rest kan ik http://css-tricks.com/video-screencasts/ aanraden. Staan een hoop videos met css tips. Niet voor echte beginners.. maar als je de basis van xhtml/css onder de knie hebt.. Zou ik zeker even een kijkje nemen.
Syphrone
Door Syphrone (4274 reacties) op 05-03-2012 15:16
Quote:
Voor het leren van HTML/CSS zou ik er niet direct een complex CMS als Joomla, Wordpress of welk ander systeem ook bij betrekken. Het is handiger om eerst een hoop testpagina's te maken, en vervolgens een CMS er tegenaan te plakken.
Gepost door: Crazydance op 05-03-2012 11:12

Ik weet niet of het zijn uiteindelijke bedoeling is om html en css te leren.
Hij schrijft alleen dat hij een site wil bouwen voor een band.

En dan kun je echt veel makkelijker Joomla of iets dergelijks gebruiken.
Ik heb zelf kennis van HTML, CSS en PHP maar begonnen bij Joomla en tegenwoordig ook gewoon teruggeswitch erheen omdat het stukken eenvoudiger is.
Waarom een hoop moeite doen als het niet perse die manier hoeft.

Daarnaast neem ik aan dat die band ook nieuws wil gaan plaatsen op de site en daarvoor is denk ik html nogal onhandig en omslachtig. Daarvoor zul je al PHP moeten gaan gebruiken om het een beetje makkelijker te maken.
Dan zul je dus ook die kennis bij moeten spijkeren en dat is geen dag werk.

Waarom dus niet Joomla of wordpress of iets dergelijks
EPMD
Door EPMD (7552 reacties) op 05-03-2012 15:39
Quote:
[..]

Ik weet niet of het zijn uiteindelijke bedoeling is om html en css te leren.
Hij schrijft alleen dat hij een site wil bouwen voor een band.

En dan kun je echt veel makkelijker Joomla of iets dergelijks gebruiken.
Ik heb zelf kennis van HTML, CSS en PHP maar begonnen bij Joomla en tegenwoordig ook gewoon teruggeswitch erheen omdat het stukken eenvoudiger is.
Waarom een hoop moeite doen als het niet perse die manier hoeft.

Daarnaast neem ik aan dat die band ook nieuws wil gaan plaatsen op de site en daarvoor is denk ik html nogal onhandig en omslachtig. Daarvoor zul je al PHP moeten gaan gebruiken om het een beetje makkelijker te maken.
Dan zul je dus ook die kennis bij moeten spijkeren en dat is geen dag werk.

Waarom dus niet Joomla of wordpress of iets dergelijks
Gepost door: Syphrone op 05-03-2012 15:16

Om een Layout ontwerp naar Joomla of Wordpress te omzetten, heb je bijna tot geen PHP kennis nodig. CSS en Xhtml is echter wel belangrijk.

Je kan zonder XHTML/CSS/Photoshop kennis natuurlijk ook wel een website maken via Joomla. Maar dan wordt het zo een standaard theme die velen al hebben (of je moet een theme aanschaffen, maar ook die zijn meestal niet uniek).

Als je gebruikt wil gaan maken van een CMS. Kan ik je Joomla aanraden. Wel wat lastiger onder de knie te krijgen dan Wordpress. Maar Wordpress wordt meer gebruikt voor Blogs. En Joomla is uitgebreider.

Je kan ook naar Drupal kijken, maar dat is meer voor complexe websites.

Maar goed, ik zou gewoon eerst beginnen met CSS en XHTML. In ieder geval succes ermee.
Skull_kid
Door Skull_kid (39435 reacties) op 05-03-2012 15:48
Rol: Forum Moderator
Wordpress is ook prima te gebruiken als CMS systeem. Ik ken websites die gewoon Wordpress gebruiken, maar echt verre van blog zijn.

Misschien handig als TDG even uitlegt wat ie precies wil:
- Het leren van HTML en CSS en een bandwebsite als oefening maken.
of
- Het opzetten van een simpele website voor zijn/een band en verder HTML en CSS niet willen leren

Dan kunnen we van daaruit weer verder reageren en helpen
❍ᴥ❍
TDG
Door TDG (687 reacties) op 05-03-2012 19:58
Quote:
Wordpress is ook prima te gebruiken als CMS systeem. Ik ken websites die gewoon Wordpress gebruiken, maar echt verre van blog zijn.

Misschien handig als TDG even uitlegt wat ie precies wil:
- Het leren van HTML en CSS en een bandwebsite als oefening maken.
of
- Het opzetten van een simpele website voor zijn/een band en verder HTML en CSS niet willen leren

Dan kunnen we van daaruit weer verder reageren en helpen
Gepost door: Skull_kid op 05-03-2012 15:48
ik mis optie 3:
altijd al HTML en CSS willen leren, maar nooit een reden gehad hebben om eraan te beginnen. Nu is die reden er dus.
Het liefst wil ik binnen korte tijd zelf een fatsoenlijke website bouwen die online komt te staat voor de band, en dan gewoon verder gaan met HTML CSS (PHP?) leren, en de site verbeteren/updaten, en wellicht wat meer sites bouwen.
Dus wat dat betreft lijkt optie 1 er het meest op, behalve dat 'de band' echt een site wil, dus het meer dan alleen oefening moet zijn.
TDG
Door TDG (687 reacties) op 13-03-2012 20:17
chrissie: bedankt voor de workshops!
ze kwamen in mijn ongewenste berichten dus heb ze pas een week nadat je ze gestuurd hebt gezien.

Kan iemand mij vertellen waarom dit niet werkt?
Ik heb een mp3 bestandje (dat 'nummertje' heet in dit voorbeeld)in dezelfde map staan als dit deel van de pagina. op Internet Explorer doet ie het, op Firefox niet. waarom...?







EDIT: heb het gevonden! Ligt dus niet aan mijn code, maar aan firefox. die kan blijkbaar geen mp3 afspelen, maar wel .ogg
Ben nu alles aan het omzetten
CrippledKiller
Door CrippledKiller (6581 reacties) op 13-03-2012 21:28
overigens is de 'audio' tag onderdeel van HTML5. Internet explorer 8 en 7 ondersteunen dat zowiezo niet.
Als je dat wel wilt kun je dat vervangen door 'object', 'embed' of een player gebaseerd op flash zoals flowplayer oid.

Maar het kan natuurlijk ook een keus zijn.
Danny's Hardcore Cafe: https://www.youtube.com/channel/UCB9oBtkioMbjtpGC0Z4m3rQ
TDG
Door TDG (687 reacties) op 13-03-2012 22:57
makkelijker is meestal beter. Nu gebruik ik dus een .mp3 en .ogg file. Kan het met minder, maar dat hij toch afgespeeld wordt door alle browsers?

Maar nu een belangrijkere vraag:
Wat is de beste manier om goed foto's op internet weer te geven?
De site wordt voor een band, dus er komen meerdere 'mappen' (=meerdere optredens) met elk een heleboel foto's.

Ik was begonnen met een tabel, maar als je dan voor elke foto een thumbnail moet gaan maken enzo ben je echt veel te lang bezig.
Wat is de snelste manier om een fatsoenlijk fotoalbum o.i.d. op een site te zetten? Snelheid is een MUST, aangezien ik nu al 300+ foto's heb die erop moeten, en dat er alleen maar meer worden...
Het kunnen bekijken van aparte mappen/optredens moet ook kunnen.
LDawg
Door LDawg (50 reacties) op 14-03-2012 09:08
Een fotoalbum maken? Dat is best ingewikkeld voor als je nog maar net een beetje html en css kunt. In jou geval kun je het beste externe software hiervoor gebruiken, zoals Picasa van Google ofzo.

Ik ben het met Syphrone eens, download een cms en pas die zo aan dat hij aan je wensen voldoet. Daar zit vaak een fotoalbum ingebouwd die automatisch thumbnails voor je maakt en de fotos verdeeld in aparte albums. Vervolgens kun je zelf de layout veranderen van de website, waar je html en css voor nodig hebt, zodat je toch veel leert hierover.
Download de Budgetgaming Windows Phone app: http://www.budgetgaming.nl/nieuws/2883/budgetgaming-windows-phone-app-vanaf-vandaag-beschikbaar.html
[Begin] |1|2|3|4|5|6|7(8)  [Eind]