Bitácora Final Programación Web Ruesga by marulo96

PROYECTO FINAL

PROGRAMACIÓN WEB María Eugenia Ruesga Lozano Diseño Multimedia ID. 00267504 Prof. Ade Castro

María Eugenia Ruesga Lozano ID. 00267504 Universidad Anáhuac México Campus Norte Facultad de Diseño Diseño Multimedia Ciudad de México. Jueves 5 Diciembre, 2019.

Índice Índice 3 Introducción Análisis de competencia Competencia; precios, publicidad, y marketing Valor distintivo User persona Mapa de navegación Inspiración Wireframe User interface (desarroillo web) Archivos Conclusión

5 6 8 9 10 12 13 14 20 28 29

Humanizar a travĂŠs de la mirada

Introducción La fotografía es la mirada de una persona siendo compartida para que el espectador pueda encontrarse con la realidad desde el punto de vista del autor. Se trata de el arte que implementa la luz para transmitir un mensaje, independientemente la temática. Pero la esencia de la fotografía yace en su capacidad de ser compartida, ser disfrutada por distintas miradas. Por ello, como proyecto integrador de la materia de Programación Web, quiero presentar mi portafolio de fotografía mediante una página web.

El objetivo principal del proyecto es crear un portafolio web profesional, específicamente hablando de fotografía, para ser visualizado por empresas dentro de la industria creativa (desde publicidad hasta cine de arte) y conseguir trabajo o colaboraciones en proyectos de cada vez mejor nivel. Para lograrlo, nos enfrentamos con el reto principal que es el diseño de interfaz, pues entra directamente a competir con portafolios web de otros diseñadores con proyectos mucho más complejos.

María Eugenia Ruesga ID. 00267504

Análisis de competencia Estudiantes o creativos en fotografía que compartan mi objetivo de ser contratados para trabajar o colaborar en proyectos dentro de la industria creativa. Algunos de los mejores ejemplos de competencia debido a la organización visual que mantienen en su portafolio en página web, que se encuentran a nivel internacional, son: - Eric Anderson - Caitlin Worthington - Jan Erik.

La calidad del producto se encuentra en buen nivel, con mucha oportunidad de crecimiento aún. La globalización permite cada vez más competencia, por lo que los niveles se siguen renovando y siguen creciendo. A continuación algunas referencias visuales propias de los competidores puntuales:

Eric Anderson Fortalezas: Fotografía en distintos formatos, organización visual clara, participación en distintas categorías. Debilidades: falta de botón para regresar a página anterior, medios publicitarios, página web, Instagram. Estrategias de marketing: publicidad en redes sociales.

Caitlin Worthington Fortalezas: Claridad en categorización, fotografía de retrato. Debilidades: Repetición de acciones (logo, home), la simplicidad puede perder el objetivo. Medios publicitarios: Página web, Facebook. Estrategias de marketing: Participación en exposiciones.

Jan Erik Fortalezas: Fotografía de paisaje, fotografía abstracta, lightroom presets. Debilidades: Claridad en vínculos para navegar, falta de explicación en desarrollo de proyectos. Medios publicitarios: Página Web, Facebook, Twitter, Instagram, LinkedIn, Behance. Estrategias de marketing: Promoción por medio de facebook advertisement.

Competencia

precios, medios publicitarios y estrategias de marketing Los precios que manejan varían mucho entre el público al que se enfrenta cada fotógrafo y su rol dentro del proyecto al que encuentre. No es lo mismo un fotógrafo contratado como freelance para un proyecto personal que un fotógrafo de eventos que tiene trabajo periódicamente y cuenta con un equipo de producción detrás. Aún así, para no tener un proyecto con rangos tan amplios, la mayoría de precios que se manejan en un proyecto de fotografía para alguien con mi nivel profesional varían entre los $250.00UDS -$300.00USD por sesión (alrededor de 5 horas). En cuanto a los medios publicitarios que se utilizan, la competencia suele moverse principalmente en redes sociales. El medio es prácticamente gratis y el alcance puede ir más allá de lo imaginado. Así mismo, sus estrategias de marketing suelen buscar una comunidad que poco a poco les vaya conociendo y posicionando cada vez más al centro. Esto lo logran mediante constante participación de redes que generen interés de los usuarios y tengan material renovable para seguir buscando a su fotógrafo favorito.

Valores distintivos

Las ventajas competitivas de mi proyecto cuentan con mucho campo experimental. Debido a que no tengo mucho camino recorrido laboralmente, puedo adaptarme fácilmente a nuevas técnicas o formas de trabajo, y así mismo estoy dispuesta a hacerlo para aprender. En cambio, mucha de la competencia tiene como ventaja lo que para mí sería desventaja; experiencia. Para ello solamente queda involucrarme en más y más proyectos.

Las fortalezas y debilidades de mi proyecto varían dependiendo del reto creativo que se presente. Definitivamente mi debilidad es la falta de experiencia. Sin embargo, la fortaleza es la sed de aprendizaje con la que cuento, que puede elevar mi capacidad de adaptación y perfeccionar mi forma de trabajo (sobretodo en equipo) al momento de cualquier nueva producción.

User persona

header retrato portafolio

producto

index

mapa de navegaciĂłn

arquitectura

contacto

footer email suscription tĂŠrminos legales copyright

Inspiraciรณn https://unpigeon.me

https://hashflare.io

https://unpigeon.me https://www.bthere.is

https://coverd.it www.solarrz.com

https://storyfd.xyz www.nightingaler.com

Bocetaje wireframe desktop

Bocetaje wireframe mobile

index.html

Desarrollo web

<!DOCTYPE html> <html lang=”es” dir=”ltr”> <head> <meta charset=”UTF-8”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> <meta name=”description” content=”María Ruesga”/> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <link rel=”stylesheet” href=”css/estilosindex.css”> <title>María Ruesga</title> <link href=”https://fonts.googleapis.com/css?family=Lato:300|Quicksand&display=swap” rel=”stylesheet”>  <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <script src=”https://cdn.rawgit.com/jschr/textillate/master/assets/jquery.lettering.js”></script> <script src=”https://cdn.rawgit.com/jschr/textillate/master/jquery.textillate.js”></script> <script src=”js/index.js”></script> <link rel=”stylesheet” href=”css/animate.css” /> </head> <body> <div id=”container-fotografia”> <h1 id=”cont-fotografia”>MARU RUESGA</h1> </div> <div id=”frase”> <p>humanizar a través de la mirada</p> </div> <div id=”texto”> <p>Portafolio de fotografía y video</p> </div> <section id=”seccionvideo”> <video autoplay muted loop id=”myVideo” alt=”Video de concierto”> <source src=”media/videoconcierto.mp4” type=”video/mp4” alt=”Video de concierto”/> No hay etiqueta &lt;video&gt; </video> </section> <div id=”container-foto”> <section id=”entrar”> <header> <nav> <ul> <a href=”portafolio.html”>Entrar</a> </ul> </nav> </header> </section> </div>  <div id=”text”> </div> <script> src=”index.js”</script> </body> </html>

index.html estilosindex.css index.js

21 17

portafolio.html

Desarrollo web

<!DOCTYPE html> <html lang=”es” dir=”ltr”> <head> <meta charset=”UTF-8”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> <meta name=”author” content=”maruruesga”> <meta name=”description” content=”Portafolio”> <meta http-equiv=”X-UA-Compatible” content=”ie=edge” /> <link href=”https://fonts.googleapis.com/css?family=Lato|Montserrat&display=swap” rel=”stylesheet”> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <link rel=”stylesheet” href=”css/estilosportafolio.css”> <title>Maru Ruesga</title> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <script src=”https://cdn.rawgit.com/jschr/textillate/master/assets/jquery.lettering.js”></script> <script src=”https://cdn.rawgit.com/jschr/textillate/master/jquery.textillate.js”></script> <script src=”js/index.js”></script> <link rel=”stylesheet” href=”css/animate.css” /> </head> <body> <header> <section id=”banner”> <img class=”imagen1” src=”images/banner_fotopersonal2.jpg” alt=”Banner inicial, Maru Ruesga viendo a la cámara, fondo oscuro”> </section> </header> <script src=”https://kit.fontawesome.com/1edf197406.js” crossorigin=”anonymous” ></script> <nav id=”menunav1”> <ul class=”horizontal-list”> <li> <a href=”portafolio.html”>PORTAFOLIO</a> </li> <li> <a href=”contacto.html”>CONTACTO</a> </li> <li> <a href=”CV_RUESGA2019.pdf”>CV</a></li> </ul> </nav> <div class=”general-container”> <div class=”main”> <div class=”view view-first”> <img src=”images/retrato.jpg” alt=”foto1”> <div class=”mask”> <h2>Retratos</h2> <p>Conocer por medio de la mirada.</p> <a href=”retrato.html” class=”retratos”>Ver todo</a> </div> </div> </div> <div class=”main”> <div class=”view view-first”> <img src=”images/arquitectura.jpg” alt=”foto1”> <div class=”mask”> <h2>Arquitectura</h2> <p>Entender un espacio en relación a la gente.</p> <a href=”arquitectura.html” class=”categoria”>Ver todo</a> </div> </div> </div> <div class=”main”> <div class=”view view-first”> <img src=”images/producto.jpg” alt=”foto1”> <div class=”mask”> <h2>Producto</h2> <p>Realzar el servicio mediante un concepto</p> <a href=”producto.html” class=”categoria”>Ver todo</a> </div> </div> </div> ...

portafolio.html estilosportafolio.css

17 23

contacto.html

Desarrollo web

<!DOCTYPE html> <html lang=”es” dir=”ltr”> <head> <meta charset=”UTF-8”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> <meta name=”author” content=”maruruesga”> <meta name=”description” content=”Portafolio”> <meta http-equiv=”X-UA-Compatible” content=”ie=edge” /> <link href=”https://fonts.googleapis.com/css?family=Lato|Montserrat&display=swap” rel=”stylesheet”> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <link rel=”stylesheet” href=”css/estiloscontacto.css”> <title>Maru Ruesga</title> </head> <body> <header> <img class=”imagen1” src=”images/banner_fotopersonal2.jpg” alt=”Banner inicial, Maru Ruesga viendo a la cámara, fondo oscuro”> </header> <script src=”https://kit.fontawesome.com/1edf197406.js” crossorigin=”anonymous” ></script> <nav id=”menunav1”> <ul class=”horizontal-list”> <li> <a href=”portafolio.html”>PORTAFOLIO</a> </li> <li> <a href=”contacto.html”>CONTACTO</a> </li> <li> <a href=”CV_RUESGA2019.pdf”>CV</a></li> </ul> </nav> <main> <section id=”titulo”> <p id=”frase”>¡Hagamos proyectos juntos!</p> </section> <section id=”redes”> <i class=”fab fa-facebook”></i> <a href=”https://www.facebook.com/maru.rl.3”>Facebook</a> </li> <i class=”fab fa-instagram”></i> <a href=”https://www.instagram.com/maruruesga/”>Instagram</a> </li> </section> <section id=”mapa”> <p id=”textomapa”>Me encuentro en zona poniente. ¿Te queda bien?</p> <iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3763.1426583406615!2d-99.2603662000000 8!3d19.406241200000007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d20138891b3483%3A0xfc7f5357ee925110!2sUniversidad%20An%C3%A1huac%20M%C3%A9xico%20Norte!5e0!3m2!1ses-419!2smx!4v1575475528135!5m2!1ses-419!2smx” width=”600” height=”450” frameborder=”0” style=”border:0;” allowfullscreen=””></iframe> </section> </main> <footer> <div id=”suscription”> <form action=”” id=”form-suscription”> <label for=”miemail”>EMAIL</label> <input type=”email” name=”email” id=”miemail” placeholder=”Escribe tu email” required size=”30”> <input type=”submit” value=”¡SUSCRÍBETE!”> </form> </div> <nav id=”menunav2”> <ul class=”footer-list”> <li><a href=”#”>Términos Legales</a></li> <li><a href=”#”> &copy; Copyright 2019</a></li> </ul> </nav> </footer>  <script src=”js/scroll/basicScroll.min.js”></script> <script> src=”js/scroll/inicia-scroll.js”</script>

contacto.html estiloscontacto.css

</body> </html>

17 25

arquitectura.html retrato.html producto.html

Desarrollo web

<!DOCTYPE html> <html lang=”es” dir=”ltr”> <head> <meta charset=”UTF-8”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> <meta name=”author” content=”maruruesga”> <meta name=”description” content=”Portafolio”> <meta http-equiv=”X-UA-Compatible” content=”ie=edge” /> <link href=”https://fonts.googleapis.com/css?family=Lato|Montserrat&display=swap” rel=”stylesheet”> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <link rel=”stylesheet” href=”css/estiloscategorias.css”> <title>Fotografía de Arquitectura; Ruesga</title> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <script src=”https://cdn.rawgit.com/jschr/textillate/master/assets/jquery.lettering.js”></script> <script src=”https://cdn.rawgit.com/jschr/textillate/master/jquery.textillate.js”></script> <script src=”js/index.js”></script> <link rel=”stylesheet” href=”css/animate.css” /> </head> <body> <header> <img class=”imagen1” src=”images/banner_fotopersonal2.jpg” alt=”Foto animada panorámica”> </header> <script src=”https://kit.fontawesome.com/1edf197406.js” crossorigin=”anonymous” ></script> <nav id=”menunav1”> <ul class=”horizontal-list”> <li> <a href=”portafolio.html”>PORTAFOLIO</a> </li> <li> <a href=”contacto.html”>CONTACTO</a> </li> <li> <a href=”CV_RUESGA2019.pdf”>CV</a></li> </ul> </nav> <main> <div id=”slider”> <input type=”radio” name=”slider” id=”slide1” checked> <input type=”radio” name=”slider” id=”slide2”> <input type=”radio” name=”slider” id=”slide3”> <input type=”radio” name=”slider” id=”slide4”> <div id=”slides”> <div id=”overflow”> <div class=”inner”> <div class=”slide slide_1”> <div class=”slide-content”> <img src=”images/arquitectura/a1.jpg” alt=”Fotografía de arquitectura 1”> </div> </div> <div class=”slide slide_2”> <div class=”slide-content”> <img src=”images/arquitectura/a2.jpg” alt=”Foto de arquitectura 2”> </div> </div> <div class=”slide slide_3”> <div class=”slide-content”> <img src=”images/arquitectura/a3.jpg” alt=”Foto de arquitectura 3”>

...

</div> </div> <div class=”slide slide_4”> <div class=”slide-content”> <img src=”images/arquitectura/a4.jpg” alt=”Foto de arquitectura 4”> </div> <div id=”controls”> <label for=”slide1”></label> <label for=”slide2”></label> <label for=”slide3”></label>

arquitectura.html estiloscategorias.css

27 17

Archivos:

Conclusión El proyecto actual y la investigación que conlleva me han hecho darme cuenta de la importancia de la planeación previa al diseño y la programación, pues he de saber a qué me enfrento al momento de salir al mercado.

El objetivo principal me parece muy atractivo, pues me permite reunir lo que he logrado a lo largo de mi carrera para presentarlo al mundo laboral; algo así como una transición previa a mi entrada como profesional, comenzando con la mejor presentación posible.

PROGRAMACIÃ&#x201C;N WEB