DESARROLLO DE PAGINAS WEB

¿Qué verás en desarrollo de paginas web?

Hemos realizado un conjunto de acciones de cómo es el desarrollo de paginas web desde el <HEAD>  ( o cabecera de la web ), pasando por todo el contenido que podemos añadir en el <BODY> (o cuerpo de la pagina) y terminando en el <FOOTER> (pie de página), donde añadiremos un menú con tus datos legales, respetaremos el RGPD,  avisando de la fecha de creación o modificación de la web y tus señas.

¿Estás preparado para introducirte en el mundo del desarrollador web?

CABECERO WEB

<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Madrid antiguo | documentacion de madrid | plaza mayor antigua – Esta web esta actualmente en construccion</title>
<link rel=”dns-prefetch” href=”//s0.wp.com”>
<link rel=”dns-prefetch” href=”//s.gravatar.com”>
<link rel=”dns-prefetch” href=”//fonts.googleapis.com”>
<link rel=”dns-prefetch” href=”//s.w.org”>
<link rel=”alternate” type=”application/rss+xml” title=”Madrid antiguo | documentacion de madrid | plaza mayor antigua » Feed” href=”http://villaycorte.es/feed/”>
<link rel=”alternate” type=”application/rss+xml” title=”Madrid antiguo | documentacion de madrid | plaza mayor antigua » RSS de los comentarios” href=”http://villaycorte.es/comments/feed/”>
<script async=”” src=”//www.google-analytics.com/analytics.js”></script><script type=”text/javascript”></head>

Hemos utilizado, a modo de ejemplo, la pagina web de nuestros amigos de la fundacion villa y corte . En la cabecera, cuando nos ponemos con el desarrollo de paginas web, solemos colocar un banner grande con el logo de tu empresa, pudiéndose colocar tanto encima del menú como a la izquierda o a la derecha.

Normalmente, cuando desarrollamos una pagina web, esto lo tenemos en cuenta según los contenidos que posteriormente introduzcamos, puesto que para una buena armonía web debemos implementar los contenidos y luego revisar la web desde el Header hasta el footer.

Además, en la parte superior del menú, llamado “top menu” solemos añadir el teléfono, el horario o incluso las redes sociales. Si eres una tienda, mucha gente querrá visitarte, e ira buscando tus datos de contacto.

(Puedes ver un ejemplo del código html de a página, si pasas el ratón por la imagen de la izquierda 😉 )

desarrollo de paginas web, el menu

Esto de aquí encima, es el menú de la pagina web que hemos cogido de ejemplo. En esta zona, añadimos las categorías o diferentes paginas que queremos en nuestra web, para que la gente rápidamente se pueda mover por los distintos lugares de tu espacio web.

Todos nuestros menús gozan de lo que llamamos en el desarrollo de paginas web “menú pegajoso”, que se trata de un menú que, según te desplazas verticalmente por la pagina web (hacer scroll), se va contigo para que no tengamos que volver arriba. Otro ejemplo de menú pegajoso lo tienes en nuestra pagina web 🙂

Además, existen 2 tipos de menú para los “desplegables”

Hover: donde al pasar el ratón se despliegan las categorías.

On Click: donde al pinchar con el ratón se despliegan las categorías.

En el desarrollo de paginas web de Tiendas online o Ecommerce, si dentro tenemos “nuevos productos” “los más vistos” “categorías”, etc,  es más cómodo un tipo de menú on click, puesto que con este menú, si no vuelves a pinchar en la categoría o fuera del desplegable, se puede ver sin que desaparezca.

Desarrollo de pagina web, el body

¿Bien hasta aquí? ¿Ha quedado claro lo que es el Head? Como en el cuerpo humano, después del cerebro de la pagina web viene “el hambre” o contenido, el <BODY> o cuerpo de la pagina.

Esto del desarrollo de paginas web mola un montón. Para nosotros lo más divertido es llenar de contenidos relevantes la tripa al body , tratando temas que queramos resumir para llevar al usuario a los diferentes apartados de la nuestro sitio web.

Un claro ejemplo es el siguiente: la explicación que he dado más arriba sobre qué es el  “HEAD” esta en mi “BODY”, ¡Que cosas! pero además, quiero que sepas que hacemos paginas web así que te lo pongo diciéndote “pincha aquí”.  Si pinchas, no abandonarás esta pagina web, porque le he dicho a ese enlace que se abra en una pestaña nueva de tu navegador, por si quieres seguir leyéndonos hasta el footer y ver la otra página más tarde;-)

Solemos añadir formatos aluciflipantes en el body durante la ejecución del desarrollo de paginas web. No te vayas muy lejos, te voy a poner algunos ejemplos más para que lo entiendas a la primera.

<body>

<body class=”home page-template-default page page-id-265 wp-custom-logo” itemscope=”itemscope” itemtype=”http://schema.org/WebPage”>

<div id=”page” class=”site”>

<a class=”skip-link screen-reader-text” href=”#content”>Skip to content</a>

<div class=”top-bar”>
<div class=”container”>
<div class=”top-bar-left pull-left”>
</div>

<div class=”top-bar-right pull-right text-right”>
</div>
</div>
</div><!– .top-bar –>

<header id=”masthead” class=”site-header” itemscope=”itemscope” itemtype=”http://schema.org/WPHeader”>
<div class=”site-branding text-center”></body>

Diseño web en Guipúzcoa

HACER PARALLAX EN UNA WEB

¿¿QUE HA PASADO??

Seguro que tú también lo has notado… hay una imagen preciosa que hicimos en Donosti y no sabes por qué, pero te encanta como al ir bajando la imagen se queda debajo de este texto. Esto está colocado en el BODY de la pagina web y es una tendencia del 2018, de una forma muy atractiva te llamo la atención para explicarte esto.

Como están ahora de moda los contadores en el desarrollo de paginas web… pues los ponemos para explicar lo que sabemos o lo que tenemos dentro del negocio. Esto lo colocamos en las paginas web para captar la atención del usuario y puede tener forma de ¨tarta¨o forma de ¨barras¨.

Satisfacción de nuestros clientes

  • Muy contentos
  • Menos contentos
  • Nada contentos

Haber cuantas cosas hemos hecho en Cavallanti®...

Desarrollo de paginas web 90%
Posicionamiento SEO 85%
Conocimientos en Marketing Digital 80%
Cafés que tomamos al día mientras diseñamos, 10 máx 100%

Podéis pinchar en las siguientes pestañas y leer lo que hay dentro de cada una

Este es un ejemplo de pestaña donde os contamos que hacemos diseño web, pero ¿qué es el diseño web? es cualquier tipo de diseño gráfico sin llegar a ser operacional, vamos que lo podemos dibujar en photoshop, corel draw, etc. pero no seria una creación web real.

Este es un segundo ejemplo de pestaña, dónde te contamos que es el desarrollo web: es el conjunto de acciones, inserción de contenidos y modificación de código que hacemos en una pagina web para que los usuarios puedan tocar e ir a otro lugar de la web mediante enlaces internos que introducimos a cada uno de los elementos que añadimos en cualquier parte del BODY.

Tercer ejemplo de pestaña: sitio web es todo el lugar que alberga una pagina web, empezando por el dominio, como por ejemplo es este cavallanti.com, y que debe estar siempre contratado con un hosting para poder albergar tu sitio web.

Cuarta pestaña de ejemplo: el hosting es el servicio que contratamos con el dominio (www.tupaginaweb.com) y donde albergamos la pagina web, por ejemplo para la plataforma wordpress, necesitamos un hosting. No necesitamos exactamente un hosting wordpress, puede ser cualquier hosting con capacidad de FTP y SQL.

Como veis, en el BODY hay que añadir todo tipo de contenido que explique de forma resumida cada uno de los servicios y puntos de interés de tu negocio.

Si queréis saber más acerca de la paginas web, os invito a ver de forma resumida el método de 3 pasos web, para ello os dejamos un elemento más del BODY: el famoso botón web.

desarrollo de paginas web madrid

Para finalizar nos encontramos al final de tu sitio el Footer o pie de pagina.

En este indicamos, tu ubicación, tu teléfono, las novedades, suscribirse en tu blog y sobre todo el aviso legal.

No es el menos importante, los desarrollador de pagina web suele firmar la pagina debajo para tambien obtener visitas por si alguien quiere una web como la que te ha realizado.

En esto consiste el desarrollo de paginas web, el desarrollador te viste la pagina web desde el HEAD hasta el FOOTER.

Llegado a este punto…

¿Que quieres hacer?

diseño web en 3 pasos | diseño de paginas web en madrid | pagina web gratis | Novedades Web | Mantenimiento WordPress | Mantenimiento Prestashop | Posicionamiento SEO | A LA HOME | Contactar contigo | Tengo algunas preguntas

X