Saltar a contenido

53. Diseño de Interfaces Web

Antes de comenzar el desarrollo de páginas web es necesario documentar los elementos que van a constituir la base de las páginas y que le van a dar homogeneidad al diseño. Básicamente será el mapa de navegación y la guía de estilos.

Con estos dos documentos podemos crear una muestra de las páginas, el prototipo.

53.1 Guía de Estilo

¿Que incluye la guía de estilo? :

  • Colores, fuentes, titulos, subtítulos, menús, logotipo
  • Incluye:
  • Formato y tamaño de fotos y logos
  • Tipografía: fuente,estilo, tamaño letra, color
  • Iconografía
  • Estructura: Disposición de elementos y mapa de navegación.

Ejemplos: * guía de estilo de UPV
* Guia de estilo UMA * Artículo IONOS
* Manual detallado C. Madrid

53.2 Mapa de navegación

Herramientas diseño mapas web canvas

53.3 Prototipos

53.4 Técnicas Web

53.4.1 Image Maps html

Imágenes con areas, que al pulsar llevan a otras página o llaman a funciones jscript:
* En w3school * Ejemplo con jscript

53.5 Uso de fonts no estándar

Para usar fonts personalizadas:

  1. Fichero css:

.alfabeto {
  font-family: "TuFuentePersonalizada", sans-serif;
  font-size: 24px;
  color: #333;
}
2. En html en la cabecera añadir:
<link rel="stylesheet" href="estilos.css">
3. Para usar la font en una pagina html, se envuelve los elementos con una clase alfabeto 

<div class="alfabeto">
  <p>&#1008;&#1005;&#1002;&#1002;&#1007;</p>
</div>

53.5.1 TTF

El archivo "fuentes/fuente_personalizada.ttf" utiliza el formato TrueType (TTF). TrueType es un formato de archivo de fuente desarrollado por Apple y Microsoft en la década de 1980. Es ampliamente utilizado en sistemas operativos Windows y macOS, así como en aplicaciones de diseño gráfico y de edición de texto. El formato TTF es compatible con la mayoría de los programas y sistemas operativos modernos, lo que lo hace muy accesible y versátil para el uso de fuentes personalizadas.

Hay varios editores de fuentes TrueType (TTF) disponibles que puedes utilizar para editar fuentes personalizadas. Algunos de los editores populares son:

  • FontForge: Es un editor de fuentes de código abierto y multiplataforma que permite crear y modificar fuentes TrueType y OpenType. Está disponible para Windows, macOS y Linux.

  • FontCreator: Es un editor de fuentes comercial que ofrece una interfaz intuitiva y herramientas avanzadas para crear y editar fuentes TrueType y OpenType. Está disponible para Windows.

  • Glyphs: Es un editor de fuentes diseñado específicamente para macOS. Proporciona un enfoque visual y fácil de usar para diseñar fuentes, tanto TrueType como OpenType.

  • BirdFont: Es un editor de fuentes gratuito y de código abierto que admite la edición de fuentes TrueType y OpenType. Está disponible para Windows, macOS y Linux.

53.5.2 Ejemplo de TTF

(VER EN DESCARGAS)

53.6 Curiosidades para llevar a otras páginas:

Android Studio : en vuild.gradle.kts falta:

android { namespace = "com.google.firebase.codelab.friendlychat" compileSdk = 33

buildFeatures {
    buildConfig = true
}

Da error de BuildConfig desconocido