Y ya está. Hasta aquí ha llegado este apasionante curso en el que he (hemos) aprendido a desarrollar webs, desde el punto de vista del lado cliente, pero suficiente para hacer cosas chulas. Y ahora a contar que es lo que he hecho en mi web para esta última entrega:
Respecto a la web en general:
1-. He decidido que en el html de la web (index.html) sólo vaya la estructura de divs (con las excepción de elementos que tienen eventos javascript asociados), y el texto se va a cargar desde distintos archivos html utilizando un sencillo plugin de jquery ((' ').load(' ').).
2-. Los enlaces a las distintas secciones no te mandan a otra página, sino que cargan el contenido correspondiente en el div principal.
3-. Todavía no tengo contenido como tal, pero he metido alguna chorrada para ver como quedaría (véase la sección de imágenes, y de hecho cualquier otra) y queda bien, y lo que es más importante (sobre todo de cara al usuario ya que en la asignatura damos el enfoque cliente) es fácil navegar por la web.
4-. Es cierto que hay un estilo que había que "dejar un poco de lado" para centrarse sólo en uno, pero yo he intentado que vayan más o menos parejos. Aun así, a mi me gusta más como ha quedado el primero.
Respecto al primer estilo (el predeterminado):
1-. He decidido que este estilo tuviese medidas fijas.
2-. Como ya dije que quería hacer, he conseguido que el menu con los enlaces a las distintas secciones se muestre en la izquierda sobre el respaldo de la silla de la foto de la página. Es decir, he conseguido integrar en la página la idea de la primera entrega.
3-. Cambia algún de detallito más pero lo demás sigue como en la entrega anterior. Eso sí, esta vez la página no queda tan sosa (de hecho gracias a la imagen).
Respecto al segundo estilo:
1-. Mantengo la idea de un estilo escalable.
2-. El menu con los enlaces a las distintas secciones se muestra en la cabecera de la página.
3-. Dicha cabecera permanece siempre en la parte superior del navegador, de manera que aunque tengamos que hacer "scrolling" tenemos el menu con las secciones siempre presente en la parte de arriba. Esto lo he logrado dándole el valor {position: fixed;} al div de la cabecera en el css.
Observaciones importantes:
1-. A diferencia de la entrega anterior, en este caso tanto el html como todas las hojas de estilo css validan perfectamente de acuerdo a los estándares de w3.
2-. En esta entrega por fin he subido la página a un sitio (000webhost.com). La url de mi web es: http://seriamenteaburrido.site40.net/
Y sólo tengo una cosa más que decir...
...¡Feliz Navidad! XD
jueves, 22 de diciembre de 2011
viernes, 25 de noviembre de 2011
Comienza lo bueno
De nuevo por estos lares, esta vez para comentar que ya he empezado a desarrollar en gran medida lo que en un futuro será mi web.
Lo primero, he reorganizado la estructura de directorios y los archivos, porque ya empieza a haber algo más que un html y su css cutre. Ahora cada cosa esta en su sitio, con una carpeta para los CSS, otra para los Javascript, otra para las imagenes, y cuando incluya contenido habrá otra para las secciones y sucesivas entradas que vaya haciendo. El tema del contenido no me preocupa de momento ya que por la temática de la web debería estar actualizándose con cierta frecuencia.
Respecto a los dos estilos, como ya dije en la entrada anterior, he basado cada estilo en función de una paleta de colores seleccionada mediante kuler a partir de una imagen. La principal diferencia entre estos dos estilos es, por supuesto, el color, ya que es lo que más choca al cambiar de uno a otro. Pero voy a cambiar bastantes cosas más.
En el estilo con los colores más oscuros, mi idea es introducir la imagen que tengo de portada en el div de la izquierda, con el menú a las distintas secciones. PERO, todavía no he conseguido ajustar el tamaño de una imagen al de una div, por lo menos no en este caso que el div es escalable, por lo que seguramente tenga que utilizar medidas fijas para este estilo. De momento queda esbozado, con el div principal y otro a la izquierda, dónde de momento están el enlace a este mi blog y el conmutador de estilos.
En el otro estilo, tengo un menú horizontal en la parte superior izquierda, con los enlaces a distintas secciones. Al pasar el ratón sobre cada uno de ellos (hover) aparece un icono ilustrativo. Mi idea es que estos enlaces los pienso usar no como enlaces sino, mediante livequery, para que simplemente cargue el contenido de la sección en el div principal (en este caso a la izquierda). En el div de la derecha me pasa lo mismo que con el otro estilo, todavía no puedo poner la imagen que tengo pensada, de todas formas ya la tengo en el directorio de las imágenes (img).
Respecto a los scripts, he utilizado uno para redondear algunos divs, y desde luego otro para el conmutador de estilo. El del conmutador de estilo es más complicado ya que tiene en cuenta que debe mantener el último estilo aún cuando se cierre la página. Esto lo consigo con una cookie.
Y por último, y ya que este es mi blog, termino dando mi opinión:
-Lo cierto es que me hubiese gustado haber avanzado algo más para esta entrega, pero me está gustando el aspecto que va tomando (poco a poco a mi pesar) la web, y si sigo inspirado creo que puede quedar bastante bonita al final.
¡Ah! y por supuesto, un pantallazo de como va quedando cada estilo, para ir "abriendo boca" XD
Lo primero, he reorganizado la estructura de directorios y los archivos, porque ya empieza a haber algo más que un html y su css cutre. Ahora cada cosa esta en su sitio, con una carpeta para los CSS, otra para los Javascript, otra para las imagenes, y cuando incluya contenido habrá otra para las secciones y sucesivas entradas que vaya haciendo. El tema del contenido no me preocupa de momento ya que por la temática de la web debería estar actualizándose con cierta frecuencia.
Respecto a los dos estilos, como ya dije en la entrada anterior, he basado cada estilo en función de una paleta de colores seleccionada mediante kuler a partir de una imagen. La principal diferencia entre estos dos estilos es, por supuesto, el color, ya que es lo que más choca al cambiar de uno a otro. Pero voy a cambiar bastantes cosas más.
En el estilo con los colores más oscuros, mi idea es introducir la imagen que tengo de portada en el div de la izquierda, con el menú a las distintas secciones. PERO, todavía no he conseguido ajustar el tamaño de una imagen al de una div, por lo menos no en este caso que el div es escalable, por lo que seguramente tenga que utilizar medidas fijas para este estilo. De momento queda esbozado, con el div principal y otro a la izquierda, dónde de momento están el enlace a este mi blog y el conmutador de estilos.
En el otro estilo, tengo un menú horizontal en la parte superior izquierda, con los enlaces a distintas secciones. Al pasar el ratón sobre cada uno de ellos (hover) aparece un icono ilustrativo. Mi idea es que estos enlaces los pienso usar no como enlaces sino, mediante livequery, para que simplemente cargue el contenido de la sección en el div principal (en este caso a la izquierda). En el div de la derecha me pasa lo mismo que con el otro estilo, todavía no puedo poner la imagen que tengo pensada, de todas formas ya la tengo en el directorio de las imágenes (img).
Respecto a los scripts, he utilizado uno para redondear algunos divs, y desde luego otro para el conmutador de estilo. El del conmutador de estilo es más complicado ya que tiene en cuenta que debe mantener el último estilo aún cuando se cierre la página. Esto lo consigo con una cookie.
Y por último, y ya que este es mi blog, termino dando mi opinión:
-Lo cierto es que me hubiese gustado haber avanzado algo más para esta entrega, pero me está gustando el aspecto que va tomando (poco a poco a mi pesar) la web, y si sigo inspirado creo que puede quedar bastante bonita al final.
¡Ah! y por supuesto, un pantallazo de como va quedando cada estilo, para ir "abriendo boca" XD
jueves, 3 de noviembre de 2011
Selección de la paleta de colores para la web
Como ya dice el título, esta vez me voy a dedicar a elegir los colores para cada uno de los dos estilos que va a tener la web.
En primer lugar, he decidido los colores a partir de la foto de la portada, utilizando kuler.
Como resultado he obtenido la siguiente paleta:
La idea que tengo (o por lo menos de momento) es hacer dos estilos algo así como "noche" y "día", por lo que utilizaré los 3 colores de la izquierda para el estilo oscuro y los dos de la derecha para el estilo más claro.
De cara a crear contrastes, he decidio utilizar el verde que aparece en la falda de la chica:
Y para las partes con el fondo más oscuro, también usaré el mismo que usé para la lista de secciones:
En primer lugar, he decidido los colores a partir de la foto de la portada, utilizando kuler.
Como resultado he obtenido la siguiente paleta:
La idea que tengo (o por lo menos de momento) es hacer dos estilos algo así como "noche" y "día", por lo que utilizaré los 3 colores de la izquierda para el estilo oscuro y los dos de la derecha para el estilo más claro.
De cara a crear contrastes, he decidio utilizar el verde que aparece en la falda de la chica:
Y para las partes con el fondo más oscuro, también usaré el mismo que usé para la lista de secciones:
jueves, 13 de octubre de 2011
Portada de la web
Para este primera entrega hay que tener desarrollada la portada...
Bueno, lo primero: he creado una especie de pantalla de bienvenida mientras la página no este terminada, así pruebo los enlaces sobre imágenes (quería ver como quedaban).
Una vez dentro de la página tenemos lo que sería la portada (en la cabecera el futuro nombre de la página), con una foto en la que están los enlaces a las distintas secciones de la web en cuestión. La idea es que en esta portada aparezcan las novedades de cada sección (al crear una nueva entrada en una sección, esta entrada tiene su eco en tiempo real en esta página), cosa que todavía no se hacer, por lo que de momento se tendrá que quedar así.
Tengo que decir que esta página la he creado desde cero, y aunque no lo parezca, lleva bastante crear algo desde cero (incluso algo aparentemente tan simple como esto). Más aún teniendo en cuenta que lo he desarrollado sólo con un notepad, el firebug del mozilla, y lo que he aprendido en clase. Aquí un pantallazo con el resultado:
Un detalle sobre el que estoy particularmente contento es el hecho de haber descubierto como añadir el icono a la página (casi la totalidad de las páginas que he visto tienen un icono). Por si alguien quiere saberlo (a mi me pareció muy curioso) simplemente hay que crear una imagen, la que queremos que sea el icono, y guardarla como favicon.ico con un tamaño no menor que 16x16px y no mayor que 48x48px; luego, en la cabecera (<head>) del html hay que añadir:
<link rel="shortcut icon" href="RUTA_DEL_ARCHIVO/favicon.ico" />Y hasta aquí el desarrollo de la portada.
Para desarrollar las secciones he decidido que es más cómodo partir de un estilo CSS ya desarrollado, modificándolo hasta conseguir un resultado que me convenza más. El estilo que he decidido modificar es concretamente este:
He enlazado todas las secciones a este html con dicho estilo, pero de momento no tengo nada más, pero en cuanto modifique este estilo haré una nueva entrada a este mi blog...
Por último, en cuanto tenga algo con "chichita" lo intentaré subir a algún sitio, de momento sólo tengos los archivos en mi pendrive.
edit: ¡Un momento! Acabo de ver el nombre de la tarea del moodle "Proyecto del curso" dice. He de añadir algo (me ha llegado el momento de inspiración): no sólo es un proyecto, es un desafío personal, en el que hay que invertir grandes dosis de ilusión, creatividad y pasión; en fin, a las 23:00 y parece que ya me empieza a afectar el sueño... =)
He enlazado todas las secciones a este html con dicho estilo, pero de momento no tengo nada más, pero en cuanto modifique este estilo haré una nueva entrada a este mi blog...
Por último, en cuanto tenga algo con "chichita" lo intentaré subir a algún sitio, de momento sólo tengos los archivos en mi pendrive.
edit: ¡Un momento! Acabo de ver el nombre de la tarea del moodle "Proyecto del curso" dice. He de añadir algo (me ha llegado el momento de inspiración): no sólo es un proyecto, es un desafío personal, en el que hay que invertir grandes dosis de ilusión, creatividad y pasión; en fin, a las 23:00 y parece que ya me empieza a afectar el sueño... =)
lunes, 19 de septiembre de 2011
Planificación de la web
A última, como siempre, pero a tiempo. Aquí está la primera enterga, la planificación del sitio web que vamos a elaborar a lo largo de la asignatura.
1-. Web que vas a hacer. Por qué.
Una web de entretenimiento. ¿Por qué?
La verdad, creo que ni yo mismo lo sé. Supongo que me pareció una opción bastante completa (se pueden incluir fotos, vídeos, música, texto...).
2-. Objetivos y público objetivo.
3-. URLs de webs de la misma temática.
1-. Web que vas a hacer. Por qué.
Una web de entretenimiento. ¿Por qué?
La verdad, creo que ni yo mismo lo sé. Supongo que me pareció una opción bastante completa (se pueden incluir fotos, vídeos, música, texto...).
2-. Objetivos y público objetivo.
La idea es que la gente pueda meterse en la página en esos momentos sueltos, en los que te aburres y no se te ocurre qué hacer, para ver cualquier chorrada ya sea en casa después de comer (tanta pereza que da empezar a estudiar), un rato libre en el trabajo o en un momento de clase en el laboratorio en el que te empiezas a disipar... ;-)
3-. URLs de webs de la misma temática.
- En la parte de imágenes: http://www.cuantocabron.com , http://www.vistoenfb.com , y muchas otras
- En la parte de videos: http://www.notengotele.com
- En la parte de frases: http://www.teniaquedecirlo.com , http://www.frasescelebres.net , http://www.proverbia.net y otras tantas
- En la parte de otros: entradas con texto, estilo blog, alguna cancioncilla, y otra opción son los botoncitos como en http://www.estoesdemasiadoparamicabeza.biz
La idea es una página principal, en la que aparecen las novedades (y un contador de visitas si puede ser xD). Arriba o a un lado habrá una barra con las distintas secciones (Imágenes, Vídeos, Frases, Otros, y un buscador, para buscar elementos en la propia página) que al pasar el ratón sobre una de ellas se despliegue una lista con las categorías de cada sección. Me gustaría incluir la opción del visitante de valorar cada entrada, incluso una dirección a la que mandar colaboraciones.
Suscribirse a:
Entradas (Atom)