miércoles, 14 de noviembre de 2012

Codigo HTML y CSS de la portada de la página web.

1. Estructura portada y códigos HTML y CSS.

Basándome un poco en la página web www.taxicity.es que mostré en la entrada al blog anterior, decidí que la portada fuera parecida a esa, por ello la estructure en 3 partes aunque para no dar a ninguna mas importancia que a las demás  equilibré los tamaños al estilo la bandera de algunos paises:


El codigo html de esta portada está estructurado en 3 partes de la siguiente forma:

    -Defino un encabezamiento o header con una etiqueta <div> el cual está compuesto por el logo (Taxi Sergy) y la foto de fondo que añado posteriormente con el documento inicio.css.

    -La parte central de la página que defino mediante otra etiqueta <div> con identificador "titulo" está compuesta por la barra de menú con las distintas secciones que se desarrollaran en posteriores entregas, y debajo un dibujo de un taxi y el lema de la página.

   -La tercera parte de la página queda compuesta por un texto descriptivo definido mediante la etiqueta <h3> y el pie de la página donde coloco mi nombre como creador de la página utilizando una etiqueta <div> con identificador "pie".



2. Estructura y estilo del header.

     - El elemento mas importate del header sin duda alguna es el fondo el cual da carácter a toda la página, y este esta configurado por completo en el bloque #header del documento inicio.css.



     - El otro elemento del header es el logo el cual está definido mediante la etiqueta <h1> en el documento html y ayudandome de la etiqueta <span> he coloreado dos letras de amarillo.





3. Estructura y estilo de la parte central de la portada.

La parte central de la portada esta formada por 3 partes:

     - La barra de menu creada en el html mediante una lista en la que cada elemento es un enlace a la sección indicada. Para que salgan las distintas secciones con el formato indicado es decir en paralelo y con separación entre ellas se realiza en el documento inicio.css mediante los tres bloques indicados, el primero para colocar la barra de menú dentro de este apartado central, el segundo para que las distintas secciones queden colocadas en la misma frase y el tercero para colocar las separaciones entre secciones danrlas color y formato al texto:




Las otras dos partes que se encuentran en la parte central de la portada son el dibujo del taxi y el lema los cuales para que aparezcan alineados en lugar de uno debajo del otro he utilizado la herramienta float en el css:





4. Estructura y estilo del pie.

Y por último la parte inferior de la portada formada por el texto descriptivo y bienvenida y el pie donde aparce mi nombre para identificar al creador de la pagina estan creados en el documento html y mediante el css he dado formato tanto al texto definido con la etiqueta <h3> y el pie definido con la etiqueta <div>.








martes, 13 de noviembre de 2012

Proximamente...

Y en breves... la nueva entrada al blog que profundizará en los aspectos que tienen que ver con el código html y css de la página web.

Inicio relalización portada pagina web

Realizacion portada página web

1. Importante visitar otras páginas web de misma temática e intentar mejorarlas para captación de público.

 Tras ver distintos tipos de páginas web relacionadas con el sector del taxi saqué algunas conclusiones que me ayudaron a saber como personalizar la mía. Todas las páginas que ví tenian los mismos contenidos: tarifas, horarios y poca cosa más. Ninguna de todas las que visité consiguió llamarme la atención o engancharme de alguna forma, solo una la cual no me llamo la atención por sus contenidos, pero si por su diseño, vistosidad y simpleza. Aquí os la muestro:




Por ello pensé que mi página web en cuanto a contenido tenía que ser más cercana y divertida de cara al publico. De ahí la idea de realizar y dar importancia a la sección fotos y anécdotas, una sección tipo diario donde pueda ir contando las cosas divertidas que pasan o se ven recorriendo las calles de Madrid y que consiga enganchar a la gente para entrar a curiosear. La idea es que la página guste y se divulgue de boca en boca y amigo en amigo con el objetivo final de ganar clientela fija para realizar trayectos.

2. Elección adecuada del fondo y paleta de colores de la página web.

En cuanto al diseño de la página lo primero que me pregunté es que paleta de colores utilizaría para su realización y tras pensar un poco elegí los siguientes:

   -Tonos azulados ya que representan muy bien el anochecer del cielo, hora a la que normalmente empiezo a trabajar.

   -Negro y amarillo ya que ambos son colores representativos del sector de taxi, no de esta ciudad, pero si de los famosos taxis americanos que vemos en tantas películas. Además el amarillo también representa las luces de los faros de los coches en la noche.

Una vez elegida la paleta de colores ahora quería encontrar una imagen de fondo para el encabezado de la paǵina y tras buscar muchos paisajes o panorámicas de Madrid encontré uno que me pareció ideal: contenía los colores que elegí para mi paleta, era informal y representa con un dibujo los elementos más importantes de la ciudad de madrid. Aquí la teneis:



3. Búsqueda de un logo.

Desde el principio me gustó el nombre de Taxi Sergy, intenté buscar un dibujo o logo para acompañar, pero me dió la sensación que llenaba demasiado la página con diversos dibujos de taxi asi que decidí dejar como logo el nombre de Taxi Sergy dándole un toque especial utilizando los colores de la paleta utilizando html y css. En las siguientes entregas trabajaré en mejorarlo y hacerlo más vistoso y llamativo. Aquí teneis el actual, simple pero que me hace sentir identificado:





4. Estructura de la portada.

Tras  ver multitud de plantillas de HTML y CSS y no encontrar ninguna que se adaptara demasiado a los contenidos que yo quería tener en mi página, finalmente decidí crear yo mi propio código html y css desde cero. Por un lado esta bien porque vas viendo como poco a poco tu página va tomando forma segun vas creando el documento css y por otro lado es peor porque es tarea ardua montar los modulos y que todo encaje a la perfecciñon en la página.


5. Contenido de la portada.

En primer lugar y puede que un poco cegado con la idea de que mi página web fuera distina al resto de páginas de este estilo y enganchara al publico desde un principio coloqué como portada la sección anecdotas que esta formado por dos columnas en las cuales coloco por orden cronológico tanto fotos como anécdotas. Aquí se puede ver:




Pero una clase en la que vimos diseño de páginas web bastó para darme cuenta de que eso no quedaba demasiado profesional asi que pasé lo que iba a ser mi portada a la sección anécdotas poniendolo en el menu y empecé a pensar en el contenido de la nueva portada. Y tras darle varias vueltas e intentando evitar el colocar la típica información del resto de páginas de taxi que habia visto con los precios, destinos etc, decidí colocar una sola frase en plan lema de la página el cual llamara la atención y un breve texto descriptivo de bienvenida y que solo con eso a la gente ya le apeteciera interactuar con la página y entrar en las secciones que requieran necesarias.

Con lo que por ahora a falta de seguir mejorando la página para las siguientes entregas el resultado de la portada es este:






 

lunes, 12 de noviembre de 2012

Proximamente...

Ya tengo listo mi primer diseño sobre la página web del taxi, en breves explicare detalladamente todo el proceso de elaboracion del trabajo realizado hasta el momento.

miércoles, 17 de octubre de 2012

Aprendiendo a utilizar PIXLR

Excelente programa el que acabo de utilizar para hacer mi primer fotomontaje =) aunque tengo que decir que he quedado mas contento y satifecho con la idea y el diseño que luego con el resultado que debido a los recortes de la fotos me ha salido con algunas imperfecciones.

Lo primero que he hecho ha sido pensar algo original que poder colocar en la entrada de la escuela y elegir las fotos:




La primera de todas ellas es la seleccionada como fondo para el fotomontaje. Lo primero que tube que hacer con ella es aumentarla de tamaño ya que la copié de la página web de la escuela y venía muy pequeña. Para ello use la opción imagen --> tamaño imagen y toqueteando los pixeles hasta obtener un tamaño lo suficientemente grande como para poder colocar luego mas fotos. Lo malo de hacer esta foto mas grande es que perdio resolución.

La segunda foto es la que elegí como super heroe para salir en mi fotomontaje y despues fue cuando cotilleando entre mis carpetas de fotos vi la tercera de ellas que la vi perfecta para esta tarea. Tube que recortar ambas fotos y cambiar tambien los tamaños de ambas para que coincidiera y quedara un resultado realista. El recortar estas dos fotos ha sido tarea ardua y no he quedado muy satisfecho con el resultado, pero la vista a estas horas de la noche... ya esta algo pesada.

Por último la cuarta foto ha sido un poco el toque cómico al fotomontaje =P

Y el resultado final es el que aqui os muestro,espero que os guste:


viernes, 12 de octubre de 2012

Decision Web


Tras unas dudas iniciales sobre la tematica de la pagina web, al final decidí anteponer la funcionalidad y el beneficio, a los queridos hobbies de uno.
Por ello mi página web tratará de publicitar mi negocio en busca de aumentar los clientes que transporte con mi taxi mediante citas concertadas, en detrimento de la otra idea que tenia en mente que era realizar la página web sobre mi equipo de baloncesto ( Eurocolegio Casvi ) y sus viajes por la península. 
El objetivo principal de mi página web será anunciar mis horarios y calendario de trabajo y poder realizar servicios concertados. Podré también anunciar los precios del taxi en la Comunidad de Madrid y realizar ofertas a otras provincias. Y por último aportar información y características del vehículo. Además a medida que realice la página espero poder ir encontrando más utilidades.
Para hacer más interesante  y entretenida la página habia pensado en hacer una sección donde se pudieran contar anecdotas ocurridas con clientes.
El publico al que irá dirigida esta página será cualquier usuario potencial del taxi, y el medio de difusion para darla a conocer será en gran parte el boca a boca partiendo de amigos y conocidos y tambien mediante la realizacion de pequeñas tarjetas de visita para que puedan coger los clientes que monten en el taxi.
Por todo esto la página tendrá que incluir en principio algunas secciones básicas como por ejemplo:
  • Información y bienvenida (incluida foto del coche)
  • Servicios a realizar
  • Tarifas y posibles ofertas
  • Calendario y horario de trabajo
  • Citas ya concertadas
  • Rutas
  • Anecdotas
  • Fotos de sitios de interes o eventos a los que vaya
  • Noticias sector del taxi
  • Enlaces
  • Contacto
Para hacerme una idea o esbozo de que tendrá que contener la página he visitado algunas webs de taxis particulares y tengo que decir que poniendome un poco de mal humor al darme cuenta de la cantidad de taxis piratas que existen. La página que más me ha ayudado ha sido una de un taxi para la localidad de Calatayud: www.taxicalatayud.com