martes, 20 de octubre de 2015

Programación html 3, CSS .

PROGRAMACIÓN HTML, CSS


Styling se puede agregar a los elementos HTML de 3 maneras:



Inline 
utilizando un atributo de estilo en elementos HTML



Externo
utilizando uno o más archivos CSS externos


Interno
utilizando un <style> en el código HTML <head>


La forma más común para agregar estilo, es mantener la sintaxis CSS en archivos CSS separados.







Estilo Inline  (Inline CSS)
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue">Encabezamiento en azul</h1>

</body>
</html>



PRUEBA INLINE CSS






Estilos externos (External CSS)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="soycss.css">
</head>

<body>
<h1>Encabezamiento</h1>
<p>Parrafo.</p>
</body>

</html>


archivo css con el nombre soycss
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;

}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}


PRUEBA EXTERNAL CSS






Internal Styling (Internal CSS)
<!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
<h1>Encabezamiento</h1>
<p>Parrafo.</p>
</body>

</html>

PRUEBA INTERNAL CSS







miércoles, 14 de octubre de 2015

Programación html 2.

PROGRAMACIÓN
(web con Acentos, cursiva, negrita..)


<!DOCTYPE html> 
<html lang="es">
<body>
          <h1><ins>ZARA</h1></ins>
          <p><em>Zara</em> es una cadena de tiendas de moda espa&ntilde;ola perteneciente al grupo INDITEX fundada por Amancio Ortega Gaona. Es la cadena insignia de la empresa y est&aacute; representada en <strong>Europa, Am&eacute;rica, &Aacute;frica, Asia y Ocean&iacute;a </strong>con 2085 tiendas en 87 pa&iacute;ses, 452 de ellas en Espa&ntilde;a (2015). Durante 2007 se abrieron 560 tiendas de todo el grupo. Algunas de sus tiendas operan bajo la marcas Lefties y Zara Reduced, orientadas a vender ropa m&aacute;s barata y restos sobrantes de temporada y otras como Kiddy's Class o Zara Kids, orientandas a ropa infantil.</p>
          <br>
          <img src="zara11.jpg" alt="logo brandy" width="300" height="250"border="2">
          <hr>
          <br>
          <h2><ins>Brandy Melville</h2></ins>
          <p>La cadena de ropa <em>Brandy Melville</em> desprende esp&iacute;ritu americano por los cuatro costados. La est&eacute;tica de sus colecciones, protagonizadas por vaqueros de tiro alto, cropped top ajustados y jerseys holgados (todo disponible en una &uacute;nica talla) decorados con banderas estadounidenses y referencias surferas, produce la sensaci&oacute;n de estar de compras en California. La decoraci&oacute;n de sus espacios, gobernada por madera clara sobre la que descansan decenas de carteles en ingl&eacute;s, termina de convencernos de estar buscando atuendo para pasar el d&iacute;a en Huntington Beach. En su versi&oacute;n online, el propio dominio de su p&aacute;gina web (www.brandymelvilleusa.com) parece confirmarnos lo que ya cre&iacute;amos saber: es una marca de origen americano.
            Pero no es exactamente as&iacute;. Brandy Melville naci&oacute; en <strong>Italia</strong>. Stephan Marsan, el hijo del empresario italiano Silvio Marsan (experto en la fabricaci&oacute;n de ropa durante m&aacute;s de tres d&eacute;cadas para firmas italianas), es su fundador. &Eacute;l fue quien abri&oacute; la primera tienda de la firma hace 15 a&ntilde;os apostando por grabar a fuego en su ADN un estilo t&iacute;picamente estadounidense. Desde la denominaci&oacute;n de la marca (hace referencia a la historia de un chico Brandy y una chica Melville que se conocieron en Estados Unidos y se enamoraron en Roma) hasta el &uacute;ltimo detalle de sus franquicias: todo tiene sabor americano.</p>
          <br>
          <img src="brandy.jpg" alt="logo brandy" width="300" height="350"border="2">
          <hr>          
          <h3><ins>MANGO</h3></ins>
          <p><i> Mango</i>  es una multinacional dedicada al dise&ntilde;o, la fabricaci&oacute;n y la comercializaci&oacute;n de prendas de vestir y complementos para la mujer y el hombre. Su actual presidente es Isak Andic.
Su objetivo es estar presente en todas las ciudades del mundo. Tiene m&aacute;s de 2.700 puntos de venta en m&aacute;s de 105 pa&iacute;ses.Ha sido la marca de moda catalana pionera en el sector online. Cre&oacute; su primera web corporativa en 1995 y cinco años m&aacute;s tarde, en el a&ntilde;o 2000, puso a disposici&oacute;n de los usuarios su primera tienda online, a trav&eacute;s de la cual actualmente comercializa toda su gama de productos en los estados miembros de la Uni&oacute;n Europea, as&iacute; como en <b>EE.UU, Canad&aacute;, Turqu&iacute;a, Rusia, China y Jap&oacute;n.</b></p>
<br>
          <img src="Mango1.jpg" alt="logo mango" width="587 " height="431"border="2">
          <br>
          <p><del>ALEJANDRA CAMINALS ANTOLINO</del></p>





2.Trabajo programación 

Parallax.

PARALLAX
(10 webs con premios awwwards que utilizan parallax)







































Características de las webs con parallax:
Diseño simple y sintetico.
Fotografías panorámicas, no suelen tener fondo.
Aveces tienen vídeos.
Tipografia de palo seco y romana en casos,  color tipografía negro, blanco o gris.
Categoriza por color.
Acaba con Footer ( publicidad, datos.)
8 letras por columna.
Los menús suelen estar arriba a la derecha o izquierda, aunque aveces no se sitúan en ninguno de esos lugares, son o muy sencillos , con letras o imágenes.  



WEB DISEÑADA CON PARALLAX





lunes, 5 de octubre de 2015

Albert Folch.

CARACTERÍSTICAS DISEÑO WEBS DE
(Albert folch)



Descripción:
Diseño minimalista, la importancia se le da a la imágenes.
Maquetacion en columnas, 4.
Categoriza por familia, posición.
Utiliza la itálica, negrita y regular.
Elemento distintivo, menú alineado arriba a la izquierda.
Fondo blanco.
Tipografía aire romano, títulos fotografía, cuerpo agrandado.
Tipografia de palo seco, logo y menú, para desviar atención y fácil de leer.
Logo en negrita y en grande, con un punto al final para remarcar.
Valora el trabajo que le han dado.







www.biel-lo.com
Descripción:
Logo negrita letra caligráfica animada.
Utiliza tipografia que contrasta mucho con el logo, de palo seco u otra que imita un escritura a maquina de escribir.
Fondo blanco.
Menu arriba y datos a la derecha del logo.
Maquetacion en 1 columna, imagen central que se puede pasar.
Datos abajo a la derecha.






Descripción:
En primer lugar arriba aparece el menú y datos.
Logo interactivo  a color , arriba seguido del menú en el centro, va cambiando cuando pasas por encima.
Maquetación con 2 o 3 columnas.
Categoriza por color.
Imágenes y resto de elementos en blanco y negro.
Usa negrita, cursiva, palo seco y  en ocasiones romana.
Fondo blanco.




Descripción:
Logo en primer lugar arriba al centro, con un cuerpo grande y tipografía en negrita y de palo seco.
Menu debajo de marca en una franja, tipografía de palo seco.
Imágen a todo color en grande en el centro .
Fondo blanco






Descripción:
Logo alineado arriba a la derecha, contraresta. Simple y tradicional, inspirado marcas de ganados.
Imagotipo, marca de agua.
Fondo amarillento color pastel.
Menu arriba a la izquierda.
Maquetacion en 2 o 3 columnas.
Tipografia de palo seco.
Texto con forma. Para intentar asemejarse a los vestidos.





Descripción:
Logo en negrita y mayúsculas alineado arriba a la izquierda.
Debajo menú y datos.
Fondo blanco.
Maquetacion en 4 columnas.





Descripción:
Marca a la izquierda en un cuerpo normal, en negrita y letra de palo seco.
Diseño muy básico y minimalista, a la vez muy atractivo visualmente, y fácil de usar.


DISEÑOS EDITORIALES DE ALBERT FOLCH


Diseño 1 
Oro Laus 2013 | Publicación periódica | Título: Tiger Magazine #4 | Autor: Folch Studio | Cliente: Tiger Magazine.







Diseño 2 
Oro Laus 2013 | Libro completo | Título: Ángela Palacios - Paisajes | Jardines | Palmeras / Love | Obsession | Desire | Autor: Folch Studio | Cliente: Àngela Palacios.






Diseño 3
Plata Laus 2013 | Dirección de arte en fotografía | Título: Mishima. L'amor feliç | Autor: Folch Studio | Cliente: Mishima.







Diseño 4
Plata Laus 2013 | Elemento de promoción o autopromoción | Título: An incomplete map of a time fragment - Folch Studio's newspaper | Autor: Folch Studio | Cliente: Folch Studio






Diseño 5
Bronce Laus 2013 | Publicación corporativa, catálogo, memoria, house-organ | Título: Pedro Rodriguez - Catálogo de vestidos de Maria Brillas | Autor: Folch Studio | Cliente: DHUB - Museu Tèxtil i d’Indumentària.







 Diseño 6 
Weird and Wonderful Guide to Barcelona, Folch Studio, Lee Coll, 2010






Diseño 7

Bronce Laus 2013 | Libro completo | Título: Four Geometry Sets by Ignacio Uriarte | Autor: Folch Studio | Cliente: Ignacio Uriarte






Diseño 8
Bronce Laus 2013 | Dirección de arte en fotografía | Título: An incomplete map of a time fragment - Folch Studio's newspaper | Autor: Marçal Vaquer | Cliente: Folch Studio.







Diseño 9
Doblo página. A Weird and Wonderful Guide to Barcelona, Folch Studio, Lee Coll, 2010







Diseño 10 
Folch Studio – Metal 21#






Diseño 11
Folch Studio – Metal 25#





Diseño 12
http://www.folchstudio.com/






Diseño 13 
We still have some copies of #Odiseo vol.6  in stock! Get yours at folchstudios.com






Diseño 14
folchstudio, Updated projects on our webside. Enviromental grafic desing.





Diseño 15
Weird and Wonderful Guide to Barcelona, Folch Studio, Le Cool, 2010











DISEÑO WEB INSPIRADO EN ALBERT FOLCH CREADO CON EVA MARIA: