Stop worrying and start shipping with structured content

Transcript

1. © 2021 Contentful
   Stop worrying and
   start shipping with
   structured content
   Let's webinar!
   

   View Slide

2. © 2021 Contentful
   Salma Alam-Naylor
   @whitep4nth3r
   Stefan Judis
   @stefanjudis
   

   View Slide

3. © 2021 Contentful
   Housekeeping
   ● This webinar is being recorded; we will share
   the recording with all registrants — keep an
   eye on your inbox!
   ● Please add your questions in the Q&A box,
   we will answer them after the presentation
   during the Q&A session at the end
   ● To get in touch, write to us at
   team@contentfulmail.com
   

   View Slide

4. © 2021 Contentful
   We've come a
   long way!
   

   View Slide

5. © 2021 Contentful
   Old-school architecture
   Editing Interface
   Your website
   Old-school CMS
   HTML (CSS, and JS)
   Content, functionality and (!) look
   

   View Slide

6. © 2021 Contentful
   I had to set up the server and database.
   

   View Slide

7. © 2021 Contentful
   I had to set up the server and database.
   I had to maintain and update the CMS.
   

   View Slide

8. © 2021 Contentful
   I had to set up the server and database.
   I had to maintain and update the CMS.
   I had to scale the system when traffic rises.
   

   View Slide

9. © 2021 Contentful
   I had to set up the server and database.
   I had to maintain and update the CMS.
   I had to scale the system when traffic rises.
   I had to deal with customers breaking their websites.
   

   View Slide

10. © 2021 Contentful
    HTML-based editing
    HTML-based content
    editors (WYSIWYG) are
    not a scalable content
    solution.
    You can't reuse your
    content on other
    platforms or devices!
    It's error-prone.
    

    View Slide

11. © 2021 Contentful
    I didn't like it
    very much.
    Between us
    

    View Slide

12. © 2021 Contentful
    Old-school content management
    systems are not ready for the
    future of digital experiences!
    

    View Slide

13. © 2021 Contentful
    Yours truly
    “I want a CMS that's set up quickly, flexible
    and easy-to use.
    I should decide the tech stack!
    (and not my CMS)
    * because I like to use Hipster Development Stuff...
    

    View Slide

14. © 2021 Contentful
    Old-school architecture
    Editing Interface
    Your website
    Old-school CMS
    HTML (CSS, and JS)
    Content, functionality and look
    

    View Slide

15. © 2021 Contentful
    {
    "fields": {
    "title": {
    "en-US": "Hello world!"
    },
    "body": {
    "en-US": "This is hofftastic!"
    }
    },
    "metadata": {
    "tags": [
    {
    "sys": {
    "type": "Link",
    "linkType": "Tag",
    "id": "nyCampaign"
    }
    JSON APIs *
    Pure content
    Content platform architecture
    * Application Programming Interface
    

    View Slide

16. © 2021 Contentful
    Content platform architecture
    Content Delivery API (RESTful)
    Content Preview API (RESTful)
    Content Management API (RESTful)
    

    View Slide

17. © 2021 Contentful
    Content platform architecture
    Content Delivery API (RESTful)
    Content Preview API (RESTful)
    Content Management API (RESTful)
    GraphQL (CDA & CPA)
    

    View Slide

18. © 2021 Contentful
    Content platform architecture
    CMA
    

    View Slide

19. © 2021 Contentful
    Content platform architecture
    Developers
    

    View Slide

20. © 2021 Contentful
    Content platform architecture
    Developers
    

    View Slide

21. © 2021 Contentful
    Being digital is more
    than posts and pages!
    

    View Slide

22. © 2021 Contentful
    Structured content
    

    View Slide

23. © 2021 Contentful
    Structured content
    My project space
    

    View Slide

24. © 2021 Contentful
    Let's build something
    from scratch!
    (and we'll do it live!)
    

    View Slide

25. © 2021 Contentful
    Next.js + Contentful
    

    View Slide

26. © 2021 Contentful
    Take it away, Salma!
    

    View Slide

27. © 2021 Contentful
    What did Salma
    just build?
    

    View Slide

28. © 2021 Contentful
    The content model
    Title
    Slug
    Color
    Image
    Body
    

    View Slide

29. © 2021 Contentful
    The content
    Title
    Slug
    Color
    Image
    Body
    a reference link
    Some text and
    

    View Slide

30. © 2021 Contentful
    The content
    Title
    Slug
    Color
    Image
    Body
    a reference link
    Some text and
    Title
    Slug
    Color
    Image
    Body
    reference link
    Another
    

    View Slide

31. © 2021 Contentful
    

    View Slide

32. © 2021 Contentful
    Structured content makes content reusable.
    

    View Slide

33. © 2021 Contentful
    Structured content is
    scalable, reusable and
    platform-agnostic!
    

    View Slide

34. © 2021 Contentful
    ctfl.io/wanna-scale-up
    

    View Slide

35. © 2021 Contentful
    ctfl.io/richtext-tricks
    ctfl.io/render-links-in-richtext
    

    View Slide

36. © 2021 Contentful
    contentful.com/developers/
    

    View Slide

37. © 2021 Contentful
    contentful.com/fast-forward/
    

    View Slide

38. © 2021 Contentful
    Thank you!
    Let's do Q&A.
    Salma Alam-Naylor
    @whitep4nth3r | whitep4nth3r.com
    Stefan Judis
    @stefanjudis | stefanjudis.com
    

    View Slide