--- name: agency-web-developer description: "Sviluppare siti web statici o landing page partendo da copy e design system. PRIMA di sviluppare: leggi {project}/assets/catalog.md per immagini e asset. Se mancano, richiedi @agency-archivist. Usare quando: (1) costruire sito da sitemap + copy, (2) creare landing page, (3) implementare design in HTML/CSS/JS. Output: Sito completo con HTML semantico, CSS (Bootstrap o custom), JS (jQuery + GSAP)." --- # Agency Web Developer — Sviluppo Siti Web Statici Trasforma copy e design system in siti web funzionanti con HTML semantico, CSS e JS. ## Quando Usare - **Nuovo sito:** Costruire sito completo da sitemap + copy + design tokens - **Landing page:** Pagina singola campaign-specific - **Design implementation:** Convertire mockup in codice - **Static site:** Sito senza backend (brochure, portfolio, landing) --- ## Input | Input | Tipo | Validazione | |-------|------|-------------| | `project_path` | string | Percorso progetto (cartella di lavoro) | | `sitemap` | object | Da agency-ux-copy | | `page_copy` | array | Copy completo per ogni pagina | | `design_tokens` | object | Da agency-design-system | | `page_layouts` | array | Layout definitions | | `seo_metadata` | array | SEO notes per pagina | --- ## Processo ### Fase 1: Risorse e Setup Struttura Progetto **Obiettivo:** Verificare asset disponibili e creare directory structure. **Azioni:** 1. **LEGGI CATALOGO RISORSE:** - Apri `{project}/assets/catalog.md` - Cerca: - Logo: `#logo` → Per header/footer - Immagini hero: `#hero`, `#sfondo`, `#prodotto` → Per homepage - Immagini pagine: `#team`, `#ufficio`, `#prodotto` → Per pagine interne - Favicon: `#icon`, `#favicon` → Per `` 2. **Se risorse mancanti:** **Proporre 3 opzioni** **OPZIONE A — Blocca e richiedi asset:** - "🔒 Bloccato: servono immagini per il sito" - Tagga: @agency-archivist con elenco specifico - **Attendi** upload prima di procedere **OPZIONE B — Placeholder Mode (consigliata):** ⚡ - Procedi con **placeholder inline** (SVG color-block o gradient) - Esempi placeholder: - Logo: `

[LOGO]

` (stilizzato CSS) - Hero: `

[HERO IMAGE 1920x1080]

` - Team: `

` con iniziali - Genera sito completo ma **documenta in README.md sezione "Assets Placeholder"** - **Non bloccare** — cliente sostituisce asset reali dopo **OPZIONE C — Genera senza asset visivi:** - Procedi con **design testuale/minimal** (no immagini, solo tipografia) - Adatta layout: hero text-only, griglie senza foto - Documenta: "⏭️ Design minimal — immagini da aggiungere in fase 2" 3. **Crea cartella `{project}/website/`** 4. **Crea sottocartelle:** - `index.html` (homepage) - `pages/` (altre pagine HTML) - `css/` (stylesheet) - `js/` (JavaScript) - `assets/` (immagini, font, etc.) - `assets/img/` - `assets/fonts/` 5. **Collega asset da archivio:** - Crea symlink o copia da `{project}/assets/` a `website/assets/` - Oppure usa path relativi: `../assets/images/logo/logo.png` 6. **Inizializza file base:** - `css/main.css` (o `css/bootstrap.min.css` + `css/custom.css`) - `js/main.js` **Output:** - Struttura directory pronta - Asset collegati o copiati --- ### Fase 2: HTML Semantico **Obiettivo:** Costruire struttura HTML per ogni pagina. **Azioni:** 1. **Per ogni pagina in sitemap:** 2. **Struttura base:** ```html {SEO Title}

{Navigation}

{Content}

``` 3. **Hero section:** - `

` - `

` per headline - `
` per subcopy - `` per CTA 4. Content sections: - Usa tag semantici: `
`, `
`, `
` - Heading hierarchy: `
`, `
` (mai saltare livelli) - Liste: `
`, `
` con `
` - Immagini: `` 5. Componenti da copy: - Card grid per services - Testimonial blocks - FAQ accordion - CTA sections - Form di contatto 6. Segui `../agency-shared-references/references/html_semantics.md`: - Semantic HTML best practices - Accessibility (ARIA labels dove necessario) - SEO on-page (heading structure, alt text) Output: - `{project}/website/index.html` - `{project}/website/pages/.html` --- ### Fase 3: CSS Layout Obiettivo: Stilizzare il sito con CSS. Decisione: Bootstrap vs Custom Usa Bootstrap se: - Design è standard (grid, cards, buttons standard) - Progetto semplice/veloce - Cliente non richiede customizzazione estrema Usa Custom CSS se: - Design altamente personalizzato - Brand ha linee guida specifiche - Layout non-standard Azioni: 1. Se Bootstrap: - Includi CDN in HTML - Crea `css/custom.css` per override - Usa classi Bootstrap (.container, .row, .col, .btn, etc.) - Override tokens in custom.css 2. Se Custom: - Crea `css/main.css` da zero - Implementa design tokens (fonts, colors, spacing) - Crea grid system (o usa CSS Grid/Flexbox) - Stilizza componenti uno a uno 3. Implementa da `../agency-shared-references/references/css_layout.md`: - Responsive design (mobile-first) - Breakpoints (mobile, tablet, desktop) - Typography scale - Color system - Spacing system 4. Componenti da stilizzare: - Header/navigation (sticky, mobile menu) - Hero section - Buttons (primary, secondary, hover states) - Cards - Forms - Footer Output: - `{project}/website/css/main.css` (o `bootstrap.min.css` + `custom.css`) --- ### Fase 4: JavaScript Interattività Obiettivo: Aggiungere interattività al sito. Librerie: - jQuery: Per DOM manipulation, event handling, AJAX (se necessario) - GSAP: Per animazioni fluide, timeline, effetti complessi Azioni: 1. Includi librerie in HTML: ```html ``` 2. Funzionalità base (jQuery): - Mobile menu toggle - Smooth scroll per anchor links - Form validation - Accordion FAQ - Image lazy loading - Back to top button 3. Animazioni (GSAP): - Fade-in on scroll - Hero animations (headline, CTA) - Parallax effects (se richiesti) - Hover animations complesse - Timeline per sequenze animate 4. Segui `../agency-shared-references/references/js_interactivity.md`: - Best practices jQuery - GSAP patterns - Performance considerations - Accessibility (respect reduced-motion) Template `js/main.js`: ```javascript $(document).ready(function() { // Mobile menu toggle $('.mobile-menu-toggle').on('click', function() { $('.nav-menu').toggleClass('is-open'); }); // Smooth scroll $('a[href^="#"]').on('click', function(e) { e.preventDefault(); const target = $(this.getAttribute('href')); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top - 80 }, 800); } }); // FAQ accordion $('.faq-question').on('click', function() { $(this).next('.faq-answer').slideToggle(300); $(this).toggleClass('is-active'); }); // GSAP animations gsap.from('.hero h1', { duration: 1, opacity: 0, y: 30, ease: 'power3.out' }); gsap.from('.hero .btn', { duration: 1, opacity: 0, y: 20, delay: 0.3, ease: 'power3.out' }); // Scroll animations gsap.utils.toArray('.fade-on-scroll').forEach(function(elem) { gsap.to(elem, { scrollTrigger: { trigger: elem, start: 'top 80%', toggleActions: 'play none none none' }, opacity: 1, y: 0 }); }); }); ``` Output: - `{project}/website/js/main.js` --- ### Fase 5: QA e Testing Obiettivo: Verificare qualità del sito. Azioni: 1. HTML validation: - Tag chiusi correttamente - Attributi required presenti - Nesting corretto 2. CSS check: - Responsive su mobile/tablet/desktop - Color contrast (accessibility) - No overflow o layout broken 3. JS check: - Console errors (nessuno) - Funzionalità testate (menu, form, accordion) - Animazioni fluide 4. SEO check: - Title tag unico per pagina - Meta description presente - Heading hierarchy corretta - Alt text su immagini 5. Performance: - Immagini ottimizzate (se presenti) - CSS/JS minified (opzionale) - No console warnings Output: - `{project}/website/qa/qa_website.md` --- ## Output | File | Formato | Descrizione | |------|---------|-------------| | `{project}/website/index.html` | HTML | Homepage | | `{project}/website/pages/.html` | HTML | Altre pagine | | `{project}/website/css/main.css` | CSS | Stylesheet | | `{project}/website/js/main.js` | JS | Interattività | | `{project}/website/assets/` | Folder | Immagini, font, etc. | | `{project}/website/qa/qa_website.md` | Markdown | QA checklist | --- ## References ### Shared References (Agency Suite) - [html_semantics.md](../agency-shared-references/references/html_semantics.md) — Semantic HTML best practices - [css_layout.md](../agency-shared-references/references/css_layout.md) — Layout, responsive, Bootstrap - [js_interactivity.md](../agency-shared-references/references/js_interactivity.md) — jQuery + GSAP patterns - [hero_sections.md](../agency-shared-references/references/hero_sections.md) — Hero checklist, formula, layouts - [design_patterns.md](../agency-shared-references/references/design_patterns.md) — Card grid, split layout, testimonial, FAQ patterns - [navigation_patterns.md](../agency-shared-references/references/navigation_patterns.md) — Primary nav, mobile nav, IA - [conversion_patterns.md](../agency-shared-references/references/conversion_patterns.md) — CTA hierarchy, forms, friction reducers - [layout_systems.md](../agency-shared-references/references/layout_systems.md) — Grid, spacing, vertical rhythm - [resource_types.md](../agency-shared-references/references/resource_types.md) — Tipologie risorse e use case Flusso consigliato: 1. Leggi catalogo risorse (`assets/catalog.md`) 2. Verifica asset disponibili o richiedi ad @agency-archivist 3. Leggi pattern UX da `agency-shared-references/references` (COSA fare) 4. Implementa con technical references da `agency-shared-references/references` (COME codificare) --- ## Note Edge Cases: - Nessun design system: Usa Bootstrap default + stile minimal - Solo landing page: Crea single-page con anchor navigation - Cliente fornisce asset: Copia in `assets/` e usa percorsi corretti - Animazioni complesse: Usa GSAP timeline, documenta in decision log Limitazioni: - Siti statici (no backend, no database) - Form richiedono servizio esterno (Formspree, Netlify Forms) o backend - E-commerce non supportato (richiede piattaforma dedicata) --- _Skill creata per agency_v3_1 suite_