Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje14-09-2011, 03:02 (UTC)    
Título del mensaje: [HTML-CSS] ¡Web en construcción mas avanzado!

Hola,

Se me ocurrió una idea no hace mucho y quise aportarla aquí en esta sección ya que es tipo tutorial y ala vez sugerencia hacia ustedes haber que les parece, se trata de un intro mas profesional al momento de poner la web en construcción y me dirijo a este tema, no es querer remplazar todo ese tema por este pero incluir este aporte allí creo que sera útil.

+ http://www.paginawebgratis.es/forum/viewtopic.php?t=8521

------------------------------------------------------------------------------------------------------------
Poner la intro para poner la web en construcción
------------------------------------------------------------------------------------------------------------

1) Primero vamos al menú de Su kit de construcción > Controlar extras > Agregar extras > Intro > Agregar extra



2) Segundo vamos a insertar el código CSS y el HTML para instarle el diseño del intro el diseño es de Webme no esta editado nada solo el nombre de unas llaves para utilizarlo en el código html no he intentado plagear nada ya que es un aporte para los usuarios de PWG espero que aprueben esto, el diseño es de cuando una web no existe o esta bloqueada, y quitar el botón de la intro acontinuación les dejo la imagen explicando todo:



Código HTML escribió:
<div id="main">
<div class="header">
<h1><a href="http://www.PaginaWebGratis.es/" title="webme GmbH"><span>webme GmbH</span></a></h1>
</div>
<h2 class="note">¡Esta pagina esta en construcción!</h2>
<div class="additional_info">

<p>Mensaje para los visitantes.</p>

</div>
</div>
<div id="time">
<meta http-equiv="refresh" content="60;url=http://paginawebgratis.es/" />
<p>En <b>60</b> segundos sera dirigido a paginawebgratis.es</p>
</div>


+ ¡Esta pagina esta en construcción!: Este es el titulo que va a mostrar el intro.

+ Mensaje para los visitantes: Es para poner un mensaje para los visitates por ejemplo los motivos de por que esta en construcción la web pueden poner lo que ustedes quieran.

+ 60: Es el tiempo en que tardara en ser dirigido a paginawebgratis.es, lo hara automaticamente si quieren le pueden poner mas tiempo o menos.

+ En 60 segundos sera dirigido a paginawebgratis: Es un mensaje que esta en el footer del diseño de la plantilla del intro esta en miniatura pero legible es para que el usuario sepa que sera dirigido, lo pueden editar a su gusto.


Cogido CSS escribió:
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; font-size: 100 margin: 0; padding: 0; outline: 0; vertical-align: baseline; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear, html body * br.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both; content: '.'; display: block; height: 0; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1 }
.clearfix { display: block; }
hr, .hideme { display: none; }
ol { list-style: decimal; }
ul { list-style: square; }
li { margin-left: 30px; }
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margin-bottom: 20px; }
body { background: #f9f8f3; color: #000; font: 11px 'Arial', Helvetica, Verdana, sans-serif; margin: 0 auto; text-align: center; }
#main { background: #fff; border: 1px solid #d4d3cf; margin: 0 auto; margin-top: 42px; text-align: left; width: 770px; -moz-border-radius: 9px; -khtml-border-radius: 9px; -webkit-border-radius: 9px; }
#time { color: #90968c; margin-top: 10px; }
.header { background: url('http://img.webme.com/img/leute.gif') no-repeat 420px 0px; height: 131px; }
.additional_info { font-size: 12px; line-height: 1.5; margin: 0 25px 25px 25px; }
.additional_info a { background: #ffea74; color: #000; padding: 0 2px; text-decoration: none; }
h1 { margin: 0; padding: 0; }
h1 a, h1 span { cursor: pointer; display: block; height: 131px; text-indent: -9999px; width: 770px; }
h1 a { background-repeat: no-repeat; background-position: 25px 0px; }
h2.note { border-top: 1px solid #d4d3cf; font-size: 28px; text-align: center; margin: 0 25px 25px 25px; padding-top: 30px; }
body h1 a { background-image: url('http://img.webme.com/img/logo_es.gif'); }
</style>


Vista previa del intro:


Esto es espero que ustedes los usuarios y el staff de PWG lo acepten y lo agreguen al post que deje al crear el tema y sera un aporte mas útil.

Saludos!
Atte: iPWG


Ultima edición por ipwg el Jue Nov 17, 2011 10:51 pm; editado 3 veces
Mensaje14-09-2011, 10:10 (UTC)    
Título del mensaje:

Muchas gracias por tú contribución, realmente ésta muy bueno.

Veremos que se puede hacer al respecto con tú petición. Pero veremos que se puede hacer y los mantengo informados.

Nota: Tema movido a "Acerca de codigos"

Saludos!
Design-PWG
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com


Ultima edición por design-pwg el Mie Sep 14, 2011 12:27 pm; editado 3 veces
Mensaje14-09-2011, 16:25 (UTC)    
Título del mensaje:

muy bueno exelente aporte
______________
http://img.webme.com/pic/a/ayuda031/firma012221.png imagen redimensionada por exceso de tamaño
Mensaje14-09-2011, 16:47 (UTC)    
Título del mensaje:

Muy buen aporte, está muy bueno. Gracias por compartirlo!
Mensaje14-09-2011, 17:07 (UTC)    
Título del mensaje:

Hola,
excelente tutorial, me encantó el resultado, y como siempre un gran trabajo ipwg, felicitaciones.
PD: me gusta mucho tu estilo de organizar el tema.
Mensaje14-09-2011, 17:25 (UTC)    
Título del mensaje:

@design-pwg
Me alegro que te halla gustado la idea y espero que así como te gusto ati les guste al resto y que acepte esta petición que creo que sera útil y a los usuarios les gusta la idea.

@ayuda031
Muchas gracias amigo me alegro que te halla gustado.

@insaniquarium-deluxe
Muchas gracias amigo ojala que muchos users que ponen sus web en construcción lo usen no son muchos pero si hay usuarios que lo hacen.

@nesbet
Primero gracias por el agradecimiento también me alegra que halla gustado el resultado jeje y que bueno que te guste mi forma de organizar los post jeje son atractivos en mi opinión , y ojala que se aprueba esta idea.
Mensaje14-09-2011, 18:42 (UTC)    
Título del mensaje: Re: ¡Web en construcción mas avanzado!

Por que los tutoriales son son iguales a los de Desing-pwg ?
Salteo eso, y me encanto el Tutorial . Tambien concuerdo con Nesbet, sos muy organizado al Crear Tutoriales.
Mensaje14-09-2011, 20:27 (UTC)    
Título del mensaje:

muy buen tutorial como siempre,saludos



______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje14-09-2011, 20:48 (UTC)    
Título del mensaje:

@brianpwg
Creo que estas equivocado que mis tutoriales son iguales a los de design-pwg tengo mucho tiempo haciendo mis tutoriales así y el hace los suyo no tengo que ver nada con el fíjate bien, y gracias por el comentario.

@nuestrasxarlas
Gracias amigo me alegra que te halla gustado y seguiré aportando en lo que pueda.
Mensaje14-09-2011, 21:18 (UTC)    
Título del mensaje:

Cita:
[quote="ipwg"]@brianpwg
Creo que estas equivocado que mis tutoriales son iguales a los de design-pwg tengo mucho tiempo haciendo mis tutoriales así y el hace los suyo no tengo que ver nada con el fíjate bien, y gracias por el comentario.


nono, me refiero que lo hacen proligos, tambien conservan el mismo logo que dice IPWG.ES.TL, no es para decir nada ofensivo, Sino que los hacen proligos y usando colores . haci como los que usaste para Este tutorial.
Mensaje14-09-2011, 23:53 (UTC)    
Título del mensaje:

La verdad que no me he fijado bien como hace design-pwg he visto algunas imágenes pero en mi opinión mis imágenes y sus imágenes son distintas no hay nada en común pero no pasa nada no desviemos el tema en esto, y por los colores no lo copie de nadie la verdad lo hago para resaltar mas las imágenes y el tutorial y sea mas entendible

Saludos!
Mensaje15-09-2011, 18:36 (UTC)    
Título del mensaje: Re: ¡Web en construcción mas avanzado!


Excelente aporte broo muy bueno enserio muy bien redactado y explicado realmente mis respetos

saludos!
______________
Visitar sitio web


Mensaje16-09-2011, 05:15 (UTC)    
Título del mensaje:

Gracias amigo me alegra mucho que te halla gustado y que lo hallas entendido bien.

Saludos!
Mensaje16-09-2011, 21:10 (UTC)    
Título del mensaje:

muy interesante esto...
Saludos
Mensaje16-09-2011, 21:14 (UTC)    
Título del mensaje:

Jeje si amigo seguramente es muy útil en mi opinión y al parecer a todos les ha gustado

¡Muchas gracias!
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group