Para subir la página me he registrado en una web de hosting gratuito y he obtenido el dominio http://bodyvinblanco.net84.net.
Una vez hecho esto he ido subiendo todos los ficheros y ensamblando la página en el host.
Después he comprobado que ambos estilos se visualicen correctamente y solucionado algunos errores.
El segundo estilo puede deformarse si la resolución de la pantalla es muy grande (su diseño no es muy líquido), pero para un tamaño normal o la versión móvil no habría problema.
Además la página está predeterminada a mostrar el primero y ese no presenta errores y se puede ver también desde el móvil.
He creado una base de datos en el host remoto e intentado vincularla con el formulario php de la página. Tras introducir los datos de servidor y host y subirla sucede un problema por el que no se consigue acceder a los datos, al menos salta un mensaje de error informando de lo sucedido.
Como la página es para una empresa real intentaré solucionarlo en próximas revisiones, antes de subirla a su dominio de pago definitivo (con un solo estilo y a ser posible, dos idiomas, rehaciendo la página traducida).
viernes, 10 de enero de 2014
Estilos css
Tras probar a definir un fondo dinámico para el primer estilo a partir del script de diapositivas de la plantilla, he descartado la idea debido al inmenso contraste entre los colores de unas imágenes con otras.
He terminado eligiendo una foto de barricas con colores anaranjados y amarillos que pegan mucho con el logo de la empresa.
A raíz de esto he diseñado una paleta de colores con kuler, utilizando sobre todo los tonos más claros.
He decido conservar algunos divs de la plantilla relacionados con la organización de la información y su estructura, aunque los he modificado poniendo un fondo semitransparente negro (a juego con las sombras del fondo).
A continuación he agrandado un poco el espacio para la navegación, más que nada para que el logo se pueda ver cuadrado y no se deforme. El cambio del negro al color pálido del logo no quedaba del todo bien y por eso le he añadido un borde.
El copyright en el footer lo he excluído del div "principal" dejandolo "fuera". No es problema porque se distingue bastante bien y aún mejor cuando se está navegando por la pagina.
Una vez terminado el diseño de la estructura y los colores he ido añadiendo los diferentes div en el load y completándolos con los datos que se quieren mostrar. He elegido una estructura simple, para una rápida y fácil visualización de la información.
Las imágenes no son una maravilla debido sobre todo a mi inexperiencia fotográfica, aún así he escogido las mejores parapoder avalar lo escrito.
He aprovechado el superfist de la plantilla y con él he creado el catálogo de los vinos disponibles con sus características propias.
Para el apartado de contacto básicamente he reutilizado la esencia de la plantilla adecuando el estilo y los datos a la página.
Y con esto doy por finalizado el primer estilo, simple y sencillo pero de aspecto profesional y de fácil acceso, toda la información a tan solo un clic del ratón.
Para el segundo estilo he decidido emplear el el color morado oscuro del logo.
He seleccionado otra imagen de fondo, esta con botellas de vino, de manera que al centrarla parezca casi un mosaico y contanga los colores del diseño, además los corchos hacen juego con el logo.
A continuación he modificado el css de los div que estructuran la página hasta conseguir que la navegación quede vertical y encaje con el div "principal" del load.
Una vez hecho esto simplemente he adecuado los colores a la nueva paleta y cambiado la posición de algunos elementos, así como añadido algunos bordes y margenes para una mejor presentación.
Cabe decir que la web está orientada a mostrarse con el primer estilo, por eso el segundo está un poco menos trabajado.
He terminado eligiendo una foto de barricas con colores anaranjados y amarillos que pegan mucho con el logo de la empresa.
A raíz de esto he diseñado una paleta de colores con kuler, utilizando sobre todo los tonos más claros.
He decido conservar algunos divs de la plantilla relacionados con la organización de la información y su estructura, aunque los he modificado poniendo un fondo semitransparente negro (a juego con las sombras del fondo).
A continuación he agrandado un poco el espacio para la navegación, más que nada para que el logo se pueda ver cuadrado y no se deforme. El cambio del negro al color pálido del logo no quedaba del todo bien y por eso le he añadido un borde.
El copyright en el footer lo he excluído del div "principal" dejandolo "fuera". No es problema porque se distingue bastante bien y aún mejor cuando se está navegando por la pagina.
Una vez terminado el diseño de la estructura y los colores he ido añadiendo los diferentes div en el load y completándolos con los datos que se quieren mostrar. He elegido una estructura simple, para una rápida y fácil visualización de la información.
Las imágenes no son una maravilla debido sobre todo a mi inexperiencia fotográfica, aún así he escogido las mejores parapoder avalar lo escrito.
He aprovechado el superfist de la plantilla y con él he creado el catálogo de los vinos disponibles con sus características propias.
Para el apartado de contacto básicamente he reutilizado la esencia de la plantilla adecuando el estilo y los datos a la página.
Y con esto doy por finalizado el primer estilo, simple y sencillo pero de aspecto profesional y de fácil acceso, toda la información a tan solo un clic del ratón.
Para el segundo estilo he decidido emplear el el color morado oscuro del logo.
He seleccionado otra imagen de fondo, esta con botellas de vino, de manera que al centrarla parezca casi un mosaico y contanga los colores del diseño, además los corchos hacen juego con el logo.
A continuación he modificado el css de los div que estructuran la página hasta conseguir que la navegación quede vertical y encaje con el div "principal" del load.
Una vez hecho esto simplemente he adecuado los colores a la nueva paleta y cambiado la posición de algunos elementos, así como añadido algunos bordes y margenes para una mejor presentación.
Cabe decir que la web está orientada a mostrarse con el primer estilo, por eso el segundo está un poco menos trabajado.
martes, 29 de octubre de 2013
Plantilla, conmutador css y load de jQuery
Para esta entrega he encontrado algunas plantillas css tras buscar un poquito por la red.
Al final me he decidido por escoger una de la página: http://www.mejoresplantillasgratis.es/free-templates/Plantillas-CSS.html.
He elegido esa porque ya estaba orientada a una empresa agraria y el esqueleto se ajusta perfectamente a lo que buscaba.
Dispone de 5 ficheros html, cada uno para los distintos apartados de la navegación:
Home
Products
Technology
Pricinig
Contacts
Una vez descargada y después de haber leído un poco el html, css y scripts de jQuery pasé a cambiar el title en el head por "Bodegas y Viñedos Hermanos Blanco".
A continuación traduje la navegación a español y la adapté a los apartados que yo quiero incluir: Inicio, Viñedos, Bodega, Catálogo y Contacto.
Después de esto pasé a realizar lo pedido en la entrega.
He introducido un conmutador de estilos css mediante un switcher que permita alternar entre dos ficheros .css, añadiendo unas líneas de código al html y un fichero styleswitcher.js con el script a realizar.
A efectos de usuario esto permite la selección de dos diseños para la misma página mediante dos links que he situado en la parte superior izquierda de la misma. Además cada vez que se selecciona uno u otro se almacena una cookie que permite que el navegador "recuerde" el css elegido por el usuario y lo seleccione cada vez que abra la página.
Terminada esta parte introduje la función load de jQuery y la he integrado de manera que la barra de navegación, la presentación de imágenes y el footer permanezcan fijos y el contenido entre ambos vaya cambiando según se pinche con el ratón en un apartado u otro.
Tras esto retoqué el script del load para que cada vez que se pincha en un apartado de la navegación este resalte sobre los demás como que está pinchado jugando un poco con las id y el className de los elementos de la lista y los ancle.
Por último he introducido un icono para que aparezca en la pestaña de la web recortando el logo de la empresa de una fotografía y a su vez he empezado a mirar cómo puedo cambiar las fotos de la plantilla por las mías, así como el contenido.
Al final me he decidido por escoger una de la página: http://www.mejoresplantillasgratis.es/free-templates/Plantillas-CSS.html.
He elegido esa porque ya estaba orientada a una empresa agraria y el esqueleto se ajusta perfectamente a lo que buscaba.
Dispone de 5 ficheros html, cada uno para los distintos apartados de la navegación:
Home
Products
Pricinig
Contacts
Una vez descargada y después de haber leído un poco el html, css y scripts de jQuery pasé a cambiar el title en el head por "Bodegas y Viñedos Hermanos Blanco".
A continuación traduje la navegación a español y la adapté a los apartados que yo quiero incluir: Inicio, Viñedos, Bodega, Catálogo y Contacto.
Después de esto pasé a realizar lo pedido en la entrega.
He introducido un conmutador de estilos css mediante un switcher que permita alternar entre dos ficheros .css, añadiendo unas líneas de código al html y un fichero styleswitcher.js con el script a realizar.
A efectos de usuario esto permite la selección de dos diseños para la misma página mediante dos links que he situado en la parte superior izquierda de la misma. Además cada vez que se selecciona uno u otro se almacena una cookie que permite que el navegador "recuerde" el css elegido por el usuario y lo seleccione cada vez que abra la página.
Terminada esta parte introduje la función load de jQuery y la he integrado de manera que la barra de navegación, la presentación de imágenes y el footer permanezcan fijos y el contenido entre ambos vaya cambiando según se pinche con el ratón en un apartado u otro.
Tras esto retoqué el script del load para que cada vez que se pincha en un apartado de la navegación este resalte sobre los demás como que está pinchado jugando un poco con las id y el className de los elementos de la lista y los ancle.
Por último he introducido un icono para que aparezca en la pestaña de la web recortando el logo de la empresa de una fotografía y a su vez he empezado a mirar cómo puedo cambiar las fotos de la plantilla por las mías, así como el contenido.
jueves, 24 de octubre de 2013
Trabajando con paletas de colores
1. Mirando los enlaces de la web, parte del logo de tu web (si no lo
tienes ahora, coge cualquier otro o bien una foto) y define la paleta de
colores de tu web. usa http://kuler.adobe.com
Utilizaré esta imagen que tiene distintas tonalidades de rojo y morado para definir la paleta de colores de la página.
2. Comenta qué alternativas tienes (monocromo, etc.), cuál seleccionas y por qué. ¿Por qué has seleccionado estos colores, al margen de la gama?
Podemos definir la paleta siguiendo un estilo monocromático, de triadas, complementario, compuesto, de sombras y personalizado.
He elegido un primer estilo monocromático con tonalidades de rojo y después he añadido personalmente dos tonos más oscuros de gris y marron.
3. Muestra diferentes paletas sobre tu web.
Podemos seleccionar cada uno de los colores de la paleta base y desarrollar paletas monocromáticas a partir de él.
Gris:
Primer rojo:
Marrón:
Segundo rojo:
Último rojo:
4. Razona sobre las texturas de tu web
Aún es pronto para decidir sobre las texturas, quizá añada algún degradado pero no puedo asegurar nada con certeza.
2. Comenta qué alternativas tienes (monocromo, etc.), cuál seleccionas y por qué. ¿Por qué has seleccionado estos colores, al margen de la gama?
Podemos definir la paleta siguiendo un estilo monocromático, de triadas, complementario, compuesto, de sombras y personalizado.
He elegido un primer estilo monocromático con tonalidades de rojo y después he añadido personalmente dos tonos más oscuros de gris y marron.
3. Muestra diferentes paletas sobre tu web.
Podemos seleccionar cada uno de los colores de la paleta base y desarrollar paletas monocromáticas a partir de él.
Gris:
Primer rojo:
Marrón:
Segundo rojo:
Último rojo:
4. Razona sobre las texturas de tu web
Aún es pronto para decidir sobre las texturas, quizá añada algún degradado pero no puedo asegurar nada con certeza.
martes, 17 de septiembre de 2013
Primera Entrega
1. Web que vas a hacer. Por qué.
No tuve que pensarlo mucho para decidirme, me he propuesto hacer una página para la empresa de mi padre, Bodegas y viñedos hermanos Blanco. Ya que tengo que hacer una web y puesto que la empresa aún no tiene ninguna procedí a consultar los detalles y con la aprobación de la misma me dispongo a crearla.
2. Objetivos y público objetivo.
El objetivo principal de la web es dar a conocer los servicios que la empresa ofrece, así como mostrar un catálogo de vinos a la venta e información variada sobre su elaboración.
La página no será una tienda virtual pero sí contará con un apartado de contacto, a través del cual se podría consultar cualquier pedido o sugerencia.
El propósito adicional es que gracias a la página se vean incrementadas las ventas y la bodega sea conocida por un número mayor de personas.
3. URLs de webs de la misma temática. Descríbelas, pon pantallazos, qué estructura tienen, qué aspectos te llaman la atención o no te gustan, etc.
Pago de Carraovejas
http://www.pagodecarraovejas.com/
Cabe destacar el menú dinámico, la presentación de imágines (bien seleccionadas) de fondo, la posibilidad de mostrar la página en inglés y los enlaces a las redes sociales de la bodega.
Bodegas Balbás
http://www.balbas.es/
También cuenta con un menú dinámico, una presentación de imágenes de fondo y la posibilidad de mostrar en inglés la página. Me llama la atención el apartado "Actualidad" donde se muestran noticias recientes de la bodega.
Vega Sicilia
http://www.vega-sicilia.com/
El menú en este caso no es dinámico pero también cuenta con una presentacion de fondo y esta vez animada con audio. Mantiene la posibilidad de escoger idioma entre español e inglés.
Viña Vilano
http://www.vinavilano.com/
No cuenta con menú dinámico pero llama la atención la variedad de idiomas disponibles contando con alemán, francés y ruso además de inglés y español.
En lugar de una presentación con imágenes se hace una pequeña introducción de la bodega, así como algunos premios obtenidos.
Bodegas Monte Baco
http://www.bodegasmontebaco.com/
Cuentan con una app para android. Añaden el chino a los idiomas disponibles.
Cuenta con una navegación y menú muy dinámicos incluyendo detalles flash.
4. Secciones y estructura (relación jerárquica de las secciones).
La estructura primitiva y provisional de las secciones estaría en un menú lateral y contaría con varios apartados:
No tuve que pensarlo mucho para decidirme, me he propuesto hacer una página para la empresa de mi padre, Bodegas y viñedos hermanos Blanco. Ya que tengo que hacer una web y puesto que la empresa aún no tiene ninguna procedí a consultar los detalles y con la aprobación de la misma me dispongo a crearla.
2. Objetivos y público objetivo.
El objetivo principal de la web es dar a conocer los servicios que la empresa ofrece, así como mostrar un catálogo de vinos a la venta e información variada sobre su elaboración.
La página no será una tienda virtual pero sí contará con un apartado de contacto, a través del cual se podría consultar cualquier pedido o sugerencia.
El propósito adicional es que gracias a la página se vean incrementadas las ventas y la bodega sea conocida por un número mayor de personas.
3. URLs de webs de la misma temática. Descríbelas, pon pantallazos, qué estructura tienen, qué aspectos te llaman la atención o no te gustan, etc.
Pago de Carraovejas
http://www.pagodecarraovejas.com/
Cabe destacar el menú dinámico, la presentación de imágines (bien seleccionadas) de fondo, la posibilidad de mostrar la página en inglés y los enlaces a las redes sociales de la bodega.
Bodegas Balbás
http://www.balbas.es/
También cuenta con un menú dinámico, una presentación de imágenes de fondo y la posibilidad de mostrar en inglés la página. Me llama la atención el apartado "Actualidad" donde se muestran noticias recientes de la bodega.
Vega Sicilia
http://www.vega-sicilia.com/
El menú en este caso no es dinámico pero también cuenta con una presentacion de fondo y esta vez animada con audio. Mantiene la posibilidad de escoger idioma entre español e inglés.
Viña Vilano
http://www.vinavilano.com/
No cuenta con menú dinámico pero llama la atención la variedad de idiomas disponibles contando con alemán, francés y ruso además de inglés y español.
En lugar de una presentación con imágenes se hace una pequeña introducción de la bodega, así como algunos premios obtenidos.
Bodegas Monte Baco
http://www.bodegasmontebaco.com/
Cuentan con una app para android. Añaden el chino a los idiomas disponibles.
Cuenta con una navegación y menú muy dinámicos incluyendo detalles flash.
4. Secciones y estructura (relación jerárquica de las secciones).
La estructura primitiva y provisional de las secciones estaría en un menú lateral y contaría con varios apartados:
- Inicio (anclado a la página principal).
- Viñedos (información sobre los distintos terrenos, así como su plantación y cultivo).
- Bodega (detalles técnicos de la elaboración del vino).
- Comercio (contará con un catálogo de los vinos a la venta).
- Contacto
Suscribirse a:
Entradas (Atom)