Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stop worrying and start shipping with structured content

Stop worrying and start shipping with structured content

Contentful Webinars

September 23, 2021
Tweet

More Decks by Contentful Webinars

Other Decks in Business

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
    [email protected]

    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