Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Ontwikkelen

No description
by

Otto Jager

on 1 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Ontwikkelen

Een paar suggesties op het gebied van SEO:
Duidelijke sitestructuur
Duidelijke URL’s (bijv. map content of articles oid)
Unieke, nauwkeurige pagina-titels
Geoptimaliseerde code: Semantische HTML
Microdata
Alt-attribuut en longdesc-attribuut bij afbeeldingen
Sla afbeeldingen op in apart map.
Breadcrumbs
Google Webmaster Tools
XML Sitemap
HTACCESS of Robots.txt bestand
Links
Social media
Metatags (devaluated)
Ontwikkelen
van
websites

Wat is internet?
Geschiedenis van internet
Websites
HTML en CSS
CMS-en en Frameworks
Joomla!
WordPress
Bootstrap
Foundation
HTML5Boilerplate
SEO, Cookies en Beveiliging
Internet
Het Ontwikkelproces
Rollen
Ontwerp- en onderzoeksfase
Beeldvorming en onderzoek
Creëren look & feel
SEO-onderzoek
Functioneel ontwerp
Technisch onderzoek en ontwerp
Realisatiefase
Realisatie (uitvoering)
Testen
Onderhoud
Rollen:
Opdrachtgever
Accountmanager
Projectleider
(GUI) Designer
grafisch ontwerper
front-end designer
Front-end developer
Back-end developer
Begrippen:
Website
Webpagina
Domein
Homepage
URL: Uniform Resource Locator
Browser en render engine
Statische website
Dynamische website
Hosting
Planning van de ontwerp- en onderzoeksfase
Maak lijst van alle vragen waarop een antwoord moet komen.
Maak een lijst van werkzaamheden en wie wat gaat doen.
Maak een lijst van middelen die nodig zijn.
Maak een planning.

Beeldvorming en onderzoek
Doel en doelgroep
interview opdrachtgever
doel van de website
conversie
kritische succesfactoren
doelgroep, bezoekersprofielen
unique selling points
keywords
concurrenten
Inhoud
Wie?
Hoe?
Creëren look & feel
Creatief proces, brainstormen
Rekening houden met huisstijl (logo etc)
Moodboards, schetsen
Kleur, vorm, typografie
Structuurdiagrammen en/of flowschema’s (interactie)

Een mogelijke structuur van een Functioneel Ontwerp:
Inleiding
Doelgroep & Doelen
Scenario’s
Structuur en flow van de website
Navigatie (menu’s) op verschillende devices
Wireframes: Designs, functies en interactie per pagina
Search Engine Optimization (SEO)
Openstaande kwesties
Opmerkingen voor design & techniek
Afspraken met de opdrachtgever over de planning
Technisch onderzoek
CMS?
Kant-en-klare template of zelf een template maken?
Welke componenten / modulen zijn beschikbaar? Welke zijn nodig?
Zelf programmeren (met Frameworks)?
Welke Javascript-frameworks en API’s
Welke serverside-taal?
Welke aanvullende kennis nodig?

Technisch Ontwerp:
Architectuur van de site
Performance
Databasemodel
Authenticatie & Authorisatie
Koppelingen (bijv. iDeal)

Planning van de realisatiefase:
Maak lijst van op te leveren producten en deadlines.
Maak een lijst van werkzaamheden en wie wat gaat doen.
Maak een globale planning per week.
Ga niet op elkaar zitten te wachten!

Realisatie (uitvoering)
Allen:
Afspraken over communicatie en documentatie
Organiseer je applicaties
Maak lijst van inloggegevens (ftp, database, cms)!!
Designer:
Gedetailleerde ontwerpen van de webpagina’s
Losse elementen aanleveren
Developers:
Maak een testomgeving (alle gangbare browsers, devices en schermgroottes)
CMS?
Template kiezen of ontwikkelen
Geen CMS?
Van basisstructuur naar volledig functioneel!

Houd goed contact met de opdrachtgever!!
Testen kan als apart onderdeel worden gezien maar is bij webontwikkeling eigenlijk continu deel van het proces. Bij elk nieuw element moet getest worden hoe dit eruit ziet en functioneert in verschillende browsers en op verschillende schermgroottes.
Onderhoud
Technisch
Content

Designing
Mind Mapping
User Experience (UX)
Applicaties
Trends
Artwork
Responsive Design
Fonts
Programmeren
Bestandsnamen
HTML
CSS, primercss.com
Animate.css

HyperText Markup Language
Cascading Style Sheets
W3C
Client en server
XML, JavaScript, AJAX, jQuery, PHP, etc...

Applicaties
Voor Design:
Adobe: Photoshop, Illustrator
GIMP, Paint.NET
Gridset, Ghostlab (Apple), #grid
Voor Process:
Cage (cageapp.com)
Cloud...
Voor Artwork:
Adobe: Illustrator, Photoshop, Fireworks
Inkscape, Pixlr.com, MS Picture Manager, Screenhunter
Trends
• Responsive
o Mobile navigation toggle
• Retina display support
• Fixed headers (bijv. ishothim.com)
• Grote foto’s als achtergrond
• CSS3 effecten:
o Transparency
o Box shadow
o Animaties (transition)
• Keep it simple, focus on the core (product)
• Social media pictos
• Gedetailleerde illustraties
• Infinite scrolling
• Rotating slide shows
• Sliding webpage panels (bijv. cpeople.ru)
• Vertical navigation (bijv. riotindustries.com)
• One page design
• Full screen typography (bijv. whiteboard.is)
• Circular design elements (bijv. jetpeppers.com)
• CMS’s en API’s
Soorten images:
JPEG
GIF
PNG
TIFF
PSD
AI
SVG
Ontwikkel- en
testomgeving
Internet Explorer 8, 9 en 10,
Mozilla Firefox, Google Chrome, Safari en Opera.
mattkersley.com/responsive
keynotedeviceanywhere.com
Appache Ripple
Slowy App
Google Developer Tools
Mozilla Firebug
Chrispederick.com/work/web-developer
W3C validator
JSLint.com
Editors:
Dreamweaver
Notepad++
Komodo
Aloha
SublimeText
jEdit
jsbin.com
Brackets
FTP-clients
Dreamweaver FTP
FileZilla
Full transcript