PSD to HTML5/CSS3

[Verwijderd]

Hoi,

Ik had graag enkele vraagjes hier geplaatst ivm HTML5 & CSS3. Reeds lange tijd maak ik zelf mijn PSD's die ik dan later omzet in een correcte HTML versie. However.....ik ben me nu aan het fixeren op HTML5 en het omzetten van PSD naar HTML5. Tot mijn teleurstelling kan ik nergens een redelijke uitleg vinden omdat men praktisch altijd gebruik maakt van een css framework ("Grid960"). Ik ben daar zelf geen fan van omdat ik het niet zo heb met frames. Vooral niet omdat ik vind dat mijn vrijheid een groot stuk weggenomen wordt hierdoor.


Kan iemand mij vertellen of in gang duwen hoe ik nu eigenlijk best de draad kan oppikken om PSD naar HTML5 om te zetten.

Met vriendelijke groeten,
Michaël

[MueR]

Hetzelfde als met HTML4. Er is niet veel veranderd hoor.

[RM-rf]

een framework is geen 'frames' maar levert gewoon een basisgrid met vaak een hop basiselementen die je in een zekere mate vrij kunt vormgeven.

het voordeel haal je dan in een goede schaalbaarheid, vaak ook responsive gedrag
http://www.designinfluences.com/fluid960gs/
Vaak is de werkwijze ook eerder gebaseerd op een opzet die gebaseerd is in wireframing ( Wikipedia: Website wireframe )


HTML5 is verder ook niet meer dan een beter semantische opzet van het aloude HTML 2.0 en 3.2 (en misschien een beetje een terugkeer naar duidelijke beschrijvende elementen, ipv steeds 'abstractere' als divs, span, iframe's, of de proprietaire ilayer en layer)

Overigens, ikzelf vind dat het gebruik van photoshop als basis voor designs voor web een risico in zich mee kan dragen dat een vormgever zich tezeer concentreert op pixels en 'statische' weergave..
Wat mogelijk in photoshop 'vrijhei' kan lijken kan in een weergave vervolgens in de browsers opeens een grote 'beperking' opleveren omdat deze browser veel minder pixel-georienteerd is en zeker bij zaken als verschillende clients en schermgrootte's tot allerhande andere conflicten kan leiden..

Het is imho een onjuiste instelling om te denken dat je vrij kunt ontwerpen in photoshop en je dan HTML+CSS moet gebruiken "om die psd om te zetten naar"...
beter is het een bepaald ontwerptool te gebruiken om uiteindelijk bewust een html-webseite te ontwikkelen en rekening te houden met de eigenschappen van dit medium

[NMe]

Dit nog naast het feit dat er helemaal niet "praktisch altijd" gebruikgemaakt wordt van Grid960?

De vragen die je stelt tonen eigenlijk vooral aan dat je amper tot niet weet wat HTML en CSS zijn. Het lijkt me handig als je even de focus legt op het leren van de basis daarvan en nog niet op de conversie vanuit Photoshop.

[Verwijderd]

NMe schreef op vrijdag 26 juli 2013 @ 10:56:
Dit nog naast het feit dat er helemaal niet "praktisch altijd" gebruikgemaakt wordt van Grid960?

De vragen die je stelt tonen eigenlijk vooral aan dat je amper tot niet weet wat HTML en CSS zijn. Het lijkt me handig als je even de focus legt op het leren van de basis daarvan en nog niet op de conversie vanuit Photoshop.

Ondanks het feit dat ik begrijp wat je bedoelt kan ik je vooral goed meteen duidelijk maken dat ik een heel goede kennis heb van HTML & CSS. Mijn vraag kwam gewoon uit een hoek van HTML5. Ik probeer mijn websites vanuit een Photoshop oog om te zetten in een HTML5 omgeving. Responsive Webdesign is mijn doel. Ik heb tal van websites gemaakt in HTML4, allemaal op de correcte manier. Wanneer ik nu probeer informatie in te winnen qua HTML5 dan stoot ik praktisch op elke website waarin men uitlegt op het gebruik van Grids. Ik wil dit gewoon niet gebruiken en daarom vraag ik jullie mening!

Dank je!

[NMe]

Responsive design heeft niets te maken met HTML5 en des te meer met javascript en/of mediaqueries in CSS. En sorry, maar als ik ga [google=differences html4 html5] dan vind ik helemaal niks over Grid. Sterker nog, wat ik ook intik, ik zie Grid helemaal niet voorbij komen. Waar zoek je dan op?

[Verwijderd]

NMe schreef op vrijdag 26 juli 2013 @ 16:29:
Responsive design heeft niets te maken met HTML5 en des te meer met javascript en/of mediaqueries in CSS. En sorry, maar als ik ga [google=differences html4 html5] dan vind ik helemaal niks over Grid. Sterker nog, wat ik ook intik, ik zie Grid helemaal niet voorbij komen. Waar zoek je dan op?

Ik stel mijn vragen wat verkeerd.

Ik zal ze korter stellen en ik zal zeggen wat ik gewoon wil bereiken.

Ik wil mijn PSD omzetten naar HTML5 (Responsive Design). Zodat alles correct zichtbaar is op diverse mediums. Wanneer ik zoek naar uitleg omtrent PSD to HTML5 dan zie je dat de meeste mensen het Grid systeem gebruiken. Ik wil me daartoe niet beperken. Dus mijn vraag was:" Wat is nu eigenlijk de correcte manier en waar kan ik daar mij in verdiepen?

Alvast bedankt voor de vele uitleg!

[ Voor 4% gewijzigd door Verwijderd op 26-07-2013 18:23 ]

[NMe]

Je moet helemaal niet zoeken op PSD to HTML5. Dingen uit je PSD halen doe je handmatig. Als jij daarop zoekt vind je vast allerlei tools die denken het voor je te kunnen doen.

Een beetje developer ziet een PSD en herkent daarin de delen die hij zonder plaatjes kan namaken, dingen waar hij plaatjes voor nodig heeft en hoe hij het geheel vervolgens met divs, articles, sections, etc. weer in elkaar kan zetten. Dát is wat je nodig hebt. Je wil dus (afzonderlijk!) zoeken hoe HTML5 je kan helpen, hoe je responsive design opbouwt en eventueel wat CSS3 te bieden heeft. Als je dat combineert in één zoekopdracht vind je op geen van je vragen antwoord.

[Verwijderd]

Dank je! Daarmee weet ik al veel meer!

[Ramon]

Het omzetten van PSD's naar templates is voor HTML5 niet wezenlijk anders dan voor HTML4. Het is een kwestie van plaatjes los uitknippen waar mogelijk. Iets is HTML5 als er een HTML5 doctype bovenstaat in feite. Je hoeft geen van de "nieuwe" tags te gebruiken. En omdat iets "framework" heet, betekent niet dat het "frames" gebruikt....

[Osxy]

Frameworks maken het werk wel vele malen makkelijker.'

Het bied een zeer sterke basis niet alleen voor de layout elementen maar zeker voor cross-browser compatibiliteit.
http://getbootstrap.com/

[Heftytastic]

Ik zou inderdaad kijken naar Bootstrap of Boilerplate.

Alleen wel een beetje gekke vraag. Slicen blijft Slicen ongeacht HTML5 of HMTL4