{"id":249,"date":"2026-05-02T21:15:00","date_gmt":"2026-05-02T21:15:00","guid":{"rendered":"https:\/\/www.francescomazzarella.eu\/?page_id=249"},"modified":"2026-10-05T12:38:47","modified_gmt":"2026-10-05T12:38:47","slug":"siti-web-strumenti-digitali","status":"publish","type":"page","link":"https:\/\/www.francescomazzarella.eu\/en\/siti-web-strumenti-digitali\/","title":{"rendered":"Websites and digital tools"},"content":{"rendered":"<style>\n\/* FM Navigazione gestisce il menu: annulla il vecchio spazio riservato al menu interno *\/\n.fm-inner-page{\n  padding-top:0 !important;\n}\n@media (max-width:768px){\n  .fm-inner-page{\n    padding-top:0 !important;\n  }\n}\n<\/style>\n\n<div class=\"fm-inner-page\">\n<section class=\"fm-page-hero\">\n    <div class=\"fm-container\">\n      <div class=\"fm-page-hero-content\">\n        <span class=\"fm-kicker\">Websites and digital tools<\/span>\n        <h1>Websites and digital tools that bring clarity, simplify work and help people work better<\/h1>\n        <p class=\"fm-page-subtitle\">\n          I design websites, landing pages, automations and small bespoke tools for professionals, associations, communities and organisations. Technology should not add complexity. It should solve a real problem and remain manageable for the people who use and maintain it.\n        <\/p>\n        <a href=\"#soluzioni\" class=\"fm-btn fm-btn-primary\">Explore the solutions<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"fm-section fm-section-light\">\n    <div class=\"fm-container\">\n\n      <div class=\"fm-two-columns\">\n        <div class=\"fm-card fm-card-text\">\n          <span class=\"fm-kicker\">Before choosing the tool<\/span>\n          <h2>What should it make possible?<\/h2>\n\n          <p>\n            A website should be more than an online brochure. It can help an organisation present itself, become easier to find, receive relevant enquiries, promote a programme or simplify a task.\n          <\/p>\n\n          <p>\n            Every project therefore begins with a practical question:\n            <strong>what kind of relationship should this space create?<\/strong> Should it inform, welcome, guide, collect enquiries, promote a programme, support an activity or make a process simpler?\n          <\/p>\n\n          <p>\n            Only then do we choose the structure, design and technology, checking that the solution works on mobile, is accessible and can grow over time.\n          <\/p>\n        <\/div>\n\n        <div class=\"fm-card fm-card-highlight\">\n          <span class=\"fm-kicker\">Independence<\/span>\n          <h2>The project should remain understandable and manageable<\/h2>\n\n          <p>\n            A good solution does not make a client dependent on its developer. It should be documented, suited to the user's skills and easy to update without every change becoming a problem.\n          <\/p>\n\n          <p>\n            That is why I distinguish what is essential for launch, what can be added later and what would merely introduce costly complexity.\n          <\/p>\n\n          <p>\n            On delivery, I provide the agreed instructions and information. Maintenance, updates and future developments are specified separately and transparently.\n          <\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"fm-section fm-section-dark\" id=\"soluzioni\">\n    <div class=\"fm-container\">\n\n      <div class=\"fm-section-heading center\">\n        <span class=\"fm-kicker\">Three types of project<\/span>\n        <h2>A solution proportionate to the intended outcome<\/h2>\n        <p class=\"fm-section-intro fm-section-intro-center\" style=\"color:rgba(255,255,255,0.82);\">\n          The scope of every project is agreed before work begins. Additional features, integrations and future developments can be evaluated in stages, without building more than is needed from the outset.\n        <\/p>\n      <\/div>\n\n      <div class=\"fm-grid fm-grid-3\">\n\n        <div class=\"fm-service-card\">\n          <h3>Essential or professional website<\/h3>\n          <p>\n            To present an organisation's identity, services, content and contact details through a responsive, updateable WordPress website.\n          <\/p>\n          <ul>\n            <li>page structure and navigation<\/li>\n            <li>support with organising content<\/li>\n            <li>technical and responsive setup<\/li>\n            <li>essential SEO, forms and main links.<\/li>\n          <\/ul>\n          <p><strong>Typical timeframe:<\/strong> 3\u20136 weeks, depending on pages, content and revisions.<\/p>\n        <\/div>\n\n        <div class=\"fm-service-card\">\n          <h3>Landing page or project page<\/h3>\n          <p>\n            To promote an event, course, campaign, podcast or programme with a clear objective and call to action.\n          <\/p>\n          <ul>\n            <li>a structure focused on one objective<\/li>\n            <li>organising and editing the copy<\/li>\n            <li>buttons, contact details or registration form<\/li>\n            <li>mobile and link checks.<\/li>\n          <\/ul>\n          <p><strong>Typical timeframe:<\/strong> 1\u20133 weeks, if the copy and materials are available.<\/p>\n        <\/div>\n\n        <div class=\"fm-service-card\">\n          <h3>Automation or bespoke tool<\/h3>\n          <p>\n            To reduce repetitive tasks, organise information, generate documents or support the coordination of processes and events.\n          <\/p>\n          <ul>\n            <li>analysis of the current workflow<\/li>\n            <li>prototype of the essential function<\/li>\n            <li>development and testing with real use cases<\/li>\n            <li>delivery, instructions and documented limitations.<\/li>\n          <\/ul>\n          <p><strong>Timeframe:<\/strong> agreed after the assessment, as it depends on data, integrations and security.<\/p>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"fm-section fm-section-accent\">\n    <div class=\"fm-container\">\n\n      <div class=\"fm-section-heading center\">\n        <span class=\"fm-kicker\">Python and bespoke tools<\/span>\n        <h2>When software begins with a real need<\/h2>\n        <p class=\"fm-section-intro fm-section-intro-center\">\n          Programming becomes useful when it responds to a real challenge: too many manual tasks, data that needs to be reviewed quickly, text to organise, materials to export, group responses to analyse, events to manage or documents to produce.\n        <\/p>\n      <\/div>\n\n      <div class=\"fm-process-grid\">\n\n        <div class=\"fm-process-card\">\n          <span class=\"fm-process-number\">01<\/span>\n          <h3>Text and response analysis<\/h3>\n          <p>\n            Tools for analysing group responses, identifying recurring words, shared themes and differences, and producing narrative summaries and useful feedback for meetings, assemblies or training programmes.\n          <\/p>\n        <\/div>\n\n        <div class=\"fm-process-card\">\n          <span class=\"fm-process-number\">02<\/span>\n          <h3>Reports, minutes and documents<\/h3>\n          <p>\n            Small applications for generating reports, meeting minutes, summaries, Word documents, PDFs or structured texts from collected materials, transcripts or notes.\n          <\/p>\n        <\/div>\n\n        <div class=\"fm-process-card\">\n          <span class=\"fm-process-number\">03<\/span>\n          <h3>Event and production support<\/h3>\n          <p>\n            Tools for organising running orders, speakers, contributions, timings, materials, links, multimedia content and workflows for online, hybrid or in-person events.\n          <\/p>\n        <\/div>\n\n        <div class=\"fm-process-card\">\n          <span class=\"fm-process-number\">04<\/span>\n          <h3>Simple automations<\/h3>\n          <p>\n            Processes designed to reduce repetitive tasks, organise files, export content, prepare materials, connect tools and make everyday work more sustainable.\n          <\/p>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/section>\n<section class=\"fm-tools-box\">\n  <div class=\"fm-tools-inner\">\n\n    <span class=\"fm-tools-badge\">Bespoke digital design<\/span>\n\n    <h2>Digital tools designed and built to improve the way you work<\/h2>\n\n    <p class=\"fm-tools-intro\">\n      In my work, technology is not simply an accessory. I design, adapt and build it when it can make a process smoother, communication clearer, a procedure faster or event production more effective. Some applications have grown directly from practical needs encountered in everyday work: events, meetings, transcription, translation, multimedia content and digital management.\n    <\/p>\n\n    <div class=\"fm-tools-grid\">\n\n      <article class=\"fm-tool-card\">\n        <div class=\"fm-tool-icon\">\ud83c\udf9b\ufe0f<\/div>\n        <h3>FM Console Regia Web<\/h3>\n        <p>\n          A web-based console designed to manage overlays, timers, contributions, speakers, breaks and service messages during in-person, online or hybrid events. A tool created to simplify production and organise visual communication more effectively during assemblies, meetings, live broadcasts and training programmes.\n        <\/p>\n        <span class=\"fm-tool-tag\">Event production \u00b7 OBS \u00b7 Overlays<\/span>\n      <\/article>\n\n      <article class=\"fm-tool-card\">\n        <div class=\"fm-tool-icon\">\ud83d\udcdd<\/div>\n        <h3>FM Transcription &amp; Minutes<\/h3>\n        <p>\n          An application designed to turn audio and video into transcripts, meeting minutes, summaries, key points and exportable documents. It is useful for meetings, working groups, training sessions and participatory processes where it is important to preserve content, decisions and significant developments.\n        <\/p>\n        <span class=\"fm-tool-tag\">Minutes \u00b7 Summaries \u00b7 Documents<\/span>\n      <\/article>\n\n      <article class=\"fm-tool-card\">\n        <div class=\"fm-tool-icon\">\ud83c\udf0d<\/div>\n        <h3>FM Video Translation Tool<\/h3>\n        <p>\n          A tool created to add or replace translated audio in videos, with original-volume control, preview and final-file production. A useful solution for multilingual content, international training, events and digital communication aimed at wider audiences.\n        <\/p>\n        <span class=\"fm-tool-tag\">Video \u00b7 Translation \u00b7 Multilingual support<\/span>\n      <\/article>\n\n    <\/div>\n\n    <div class=\"fm-tools-closing\">\n      <p>\n        These tools express a clear vision of the digital world: not technology for its own sake, but technology built around the real needs of people, groups and processes.\n      <\/p>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n.fm-tools-box{\n  padding:70px 20px;\n  background:linear-gradient(135deg,#071018 0%,#101b27 45%,#061018 100%);\n  color:#ffffff;\n  font-family:Arial, sans-serif;\n}\n\n.fm-tools-inner{\n  max-width:1180px;\n  margin:0 auto;\n}\n\n.fm-tools-badge{\n  display:inline-block;\n  background:#ff8c1a;\n  color:#071018;\n  font-weight:700;\n  padding:8px 16px;\n  border-radius:999px;\n  font-size:14px;\n  margin-bottom:18px;\n}\n\n.fm-tools-box h2{\n  font-size:38px;\n  line-height:1.15;\n  margin:0 0 20px;\n  color:#ffffff;\n}\n\n.fm-tools-intro{\n  font-size:18px;\n  line-height:1.7;\n  color:#d8e0e8;\n  max-width:950px;\n  margin-bottom:38px;\n}\n\n.fm-tools-grid{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:24px;\n}\n\n.fm-tool-card{\n  background:linear-gradient(180deg,#162231 0%,#101923 100%);\n  border:1px solid rgba(255,255,255,0.08);\n  border-radius:22px;\n  padding:28px;\n  box-shadow:0 18px 40px rgba(0,0,0,0.35);\n  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;\n}\n\n.fm-tool-card:hover{\n  transform:translateY(-6px);\n  border-color:rgba(255,140,26,0.7);\n  box-shadow:0 24px 55px rgba(0,0,0,0.48);\n}\n\n.fm-tool-icon{\n  font-size:36px;\n  margin-bottom:18px;\n}\n\n.fm-tool-card h3{\n  color:#ff8c1a;\n  font-size:23px;\n  margin:0 0 14px;\n}\n\n.fm-tool-card p{\n  color:#d7dee8;\n  font-size:16px;\n  line-height:1.65;\n  margin:0 0 22px;\n}\n\n.fm-tool-tag{\n  display:inline-block;\n  font-size:13px;\n  font-weight:700;\n  color:#ffffff;\n  background:rgba(22,93,255,0.22);\n  border:1px solid rgba(22,93,255,0.45);\n  padding:8px 12px;\n  border-radius:999px;\n}\n\n.fm-tools-closing{\n  margin-top:32px;\n  padding:24px 28px;\n  border-left:5px solid #ff8c1a;\n  background:rgba(255,255,255,0.05);\n  border-radius:18px;\n}\n\n.fm-tools-closing p{\n  margin:0;\n  color:#f0f4f8;\n  font-size:18px;\n  line-height:1.6;\n  font-weight:500;\n}\n\n@media(max-width:900px){\n  .fm-tools-grid{\n    grid-template-columns:1fr;\n  }\n\n  .fm-tools-box h2{\n    font-size:30px;\n  }\n\n  .fm-tools-intro{\n    font-size:16px;\n  }\n}\n<\/style>\n\n  <section class=\"fm-section fm-section-light\">\n    <div class=\"fm-container\">\n\n      <div class=\"fm-section-heading center\">\n        <span class=\"fm-kicker\">Stages of the work<\/span>\n        <h2>From the initial need to delivery, with clear expectations at every stage<\/h2>\n      <\/div>\n\n      <div class=\"fm-process-grid\">\n\n        <div class=\"fm-process-card\">\n          <span class=\"fm-process-number\">01<\/span>\n          <h3>Objectives and scope<\/h3>\n          <p>\n            I clarify the expected outcome, audience, content, functions, responsibilities and what is outside the project's scope.\n          <\/p>\n        <\/div>\n\n        <div class=\"fm-process-card\">\n          <span class=\"fm-process-number\">02<\/span>\n          <h3>Structure or prototype<\/h3>\n          <p>\n            Before development, I define the pages, user journeys, essential features or a prototype we can review together.\n          <\/p>\n        <\/div>\n\n        <div class=\"fm-process-card\">\n          <span class=\"fm-process-number\">03<\/span>\n          <h3>Development and testing<\/h3>\n          <p>\n            I build the project and test functionality, responsive design, readability, links and the agreed use cases.\n          <\/p>\n        <\/div>\n\n        <div class=\"fm-process-card\">\n          <span class=\"fm-process-number\">04<\/span>\n          <h3>Delivery and independence<\/h3>\n          <p>\n            I provide the agreed access, guidance and materials. Support, maintenance and further development are arranged separately.\n          <\/p>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"fm-section fm-section-accent\">\n    <div class=\"fm-container\">\n\n      <div class=\"fm-section-heading center\">\n        <span class=\"fm-kicker\">Shared responsibility<\/span>\n        <h2>We build digital projects together<\/h2>\n      <\/div>\n\n      <div class=\"fm-two-columns\">\n        <div class=\"fm-card fm-card-text\">\n          <h3>What I need from you<\/h3>\n          <ul>\n            <li>a clear objective and named contact person<\/li>\n            <li>available copy, images, logos and materials<\/li>\n            <li>technical access where needed<\/li>\n            <li>feedback and approvals within agreed timescales<\/li>\n            <li>accurate information about privacy and data processing.<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"fm-card fm-card-highlight\">\n          <h3>What you can expect from me<\/h3>\n          <ul>\n            <li>a clearly defined scope of work<\/li>\n            <li>well-grounded, proportionate technical choices<\/li>\n            <li>attention to mobile, accessibility and security<\/li>\n            <li>checks before delivery<\/li>\n            <li>transparency about limitations, extra costs and future developments.<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"fm-section fm-section-dark\">\n    <div class=\"fm-container\">\n\n      <div class=\"fm-section-heading center\">\n        <span class=\"fm-kicker\">Where to begin<\/span>\n        <h2>Tell me about the problem before choosing the solution<\/h2>\n        <p class=\"fm-section-intro fm-section-intro-center\" style=\"color:rgba(255,255,255,0.82);\">\n          To get started, tell me what you want to achieve, who will use the tool, what materials or systems already exist, when you need it and what budget you have in mind. From there, we can decide whether you really need a website, landing page, automation or small application.\n        <\/p>\n      <\/div>\n\n      <div class=\"fm-hero-buttons\">\n        <a href=\"\/en\/contattami\/\" class=\"fm-btn fm-btn-primary\">Tell me about your project<\/a>\n        <a href=\"#soluzioni\" class=\"fm-btn fm-btn-secondary\">Review the solutions<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n<style>\n\/* FM - Collegamenti interni tra servizi *\/\n.fm-related-section{\n  padding:72px 20px;\n  background:#f7f9fc;\n}\n.fm-related-inner{\n  max-width:1180px;\n  margin:0 auto;\n}\n.fm-related-head{\n  max-width:820px;\n  margin:0 auto 30px;\n  text-align:center;\n}\n.fm-related-kicker{\n  display:inline-block;\n  margin-bottom:10px;\n  color:#d85f0e;\n  font-size:.82rem;\n  font-weight:850;\n  letter-spacing:.08em;\n  text-transform:uppercase;\n}\n.fm-related-head h2{\n  margin:0 0 12px;\n  color:#172033;\n  font-size:clamp(1.8rem,3.5vw,2.8rem);\n  line-height:1.12;\n}\n.fm-related-head p{\n  margin:0;\n  color:#5f6b7a;\n  line-height:1.75;\n}\n.fm-related-grid{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:16px;\n}\n.fm-related-link{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  min-height:78px;\n  padding:18px 20px;\n  border-radius:20px;\n  background:#fff;\n  border:1px solid rgba(15,23,42,.08);\n  box-shadow:0 10px 26px rgba(15,23,42,.06);\n  color:#172033 !important;\n  text-decoration:none !important;\n  font-weight:800;\n  line-height:1.35;\n  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;\n}\n.fm-related-link::after{\n  content:\"\u2192\";\n  flex:0 0 auto;\n  color:#165dff;\n  font-size:1.15rem;\n}\n.fm-related-link:hover{\n  transform:translateY(-2px);\n  border-color:rgba(22,93,255,.22);\n  box-shadow:0 16px 34px rgba(15,23,42,.10);\n}\n@media(max-width:900px){\n  .fm-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}\n}\n@media(max-width:620px){\n  .fm-related-section{padding:58px 16px;}\n  .fm-related-grid{grid-template-columns:1fr;}\n}\n<\/style>\n\n<section class=\"fm-related-section\">\n  <div class=\"fm-related-inner\">\n    <div class=\"fm-related-head\">\n      <span class=\"fm-related-kicker\">Explore more<\/span>\n      <h2>Digital tools can be part of a wider project<\/h2>\n      <p>If your needs also involve events, content or relationships, explore these related areas.<\/p>\n    <\/div>\n    <div class=\"fm-related-grid\">\n      <a class=\"fm-related-link\" href=\"\/en\/regia-eventi-digitali-e-ibridi\/\">Digital and hybrid event production<\/a>\n      <a class=\"fm-related-link\" href=\"\/en\/scrittura-giornalismo-e-contenuti\/\">Writing, journalism and content<\/a>\n      <a class=\"fm-related-link\" href=\"\/en\/tecnorelazione-ed-empatia-digitale\/\">The techno-relational approach and digital empathy<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n  <div class=\"fm-footer-credit\">\n    \u00a9 Francesco Mazzarella \u2013 FM Comunicazione. All rights reserved.<br>\n    Website designed and created by <strong>FM Comunicazione by Francesco Mazzarella.<\/strong>\n  <\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Siti web e strumenti digitali Siti e strumenti digitali che chiariscono, semplificano e fanno lavorare meglio Progetto siti, landing page, automazioni e piccoli strumenti su misura per professionisti, associazioni, comunit\u00e0 e organizzazioni. La tecnologia non deve aggiungere complessit\u00e0: deve risolvere un problema reale ed essere sostenibile per chi dovr\u00e0 usarla e aggiornarla. Scopri le soluzioni [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-249","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.francescomazzarella.eu\/en\/wp-json\/wp\/v2\/pages\/249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.francescomazzarella.eu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.francescomazzarella.eu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.francescomazzarella.eu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.francescomazzarella.eu\/en\/wp-json\/wp\/v2\/comments?post=249"}],"version-history":[{"count":15,"href":"https:\/\/www.francescomazzarella.eu\/en\/wp-json\/wp\/v2\/pages\/249\/revisions"}],"predecessor-version":[{"id":964,"href":"https:\/\/www.francescomazzarella.eu\/en\/wp-json\/wp\/v2\/pages\/249\/revisions\/964"}],"wp:attachment":[{"href":"https:\/\/www.francescomazzarella.eu\/en\/wp-json\/wp\/v2\/media?parent=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}