Una prueba, puede que el proximo kiroti.org

Citar

Escrito el 11 May 2005 11:18 am

Muy buenas, pues experimentando un poco con estilos que nunca habia usado pero que se ven en algunas webs y causan buena impresion, decidí empezar a remodelar la web de kiroti, ya que el quiere ir aprendiendo algo de CSS y XHTML, así que hice esta página como muestra, y lo demás lo iremos haciendo de forma conjunta mientras le enseño lo que voy aplicando. El objetivo es triple, 1º remodelar el sitio, 2º que él aprenda CSS & XHTML, y por 3º y último él me va a enseñar a mí a manejar el ArchiCAD, ya que me hará falta saberlo en breve.

http://johnny.nodani.com/Kiroti/

No es algo definitivo, pero estaría bien que dieran sus opiniones.
PD: El archivo nicetitle.css lo tengo que editar aún, ya que me parece feo usar ese, que fue creado por Kemie (Diseñorama), lo pongo de momento mientras creo el mío propio, ya que en ese sólo cambié los colores, alguna forma y las medidas...
Saludos :wink:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 11 May 2005 03:38 pm

veo que hoy no hay muchas ganas de comentar :oops:

...o lo mismo esta tan bien que no pueden ponerle faltas? :lol:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 11 May 2005 03:42 pm

pues no se ve mal!

buen uso de los colores ...

solo el titulo .... mucho alpha ... no se lee ... y eslo mas importante

bey

Por hRod

BOFH

1548 de clabLevel

3 tutoriales
4 articulos
4 ejemplos

Genero:Masculino

Envíale un mensaje privado Email Web

BCN

Citar

Escrito el 11 May 2005 03:43 pm

Definitivamente la foto del tipo ese es horrible

Por kiroti

40 de clabLevel

Envíale un mensaje privado Email

Helsinki- Finlandia

Citar

Escrito el 11 May 2005 03:52 pm

bueno en realidad es una prueba, aunque hice varias y con más porcentaje de alpha no me gustaba tanto...
muchas gracias por la critica hrod :wink:

nos leemos...

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 11 May 2005 03:53 pm

kiroti escribió:

Definitivamente la foto del tipo ese es horrible

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 11 May 2005 04:10 pm

he requested URL /Kiroti/portfolio.html was not found on this server.

Not Found
The requested URL /Kiroti/images.html was not found on this server

por cierto la imagen de arriba quita objetivo al contenido , sinceramente me dio flojera ver abajo y menos la foto del tipo eses

esnserio preferi seguir viendo el paisaje que ver letras grises

Por FeNtO

BOFH

5091 de clabLevel

18 tutoriales

1 ejemplo

Bastard Operators From Hell

Envíale un mensaje privado Web

FeNtO DataCenter

@soportalo

Citar

Escrito el 11 May 2005 04:16 pm

las urls son sólo para cuando esté en el servidor de kiroti, ahora mismo no existen esas páginas.
que paisaje????las letras son azulonas, no grises :lol:

color:#586885;

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 11 May 2005 04:58 pm

Me gusta lo limpio y fresco que se ve.
Considera un par de puntos:

Cuando pones el mouse sobre el menu sale un tooltip tan largo que en portafolio, images y links me aparece el scroll bar horizontal.

La foto del pasto (grama) queda muy bien con la combinación de colores, pero para la página de un arquitecto es un poco irónico poner pasto y ni un ladrillo

Podría ir una de sus obras arquitectónicas que hizo, pudiendo estar retocada en tonos verdes...

Por DanielSemper

BOFH

4220 de clabLevel

4 tutoriales
16 articulos

Genero:Masculino Bastard Operators From Hell REC

Envíale un mensaje privado Web

www.aeromental.com

@aeromental

Citar

Escrito el 11 May 2005 05:02 pm

jejejej, ahora mismo ponemos otra, es que esa era provisional...lo de los tooltips es cueston de acortarlo un poco...

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 11 May 2005 05:14 pm

ya esta listo otra vez: 2nd lap...

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 11 May 2005 05:26 pm

Me parece bien, en general.
La foto... pues cada quien es como es :lol:

El tooltip en todos los links... como que hace que pierda "la gracia". Lo "bonito" es ir por los links haciendo mouse over y encontrarse la sorpresa que allí hay un "tip" o una nota adicional a lo que lees. Pero un tooltip con el link (o url).... lo veo MAL aprovechado.

Éxito!

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

Bastard Operators From Hell

Envíale un mensaje privado Web

Honduras

@pedro_php

Citar

Escrito el 11 May 2005 05:27 pm

Solucionados ambos puntos ... good.

Pero los tooltips los veo muy cuadrados.. antes tenían una curva que quedaba bien.

La foto ya esta acorde pero me gustaría una con colores no tan suaves... y algo más impactante... que le de vida. Esto seguro dependerá de kiroti.

Va bien

Por DanielSemper

BOFH

4220 de clabLevel

4 tutoriales
16 articulos

Genero:Masculino Bastard Operators From Hell REC

Envíale un mensaje privado Web

www.aeromental.com

@aeromental

Citar

Escrito el 11 May 2005 05:30 pm

exacto, tanto las curvas como las fotos...
muchas gracias a todos :wink:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 12 May 2005 12:43 am

Actualizado: Me olvide poner para que el h1 no se muestre, ya esta ahora.

Interesante, para ser tu primera ves en XHTML, aqui unos tips.

Agrega separadores de contenido, <hr /> , entre el header, el menu principal, la foto, el contenido, y el footer/copyright.
Lo que normalmente hago es esto, separo el contenido atraves de los hr, y les pongo que en el disenio sean invisibles, en el css escribes.

Código :

hr { display:none; }

Creo que suena mejor usar un <h1> en ves de la imagen.

Código :

<div class="header"><h1>Kiroti.org</h1></div>

Código :

.header {
   width:700px;
   height:188px;
   background:url(imagenes/kirotiheader.jpg) no-repeat;
   }

.header h1 { display:none; }

Cambia los links por listas

Código :

      <div class="menu">
        <p><a href="index.html" title="Profile">PROFILE</a> | <a href="portfolio.html" title="Portafolio">PORTFOLIO</a> | <a href="images.html" title="Images">IMAGES</a> | <a href="links.html" title="Links">LINKS</a></p>
     </div>

Código :

      <div class="menu">
        <ul>
          <li><a href="index.html" title="Profile">Profile</a> |
          <li><a href="portfolio.html" title="Portafolio">Portfolio</a> | 
          <li><a href="images.html" title="Images">Images</a> | 
          <li><a href="links.html" title="Links">Links</a>
        </ul>
      </div>

Código :

.menu ul, .menu li {
   margin:0px;
   padding:0px;
   display:inline;
   }

NO USES MAYUSCULAS

Código :

<a href="index.html" title="Profile">PROFILE</a>

Código :

<a href="index.html" title="Profile">Profile</a>

Código :

.menu {
   text-transform:uppercase;
   }

PD: Si es web personal, y vas a publicitarte como profesional.. creo que mejor usas .com en ves de .org ; Si necesitas ayuda con algo, avisanos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Ultima edición por NEO_JP el 12 May 2005 09:30 pm, editado 1 vez

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 12 May 2005 06:14 am

Por que lo de .com Neo ?

Por kiroti

40 de clabLevel

Envíale un mensaje privado Email

Helsinki- Finlandia

Citar

Escrito el 12 May 2005 08:00 am

por COMercial :lol:

bueno kiroti, que te parecen los cambios?? lo de los separadores me parece buena idea, y la forma de insertar la imágen tb,así q eso lo podemos hacer. Lo demás ya es cuestión de estilos, así que tú decides...

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 12 May 2005 08:31 am

Se ve bien Johnny , me gusta quizas a ver si probamos como dice neo acerca de por ejemplo en vez de PROFILE lo ponemos Profile por ejemplo.

.Gracias Johnny de nuevo , luego nos leemos

Por kiroti

40 de clabLevel

Envíale un mensaje privado Email

Helsinki- Finlandia

Citar

Escrito el 12 May 2005 08:43 am

jejeje, lo acabo de probar todo, y funciona muy bien, muchas gracias Neo. Lo de poner las minúsculas se refiere a que con la propiedad "uppercase" en el archivo css, el texto automáticamente se transforma en mayúsculas, y por eso me ahorro estar pendiente de qué poner en mayusculas y qué no...
si lo prefieres pongo "capitalize" y se queda tal como has dicho. La verdad es que es la primera vez que lo uso, pero parece práctico

He puesto el menú en forma de lista, tal y como dice neo, ahora que lo pienso es así más facil, ya que si queremos añadir elementos sólo tenemos que poner un <li> </li> mas y punto...
de nuevo gracias neo :wink:

estoy aprendiendo mucho yo tb, ya tengo más cosas para meter en el manual que estoy haciendo para kiroti, cuando lo termine os lo paso y le hechais un vistazo.
Saludos...

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 12 May 2005 10:12 am

pero parece práctico

Pues a mi me parece CSS

, para eso se invento

No hay problema, estos son tips muy sencillos, que si se las unes con otros tips mas, se forman mas complejos e interesantes, como todo lenguaje

Saludos, y mucha suerte en esa web que se ve bien bonita.

PD: Baja el Opera y presiona SHIFT + F11 , y mira que tal se ve

Entenderas porque es importante hacer bien la web en XHTML/CSS

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 12 May 2005 10:23 am

hey, que bien!!! queda bastante bien, de la otra forma estaría descentrado, hasta la mia se ve bien!! :lol:

muchas gracias neo!!!

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 12 May 2005 02:37 pm

Acabo de entrar a kiroti.org, tiene buenos trabajos arquitectónicos en 3D. Felicidades Kiroti.

ver kiroti's diseños

Talves algo como esto pueda entrar en el encabezado del nuevo diseño.

Saludos

Por DanielSemper

BOFH

4220 de clabLevel

4 tutoriales
16 articulos

Genero:Masculino Bastard Operators From Hell REC

Envíale un mensaje privado Web

www.aeromental.com

@aeromental

Citar

Escrito el 12 May 2005 02:43 pm

Hemos pensado hacer algo parecido a esto, aunque de momento no está muy claro y ésto sólo es una prueba...
aun así gracias por la idea :wink:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 12 May 2005 07:25 pm

Johnny johnn...

por lo que leo, veo que le estas haciendo la pagina a kiroti

tengo un documento en word de un cliente.. con toda su información...

quiziera ver como se vería en la web utilizando CSS...

que te parece

dime donde te lo mando... amigos asi se necesitan en el mundo

tons que... a donde te lo mando ???

Por Sr. QUHO

SWAT Team

1643 de clabLevel

5 tutoriales
1 articulo

SWAT

Envíale un mensaje privado Email

Citar

Escrito el 12 May 2005 09:25 pm

bueno en realidad es una especie de trueque, él me enseña a mí a manejar ArchiCAD 9 (un programa de arquitectura, ya que es lo que estudiaré el año que viene) con unos video tutoriales que él esta haciendo, y yo a él le enseño a utilizar las css y el xhtml mientras lo aplico a su web. De todas formas me lo puedes enviar a [email protected] y le hecho un vistazo. Además estoy preparando un manual de xhmtl y css desde cero, kiroti tiene ya el primer capítulo, en ese manual iré explicando paso a paso cómo he hecho la web, y así cuando el aprenda ya podrá modificar lo que quiera.
Por otro lado si tienes algún material sobre fundamentos de diseño web o algo parecido me vendría muy bien...

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 12 May 2005 09:26 pm

si no mi numero de cuenta es **-****-******** (salen asteroides) :lol:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 12 May 2005 09:34 pm

Ponle un poco mas de <hr /> para separar mas el contenido, y ponle el <h1> que es el titulo principal, me olvide ponerle el CSS, pero ya actualice el otro post. Sino le pones el H1 pues no se sabe de que va la web.

Saludos!

PD: Mira Aburrimiento Total con el Opera en version PDA (SHIFT + F11), es un buen ejemplo.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 12 May 2005 09:50 pm

Johnny johnn...

lo que te pedí fue en tono sarcastico :roll:

esque no sabia que estaban haciendo un treque, pense que solo le hacias el trabajo solo por hacerlo... :oops:

Por Sr. QUHO

SWAT Team

1643 de clabLevel

5 tutoriales
1 articulo

SWAT

Envíale un mensaje privado Email

Citar

Escrito el 12 May 2005 09:52 pm

no sabia lo del h1, buen aporte de nuevo Neo :wink:

realmente tu lo que dices es ponerlo en el mismo sitio de la imagen de header,no? si es así tengo que esperar a que kiroti modifique la imágen y le queite el título para que no se vea dos veces. Lo de los hr tb los hice, pero tengo un problema, y es que no sé si se pueden paremetrizar para que queden con margin: 0px; ya que al ponerlos separan demasiado el contenido (por ejemplo el menu queda como a unos 60 px del header, y no me gusta así...
gracias por... 4ª vez? :lol: