Portfolio Web Design

CSS PORTFOLIO

DISEÑO

WEB P

S

JS HTML SEO WORDPRESS

©Somebodyfromthesky

PHP

UX/UI

Portfolio diseñado por Marta Pineda Devesa (portada, contraportada, maquetación e ilustraciones interiores), sujeto a derechos de autor.

Información técnica sacada de Wikipedia.

HEADER NAV

SECTION

ARTICLE FOOTER

ASIDE

https://somebodyfromthesky.com somebodyfromthesky.marta@gmail.com https://www.facebook.com/somebodyfromthesky/ @somebodyfromthesky @sfts_art https://www.pinterest.es/somebodyfromthesky/ https://www.behance.net/somebodyfromthesky https://www.linkedin.com/company/somebodyfromthesky/

ÍNDICE Índice Diseño Web Portfolio (proyectos y ejercicios) - Somebody from the sky - MartaPineda Fotografía - Valaventura - Graffitis - CV MartaPin - Museo Telecomunicaciones - Vialigera - Calendario 2020 - Calculadora - Editor de Texto - Floristería Azalee

‘Los usuarios dedican treinta segundos a leer la página de inicio de una web.

En este tiempo y en pocas palabras, la web debe mostrar lo que ofrece.’

(Jakob Nielsen)

DISEÑO WEB Para empezar este Portfolio hay que entender algunos conceptos que engloban al diseño web.

Diseño Web es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de sitios web.

Abarcan diferentes aspectos (diseño gráfico web, diseño de interfaz y experiencia de usuario, como la navegabilidad, interactividad, usabilidad y la arquitectura de la información.)

“Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra”.

El diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en HTML. (El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por los navegadores. Las siglas son HyperText Markup Language), es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la Web semántica.

La Web semántica aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. De esta forma se utiliza el documento HTML para contener, organizar y estructurar la información, y las Hojas de Estilo CSS para indicar como se mostrará dicha información en los diferentes medios (pantalla de ordenador, móvil...)

El diseño web debe seguir unos requirimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas (Para conseguir estos objetivos, se han desarrollado pautas como las del W3C, World Wide Web Consortium).

Por otra parte el diseño web adaptable (‘responsive’) es una filosofía de diseño web que tiene como objetivo adaptar una misma página web a distintos tamaños de pantalla, dispositivos y orientaciones.

Aunque el código HTML es el mismo, la apariencia del sitio cambiará de acuerdo con las especificaciones (las llamadas ‘media queries’) de las hojas de estilo en cascada CSS.

El JavaScript (JS) es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web (juegos, eventos, animaciones...), se aplica en el archivo HTML, para convertir una página estática en dinámica.

En cambio PHP (Hypertext Preprocessor) es un lenguaje de programación de código abierto adecuado para el desarrollo web y también puede ser incrustado en HTML, pero este se ejecuta en el lado del servidor, JavaScript es en el lado del cliente (navegador). El cliente recibirá el resultado de ejecutar el script, aunque no se sabrá el código subyacente que era. El servidor web puede ser configurado incluso para que procese todos los ficheros HTML con PHP. (Muchos CMS como Wordpress utilizan código PHP).

Un CMS (Wordpress o Joomla) es un sistema de gestión de contenidos que permite crear un entorno de trabajo para la creación y administración de contenidos (páginas web), y evitan el uso de escribir código.

Estas herramientas son aplicaciones web creadas con lenguajes de programación PHP, y usan bases de datos MySQL (permiten implementar también webs dinámicas).

Wordpress que empezó como creación de blogs, se ha convertido en la herramienta más utilizada para la creación de webs pequeñas y medianas.

Otro tema importante en el diseño web, es el Diseño UX/UI, son dos conceptos diferentes.

UX (User Experience) hace referencia a la forma en la que los usuarios interactúan con un producto o servicio (como un usuario interactúa con una web o app).

En cambio el UI (User Interface) se centra en la parte visual. Un producto o web sea útil para los usuarios.

Por eso UX y UI deben de ir de la mano, para que la web o producto sea 100% pensado para los clientes.

Por último el Posicionamiento SEO se trata de una serie de técnicas para optimizar un sitio web para que pueda cumplir estándares que son tomados en cuenta como ‘Google’, y así poder posicionar en los buscadores de acuerdo con la temática del sitio web. Se ha llegado a estandarizar cientos de buenas prácticas para que el usuario pueda navegar y encontrar lo que esta buscando dentro de una página web de una manera más eficiente. Todos estos requisitos son catalogados por los algoritmos de los bots de los buscadores de manera automática para intentar discernir que páginas son más relevantes que otras en determinada búsqueda orgánica por el usuario.

La finalidad es que la página sea lo más accesible posible para los bots de los buscadores, lo cual ayudará a que se posicionen más alto en las búsquedas para las cuales están optimizadas.

PORTFOLIO TRABAJOS Y EJERCICIOS DE DISEÑO Y DESARROLLO WEB

Proyecto WEB corporativa somebody from the sky Página Web diseñada y confeccionda con Wordpress (diseño responsive) https://somebodyfromthesky.com

Proyecto WEB corporativa MARTAPINEDA FOTOGRAFÍA Página Web diseñada y confeccionada con Wordpress (diseño responsive) https://martapinedafotografia.tk

Proyecto WEB corporativa VALAVENTURA Página Web diseñada y confeccionada con Wordpress (diseño responsive)

PROYECTO WEB GRAFFITIS Página Web diseñada y confeccionada con código HTML y CSS desde cero con un editor de código (web responsive). https://graffitiweb.000webhostapp.com/

EJERCICIO WEB CURRÍCULUM MARTAPIN Página Web diseñada y confeccionda con Wordpress (diseño responsive)

EJERCICIO WEB museo telecomunicaciones Página Web diseñada y confeccionada con código HTML y CSS, y algo de JavaScript desde cero con un editor de código. https://museoteleco.000webhostapp.com/

EJERCICIO WEB VIALIGERA Página Web diseñada y confeccionada con código HTML y CSS, y algo de JavaScript desde cero con un editor de código. https://vialigera.000webhostapp.com/

EJERCICIO WEB CALENDARIO 2020 Página Web diseñada y confeccionada con código HTML y CSS desde cero con un editor de código. https://calendario2020.000webhostapp.com/

EJERCICIO WEB CALCULADORA Página Web diseñada y confeccionda con Wordpress (diseño responsive) https://apuntesjavascript.000webhostapp.com/calculadora.html

EJERCICIO WEB EDITOR DE TEXTO Página Web diseñada y confeccionada con código HTML y CSS, y algo de JavaScript desde cero con un editor de código. https://apuntesjavascript.000webhostapp.com/ejercicio_6_editor_texto.html

proyecto web corporativa floristería azalee Página Web diseñada y confeccionada con Wordpress (diseño responsive) https://floristeriaazalee.000webhostapp.com/

HEADER NAV

SECTION

ARTICLE FOOTER

ASIDE