211 lines
5.8 KiB
Markdown
211 lines
5.8 KiB
Markdown
|
# 🚀 QUICK START - SYNTAXIS Branding Showcase
|
||
|
|
|
||
|
|
## ⚡ Apertura Rápida
|
||
|
|
|
||
|
|
### Opción 1: Directamente desde Terminal
|
||
|
|
```bash
|
||
|
|
# macOS
|
||
|
|
open /Users/Akasha/Development/syntaxis/assets/syntaxis-branding-showcase.html
|
||
|
|
|
||
|
|
# Linux
|
||
|
|
xdg-open /Users/Akasha/Development/syntaxis/assets/syntaxis-branding-showcase.html
|
||
|
|
|
||
|
|
# O simplemente arrastra el archivo al navegador
|
||
|
|
```
|
||
|
|
|
||
|
|
### Opción 2: Desde el Navegador
|
||
|
|
1. Abre tu navegador favorito
|
||
|
|
2. Presiona `Ctrl+O` (Windows/Linux) o `Cmd+O` (Mac)
|
||
|
|
3. Busca el archivo en: `/Users/Akasha/Development/syntaxis/assets/syntaxis-branding-showcase.html`
|
||
|
|
4. ¡Listo! 🎉
|
||
|
|
|
||
|
|
### Opción 3: Servidor Local (Recomendado)
|
||
|
|
```bash
|
||
|
|
# Navega a la carpeta
|
||
|
|
cd /Users/Akasha/Development/syntaxis/imgs
|
||
|
|
|
||
|
|
# Inicia servidor Python
|
||
|
|
python3 -m http.server 8000
|
||
|
|
|
||
|
|
# O con Node.js (si lo tienes instalado)
|
||
|
|
npx http-server
|
||
|
|
|
||
|
|
# Abre en tu navegador
|
||
|
|
http://localhost:8000/syntaxis-branding-showcase.html
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🎯 Lo Primero Que Verás
|
||
|
|
|
||
|
|
1. **Header** con controles:
|
||
|
|
- Selector de variantes (Todas / Estáticas / Animadas)
|
||
|
|
- Botón de modo oscuro/claro
|
||
|
|
|
||
|
|
2. **Logos** (14 variantes):
|
||
|
|
- 7 estáticas + 7 animadas
|
||
|
|
- Click en "Abrir en Nueva Pestaña" para ver cada una
|
||
|
|
- Información de dimensiones y uso
|
||
|
|
|
||
|
|
3. **Colores** (5 colores principales):
|
||
|
|
- HEX, RGB y CMYK
|
||
|
|
- Balanced Gray ✨ actualizado
|
||
|
|
- Uso y significado de cada color
|
||
|
|
|
||
|
|
4. **Tipografía** (3 familias):
|
||
|
|
- Inter, Source Sans Pro, JetBrains Mono
|
||
|
|
- Ejemplos en vivo
|
||
|
|
- Font stacks listos para copiar
|
||
|
|
|
||
|
|
## 💡 Funciones Principales
|
||
|
|
|
||
|
|
### 🎨 Selector de Variantes
|
||
|
|
```
|
||
|
|
┌─────────────────────────────┐
|
||
|
|
│ Variante: [Todas ▼] │
|
||
|
|
│ - Todas (estáticas + anim.) │
|
||
|
|
│ - Solo Estáticas │
|
||
|
|
│ - Solo Animadas │
|
||
|
|
└─────────────────────────────┘
|
||
|
|
```
|
||
|
|
Los logos se filtran automáticamente.
|
||
|
|
|
||
|
|
### 🌙 Modo Oscuro
|
||
|
|
```
|
||
|
|
Botón: [🌙 Modo Oscuro]
|
||
|
|
```
|
||
|
|
- Alterna entre claro y oscuro
|
||
|
|
- Se guarda en tu navegador
|
||
|
|
- Contraste accesible en ambos modos
|
||
|
|
|
||
|
|
### 📱 Logos - Click para Abrir
|
||
|
|
Cada logo tiene un botón:
|
||
|
|
```
|
||
|
|
[Abrir en Nueva Pestaña]
|
||
|
|
```
|
||
|
|
Se abre en una pestaña nueva para verlo completo.
|
||
|
|
|
||
|
|
### 🎨 Colores - Formatos Múltiples
|
||
|
|
```
|
||
|
|
HEX: #2C5F8E
|
||
|
|
RGB: 44, 95, 142
|
||
|
|
CMYK: 69%, 33%, 0%, 44%
|
||
|
|
```
|
||
|
|
¡Copia directamente a tu código!
|
||
|
|
|
||
|
|
## 📋 Checklist de Uso
|
||
|
|
|
||
|
|
- [ ] Abre `syntaxis-branding-showcase.html`
|
||
|
|
- [ ] Prueba el selector de variantes
|
||
|
|
- [ ] Alterna entre modo claro y oscuro
|
||
|
|
- [ ] Abre 2-3 logos en nuevas pestañas
|
||
|
|
- [ ] Copia un código HEX de color
|
||
|
|
- [ ] Nota la información de tipografía
|
||
|
|
|
||
|
|
## 🎬 Casos de Uso Rápidos
|
||
|
|
|
||
|
|
### Necesito un Logo para...
|
||
|
|
| Necesidad | Selecciona | Click en |
|
||
|
|
|-----------|-----------|----------|
|
||
|
|
| Favicon | **Todas** → Icon | "Abrir en Nueva Pestaña" |
|
||
|
|
| Splash screen | **Animadas** → Icon Animated | "Abrir en Nueva Pestaña" |
|
||
|
|
| Header web | **Todas** → Horizontal | "Abrir en Nueva Pestaña" |
|
||
|
|
| Impresión B&N | **Todas** → Mono Light/Dark | "Abrir en Nueva Pestaña" |
|
||
|
|
| Loading spinner | **Animadas** → Loading | "Abrir en Nueva Pestaña" |
|
||
|
|
|
||
|
|
### Necesito un Color para...
|
||
|
|
Busca en la sección de **Colores**:
|
||
|
|
- **Botones:** SYNTAXIS Blue (#2C5F8E)
|
||
|
|
- **Texto:** Balanced Gray (#757773)
|
||
|
|
- **Acentos:** Arrangement Gold (#D97706)
|
||
|
|
- **Éxito:** System Green (#059669)
|
||
|
|
- **Features IA:** Order Purple (#7C3AED)
|
||
|
|
|
||
|
|
### Necesito Font Stack para...
|
||
|
|
Busca en **Sistema Tipográfico**:
|
||
|
|
- **Encabezados:** Inter
|
||
|
|
- **Cuerpo:** Source Sans Pro
|
||
|
|
- **Código:** JetBrains Mono
|
||
|
|
|
||
|
|
## ⌨️ Atajos de Teclado
|
||
|
|
|
||
|
|
| Atajo | Acción |
|
||
|
|
|-------|--------|
|
||
|
|
| `Esc` | Cierra modal (si está abierto) |
|
||
|
|
| `Cmd/Ctrl+P` | Imprime / Guarda como PDF |
|
||
|
|
| `Cmd/Ctrl+F` | Busca en la página |
|
||
|
|
|
||
|
|
## 🔍 Búsqueda Rápida
|
||
|
|
|
||
|
|
Usa `Cmd+F` (Mac) o `Ctrl+F` (Windows/Linux) para buscar:
|
||
|
|
- `animated` - Logos animados
|
||
|
|
- `static` - Logos estáticos
|
||
|
|
- `#2C5F8E` - Color azul
|
||
|
|
- `#757773` - Color gris (nuevo)
|
||
|
|
- `Inter` - Tipografía headlines
|
||
|
|
|
||
|
|
## 📱 Mobile & Tablet
|
||
|
|
|
||
|
|
Funciona perfectamente en:
|
||
|
|
- ✅ iPad en landscape
|
||
|
|
- ✅ Tablet Android
|
||
|
|
- ✅ Mobile (se adapta a una columna)
|
||
|
|
|
||
|
|
Accesos desde mobile:
|
||
|
|
1. Abre el archivo en tu navegador
|
||
|
|
2. O copia la URL si lo tienes servido (localhost)
|
||
|
|
3. Todo es interactivo y responsivo
|
||
|
|
|
||
|
|
## ⚙️ Solución de Problemas
|
||
|
|
|
||
|
|
### "No se ven los logos"
|
||
|
|
1. Verifica que los archivos estén en las carpetas correctas:
|
||
|
|
- `syntaxis_logo_staic_files/` (logos estáticos)
|
||
|
|
- `syntax_logos_anim/` (logos animados)
|
||
|
|
2. Si cambió la estructura, abre DevTools (`F12`) y revisa errores
|
||
|
|
|
||
|
|
### "El modo oscuro no se guarda"
|
||
|
|
1. Asegúrate de permitir localStorage en tu navegador
|
||
|
|
2. Intenta en una ventana normal (no incógnito)
|
||
|
|
|
||
|
|
### "Las fuentes se ven diferentes"
|
||
|
|
1. Es normal si no las tienes locales - se cargan desde Google Fonts
|
||
|
|
2. Necesita conexión a internet para la primera carga
|
||
|
|
3. Después se cachean en tu navegador
|
||
|
|
|
||
|
|
## 📚 Documentación Completa
|
||
|
|
|
||
|
|
Para más detalles, lee:
|
||
|
|
- `SYNTAXIS_BRANDING_SHOWCASE_README.md` - Documentación completa
|
||
|
|
- `SYNTAXIS_BRAND_IDENTITY.md` - Identidad de marca
|
||
|
|
- `SYNTAXIS_VISUAL_IDENTITY.md` - Sistema visual detallado
|
||
|
|
|
||
|
|
## 🎨 Pro Tips
|
||
|
|
|
||
|
|
### Para Diseñadores
|
||
|
|
1. Abre modo oscuro para inspiración nocturna 🌙
|
||
|
|
2. Toma screenshots de colores para paletas
|
||
|
|
3. Abre animadas para ver movimiento en vivo
|
||
|
|
|
||
|
|
### Para Developers
|
||
|
|
1. Copia HEX directo a CSS
|
||
|
|
2. Usa RGB con opacity: `rgba(44, 95, 142, 0.5)`
|
||
|
|
3. Font stacks listos para producción
|
||
|
|
|
||
|
|
### Para Marketing
|
||
|
|
1. Descarga logos clicando "Abrir en Nueva Pestaña"
|
||
|
|
2. Toma screenshot de la página para compartir
|
||
|
|
3. Usa CMYK para impresión
|
||
|
|
|
||
|
|
## 🚀 Siguiente Paso
|
||
|
|
|
||
|
|
¿Necesitas agregar un nuevo logo?
|
||
|
|
1. Guárdalo en la carpeta correspondiente
|
||
|
|
2. Abre `syntaxis-branding-showcase.html` en editor
|
||
|
|
3. Busca `const LOGOS` y añade el nuevo
|
||
|
|
4. Recarga la página - ¡listo!
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Enjoy! 🎉**
|
||
|
|
|
||
|
|
SYNTAXIS | Systematic Orchestration, Perfectly Arranged
|