Diseño y Plantilla Web Gratis de Gastronomía (Diseño K1)

Compartir este artículo en:  

Introducción 

Este diseño es una proyección básica de un sito o espacio Web para Restaurantes o Gastronomía, en esta ocasión nos centramos en un diseño con opciones comunes de funcionamiento, pero a la vez el sitio será muy llamativo y fácil de usar para los usuarios.  

Como programadores y diseñadores web debemos tener en cuenta siempre el uso de diseños básicos para nuestros clientes que usaran estos servicios, ya sea por primera vez o para aquellas personas que no requieran un proyecto web de grandes magnitudes.   

Para dar una valoración y un mejor entendimiento a este proyecto web, analizaremos cada punto que debe poseer toda página web Básica. Al final de este artículo tendrás enlaces de descarga gratuitos para usar esta plantilla en Artisteer, DreamWeaver, Joomla y WordPress. 

 

Presentación del Sitio web:   

En el siguiente enlace tendrás acceso a una presentación en tiempo real, del funcionamiento de esta plantilla web, recuerda que la vista final puede ser modificada por el programador en cualquier momento. 

 

Descripción de la plantilla: 

Home o la página principal

Observamos un menú sencillo y llamativo con botones para cada opción, no desplegable, abajo tenemos una cabecera con efecto slide para tres o más portadas distintas. Después podemos ver un cuadro blanco con transparencia la cual incluye una pequeña descripción del restaurante, la cual podría ser nuestra meta descripción para posicionamiento web (SEO).

En la parte media de la página web observamos tres artículos de comida cada uno de color diferente, en esta sección se recomienda poner los tres platos principales que ofrece tu restaurante.

Llegando a la parte final tenemos la sección de contactos en donde resaltan 5 partes donde podemos ver la dirección y numero por departamento, municipio o ciudad de un país y en la parte principal tendremos la bandeja de redes sociales.

Secciones o Artículos:

En cada artículo se han puesto enlaces para cada platillo de comida, y se han colocado 4 cada uno con imagen y con efecto MOUSE OVER. La tipografía se recomienda en número 12 en arial o 14 en booak antiqua pero esta puede ser cambiada al gusto.  

El artículo debe contener en la parte superior un buscador web interno del sitio, la barra de redes sociales para compartir dicho artículo y en la parte inferior la sección de comentarios, aunque la sección de comentarios es opcional.

Div

Esta será una página estatifica con pocos cambios anualmente, así que hemos decidido incluir un div general en todo el artículo, pero con estilos en CSSS y el código HTML puedes dividir la plantilla en los DIVS que consideres necesarios.

Menú principal y lateral

Esta plantilla no tiene menú lateral, consideramos que por ser el diseño web de una iniciativa pequeña no será necesario optar por esta opción, el menú principal ubicando en la position-1 consta en primera instancia del inicio, seguido por recetas, instalaciones, menú y por último el blog, se puede incluir el apartado de contáctanos pero esto lo dejamos a decisión del cliente.

 

Recomendaciones/ instalaciones de plugin.

  • Se recomienda usar un formato .jpg para poder controlar el tiempo de carga de imágenes en cada artículo, además de estos debemos meter en un compresor las imágenes así podemos bajar su peso.
  • Las únicas imágenes que estarán en círculo son las imágenes de la página principal o home, ya que se consideran como las más importantes. 
  • Si usamos Joomla o WordPress, recomendamos el módulo JJ social slider para la barra de redes sociales.
  • Podemos usar el buscador nativo para los gestores de contenido o CMS. 
  • Las imágenes puedes insertarlas con estilos de efecto mouse over, esto con la intención de crear mayor interacción con tu público.

Código y estilos:

En las siguientes pestañas están las líneas de código sobresalientes usadas en esta plantilla web, el código restante estará adentro del archivo que escojas descargar, el cual se encuentra al final de este mismo artículo. Es importante que sepas que este código puede ser modificado por el programador en cualquier momento.

ESTILO CSS PARA EL EFECTO MOUSE OVER

Estilo CSS

#containerEx3 {  ‘posición ancho y altura de las o las imágenes en el artículo’

width: 880px;

margin: 0 auto;

}

.ex3 img {  ‘detalles de sombras y transición’

margin: 7px;

border: 0px solid #eee;

-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

-webkit-transition: all 0.35s ease-out;

-moz-transition: all 0.35s ease;

-ms-transition: all 0.35s ease;

}

.ex3 img:hover {     ‘transformación y rotación de las imágenes’

-webkit-transform: rotate(-12deg);

-moz-transform: rotate(-12deg);

-ms-transform: rotate(-12deg);

transform: rotate(-12deg); 

}

  

CODIGO HTML PARA EL EFECTO MOUSE OVER

Codigo HTML

<div id="containerEx3"> ‘para una imagen’

<div class="ex3">

<img alt="img0" src="/imagenes/d.png" />

</div>

</div>

 

<div id="containerEx3"> ‘para varias imágenes’

<div class="ex3">

<img alt="img0" src="/imagenes/imagen1.png" />

<img alt="img0" src="/imagenes/imagen2" />

</div> 

</div> 

 

 

  

Descargas 

Adquiere estas plantillas dando click en la imagen del programa de tu preferencia, después de ver la publicad salta el anuncio y podrás descargar el proyecto en Artisteer, Adobe DreamWeavero, Joomla y WordPress, estos archivos están bajo la Licencia Clásica de EspacioHonduras Para uso comercial, libre y gratuito, si quieres saber más de nuestras licencias da clik en el siguiente botón: 

Más información sobre nuestras Licencias

 

 Descarga gratis para Artisteer, Peso del archivo: 3.20-MB

Descarga gratis en DreamWeaver Peso del archivo: 3.60-MB

 

Descarga gratis para Joomla 3.0, Peso del archivo: 2.50-MB

 

Descargar gratis en WordPress, Peso del archivo: 1.80-MB

 

 

 

  

 
Artículos Relacionados
 
 

EspacioHonduras

Articulo Redactado por: Kilo tapias peralta Escobar

Soy el fundador de EspacioHonduras, he basado mi vida entera en los estudios de cualquier índole y eso me ha motivado a crear este espacio educativo gratuito, mis intenciones son las de cambiar nuestro futuro y así dar una libertad a nuestras futuras generaciones.

 

 

Escribir un comentario