En 1969 se creó ARPAnet, una red de computadoras que conectaba diferentes instituciones del ministerio de defensa de los Estados Unidos y que fue posteriormente utilizada como medio de comunicación entre diferentes instituciones académicas y estatales norteamericanas.
A principios de los 70 Robert Kahn y Vinton Cerf desarrollaron un nuevo protocolo de comunicación conocido como TCP/IP que es la base del Internet actual y que sirve paraenlazar ordenadores y dispositivos que usan diferentes sistemas operativos.
En 1971 nació el correo electrónico (email) y su primera aplicación, que se llamó SNDMGS. El símbolo arroba, que se representa con el carácter @, es un componente fundamental de las direcciones de correo electrónico, donde aparece como señal o marca de separación entre el nombre de usuario y el nombre del dominio, utilizando el formato usuario@dominio.
Años 80
En 1983 la red de ARPAnet adaptó el protocolo de TCP/IP dando como resultado Internet tal y como lo conocemos hoy en día.
En 1988 Nacen el lenguaje HTML, la URL y el HTTP, desarrollados por Tim Berners Lee.
La web se convierte en un sistema global de gestión de información a través de Internet y necesita estos tres elementos básicos para funcionar:
El HTTP: es el protocolo que se usa para comunicarse con el servidor web con el fin de acceder a una página web.
La URL: es la dirección específica para la localización de los recursos (páginas web, navegadores web) disponibles en la red o la web.
El HTML: es el lenguaje utilizado para codificar la información en los recursos web.
Para la creación de cualquier recurso en Internet se usa el lenguaje
HTML. Para acceder a él se usa el protocolo HTTP, que es el más usado para acceder a las páginas a través de Internet, junto con un URL que determinará la dirección exacta para encontrar el recurso.
Años 90
WWW: Se presenta en 1991 la primera propuesta de usar ordenadores y enlaces para crear una red, y se establecen un conjunto de normas que forman las bases del internet que conocemos hoy. La World Wide Web es un sistema de documentos enlazados entre sí por medio de enlaces o hipervínculos al que se accede por medio de Internet, a través de un navegador. Los usuarios pueden visualizar los sitios web (los cuales contienen texto, imágenes, vídeos y otros contenidos multimedia) y navegar a través de ellos mediante links.
En 1996 se funda Hotmail, uno de los primeros servicios web de email que existió en la red.
En 1996 se establece un acuerdo internacional para el registro de nombres de dominio.
1998 Larry Page y Sergey Brin crean Google.
Años 00 hasta actualidad
En 2005 se funda Youtube, creada por un conjunto de ingenieros y se convierte en el portal para compartir vídeos más visitado de la red.
En 2006 internet tiene 100.000 millones de usuarios. Se crea la red social Facebook (Mark Zuckerberg) con más de 2.200 millones de usuarios.
En 2014 la World Wide Web cumple 25 años y existen más de 3.000 millones de personas conectadas a Internet.
En 2017 EE.UU. se dispone a revocar la condición de «utilidad pública» de Internet. En el mes de Junio, Internet World Stats contabiliza 3.885 millones de personas conectadas a la Red, más del 50% de la población mundial tiene acceso a Internet.
¿Qué es internet?
Internet es una red informática descentralizada de alcance global, que se utiliza para compartir información. Se compone de un sistema de redes interconectadas de servidores donde se alojan los sitios web, con una diversidad de servicios y recursos interactivos que crece cada día.
Internet: Un medio de comunicación mundial
Clientes y Servidores
Cada uno de nosotros somos parte de Internet como Clientes, desde el momento en que accedemos a través de un Navegador y podemos ser consultantes o creadores de contenido.
El otro elemento fundamental de Internet son los Servidores, que son los ordenadores en los que se almacena y clasifica toda la información de la red ( páginas web, contenido multimedia, bases de datos, softwares... ) y nos la envían cada vez que lo solicitamos escribiendo una dirección web en el Navegador.
Relación entre Cliente y Servidor
Conexión
La palabra Internet tiene sus raíces en el inglés y está formada por el vocablo inter: que significa entre y net (network), que signidfica red electrónica.
Existen diferentes tipos de conexión a internet, distintos medios de conectarnos a la red. El primero de ellos fue la conexión por línea telefónica a través de un cable. Luego surgió el ADSL, la fibra óptica, y la conectividad 3G y 4G para dispositivos móviles.
Llamamos navegar por la red, a la acción de visitar páginas web en nuestro ordenador.
Hoy en día existen millones de aplicaciones online
¿Qué es un sitio web?
Un sitio web es un conjunto de páginas web desarrolladas en código html, relacionadas a un dominio de Internet, el cual se puede visualizar en la World WideWeb mediante los Navegadores como ser Chrome y Firefox entre otros.
Una Página Web es un documento de tipo electrónico, que contiene información digital, la cual puede venir dada por datos audiovisuales a través de textos, imágenes, gráficos, audio o vídeos y otros tantos materiales dinámicos o estáticos.
1.718 millones de portales web a fecha 3-10-2019
¿Qué son los Navegadores?
Los Navegadores son los programas que instalamos en el ordenador para acceder a cualquier sitio web en Internet. Algunos de los navegadores más utilizados sonChrome,Firefox, Safari, Tor y Opera entre otros.
Todos los Navegadores están diseñados para ser Clientes y hacer peticiones a los Servidores.
Cuando los Navegadores hacen las peticiones al Servidor, éste envía el sitio web en pequeños paquetes de datos.
El Navegador renderiza todos los paquetes del Servidor y los muestra gráficamente. Cada día los Navegadores se actualizan y se hacen más potentes para renderizar más rápido los archivos web, por lo que el contenido puede ser cada vez más complejo y dinámico.
Los motores de renderizado más potentes son Blink (Opera y Google Chrome) y Gecko (Mozilla Firefox).
Chrome y Firefox: Los navegadores más utilizados
¿Qué son los Buscadores?
Los Buscadores son sitios web a los que accedemos a través de un Navegador y nos permiten encontrar otros sitios web, imágenes, vídeos, etc, a través de palabras clave de búsqueda, los más usados son:Google, Bing, Yahoo… y también existen otros locales, pero de gran importancia en esos países por la gran cantidad de tráfico que generan, comoBaiduen China oYandexen Rusia.
Google: El buscador más utilizado del mundo
Cuando trabajamos en desarrollo web, lo ideal es que tengamos dos Navegadores, porque puede haber diferentes compatibilidades y en ocasiones hay que escribir diferentes códigos para que se visibilicen los efectos más actuales en todas las plataformas.
Ejercicio 2
Descarga los dos Navegadores que hemos mencionado anteriormente e instalalos en tu ordenador si no los tienes.
Abre el programa y escribe la siguiente linea de código:
Salva el documento y llámalo: index.html
Abre este documento con Firefox o Chrome y comprueba que se lee el texto correctamente.
Crea una carpeta y llámala "Mi_web_nombre"y guarda el archivo dentro index.html dentro.
Comprime la carpeta en un archivo zip.
Envía el documento con nombre de archivo:
3. Hipervínculos
Hipervínculo, enlace o link
Un hipervínculo es un elemento que establece un vínculo con otro recurso y normalmente vincula dos páginas de un mismo sitio web, aunque también puede apuntar a una página de un sitio web externo, un fichero, un vídeo, una imagen, etc.
Para navegar al destino al que apunta el hipervínculo, hacemos clic sobre él. También se conocen como hiperenlaces, enlaces o links.
Sintaxis de un enlace en HTML
Un hiperenlace es una parte fundamental de la arquitectura de Internet.
Tiene una sintaxis muy simple en HTML:
Enlace en html
Dependiendo de cual sea el destino, hacer clic en un link puede hacer que ocurran varias cosas. Si el destino es otra página web, el navegador la cargará y la mostrará, pero si el destino es un documento de Word, el navegador nos dará la posibilidad de visualizar o de guardar el archivo.
Enlace en html a documento
Podemos usar los links para conducir a los visitantes de nuestra web por donde queramos. Además, si queremos que se pongan en contacto con nosotros, podemos ofrecerles un link directo a nuestro mail entre otras muchas formas de contacto.
Tipos de links
Link de texto: Es un enlace asociado a un texto, si hacemos clic sobre ese texto iremos donde indique el enlace.
Simbolo de link
Link de imagen: Un hipervínculo de imagen es un enlace que se encuentra asociado a una imagen, de forma que si hacemos clic sobre esa imagen, navegamos dónde indique el link. La sintáxis de HTML es más compleja ya que incluye la etiqueta imagen.
Link local o interno: Un link local o interno es un vínculo a una página que se encuentra en el mismo sitio web.
Link externo: Un hipervínculo externo es un vínculo a un sitio externo. Es un vínculo a cualquier otro lugar fuera del sitio web actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página incluido http://www....
Link a una dirección de email: Un hipervínculo a una dirección de email es un enlace que abre automáticamente el programa de mail que tenga el usuario para poder escribir a esa dirección mail.
Ejercicio 3
Abre tu archivo index.html con el Sublimetext y borra el código que habias escrito en el ejercicio anterior:
Añade un enlace a la página de Google.
Añade un enlace al documento que has escrito en el Ejercicio1.
(Guarda el documento dentro de la misma carpeta "Mi_web_...." donde tienes el archivo index.html
Añade un enlace a tu email.
Salva el documento de nuevo como index.html
Abre este documento con Firefox o Chrome y comprueba que los tres enlaces funcionan correctamente.
Comprime la carpeta de nuevo en zip, con el index.hmlt y el documento dentro.
Direcciones URL
Las URL son las siglas en inglés de Uniform Resource Locator, que en español significa Localizador Uniforme de Recursos.
La URL es la dirección específica que se asigna a cada uno de los recursos disponibles en la red, con la finalidad de que estos puedan ser localizados o identificados. De esta forma, hay un URL para cada uno de los recursos de la red (páginas, sitios web, documentos, archivos, carpetas, vídeos, etc.) que hay en la World Wide Web.
Dominio web
El nombre de dominio es una de las piezas dentro de una URL. Es también la parte más fácilmente reconocida de la dirección completa de Internet. Cuando un usuario escribe una dirección web directamente en el espacio de barra de direcciones del navegador, comienza el proceso de ubicar la página solicitada.
Para hacer eso, las instrucciones contenidas dentro de la URL, incluyendo el nombre de dominio, deben apuntar correctamente a la ubicación.
Símbolo de link
Dirección IP
Un nombre de dominio es el nombre único y exclusivo que se le da a un sitio web en Internet para que cualquiera pueda visitarlo.
Los Navegadores web acceden a las páginas web en Internet (estas se encuentran almacenadas en hostings) a través de una dirección IP (Internet Protocol), un numero similar a este 104.28.13.62 que ayuda a saber en qué servidor se encuentran. El dominio es un nombre más accesible que utilizamos para no tener que poner estos valores númericos en los navegadores, ya que son mucho más difíciles de memorizar.
El dominio es un recurso que nos ayuda a navegar por Internet de una forma mucho más cómoda y «humanizada».
Estos dominios genéricos usan 3 letras como mínimo en su extensión y aquí se englobarían los .com, .org, .net, .gov, .edu, .info, .biz, etc, que son los más comunes.
Tipos de dominios
Hosting y servidores
Un Hosting web es un servicio que provee el espacio en Internet para los sitios web.
¿Qué significa “hosting”? Si queremos crear una página web y que otros puedan visitarla, necesitamos publicar o “subir” los archivos de nuestro sitio web (texto e imágenes) a un servicio de web hosting. En español también lo llamamos "Alojamiento web".
Estos servicios de hosting funcionan con ordenadores de grandes prestaciones (servidores web), y normalmente utilizan conexiones de alta velocidad además de muchas otras funcionalidades concernientes a seguridad y sistemas.
Los servicios de hosting ofrecen el espacio físico (dentro de un ordenador conocido como “servidor”) para que almacenemos los datos de nuestra web de modo que esté siempre online.
Existen gran variedad de servidores
Ejercicio 4
Describe 3 sitios webs que te gustan e indica por qué, analizando los siguientes puntos:
Color.
Tipo de letra.
Imágenes
Versión Móvil
Recursos gráficos (animaciones, vídeos)
Tienda online, foros, formularios.
(Crear un documento con mínimo: 450 palabras, tíene que contener un título, un cuerpo, un desenlace y 9 imágenes)
Introducción al diseño
¿Qué es el diseño?
La palabra diseño proviene del italiano disegno y significa boceto o esquema que se realiza mentalmente, en soporte material o digital, antes de concretar la producción de algo.
Cuando hablamos de diseño nos referimos a un proceso de planificación creativa, en el que buscamos solucionar algún problema concreto, especialmente en el contexto de la ingeniería, la industria, la arquitectura, la comunicación, la web y otras disciplinas.
Diseñar es imaginar algo, pensando en su forma, el aspecto, funcionalidad, operatividad y la vida útil entre otros factores.
Los diseñadores son creadores de objetos físicos, gráficos o de cualquier otra índole, que sirven para un fin específico y establecido de antemano.
La función del diseñador es transmitir una idea, un concepto o una imagen de la forma más eficaz posible. Para ello, el diseñador debe contar con una serie de herramientas como la información necesaria de lo que se va a transmitir, los elementos gráficos adecuados, su imaginación y todo aquello que pueda servir para su comunicación.
Herramientas de diseño
Características del diseño
Observación y análisis:
El diseño surge para resolver las necesidades cotidianas del ser humano.
Planificación y proyección:
Inventar propuestas para solucionar la necesidad detectada.
Construcción y ejecución:
LLevar lo que hemos imaginado a la realidad, sometiéndo a la prueba su funcionamiento.
Definir antes de diseñar
¿Qué es el diseño gráfico?
El Diseño Gráfico es el arte de comunicación y creación visual a través de texto, imágenes, símbolos o ilustraciones y cuenta unos aspectos básicos que facilitan la visión principal de dicha creación.
Colores: Son el principal elemento del diseño. Determinan el impacto y personalidad de cada diseño.
Tipografía: Es el arte o proceso de diseñar, arreglar o acomodar texto.
Arte Visual: Es la parte donde aparecen la fotografía e ilustración.
Distribución del diseño: Organización visual de todos los elementos en el proyecto.
El diseño web es una rama del diseño gráfico que se especializa en los aspectos del diseño que atañen a Internet, por lo que añade además una parte audiovisual e interactiva, utilizando también elementos de la informática y la programación.
Adaptaciones de diseño para móvil
Ejercicio 2.1
Busca en internet y encuentra al menos 3 páginas web que te atraigan por su diseño y explica por que.
(Archivo .doc que contenga un Título, un cuerpo de téxto, conclusiones y 3 imágenes)
Envía el documento con nombre de archivo: Ejercicio2.1_tunombre.doc
Diseño web
Antes de diseñar una web hay que tener claros los objetivos que se quieren conseguir con dicha web, tenemos que definir qué es lo que queremos comunicar y de qué manera queremos comunicarlo antes de ponernos a diseñarlo.
El diseño es fundamental para el éxito de un sitio web. Entendemos por diseño web la forma y el estilo gráfico de la página, es decir, no basta con crear una página mediante código HTML y CSS, sino que la página debe resultar útil y atractiva para el usuario.
Primeros bocetos de una web
Elementos del diseño web
Dentro del diseño encontramos los siguiente aspectos que iremos viendo a continuación:
Colores
Textos
Titulares
Maquetación
Distribución y tamaño de los elementos
Imágenes y vídeos
Recursos interactivos.
Adaptaciones de diseño en distintos dispositivos
Antes de comenzar a diseñar
El diseño web suele ser el primer punto de contacto entre la persona y el producto o servicio que se ofrece.
Para que un diseño sea adecuado debemos mostrar en nuestra web la información necesaria para conocer al cliente, mercado, consumidores, producto o servicio.
Antes de comenzar debemos estudiar a la audiencia, evaluar y organizar elcontenido y posteriormente diseñar la estructura de la página.
Estudiar la audiencia para definir el mensaje
Ejercicio 2.2
Analiza los siguientes puntos en los 3 sitios webs que has descrito en el primer ejercicio:
Color.
Tipo de letra.
Imágenes
Versión Móvil
Recursos gráficos (animaciones, vídeos)
Tienda online, foros, formularios.
(Archivo doc con 450 palabras aprox. Título, cuerpo, desenlace y 9 imágenes)
Introducción al diseño de interfaces (User Interface)
¿Qué es UI?
El UI (User interface) o interface de usuario, es la parte visual de una página web, la interfaz gráfica que verá un usuario que entre en nuestro sitio.
Es la representación visual y táctil que permite a un usuario interactuar con una web o aplicación online.
Si esto lo llevamos a la práctica, en una página web la interfaz de usuario (UI) sería una serie de botones y cómo se ven, y la experiencia de usuario (UX) serían los botones en sí mismos y las acciones que realizan.
Por eso es importante que ambos factores UI y UX vayan de la mano durante todo el proceso.
Diseñando interfaces de usuario
Componentes de UI (Interfaz de Usuario)
La UI define las posibilidades de interacción junto con el diseño visual. Las decisiones de Arquitectura de Información, Diseño de Interacción o Diseño Visual se ven reflejadas aquí.
Los elementos que generalmente se presentan en una UI para un producto digital son:
Controles de Input: botones, campos de texto, checkboxes, radio buttons, listas drop down, switches, campos de fecha.
Componentes de Navegación: breadcrumbs, sliders, formularios de búsqueda, paginación, sliders, tags, iconos.
Componentes de Información: tooltips, iconos, barras de progreso, notificaciones, cajas de mensajes, modals,
Contenedores: acordeones, sistemas de paginación.
Diferentes tipos de UI (interface de usuario)
Principios del Diseño de UI (Interfaz de Usuario)
Existen ciertos principios para el diseño de interfaz centrado en el usuario:
Estructura: El diseño debe organizar la interfaz de usuario con un fin, de manera útil y basada en modelos claros y consistentes, que tienen que ser evidentes y reconocibles para los usuarios.
Relaciondo conceptos entre sí.
Hacer que estos elementos similares se parezcan entre si.
El principio de estructura es el pilar de la interfaz de usuario.
Simplicidad: El diseño debe facilitar las tareas sencillas y comunes, comunicarse de forma clara y sencilla en el propio idioma del usuario y proporcionar buenos accesos directos al producto o servicio que se quiere ofrecer.
Visibilidad: El diseño debe hacer visibles todas las opciones y materiales necesarios para cumplir su función, sin distraer al usuario con información superflua o redundante. Un buen diseño no abruma a los usuarios con alternativas ni confunde con información innecesaria.
Retroalimentación: El diseño debe mantener a los usuarios informados de las acciones o interpretaciones a través de un lenguaje claro y conciso que sea familiar para los usuarios.
Tolerancia: El diseño debe ser flexible y tolerante, reduciendo el costo de los errores al permitir deshacer y rehacer, tolerando entradas y secuencias variadas e interpretando todas las acciones razonables.
Reuso: El diseño debe reutilizar los componentes y comportamientos internos y externos, manteniendo la coherencia con el objetivo.
Es muy importante conseguir un diseño UI atractivo para captar la atención del usuario, pero también ha de ser útil ya que cuanto más se facilite al usuario la navegación, más fácil será hacer que se quede más tiempo a navegar por nuestro sitio y conseguir una conversión (compra del producto o servicio por ejemplo), si el usuario no entiende dónde se sitúan las cosas y no las encuentra se marchará.
Dispositivos web
Ejercicio 2.3
Describe como quieres que sea tu página web, busca un tema que te guste o plantea algo que tengas en mente. (mínimo: 450 palabras)
Analiza los siguientes puntos basandote en el ejercicio anterior:
Color.
Tipo de letra.
Imágenes
Versión Móvil
Recursos gráficos (animaciones, vídeos)
Tienda online, foros, formularios.
(Archivo doc con 450 palabras aprox. Título, cuerpo, desenlace y 9 imágenes)
Experiencia de usuario (UX)
La experiencia de usuario es el diseño orientado y enfocado en el usuario y sus emociones. Es un diseño basado en los sentimientos que un usuario tendrá al visitar nuestra web, y se dedica a estudiar las características que ha de tener una web para convertirla una buena experiencia.
UX (las siglas en inglés User eXperience) o en español Experiencia de Usuario, es aquello que una persona percibe al entrar en una página web e interactuar su producto o servicio.
Definición del UX
Cómo crear una buena experiencia de usuario (UX)
Para lograr una buena UX debemos enfocarnos en diseñar elementos útiles, usables y deseables, lo cual influye en que el usuario se sienta satisfecho y feliz
Para lograr esto hay ciertas fases o procesos a llevar a cabo, como la definición de la personalidad del usuario, el escenario o tarea a realizar por él, la organización y jerarquía de los contenidos y los puntos en los que debería tomar una decisión.
Para realizar un diseño con una buena UX siempre intentaremos comprender las necesidades y deseos del usuario.
Fundamentos de la experiencia de usuario (UX)
Componentes de la experiencia de usuario (UX)
Para entender que es el diseño de experiencia de usuario existen una serie de factores por analizar:
Arquitectura de la Información (AI):
La Arquitectura de Información investiga la manera de conectar a las personas con el contenido de una manera que sea más comprensible y accesible para ellas.
Se basa en crear una serie de jerarquías de contenido en una página web y usar diferentes elementos de navegación para añadir una estructura clara y lo más directa posible.
Organiza los elementos y la información según su contexto y consigue que sea fácil encontrar contenido.
Diseño de Interacción:
El Diseño de Interacción consiste en desarrollar interacciones específicas entre los usuarios y la pantalla del dispositivo que estemos empleando.
El diseño de interacción se utiliza para definir los comportamientos y las funciones específicas de los diferentes componentes de una página web o app.
Usabilidad:
Se basa en el estudio de la facilidad de uso de una web o aplicación. El diseño debe cubrir las necesidades de los usuarios para garantizar la correcta experiencia.
Prototipado:
Para garantizar un buen diseño web se suele utilizar el prototipado. Se trata de una versión preliminar que sirve para probar cómo va el diseño y si se adecúa a los propósitos del proyecto. Es un elemento muy útil que da una idea sobre la funcionalidad del diseño antes de aplicarlo.
Diseño Visual:
El diseño visual nos describirá el producto o servicio a través del color, la jerarquía visual, la tipografía y es una parte crucial de la experiencia de usuario general.
Apps en un dispositivo móvil
Ejercicio 3.4
Realiza un boceto previo de como seria la portada o página inicial (HOME) de tu página web, tal y como la has descrito en el ejercicio anterior.
Puedes hacerlo a mano o utilizar algún programa de edición de imagen como Photoshop o Gimp.
Recuerda realizar tu diseño de una manera sencilla y lo más simple posible.
Busca o crea algunas imagenes que describan tu producto o servicio web.
Añade las imagenes en un doc y explica brevemente tus intenciones sobre lo que planeas ofrecer en tu página web. (450 palabras aprox.)
Envía el documento con nombre de archivo: Ejercicio2.4_tunombre.doc
Los ejercicios se compartirán con el resto de la clase.
Los colores y las emociones
Cada color provoca en las personas unas sensaciones determinadas y está asociado a distintas emociones, por lo que éste influye de manera determinante en cómo se sienten y comportan los usuarios en tu web.
Acertar con la elección y cantidad de colores que utilizas en tu página web es fundamental para que ésta refleje correctamente quién eres y cuál es la filosofía de tu negocio.
El color es una herramienta que nos permite comunicar emociones en un sitio web. La mayoría de estas emociones son percibidas de forma inconsciente.
A la hora de crear un diseño, hemos de conocer cuáles son los efectos psicológicos que vamos a inspirar y cómo debemos escoger y combinar la paleta de colores para llavar conseguirlo.
Rojo
El rojo está asociado con la pasión, el amor, la energía. Es el color más eficaz para llamar la atención del usuario. El rojo se podría usar por ejemplo en webs juveniles, de comida y de deporte.
Azul
El azul significa confianza, calidad y proporciona frescura y seguridad. El azul suele usarse en grandes empresas, webs de servicios financieros, políticos y servicios públicos.
Amarillo
El color amarillo se asocia a la felicidad, la alergia, el optimismo y la energía. Es ideal para sitios que quieran demostrar inteligencia y autoridad y también para sitios webs infantiles.
El amarillo con matices más oscuros puede sugerir también antigüedad o sabiduría, por lo que también es aconsejable para webs de aventuras o arqueología.
Verde
El verde es el color de la naturaleza, de la paz, de la salud y del bienestar. Es el color que nuestros ojos procesan mejor. Es aconsejable usarlo para crear entornos que transmitan tranquilidad. Se puede utilizar en webs de ciencia, naturaleza, farmacias, medicina o turismo, por ejemplo.
Naranja
El naranja transmite sofisticación, atención, emoción diversión. Es un color menos apasionado que el rojo pero que también transmite atención, por ello se recomienda su uso para los call to actions de los e-commerce (Tiendas online) al ser un color que llama a la acción.
Negro
Junto con el blanco, el color más versátil. Transmite elegancia, sofisticación y neutralidad. Se suele utilizar para formar contraste con el resto de colores de nuestra web. Es un color que resulta muy apropiado para webs de moda, cosméticos y lujo.
Blanco
Va asociado a la pureza, a la seguridad, transparencia y seguridad. Junto con el negro, el color más versátil. Dadas sus características, se suele usar en todo tipo de páginas.
Comprender como afecta el color a las personas puede ser una herramienta de trabajo eficaz para transmitir emociones y mejorar la conversión de tu sitio web.
El color influye en nuestras emociones
Licencia: licencia propietaria
Color e identidad
Debemos elegir qué valores queremos transmitir, que sensaciones quieres provocar y a qué público objetivo nos vamos a dirigir.
La elección de colores para el logotipo, al igual que los de nuestra web, deben estar basados en la psicología del color.
Debemos adaptar el logotipo y sus colores para que representen nuestros valores de marca, nuestra filosofía y mensaje.
Como norma general lo más adecuado es usar uno o dos colores neutros, como pueden ser los grises, que nos servirán para separar espacios y crear divisiones.
Después uno o dos colores más llamativos para atraer la atención del usuario cuando lo consideremos necesario. Podemos utilizar uno para los enlaces y otro para los botones y otras llamadas a la acción.
Rueda de color
Color RGB
El sistema que utilizan nuestros dispositivos para recrear los colores se llama RGB (Red, Green, Blue), rojo, verde y azul, que son los colores a partir de los cuales derivan todos los demás.
El RGB tiene una gama cromática más amplia que la utilizada habitualmente para impresión, llamada cuatricromía (CMYK) y que se basa en cuatro planchas que se superponen.
Colores RGB
Colores web
Cada color RGB tiene una nomenclatura hexadecimal en el código HTML.
Los primeros dos dígitos representan a la cantidad de Rojo que tiene el color. Los segundos dígitos representan al verde y los terceros al azul.
El 00 representa la menor cantidad de un color y FF (255) la máxima. Por ejemplo, el color rojo se representa como #FF0000, el color verde como #00FF00 y el color azul como #0000FF.
El blanco seria #FFFFFF y el negro #000000.
Colores web básicos y su código html
Sitios de utilidad en internet
En la siguiente lista encontrarás varios sitios webs de referencia para encontrar la paleta de colores más adecuada para tu proyecto:
Analiza y busca una paleta de colores que se adapte a lo que quieres transmitir con tu marca o página web, puedes ayudarte buscando en las webs de la lista anterior.
Buscar los valores hexadecimales de los colores que has escogido.
Explica por que quieres utilizar estos colores y en qué elementos de tu web los usarías.
Logotipo
Titulos
Enlaces
Botones
Llamadas de atención...
(450 palabras aprox.)
¿Qué es la Tipografía?
La tipografía es el arte de escribir con diferentes tipos de letras ocaligrafía, algo sumamente importante en el diseño web donde lo visual es esencial para atraer la atención del público o generar diferentes reacciones en él.
La palabra tipografía proviene del griego, donde tipos significa golpe y graphos escribir, escritura. La tipografía es una forma de escribir con diferentes huellas, estilos y diseños.
Existen diferentes formas de escribir una palabra, con trazos más finos o más gruesos, con letras encadenadas entre sí, con letras sueltas y simples, con serif o sin serif, etc. que generan diferentes sensaciones en aquel que las observa.
Fuentes tipográficas
Tipografía web
La tipografía es una herramienta de comunicación que vista desde la perspectiva del diseño web, es un poderoso transmisor de información e ideas.
La forma visual y el estilo de cada letra en las diferentes familias tipográficas provoca diferentes impresiones que pueden ser usadas para capturar el tono de voz del autor o llamar la atención del usuario o del cliente de nuestra web.
La tipografía por sí misma puede persuadir y reforzar ideas presentadas con palabras. Por ejemplo, la sensación lúdica e infantil que provocan las fuentes Comic Sans, la legibilidad y calma de la serie Verdana y Tahoma, la elegancia de Book Antigua, la universalidad de Times y Arial, o la sofisticada Futura y Univers.
Existen cientos de tipografías que puedes utilizar en tu sitio web, pero el éxito reside en la capacidad de elegirlas y combinarlas con acierto.
Tipografía caligráfica
¿Qué tipografía usar en nuestra web?
Principales categorías tipográficas más comunes para una página web:
Serifa: La tipografía serifa tiene pequeños trazos que se extienden desde los extremos de las letras. Son adecuadas para títulos, enlaces o párrafos cortos, no para textos largos y pueden darle a tu página un estilo clásico o tradicional.
Sin serifa:La tipografía sin serifa no tiene pinceladas o trazos, sino cortes limpios en los extremos. La mayoría de las páginas emplean tipografía sin serifa para el texto del cuerpo de la página, ya que son más legibles en la pantalla y dan la sensación de páginas modernas. Soy muy recomendables por ser limpias y versátiles y funcionan muy bien en la navegación web gracias a su legibilidad.
No abuses de tipografías diferentes en tu web. Escoge como máximo dos o tres diferentes y busca una combinación atractiva.
Las tipografías tienen una personalidad propia que es la que tienes impregnar en tu marca. Por eso debes elegirlas correctamente y en función de los valores que quieras transmitir.
Busca una buena combinación de tipografías (puedes utilizar dos diferentes): una para el cuerpo de texto de entradas y páginas, y otra para los titulares, botones, subtítulos, es decir, las partes donde el texto es más llamativo y hay menos cantidad.
Fuentes tipográficas seguras para la web
Ejercicio 6
Analiza y busca como mínimo dos fuentes tipográficas que se adapten a lo que quieres transmitir con tu marca o página web, puedes ayudarte buscando en las webs que propongo a continuación:
Explica por que quieres utilizar estas tipografías y en qué elementos de tu web los usarías.
Logotipo
Titulos
Enlaces
Botones
Llamadas de atención...
Composición web
Una vez comprendida la identidad del color y la tipografía de tu proyecto, el siguiente paso sería encontrar el orden y la composición de los elementos en un solo lugar.
Internet está compuesto de millones de sitios web, cada uno con su propio contenido único y enlaces para otros sitios a través de la red. Los sitios web vienen en diferentes formas y tamaños, desde sitios oficiales del gobierno para llevar a cabo negocios importantes hasta sitios de entretenimiento y blogs personales. Mientras que estos sitios varían mucho, todos hacen uso de los mismos elementos básicos.
Diferentes composiciones web
Elementos de una página web
Una página web está compuesta principalmentepor estos elementos:
Cabecera (header): La cabecera está situada en la parte superior de la web y en ella suelen aparecer el logotipo y el menú de la página.
Barra de navegación (Sidebar): Suele estar situada a la derecha o a la izquierda, también hay páginas web que tienen dos sidebars, una a cada lado, esto es desaconsejable a la hora de diseñar pensando en dispositivos como el móvil, ya que quedan desplazadas.
Cuerpo o contenido central (body): Dentro de este contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc.
Pie de página (footer): Localizado abajo del sitio web, generalmente aparece ahí la información relacionada con el Copyright y menús legales o secundarios. Se usa mucho para incluir información de redes sociales, direcciones o noticias.
Estructura web básica
Ejercicio 7
Observa el boceto que habias realizado en los ejercicios anteriores y analiza si tiene estos elementos que hemos visto en la página anterior.
Readapta tu boceto para que se ciña a estas características que hemos aprendido.
Envía el documento con nombre de archivo: Ejercicio2.7_tunombre.doc
Descarga las tipografías.
Los ejercicios se compartirán con el resto de la clase.
Formatos de imágen web
En una página web las imágenes son un recurso necesario e imprescindible para conseguir mantener la atención del público y evitar aburrirlos.
Las imágenes aportan dinamismo y personalidad a tu página y, siempre y cuando tengan relación con el concepto, objetivo y estilo de la web, enriquecen el contenido sin desviar la atención del usuario.
Las imágenes son parte fundamental de cualquier sitio web y cuando trabajamos con ellas debemos tener en cuenta el equilibrio necesario entre su calidad y el tamaño de descarga de las mismas. Un sitio web con imágenes de alta calidad consumirá mucho ancho de banda y será lento a la hora de renderizarse en los navegadores, lo que puede penalizar el comportamiento: los usuarios abandonarán el sitio web si tarda mucho en mostrarse.
Composiciones web adaptadas
Formatos de imágen web
Imágenes JPG
Es recomendable para fotografías o imágenes con degradados. Cualquier programa editor de gráficos permite guardar una imagen en este formato con diferentes grados de compresión. Cuanto más comprimamos la imagen menor es su calidad. Si queremos imágenes de alta calidad debemos soportar archivos de tamaños elevados. Lo ideal es que una imagen web no ocupe más me medio mega.
Imágenes GIF
Nos permite añadir imágenes animadas, algo muy útil para llamar la atención sobre algo en concreto como puedan ser las novedades de nuestro sitio o un anuncio de algún servicio. Pero conviene no abusar de las animaciones, son archivos muy grandes y pueden llegar a resultar pesados.
Imágenes PNG
El formato PNG es el un formato muy utilizado para la web porque permite transparencias y también podemos conseguir que pese poco, también es conveniente que no ocupe más de un mega.
Imágenes WebP
Logo WebPEl WebP es un formato nuevo de imagen que está siendo desarrollado por Google desde hace casi una década. Su misión es la de ofrecer compresiones con y sin pérdidas para unificar las ventajas de los tres formatos anteriores: JPEG, PNG y GIF tratando de reducir al máximo el tamaño que ocupan las imágenes que lo utilizan para intentar hacer la web más rápida. Este formato se está extendiendo con gran velocidad entre las páginas webs por el ahorro de espacio, la buena calidad y la versatilidad para contener animaciones o transparencias.
Herramientas para comprimir imágenes
Tenemos a nuestra disposición diferentes herramientas para comprimir imágenes, tanto programas como plataformas online:
Adobe Photoshop:Programa por excelencia para diseñadores gráficos, Adobe Photoshop nos permite una correcta optimización de la imagen. Una vez abierto el documento, puedes definir el tamaño y resolución de la imagen
Gimp:Gimp siempre ha sido una de las alternativas gratuitas a Adobe Photoshop. Para ello, simplemente hay que abrir el apartado de imagen e ir a “Escalar Imagen”, donde se nos abre un menú con los detalles de anchura, altura y resolución.
Tinypng: Es ideal si queremos hacer un trabajo de optimización de imágenes rápido, sin utilizar programas instalados previamente en nuestro ordenador, con este programa podemos comprimir imágenes con transparencia sin pérdida de calidad. Simplemente, subimos un conjunto de imágenes ya adaptadas al tamaño deseado y se comprimirán automáticamente.
Logo del programa Gimp
Ejercicio 8
Busca o crea al menos 5 imágenes para tu página web.
Añadelas en un doc y explica brevemente para que vas a utilizarlas.
Envía el documento con nombre de archivo: Ejercicio2.8_tunombre.doc
Los ejercicios se compartirán con el resto de la clase.
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.
Se valorará consultar cualquier duda sobre los ejercicios.
Las tutorías pueden ser de 17 a 21 de lunes a viernes.
Para concertar una tutoría escribir a:
Diseño responsive
El Diseño Responsive (o adaptativo) es una técnica de diseño web utilizada para adaptar los diferentes elementos de una web para que se vean correctamente en todos los dispositivos, sea cual sea su resolución de la pantalla, desde el escritorio del ordenador a tablets y móviles.
La página web detecta automáticamente el ancho de la pantalla del dispositivo y adapta todos los elementos de la página, desde el tamaño de letra hasta las imágenes y los menús, para ofrecer al usuario la mejor experiencia posible.
Para que una web sea responsive necesita un código CSS que especifique los estilos y posiciones de los elementos para diferentes tipos de pantalla.
Cuando hacemos una web desde cero es posible que tengamos que definir los estilos de algunos elementos en CSS al menos tres veces, una para la versión de escritorio, otra para la versión para tablets, y otra para la versión para smartphones.
El Diseño Responsive sirve para que un usuario pueda entrar a una página web desde un ordenador o un teléfono móvil sin que su capacidad para navegar por ella se vea perjudicada. Busca conseguir siempre la mejor experiencia de usuario, independientemente del dispositivo que use para entrar a una página web.
También sirve para mejorar el posicionamiento de tu web ya que Google premia una experiencia de uso cómoda y fluida.
Adaptación de diseño a dispositivos
¿En qué consiste un diseño responsive?
Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se usa código media-queries que veremos más adelante.
El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural.
Adaptación a dispositivos web
¿Qué elementos tenemos que adaptar en un diseño responsive?
Las tipografías. El tamaño de letra adecuado cambia en función de la pantalla, tenemos que poder leer los textos sin necesidad de hacer zoom y esto implica, por ejemplo, que no debemos incluir columnas con un ancho predeterminado en un sitio responsive. Tambien es importante elegir una tipografía que se entienda y sea legible en todos los dispositivos.
Las imágenes y los vídeos. Los elementos visuales de la página deben seguir una proporción lógica en función del dispositivo donde se muestren, de manera que podamos verlos con comodidad.
El formato horizontal o vertical. En particular, es necesario tener en cuenta que los usuarios de móviles suelen preferir el vertical, pero pueden alternar entre ambos para visualizar un contenido determinado.
La usabilidad. Los usuarios de móviles y tablets usan pantallas táctiles para interactuar con los contenidos, mientras que en los ordenadores de escritorio se usa el ratón, lo que implica que los menús, los botones y demás elementos deben ser cómodos en todas las plataformas y tener unos efectos específicos para ofrecer una buena experiencia de usuario en ambos casos.
Los tiempos de carga. Intentar cargar una web de escritorio desde un teléfono móvil puede ser una experiencia extremadamente frustrante para el usuario y hacer que abandone fácilmente. Por eso, es necesario optimizar al máximo los tiempos de carga en todos los dispositivos.
Los efectos. Por ejemplo, el hover funciona en ordenadores de escritorio, pero no en móviles, así que si colocas en él el "leer más" de un artículo o noticia los usuarios móviles no podrán acceder a él.
Un diseño para cada dispositivo
Mobile-First design
Mobile-First (móvil primero) es un algoritmo de Google que sea aplica desde principios de 2018. Este algoritmo da prioridad a las webs con una versión adaptada al uso de dispositivos móviles y tablets.
Esta nueva forma de diseñar parte de una escala que va desde el diseño para dispositivo móvil hasta adaptar el diseño a pantallas de gran tamaño.
Para aplicar esta filosofía, debemos tener en cuenta que todo lo que no sea esencial debe quedar fuera de nuestro diseño. Para hacerlo debemos pensar en lo que buscan nuestros consumidores, qué es lo que no puede faltar en ningún caso.
Cuando se aplica el Responsive Web Design, cada vez es más habitual que se tomen las decisiones pensando en este método. Esto se debe a que la mayoría de los usuarios actualmente acceden a la información a través de sus dispositivos móviles, aunque también se sigue haciendo desde escritorio o tablet, por lo que tenemos que pensar siempre en las 3 opciones.
Esta tendencia de diseño web, implica realizar primeramente un diseño básado en el dispositivo movil y despues hacer la versión para escritorio de ordenador.
Mobile first
Ejercicio 1
Analiza que elementos del boceto web que has bocetado tendrías que adaptar para que se vean correctamente en el móvil, realiza un boceto donde quede claro como se reorganizarían todos los elementos.
Envía el documento con nombre de archivo: Ejercicio3.1_tunombre.doc
Los ejercicios se compartirán con el resto de la clase.
Estructura de una página web
En Internet hay muchos tipos de Páginas Web y cada una tiene su propia temática y objetivos. No es lo mismo una página web corporativa, cuyo objetivo es informar al usuario sobre sus servicios, que una tienda online cuyo objetivo es vender un producto. No obstante, casi todas ellas comparten una serie de elementos en común:
La cabecera (Header)
El contenido o cuerpo (Body)
Barra lateral (Sidebar)
Pie de la página (Footer)
Estructura básica de una web
La cabecera
La cabecera o header contiene el menú principal y el logotipo de la empresa o el nombre del sitio. Suele srepetirse en todas las páginas de la web, junto con el pie (Footer), suelen no variar su estructura en todas las páginas.
El menú de navegación indicará al usuario a que sección de la página web puede dirigirse. Por eso es importante que esté siempre visible, ya sea de forma extendida cuando navegamos a pantalla completa (Desktop) o de forma contraída como aparece en los dispositivos móviles. Es muy útil que el menú contenga un buscador para que el usuario pueda encontrar rápidamente un contenido que buscar si la web es muy extensa.
En la portada (Home) suele venir acompañado de un slider o deslizador de imágenes con titulares o claims del sitio que invitan a seguir navegando. Estas imágenes suelen ser de calidad máyor tamaño que el resto y muestran fotos de la empresa o fotos relacionadas con el sector, etc.
También podemos poner vídeos cortos de gran tamaño en vez de estas imágenes.
El tamaño del encabezado en la portada depende mucho del tipo de página, siendo pantalla completa la web de un estudio de fotografía o un tercio de la altura un sitio de Tienda online por ejemplo.
Partes de una web - La Home
El cuerpo
En el cuerpo de la página Web, lo que se conoce como main content, iría el contenido principal de la Web.
El cuerpo puede estar estructurado a una o varias columnas. Según mejor nos encaje en función de nuestro contenido. A veces vemos el cuerpo dividido en dos columnas. Una ocupando la mayor parte del ancho, unas 3/4 partes aproximadamente que es donde iría el contenido más relevante. Y otra parte ocupando el resto de ancho, 1/4 parte aproximadamente. A esta parte se la llama sidebar. En esta zona encontramos espacios para publicidad, Redes Sociales… Este tipo de distribución de columnas es muy habitual en Blogs.
Estructura web: Body y Sidebar
El pie de página o Footer
El footer o pie de página aparecerá en la parte de abajo de nuestra web en todas las páginas.
En él se muestran normalmente los enlaces a las secciones más relevantes de nuestro sitio, los enlaces a las redes sociales de nuestra organización, el acceso a contacto y los enlaces obligatorios por ley a la Política de Privacidad, Cookies y Condiciones de uso.
Dependiendo del espacio que tengamos y el contenido que queramos mostrar puede ser interesante que aparezcan la dirección o razón social, teléfonos, etc.
Estructura web: Footer
Práctica Diseño de Estructura Web
Tomando como referencia los componentes que hemos aprendido de la estructura web, analiza tu boceto y diseña tu Homepage o Página de inicio definitiva.
Realiza tres propuestas gráficas y explica cual consideras que es la más adecuada y explica porqué.
Realiza el diseño en cualquier programa de edición gráfica.
Envía el documento con nombre de archivo: Practica1_tunombre.doc
Los ejercicios se compartirán con el resto de la clase.
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.
Se valorará consultar cualquier duda sobre los ejercicios.
Las tutorías pueden ser de 17 a 21 de lunes a viernes.
Para concertar una tutoría escribir a:
Secciones principales de una página web
De igual manera que la portada o Homepage de la web, nuestro sitio se organizará en Secciones accesibles desde el menú principal.
El contenido debe ser claro y conciso. Es importante mostrar imágenes, fotos y diseños vistosos para mantener el interés del usuario y es fundamental que las secciones estén bien tituladas para que el usuario en todo momento sepa dónde está y de dónde viene.
Para obtener buenos resultados de posicionamiento (SEO) es fundamental que estas secciones tengan el título utilizando las etiquetas HTML para tal efecto,
Los títulos de la página se definen en HTML como h1 y los subtítulos como h2.
También es muy útil colocar los denominados breadcrumbs (“migas de pan” en inglés) que muestran junto al título, el camino por las secciones y apartados que hemos seguido hasta llegar a la página donde nos encontramos. Esta funcionalidad nos permitirá volver a varios niveles superiores pinchando en los enlaces mostrados en estas “migas de pan”, lo que permite al usuario navegar de forma fluida conjuntamente con los menús disponibles en el sitio.
Diferentes formas de organizar el contenido web
Inicio o Homepage
Si hablamos de las partes de una web, la página principal o Home es la más importante de todas. En ella se incluye la información más importante de tu empresa ya que es en la que tienes que proyectar tu marca y mostrar a tus visitas a qué te dedicas.
Además de los elementos propios de la cabecera y el footer (que son iguales en todas las páginas), en la página de inicio podemos añadir:
Llamadas a la acción: imprescindibles para lograr que tus visitas realicen la acción que tú sugieres: comprar/suscribirse…
Resumen de tus productos y servicios: generalmente se suele hacer mención a tus productos mediante una buena imagen o un eslogan, con el objetivo de que tus visitas en solo 3 segundos sepan a qué te dedicas.
Ofertas: si tienes una oferta importante y que quieres destacar, la página de inicio suele ser la parte de la web más adecuada para anunciarla.
Indicadores de éxito: número de clientes, número de empleados, países en los que operas, años de experiencia.
Testimonios o colaboraciones: Es muy habitual encontrar también en página principal algún testimonio, reseñas o simplemente los logos de las empresas para las que has trabajado o con las que colaboras.
La página de inicio está alojada siempre en el dominio principal y su dirección será la principal: tudominio.com
Ejemplos de estructuras web
Contacto
Muchas empresas crean un sitio en internet para mostrar ahi la información más importante de su negocio o marca, algunas también incluyen tiendas online, foros y contenidos de todo tipo, la información de contacto es en todos los casos una parte sumamente importante y tiene que estar bien visible dentro de la página.
El teléfono, la dirección y los horarios son tres elementos básicos que deben estar sí o sí en todas las páginas de contacto y si podemos, también en la cabecera y en el footer.
Además de estos tres elementos fundamentales es muy recomendable incluir los siguientes elementos:
Formulario de contacto: Darás a tus clientes la posibilidad de contactar contigo las 24 horas del día y esto transmite muy buena imagen.
Dirección de email profesional: Aunque cada vez es algo más habitual, tampoco es nada raro encontrarte con emails del tipo nombreempresa@gmail.com.
Existen muchas formas de contacto vía web
Productos y servicios
Cuando creamos el contenido de una web, lo ideal es que la información más detallada de los productos que vendemos o los servicios que ofrecemos esté incluida en una página específica accesible desde el menú principal.
En esta parte de la página web debemos incluir todo lo relacionado con los productos o servicios:
Ventajas de tus productos
Principales características
A quién están dirigidos
El precio
Gastos de envío, etc.
No debemos olvidar las llamadas a la acción en esta parte de la web. Textos como «¡Lo quiero!», «Añadir a la cesta» o «Reserva ya» pueden conducir a nuestras visitas hacia el objetivo final.
El contenido principal de la web suele centrarse a modo de catálogo en productos clasificados por categorías, familias, etc… y a veces contar con una Tienda Online, que nos permite adquirir los productos al momento. Al igual que los servicios, que se suelen desglosar con una clasificación que facilita el entendimiento al cliente potencial para dirigir su atención a la sección que más le interese.
Una tienda online bien diseñada puede beneficiar tanto a creadores como a clientes
Blog
Cuando hablamos de distribución de contenido y partes de una página web, podemos decir que la página del blog es indiscutiblemente una de las más importantes de nuestra web.
Crear un blog puede hacer que un negocio despegue de una vez por todas. Es indispensable para la estrategia de contenidos y una pieza clave si queremos mejorar nuestro posicionamiento orgánico en Google y ganar visitas a nuestra web.
Los elementos web más comunes que debemos incluir en nuestro blog son:
Buscador: Muy importante para conseguir tener un contenido accesible.
Formulario de suscripción: Incluir una caja de suscripción en un blog es una forma de generar leads (clientes potenciales) de calidad. Aunque no sean clientes, ya tendremos su cuenta de correo electrónico para enviarle el contenido que publicas y, poco a poco, podemos ir acercándolos al proceso de compra.
Categorías y etiquetas: Otro de los elementos que es recomendable incluir en esta parte de nuestra web es una sección con las categorías (e incluso las etiquetas más importantes) de los contenidos de tu blog. Es una buena forma de estructurar el contenido y mejorar la usabilidad de nuestro sitio.
El blog es una herramienta fundamental para atraer usuarios a nuestra web
Política de privacidad y cookies
Sin entrar profundamente en aspectos de diseño hemos mostrado en este artículo lo importantes que pueden ser algunas decisiones a la hora de elaborar y configurar nuestro sitio web. Dependiendo de lo que hagamos conseguiremos más tráfico que repercutirá en nuestros resultados, ya sea vendiendo en un sitio de Tienda online, por publicidad que tengamos en nuestro sitio o simplemente por darnos a conocer al mundo.
Seguramente que es una de las páginas menos vistas de una web, pero con el GDPR, uno de los requisitos básicos es proporcionar a tus usuarios toda la información relacionada con el procesamiento de los datos que se recopilan a través de tu sitio web.
Normalmente se incluye en el pie de página o footer, así como en los avisos de cookies o cuando incluyes algún formulario de registro o suscripción.
Estas son solo algunas de las páginas más importantes o comunes que puedes localizar en una web, pero no las únicas. En función del contenido que necesites mostrar a tus usuarios, necesitarás crear o suprimir algunas.
Política de privacidad: Una página aburrida pero obligatoria en nuestro sitio web
Conclusiones
Dependiendo de lo que hagamos conseguiremos más tráfico que repercutirá en nuestros resultados, ya sea vendiendo en un sitio de Tienda online, por publicidad que tengamos en nuestro sitio o simplemente por darnos a conocer al mundo.
Generalmente cuando se habla de las partes de una web nos referimos a la estructura de la misma, es decir, al encabezado (header), al cuerpo (body) y al pie de página (footer).
Pero también podemos hablar de las partes de una web cuando nos referimos a las diferentes páginas que existen dentro de un sitio web. Saber en qué consisten cada una de estas páginas y los elementos más comunes que las componen es fundamental para estructurar una base de web que consiga los resultados que deseamos.
Práctica - Diseño de contenido Web
1. Diseña y crea igual que hiciste con la HOMEPAGE las siguientes páginas de tu web
Homepage ( Página principal )
Quienes somos
Servicios
Blog
Contacto
Añade Redes sociales, tienda online y lo que se te ocurra que no hayamos visto en el tema.
Todas estás páginas pueden cambiar de nombre, estos son solo títulos orientativos.
2. Una aprobados todos los diseños de tu web:
analiza los bocetos que has realizado y adapta tu diseño a móvil y tablet creando una serie de nuevos diseños, uno de cada una de las páginas.
¿Qué es el HTML?
El HTML es el lenguaje que utilizamos para hacer páginas web. Sus siglas quieren decir Hypertext Markup Language que significa Lenguaje de Marcas de Hipertexto.
Esto quiere decir que es un lenguaje que marca el texto con unas etiquetas o tags para identificarlo y poder dotarlo de un diseño y una interacción.
Estas etiquetas no serán mostradas en el navegador, tan solo enviarán la información para que podamos ver el contenido adecuadamente.
El HTML es un lenguaje universal, que funciona en cualquier plataforma (Windows, Mac, Linux, Unix, OS/2, etc.) y con cualquier navegador o browser como Chrome, Opera, Firefox, etc.
Cuando salvamos un archivo en html, tenemos que hacerlo con la extensión .htm o .html, ésta extensión le indica al navegador como Firefox o Chrome que el archivo es un documento web. El documento principal de una página web se llama index.html, este es el archivo principal que busca el navegador al mostrar una página web.
Página HTML básica
Otros lenguajes importantes
El HTML también puede combinarse con muchos otros lenguajes de programación, y puede integrarlos para que aparezcan en la web.
Otros lenguajes que se usan normalmente y que veremos más adelante son CSS, JavaScript y PHP.
CSS: Define los estilos gráficos de la página, es el código con el que la maquetamos y la diseñamos, con este lenguaje definiremos los colores, las tipografías y los formatos de nuestro contenido web. Casi todas las páginas web combinan HTML y CSS y es fundamental conocer los dos para realizar una página web bien diseñada.
HTML y CSS
JavaScript: Con el que podemos añadir animaciones y contenido dinámico a la página, este lenguaje funciona por medio de fragmentos de código llamados scripts que se pueden insertar dentro del contenido HTML.
Logo Javascript
Otro lenguaje habitual dentro de las páginas webs es PHP: con el que podremos vincular nuestra web a una base de datos, algo muy interesante cuando queremos crear por ejemplo un blog, un foro o una tienda online porque al vincular nuestra página a la base de datos podremos almacenar las acciones que se realicen dentro de ella.
Otros lenguajes usados para crear páginas web pueden ser Python, Ruby a la vez que podemos integrar otros lenguajes dentro de HTML como Processing.
Cuando escribimos en el lenguaje HTML utilizamos las etiquetas para envolver los contenidos del documento, para después poder añadirle entre otros elementos, los estilos mediante las hojas de estilo CSS o scripts de Javascript que veremos más adelante.
El HTML5 incluye mejoras en la sintaxis del contenido, haciendo que el proceso de escribir el código sea más simple y más lógico.
Los elementos de HTML están compuestos normalmente por dos etiquetas: una etiqueta de apertura y la etiqueta de cierre. Una etiqueta de apertura se compone del nombre del elemento encerrado por los símbolos menor-que "<" y mayor-que ">". La etiqueta de cierre se construye igual que la de apertura pero, en este caso, el nombre del elemento es precedido por una barra diagonal ("/") que indica el cierre de la etiqueta.
Esquema básico de una etiqueta HTML
Tags: Las etiquetas no solo sirven para ordenar nuestro contenido sino que ayudan a los buscadores como Google y muchos otros a encontrar la información contenida en ellas.
Además de etiquetas y contenido, un elemento puede tener atributos y eventos. Mientras que los atributos definen valores o propiedades para ser utilizadas por los navegadores en el procesamiento del documento, los eventos pueden ser empleados para especificar comportamientos o acciones a ser desempeñadas cuando ciertas condiciones se cumplen, como por ejemplo, cuando el usuario hace un click sobre el elemento.
Atributos dentro de una etiqueta de HTML
Programas para escribir código
Finalmente, sólo nos falta saber dónde escribir código en HTML y para ello sólo es necesario un editor de texto como el bloc de notas, aunque es recomendable usar un programa creado específicamente para esto, como el Sublime Text o Visual Studio Code que facilita la escritura de código HTML dotando de diferentes colores a las etiquetas, atributos y tipos de contenido.
Eva Aro. Como descargar Sublime text o Visual Studio Code(Todos los derechos reservados)
Elementos básicos de un documento HTML
A continuación podemos ver cómo se estructura una etiqueta de párrafo en HTML:
Etiqueta párrafo en HTML
La estructura mostrada en el esquema anterior es un elemento HTML ya que comienza con una etiqueta de apertura (p) dispone de un contenido de texto (Esto es un párrafo) y finaliza con una etiqueta de cierre (/p).
Si salvamos el archivo como index.html y lo abrimos con un navegador como Chrome o Firefox se verá algo así:
Etiqueta p vista en un navegador
Lo vemos así porque el navegador interpreta las etiquetas y nos muestra solo el contenido dentro de ellas.
Ejercicio 1
Crea un archivo con el SublimeText o el Visual Code Studio y html y llámalo index.html
Copia el contenido de la siguiente imagen dentro del archivo, sustituyendo el enlace a Google por otro de tu interés:
Etiquetas básicas HTML
Abre el documento en un navegador ( Chrome o Firefox ) y comenta que es lo que aparece en pantalla y si ves alguna cosa "rara".
Enviar el documento junto a un archivo .doc con tu reflexión sobre el resultado que se ve en el navegador, comprimido en formato zip. Con nombre de archivo index_tunombre.zip
Comenzando con HTML: Etiqueta HEAD
Cuando escribimos en el lenguaje HTML utilizamos las etiquetas para envolver los contenidos del documento, para después poder añadirle los estilos mediante las hojas de estilo CSS o scripts de Javascript que veremos más adelante.
En esta primera toma de contacto vamos a ver las etiquetas de HTML más útiles del documento:
Etiqueta Doctype:
Etiqueta Doctype
Todas las páginas web que diseñemos deben empezar con esta etiqueta, que es la que le va a decir al navegador, que nuestro documento está escrito en html.
Etiqueta html:
Etiqueta html de apertura: Al inicio del documento.
Esta etiqueta la escribiremos al inicio y al final de nuestro documento, donde cerraremos la etiqueta añadiendo una barra diagonal seguida de la palabra html.
Etiqueta html de cierre: Al final del documento.
Etiqueta head:
Etiqueta head de apertura
Esta etiqueta debemos escribirla justo debajo de la etiqueta de apertura de html y contendrá una serie de vínculos y datos (metaetiquetas o metatags en inglés) que serán leídos por el navegador (como el título y la información de la página y vínculos a librerías Javascript o CSS ).
Estos vínculos se cargarán en el navegador y proporcionarán informaciónde estilos además de vincular el documento a diferentes archivos para que la página se cargue correctamente.
Una vez que hayamos puesto todos los metadatos correspondientes, utilizaremos la etiqueta de cierre head, envuelta también en los símbolos menor y mayor que, y precedida de una barra diagonal.
Etiqueta head de cierre: Después de las metaetiquetas.
¿Qué son las Metatags?
Las metaetiquetas (conocidas por su nombre en inglés, metatags) son un conjunto de etiquetas que contienen información acerca de las partes del documento web sobre el que estamos trabajando, y permiten al navegador analizar y clasificar su contenido.
Si las pensamos bien conseguiremos que los buscadores nos encuentren más fácilmente y coloquen nuestro sitio en los primeros puestos de los resultados de búsqueda.
Dentro de la etiqueta de cabecera o head añadiremos una serie de metatags importantes para nuestra página web, que proporcionarán una información muy útil al navegador:
"charset": Sistema de caracteres."autor": Autor."description": Proporciona una descripción del sitio."keywords": Palabras clave del sitio."title": Título de la página.
Metaetiquetas más importantes
Metaetiquetas principales
Metaetiqueta "Charset":
Esta etiqueta le dice al navegador que utilizamos el Sistema UTF-8 de codificación de caracteres, lo que permitirá mostrar letras como la ñ o las tildes en castellano y también es el utilizado en la mayoría de idiomas.
Su sintaxis correcta sería la siguiente:
Sintaxis de la metaetiqueta "Charset"
Metaetiqueta "Autor":
Sirve para identificar correctamente el autor del sitio web. Su uso es muy importante y solo debe haber una metatag como esta en la página.
Su sintaxis correcta sería la siguiente:
Sintaxis de la metaetiqueta "Autor"
Metaetiqueta "Description":
El objetivo de esta etiqueta es el de describir de qué trata nuestro sitio y cuáles son sus temas, o sus objetivos. Este es un metadato es esencial porque aparecerá en los resultados de las búsquedas.
Su sintaxis correcta sería la siguiente:
Sintaxis de la metaetiqueta "Description"
Metaetiqueta "Title":
El contenido de La etiqueta title se muestra en la parte superior de los navegadores (en la pestaña) y en los títulos de los resultados de búsqueda de Google, por ejemplo.
Su sintaxis correcta sería la siguiente:
Sintásix de la etiqueta Title en html
Ejercicio 2
Tomando en cuenta las metaetiquetas que hemos estudiado, reflexiona sobre cuales serían las que utilizarías para describir tu página web.Escribe el código de las metaetiquetas dentro de la etiqueta head de tu página como se muestra en el tema, dentro del archivo index.html que creaste en el ejercicio anterior.Salva el documento y llámalo: index.htmlAbre este documento con Firefox o Chrome y comprueba qué es lo que sucede.Guarda el archivo dentro de la carpeta "Mi_web_nombre".Comprime la carpeta en un archivo zip.Envía el documento con nombre de archivo: Ejercicio2.5_tunombre.zip
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.
Se valorará consultar cualquier duda sobre los ejercicios.
Las tutorías pueden ser de 17 a 21 de lunes a viernes.
Para concertar una tutoría podéis escribir a:
tiquetas de HTML 5: Navegación
Si has hecho el ejercicio anterior correctamente, tu archivo index.html tendrá este aspecto, pero con tus datos.
Contenido de la etiqueta headUna vez definidas las metatags dentro de la etiqueta head, podemos empezar con el contenido que se verá en la página.
El encabezado de la página: Etiqueta “header”
Eiqueta headerLa etiqueta header define el encabezado de la página y dentro de esta etiqueta podemos poner el título, el logo de la página y el menú por ejemplo.
Contenido header
Menú de la web: etiquetas nav y ul y li
Etiqueta “nav”
Si tu página incluye algún menú de navegación, pondremos el menú dentro de la etiqueta “nav”.
Etiqueta nav
Etiquetas “ul” y “li”
Los menús, se escriben dentro de la etiqueta “ul” y cada elemento del menú se escribe dentro de la etiqueta “li”. Estas etiquetas generan un listado desordenado. Si queremos un listado ordenado numéricamente podemos usar la etiqueta “ol” en vez de “ul”.
Etiquetas ul y li
Una cabecera con un menú sencillo se escribiría dentro de nuestro documento de esta manera:
Menú de navegación en html5
En este menú aparecen unos elementos que hemos visto en el Tema 1.3, son enlaces dentro de cada elemento del menú.
Estos enlaces nos llevarán a las diferentes subpáginas de la web:
Enlace menú web
Las etiquetas de título en HTML5: H1
Para añadir un título usaremos la etiqueta H1. Dentro de esta etiqueta irá el texto más relevante de la página. Esta etiqueta se tiene muy en cuenta por los buscadores a la hora del SEO.
Etiqueta Titulo: h1
Podemos elegir hasta 6 niveles de titulo que van desde h1 hasta h6. Los navegadores asignan tamaños diferentes a estas etiquetas, la etiqueta con el texto de mayor tamaño es h1 hasta el tamaño más pequeño h6.
Dependiendo de las secciones que tenga un documento, pueden variar la cantidad de etiquetas h1.
Ejercicio 3
Abre tu archivo index.html y crea tu menú en html, poniendo las secciones que has pensado al diseñar tu página, como en el ejemplo que se muestra en el tema pero con tu planteamiento.Crea una etiqueta H1 dentro de tu header con el título de tu web.
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.Se valorará consultar cualquier duda sobre los ejercicios.Las tutorías pueden ser de 17 a 21 de lunes a viernes.Para concertar una tutoría podéis escribir a:
Crea un H2 con un subtitulo o slogan para tu web.
Salva el documento de nuevo como index.html.
Abre este documento con Firefox o Chrome y comprueba como se ve.
Comenta las dudas que hayas tenido en el mail donde mandes el ejercicio.
Comprime la carpeta de nuevo en zip, con el index.hmlt y el documento dentro.
Envía el documento con nombre de archivo: Ejercicio3.5_tunombre.zip
Insertar imágenes en nuestra página web
La etiqueta básica para insertar imágenes es img. A diferencia de la gran mayoría de etiquetas o elementos, no lleva etiqueta de cierre y va acompañada de diferentes atributos que vamos a ver a continuación.
Su sintaxis es la siguiente:
Etiqueta imagen
Atributos que soportan las imágenes
src="" : Este es un atributo imprescindible para que el elemento img funcione. Es el que contiene la ruta o url del archivo que queremos insertar en nuestra página, la escribiremos dentro de las comillas.alt=" : Nos sirve para incluir un texto descriptivo que dará accesibilidad a la web. Esto viene muy bien para cuando por cualquier motivo, no se puede cargar la imagen. Entonces en lugar de la imagen, aparecerá este texto. Además, los buscadores que indexan nuestra web y las personas con visión reducida que utilizan un programa para leer la pagina web utilizarán este texto para hacerse una idea de que va la imagen.
Ejemplo ruta de imagen
Ejercicio 4
Crea una sub-carpeta dentro de tu carpeta Mi_web llamada "imagenes"Añade la imagen de tu logo en formato .jpg y llámala logo_miweb.jpgAbre tu archivo index.html e inserta una imagen en html como hemos visto en el temaSalva el documento de nuevo como index.html.Abre este documento con Firefox o Chrome y comprueba como se ve. Comenta las dudas que hayas tenido en el mail donde mandes el ejercicio.Comprime la carpeta de nuevo en zip, con el index.hmlt y el documento dentro.Envía el documento con nombre de archivo: Ejercicio4.5_tunombre.zip
Etiquetas de contenido
Definiendo el área principal de un sitio con "main"
La etiqueta main se utiliza para envolver el contenido principal de la página y debe utilizarse solo una vez por página, no puede haber en un sitio web dos secciones donde se encuentre el contenido principal.
Etiqueta "section"
Se puede definir todo tipo de secciones dentro de un documento.
Es recomendable que las secciones tengan un título. Al encerrar section un contenido relacionado, es una buena práctica que esa sección tenga un título o un encabezado.
Etiqueta main
Detalle de Etiqueta section
Contenido secundario en etiqueta "aside"
En ocasiones vamos a encontrar contenidos que se encuentran relacionados con el contenido principal pero no es lo suficientemente relevante como para ser considerado contenido importante de nuestra página.
Para indicar de manera semántica a los usuarios, que cierto contenido es un contenido secundario y que no se le debe proporcionar la misma importancia que al contenido principal, usaremos la etiqueta aside.
Ejemplos de contenido secundario:
Una lista de sitios relacionados
Publicidad
Bloque para redes sociales
Una lista de productos relacionados
Un calendario de eventos
Etiqueta aside
Ejercicio 5
Abre tu archivo index.html y crea la etiqueta main. Añade dentro al menos dos secciones con la etiqueta section con algo de contenido y una imagen en cada sección.Crea una etiqueta aside y añade algo de contenido secundario relacionado con tu diseño.Salva el documento de nuevo como index.html.Abre este documento con Firefox o Chrome y comprueba como se ve. Comenta las dudas que hayas tenido en el mail donde mandes el ejercicio.Comprime la carpeta de nuevo en zip, con el index.html y el documento dentro.Envía el documento con nombre de archivo: Ejercicio5.5_tunombre.zip
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.Se valorará consultar cualquier duda sobre los ejercicios.Las tutorías pueden ser de 17 a 21 de lunes a viernes.Para concertar una tutoría podéis escribir a:
La etiqueta "footer"
La etiqueta footer se usa normalmente para definir el pié de página de un documento html.
El footer es la parte inferior de una estructura web en la que generalmente se incluyen links de navegación, enlaces de interés, copyright o botones a las redes sociales del site. La etiqueta footer suele estar claramente diferenciada de alguna forma del resto de la página web.
Podemos usar esta etiqueta como un pié de página no solo del sitio web, si no de diferentes elementos. footer puede ser pié de página de la etiqueta que lo contenga que puede ser article, aside, section o incluso de un nav. En resumen, footer sirve como pié de página del elemento que lo contiene.
Etiqueta footer
Ejercicio 6
Abre tu archivo index.html y añade un footer con tu Copyright. Salva el documento de nuevo como index.html.Abre este documento con Firefox o Chrome y comprueba como se ve. Comenta las dudas que hayas tenido en el mail donde mandes el ejercicio.Comprime la carpeta de nuevo en zip, con el index.html y el documento dentro.Envía el documento con nombre de archivo: Ejercicio6.5_tunombre.zip
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.Se valorará consultar cualquier duda sobre los ejercicios.Las tutorías pueden ser de 17 a 21 de lunes a viernes.Para concertar una tutoría podéis escribir a:
La estructura de la página web
El orden de los archivos de nuestra página web es muy importante, sobre todo para tener localizados los documentos y las imágenes y así poder enlazarlos correctamente en nuestra web. cuanto más sencilla sea la estructura má sencillo será encontrar la información.
Carpeta mi web
Estructura básica de carpetas de un proyecto web.
[Carpeta] Proyecto web (Donde están almacenados los archivos y carpetas de todo el proyecto).
[Archivo] index.html
[Carpeta] images (Donde almacenamos las imágenes)
[Carpeta] css (Donde estan los archivos de estilos)
[Carpeta] js (Donde se guardan los archivos Javascript)
[Carpeta] font (Donde se guardan las fuentes)
Archivos de una web
Recomendaciones importantes
Nombra todos los archivo en letra minúscula.Si el nombre del archivo contiene más de una palabra, sepáralos con guiones intermedios. [Ejemplo] servicio-integral.html.Con las carpetas sucede lo mismo, deben nombrarse en minúsculas y de la manera más corta y descriptiva posible
Ejercicio 7
Abre tu archivo index.html y crea la carpeta CSS y crea tantos archivos .html como elementos tengas en el menú (servicios.html, contacta.html, etc, ) y crea los enlaces dentro de los elementos li del menu "nav" de tu archivo index.htmlEjemplo enlace a páginas index de la webAñade a estos nuevos archivos el mismo contenido de index.htmlAñade dentro al menos dos secciones con la etiqueta section con algo de contenido y una imagen en cada sección.Crea una etiqueta aside y añade algo de contenido secundario relacionado con tu diseño.Salva el documento de nuevo como index.html.Abre este documento con Firefox o Chrome y comprueba como se ve. Comenta las dudas que hayas tenido en el mail donde mandes el ejercicio.Comprime la carpeta de nuevo en zip, con el index.html y el documento dentro.Envía el documento con nombre de archivo: Ejercicio7.5_tunombre.zip
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.Se valorará consultar cualquier duda sobre los ejercicios.Las tutorías pueden ser de 17 a 21 de lunes a viernes.Para concertar una tutoría podéis escribir a:
¿Qué es CSS?
EL CSS son las siglas de Cascade Style Sheet (hojas de estilo en cascada) y son un conjunto de instrucciones que definen la apariencia de los elementos de un documento de HTML. El CSS complementa el lenguaje HTML y proporciona estilos gráficos a la página.
Para crear una hoja de estilo necesitamos un programa de edición de código, como por ejemplo, SublimeText, Visual Code Studio o Dreamweaver.
Logo CSS 3
Anatomía de una regla CSS
Las hojas de estilo en CSS están compuestas de reglas.
Cada regla tiene tres partes:
El selector (en el ejemplo sería: “p”), el cual le dice al navegador la parte del documento que se verá afectada por la regla; La propiedad (en el ejemplo, 'color'), la cual especifica que aspecto del diseño va a cambiarse. El valor ('red'), el cual da el valor para la propiedad.
Estructura de CSS
Otras partes importantes de la sintaxis:
Cada una de las reglas (aparte del selector) deben estar encapsuladas entre corchetes ({}).
Dentro de cada declaración, debes usar los dos puntos (:) para separar la propiedad de su valor.
Dentro de cada regla, debes usar el punto y coma (;) para separar una declaración de la siguiente.
Para modificar varios valores de propiedad a la vez, solo necesitamos escribirlos separados por punto y coma (;), así:
Valores dentro de regla CSS
Ejercicio 1
Busca en internet que son las propiedades de CSS y selecciona 5 que consideres importantes.Piensa cuales tendrías que utilizar para diseñar tu página web.Envía un doc detallando que propiedades CSS utilizarías.
DUDAS Y CORRECCIONES
Se valorará consultar cualquier duda sobre los ejercicios.Las tutorías pueden ser de 17 a 21 de lunes a viernes.Para concertar una tutoría podéis escribirme a
Propiedades de CSS: Texto
Font-family:
Define la familia tipográfica. Es conveniente poner una lista de dos o tres tipografías separadas por coma, porque si el usuario no tiene instalada la tipografía que nosostros elegimos, el navegador opta por mostrar la siguiente que debería ser una similar, si tampoco la tiene instalada, mostrará la tipografía por defecto.
Ejemplo:
Propiedad font-family
Font-size:
Define el tamaño de la fuente y su valor se puede escribir en pixels o en ems. Los dos son valores relativos, el pixel es un valor relativo a la resolución de la pantalla, y el em es relativo al tamaño de la fuente definida por el usuario. Si el usuario no cambió la configuración, el valor por defecto de los textos en todos los navegadores es de 16px.
Entonces 1em = 16px.
Ejemplo:
Propiedad font-size
Propiedades de CSS: Color
Define el color de la tipografía. Los colores se pueden escribir de 3 formas distinas: con sistema hexadecimal, por ejemplo: #FF0000 (es rojo). Con los nombres de los colores (más limitado) por ejemplo: black, red, green. O usando RGB, esta paleta permite agregar el canal alfa para hacer transparencias.
Define el ancho de un elemento, el valor se puede escribir en pixels(px), ems o porcentaje(%).
Height:
Define el alto de un elemento, el valor se puede escribir en pixels, ems o porcentaje.
Propiedades width y height
Propiedades de CSS: Márgenes y rellenos
Padding:
Define la distancia desde el borde de un elemento hasta su contenido.
Ejemplos de sintáxis:
Tipos de padding en CSS: Autor: mozilla
Margin:
Define la distancia entre un elemento y otro (desde el borde de un elemento hacia afuera).
Ejemplos de sintáxis:
margin en CSS
Propiedades de CSS: Bordes y fondos
Border:
Define el borde de un elemento, su color, su estilo y grosor.
Propiedades background-color y border
Background:
Define los fondos de un objeto. El fondo puede ser una imagen o un color. El color puede ser pleno o degradado. La imagen se puede repetir formando una trama (es lo que ocurre por defecto) o se puede especificar que no repita y que se coloque en determinada posición.
imagen en url
Ejercicio 2
Buscar internet y encuentra al menos 5 nuevas propiedades de CSS3.Crea un doc explicándolas brevemente, envñia el ejercicio con nombre Ejercicio-2CSS-tunombre.doc y enviar a eva.a@gesencoformacion.es.
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.
Se valorará consultar cualquier duda sobre los ejercicios.
Las tutorías pueden ser de 17 a 21 de lunes a viernes.
Para concertar una tutoría podéis escribir a:
Incluir estilos con CSS
Etiqueta Style
El CSS podemos aplicarlo directamente en las etiquetas html, para ello podemos aplicar el parámetro “style” dentro de una etiqueta, como por ejemplo la etiqueta de párrafo “p”.
Por ejemplo:
Aplicando un estilo CSS dentro del párrafo
Podemos ver que el estilo del párrafo "p", se define mediante la etiqueta “style” que contiene unos atributos con un valor: “atributo1:valor1”, separados entre ellos por punto y coma.
Podemos ver en el navegador como se ve este párrafo con el estilo aplicado:
Párrafo en el navegador con color rojo por CSS.
Etiqueta Span
A su vez, también podemos aplicar estilos solo en una frase o palabra directamente con la etiqueta “span”.
Etiqueta "span".En este caso tenemos aplicado un estilo de color azul a todo el párrafo, y dentro del párrafo hay una frase con una etiqueta “span” que define un estilo de color verde y un tamaño de letra de 50px. Así se vería en el navegador:
Estilo CSS aplicado mediante etiqueta span.
Incluir CSS dentro de head
También podemos incluir el código CSS dentro de la etiqueta head de nuestro documento .html, para ello utilizamos la etiqueta "style" y le indicaremos que el estilo es tipo CSS, como se puede ver en el ejemplo:
Estilo CSS incluido dentro del head
Incluir CSS en el documento style.css
Otra forma de incluir estilos CSS es enlazándolos desde un archivo externo. Esta manera de incluir estilos nos permitirá incluir estos estilos dentro de varios documentos .html simultáneamente.
Para esto debemos crear un documento con la extensión .css donde estarán definidos los diferentes estilos. A este archivo normalmente lo llamamos style.css. En este caso debemos indicar dónde está este archivo dentro de nuestro documento html. Para esto incluiremos una etiqueta dentro de nuestro “head” que indicará la ruta y el tipo de documento.
Etiqueta linkEtiqueta link dentro del "head"
Los atributos de la etiqueta link:
El atributo “rel” debe ir con el valor “stylesheet” ya que está definiendo que “link” se está usando para insertar una hoja de estilo. El atributo “type” con valor “text/css” indica que el tipo de sintaxis que usa la hoja de estilo es CSS. Por último, el atributo “href” indica la ubicación del archivo y el nombre de la hoja de estilo.
Ejercicio 3
Abre tu archivo index.html y añade:
1 Estilo CSS dentro de un "párrafo" con la etiqueta style y span
1 estilo dentro de la etiqueta HEAD con la etiqueta style
Crea un archivo con el editor de código y añade una regla css que influya a alguna de las etiquetas del html, salvalo como style.css y grábalo al lado del archivo index.html o en una carpeta llamada CSS
Comenta las dudas que hayas tenido en el mail donde mandes el ejercicio.
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.Se valorará consultar cualquier duda sobre los ejercicios.Las tutorías pueden ser de 17 a 21 de lunes a viernes.Para concertar una tutoría podéis escribir a:
Comprime la carpeta de nuevo en zip, con el index.html y el style
Envía el documento con nombre de archivo: Ejercicio3.CSS_tunombre.zip
Ejemplo de documento HTML
A continuación puedes transcribir este ejemplo de página index.html al que le añadiremos CSS en un documento externo.
Si ya tienes creado tu propio index.html correctamente, puedes usar el tuyo.
headheadersection
aside y footer
Ejemplo de elementos CSS aplicados al index.html
Copia el código escrito en azul y pégalo en un archivo nuevo con tu editor de código, después guarda el archivo como style.css y salvalo junto con el index.html.
/* este es el código de entrada de un comentario en css. Este es un código cierre de un comentario CSS */
/* A continuación tenemos una serie de selectores más comunes de CSS3*/
/* Estilo de los enlaces de los elementos del menú */ li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
/* Estilo que cambia el color de las secciones del menú #111 (black) cuando pasamos el ratón por encima */ li a:hover { background-color: #00b5e2; }
/* Estilos del footer o pie de página*/ footer{ font-family: Arial, Helvetica, sans-serif; font-size: 10px; clear: both; padding: 5%; background-color: #00b5e2; /* Los colores en CSS se expresan con los valores exadecimales*/ }
Imágenes de ejemplo
En este ejemplo aparecen 3 imágenes: una que será el logo, y otras dos que serán cada una parte de un artículo, puedes guardarlas y usarlas para tu boceto. Para ello crea una carpeta y llámala img, salva dentro estas imágenes o crea tus propias imagenes.
Recuerda nombrar correctamente el nombre de archivo.
ejemplo-logo
Ejemplo imagen 1:paisaje-rio
Ejemplo Imagen 2: mariposa
Ejercicio 4
Envía un archivo .zip que contenga estas dos plantillas index.html y style.css vinculadas correctamente.Añade las imágenes ( o imágenes que hayas elegido para tu proyecto).Añade la imagen de tu logo.Abre este documento con Firefox o Chrome y comprueba como se ve. Comenta las dudas que hayas tenido en el mail donde mandes el ejercicio.Comprime la carpeta de nuevo en zip, con el index.html y el documento dentro.Envía el documento con nombre de archivo: Ejercicio4.CSS_tunombre.zip
DUDAS Y CORRECCIONES
La entrega y corrección del ejercicio es necesaria para evaluar los ejercicios siguientes.Se valorará consultar cualquier duda sobre los ejercicios.Las tutorías pueden ser de 17 a 21 de lunes a viernes.Para concertar una tutoría podéis escribir a:
Recursos CSS
A continuación dejo una serie de enlaces donde puedes encontrar contenido relacionado para profundizar más sobre el lenguaje CSS y sus novedades.
EJERCICIOS 1 
SOLUCION 
PROYECTO 1 NATURALEZA 
