DEFINICIONES
- Wireframe: Dibujo o esquema que representa el esqueleto o estructura visual de un sitio web. Suele carecer de aspectos visuales, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de una web.
DIFERENCIAS ENTRE EL DISEÑO WEB Y EL DESARROLLO WEB
- Diseño web:
- Diseño Visual -> Elementos gráficos
- Herramientas gráficas (Photoshop, Gimp)
- Diseño (Sin código) -> Partes que se representas: HTML y CSS / Elementos gráficos
- Desarrollo web:
- Se divide en:
- Cliente: Necesita conocimientos de -> HTML y CSS / JavaScript y DOM
- Servidor: Desarrolla la parte de la web que no se publica.
- Utiliza lenguajes PHP, ASP, ASP.NET, JSP, PERL y Coldfusion.
- Diseño y desarrollo de bases de datos.
- Seguridad.
PROTOTIPADO
- Diferencia entre PLANOS y MAQUETAS.
- Planos: Estructura de la aplicación y flujo de navegación.
- Maquetas: Diagrama de presentación visual.
- Baja fidelidad: Estáticos (Sketch / Wireframes)
- Alta fidelidad: Dinámicos (Prototipo funcional)
- Desde esta web puedes descargar un programa para crear tus diagramas: PENCIL PROJECT
HTML
HyperText Markup Languaje: Lenguaje de marcas o marcado de hipertextos. Define la estructura y contenido; no la estructura visual.
- XHTML1 -> HTML 4 -> HTML 5
ETIQUETAS
- <html> ... </html> (Es la etiqueta principal, la raíz. Solo existe una y toda la web se escribe dentro de ella.
- <head> ... </head> (Es la cabecera, donde se reunen los metadatos [información web] no se publican)
- <title> ... </title> (Se escribe dentro de la etiqueta <head> <title> ... </title> </head>, es el título de la página, solo hay una y es obligatoria.
- <body> ... </body> (El cuerpo, contenido visible de la página)
- <h1> ... </h1> (Encabezados o títulos. Se distinguen 6 niveles; desde h1 hata h6)
- <em> ... </em> (Texto enfatizado; en cursiva)
- <br> </br> (Etiqueta de salto de línea. Es una etiqueta vacía)
ETIQUETAS PARA CREAR LISTAS
Tipos de listas
EJEMPLOS
Lista no ordenada:
Lista ordenada:
 |
| Numeración descendente |
Lista de descripción:
Lista anidada:
 |
| Una lista dentro de otra lista; sublista. |
GRAMÁTICA
- Las etiquetas siempre se tienen que cerrar. < > </ >
- Los documentos anidados tienen que estar bien formados.
- Incorrecto: elementos superpuestos: <p><strong> ... </p></strong>
- Correcto: elementos anidados: <p><strong> ... </strong></p>
- Etiquetas SIEMPRE en minúsculas.
- Los valores de los atributos tienen que llevar comillas.
- Incorrecto: <p class=importante>
- Correcto: <p class="importante">
- Los caracteres para guardar archivos:
- Nombre de la página web: AB...Z / ab...z / 01...9 / - / _
- Extención del archivo: .htm / .html
No hay comentarios:
Publicar un comentario