Share
Lo que vas a crearProbablemente sepa que Dropbox es perfecto para almacenar copias de seguridad de datos y compartir archivos, pero ¿sabía que también puede usarlo como host de sitios web estáticos? Gracias a las aplicaciones ingeniosas como DropPages, que estaremos cubriendo aquí hoy, puede!
El proceso detrás de DropPages es realmente brillante. Simplemente le da acceso a la aplicación DropPages a su cuenta de Dropbox y crea una carpeta "My.DropPages" en la que cargará los archivos de su sitio web. Luego, cuando la gente visita su dominio, DropPages actúa como un intermediario entre el navegador y su cuenta de Dropbox, recuperando los archivos de su carpeta "My.DropPages" y sirviéndolos como un sitio web completamente funcional..
Como Dropbox viene con una aplicación que sincroniza los archivos en su computadora con su almacenamiento en línea, puede mantener su sitio localmente y permitir que Dropbox cargue los archivos automáticamente por usted. Esto significa que no hay que preocuparse por el FTP y, dado que sus archivos están tanto desconectados como en Dropbox, en esencia están respaldados de forma predeterminada.
Durante este tutorial, te mostraré cómo hacer un sitio estático clásico de cinco páginas con DropPages, usando una versión modificada de la plantilla "Cuda" de Graphic Burger.
No nos centraremos en cómo se escribe el HTML y CSS base para la plantilla, sino en cómo manejar la integración con DropPages. Todo el código de plantilla requerido se incluirá en el formato listo para copiar y pegar a continuación, o puede descargar los archivos de origen a través de Descargar adjunto botón aquí en la barra lateral.
Vamos a empezar!
Si aún no lo ha hecho, vaya a Dropbox y regístrese, luego descargue e instale la aplicación que proporcionan para sincronizar sus archivos sin conexión con su almacenamiento en línea.
Luego diríjase a http://my.droppages.com/ e inicie sesión con los detalles de su cuenta de DropBox. Al hacer esto, le está dando a DropPages acceso para configurar una carpeta en su cuenta de Dropbox que albergará su sitio web. Después de que la aplicación Dropbox sincronice sus archivos en línea con su computadora, verá una estructura de carpetas como esta en su carpeta sin conexión de Dropbox:
Cada uno de los sitios que cree a través de DropPages vivirá en esta carpeta. Ya estás listo para seguir adelante y crear un nuevo sitio..
Después de otorgar acceso a su cuenta de Dropbox, debe ser redirigido automáticamente a su panel de DropPages. Si no, puede acceder a él en http://my.droppages.com/account
Para crear un nuevo sitio, haga clic en el botón azul "Crear un nuevo sitio":
Luego se lo llevará a una página donde puede especificar el dominio que desea usar para su sitio. Puede usar cualquier subdominio que no haya sido usado por otro usuario de DropPages, pero debe asegurarse de incluir la parte "droppages.com" del dominio cuando ingrese su elección, de este modo:
Después de ingresar su dominio, haga clic en el botón "Crear" y DropPages configurará la estructura de carpetas para su nuevo sitio dentro de su carpeta "My.DropPages". Cuando se sincronice con tu carpeta de Dropbox sin conexión, se verá así:
Los propósitos de las tres carpetas que ves son:
Accentsconagua
.TXT archivos escritos en markdown y / o HTML para formar el contenido de las páginas de su sitio.Cuando se crea su sitio por primera vez, incluye un archivo de marcador de posición en cada una de estas carpetas:
Cuando visite su dominio DropPages recién creado, esos tres archivos le darán esto:
Lo primero que vamos a hacer es agregar un estilo de tema personalizado alrededor de este contenido básico, reemplazando el código en los archivos "main.css" y "base.html" existentes..
Cuando me refiero a la edición de archivos del sitio a lo largo de este tutorial, esto significará que usará su editor de código preferido directamente en los archivos sin conexión. Dropbox > Aplicaciones > My.DropPages > mysubdomain.droppages.com carpeta.
Después de guardar los cambios en el archivo que está editando, deje que su aplicación de Dropbox cargue un poco de tiempo para cargar sus archivos en su cuenta, luego actualice el sitio de DropPages para ver cómo se activan sus modificaciones..
Como mencioné anteriormente, no vamos a hablar sobre los procesos reales detrás de la creación de la base CSS y HTML de este diseño de plantilla, por lo que podemos concentrarnos en el manejo de la integración de DropPages. Dicho esto, aquí hay una hoja de estilo que preparé anteriormente..
Copie todo el código a continuación y péguelo en el archivo "main.css" en la carpeta "Pública" de su sitio (prepárese, es un pedazo ...)
Público > main.css
html font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, main, nav, section, summary display: block; audio, lienzo, progreso, video pantalla: bloque en línea; alineación vertical: línea de base; audio: no ([controles]) mostrar: ninguno; altura: 0; [oculto], plantilla pantalla: ninguna; abbr [título] borde inferior: 1px con puntos; b, fuerte font-weight: negrita; dfn font-style: italic; marca fondo: # ff0; color: # 000; pequeño font-size: 80%; sub, sup font-size: 75%; línea de altura: 0; posición: relativa; alineación vertical: línea de base; sup arriba: -.5em; sub inferior: -.25em; svg: not (: root) desbordamiento: oculto; figura margen: 1em 40px; pre desbordamiento: auto; code, kbd, pre, samp font-family: monospace, monospace; tamaño de letra: 1em; botón, entrada, optgroup, select, textarea color: inherit; fuente: heredar; margen: 0; botón desbordamiento: visible; botón, seleccione text-transform: none; botón, entrada html [tipo = "botón"], / * 1 * /, entrada [tipo = "restablecer"], entrada [tipo = "enviar"] -webkit-apariencia: botón; cursor: puntero; botón [deshabilitado], entrada html [deshabilitado] cursor: predeterminado; botón :: - moz-focus-inner, entrada :: - moz-focus-inner border: 0; relleno: 0; entrada line-height: normal; input [type = "checkbox"], input [type = "radio"] box-sizing: border-box; relleno: 0; input [type = "number"] :: - webkit-inner-spin-button, input [type = "number"] :: - webkit-outer-spin-button altura: auto; entrada [tipo = "búsqueda"] -webkit-apariencia: campo de texto; Tamaño de la caja de contenido: cuadro de contenido; -webkit-box-sizing: content-box; tamaño de caja: caja de contenido; entrada [tipo = "búsqueda"] :: - webkit-search-cancel-button, entrada [tipo = "búsqueda"] :: - webkit-search-decoration -webkit-apariencia: ninguna; fieldset border: 1px solid # c0c0c0; margen: 0 2px; relleno: .35em .625em .75em; legend border: 0; relleno: 0; textarea desbordamiento: auto; optgroup font-weight: negrita; table border-collapse: collapse; espaciado de la frontera: 0; td, th padding: 0; * box-sizing: border-box; -mano-caja de tamaño: cuadro de borde; html ancho: 100%; altura: 100%; cuerpo margen: 0; ancho: 100%; altura: 100%; color de fondo: # e7f1f8; Familia de fuentes: 'Titillium Web'; a, a: visit, a: link text-decoration: none; color: # 3c5499; a: hover, a: active color: # 17c2a4; h1, h2, h3, h4, h5, h6 familia de fuentes: 'Titillium Web'; línea de altura: 1.313em; h1 font-size: 2.625em; margen: .563em 0; h2 font-size: 2.25em; margen: .563em 0; hr border: 0; borde inferior: .25em sólido # e7f1f8; .short ancho: 5.625em; .wrap ancho: 100%; ancho máximo: 75em; margen: 0 auto; posición: relativa; .wrap: antes, .wrap: después de contenido: ""; pantalla: tabla; .wrap: after clear: both; .site_header: antes de contenido: ""; color de fondo: # 17c2a4; ancho: 100%; altura: 40.625rem; posición: absoluta; índice z: -1; arriba: 0; izquierda: 0; derecha: 0; .site_header text-align: center; color: #fff; relleno: 1.618rem 0 3.236rem 0; .site_title font-size: 4.5rem; margen: 0; .site_title a color: #fff; .site_tagline font-size: 1.125em; margen: 0; .site_tagline a color: #fff; .mainmenu background-color: # 87509c; radio del borde: .375em .375em 0 0; min-altura: 3.75em; parte inferior de relleno: .875em; text-align: center; .mainmenu ul estilo de lista: ninguno; pantalla: bloque en línea; margen: 0; .mainmenu li display: inline-block; margen: .875em .25em 0 .25em; .mainmenu a padding: 0 1.125em; transformación de texto: mayúsculas; color: #fff; línea de altura: 2em; .mainmenu .current, .mainmenu li: hover, .mainmenu li: active background-color: # 643a79; radio del borde: .25em; .content font-size: 1.125em; color de fondo: #fff; color: # 3c4761; relleno: 3.236em; min-altura: 37.5rem; .content: before, .content: after content: ""; pantalla: tabla; .content: after clear: both; .contentwrap position: relative; .secondarynav float: derecha; margen: 0 0 1.618rem 1.618em; borde: .0625rem solid # e7f1f8; ancho mínimo: 18.75rem; relleno: 0 1.618rem; .breadcrumbs ul list-style: none; margen izquierdo: 0; relleno-izquierda: 0; .breadcrumbs li display: inline; .breadcrumbs li: before content: ">"; .breadcrumbs li: first-child: before content: ""; .bigbutton border-radius: 4px; cursor: puntero; clip de fondo: caja de relleno; color de fondo: # eb7d4b; cuadro de sombra: recuadro 0 -4px 0 # c7693f; borde: 0; margen: 3.236em auto; bloqueo de pantalla; text-align: center; ancho: auto; .bigbutton a padding: 1.125em 4.375em; transformación de texto: mayúsculas; color: #fff; font-weight: negrita; pantalla: bloque en línea; .candocols ancho: 25%; flotador izquierdo; text-align: center; margen: 4.854rem auto; .site_footer background-color: # 3c5499; relleno: 1.618rem 0; text-align: center; .site_footer a color: #fff; tamaño de letra: 1.5em; peso de la fuente: 600; margen: 0 1.618rem; .site_footer a: hover color: # 30bae7; @media (max-width: 55rem) .candocols width: 50%; margen: 1.618rem auto; @media (max-width: 35rem) .candocols width: 100%; @media (ancho máximo: 320 px) html ancho mínimo: 320 px;
Este CSS manejará todos los elementos esenciales de diseño, tipografía, combinación de colores y capacidad de respuesta.
Ahora solo tenemos que colocar esa hoja de estilo en nuestra plantilla principal, así como agregar algunos extras como encabezado y pie de página..
Copie todo el código a continuación y péguelo en el archivo "base.html" en la carpeta "Plantillas" de su sitio.
Plantillas > base.html
Fácil sitio estático a través de DropPages.com Sitio estático fácil
Edita localmente y hospédate instantáneamente en Dropbox con DropPages.com
Cuerpo
Este código HTML hace algunas cosas. Presenta la hoja de estilo "main.css" que acaba de editar, así como una fuente web de Google. Crea un encabezado estático que muestra el título y el lema del sitio, y un pie de página con algunos enlaces a varios sitios de redes sociales y portafolio. También crea un espacio para que viva un menú de navegación principal, así como un espacio para que aparezca el contenido.
La integración con DropPages se realiza a través de dos etiquetas de plantilla muy simples:
Navegacion primaria - Esto hace que aparezca una lista desordenada de todas las páginas de su sitio, incluida la página de inicio..Cuerpo - Esto genera el contenido de los archivos que agregará a su carpeta de "Contenido".Tenga en cuenta la ubicación de estas dos etiquetas de plantilla en el código HTML anterior, con la Navegacion primaria etiqueta colocada dentro de la nav elemento, y el Cuerpo etiqueta colocada dentro de la principal elemento.
En la actualización de su sitio ahora debería verse así:
Observe cómo el mismo contenido "Hello world" que vio en su nuevo sitio predeterminado todavía está en su lugar, pero rodeado del estilo que acabamos de agregar a través de los archivos "main.css" y "base.html".
Ahora continuemos y agreguemos parte de nuestro propio contenido de página de inicio personalizado..
Como parte del contenido de nuestra página de inicio personalizada, incluiremos cuatro imágenes. Puede obtener sus propias copias de estas imágenes de los archivos de origen adjuntos a este tutorial. Después de descargar y extraer el principal. EasyDropPagesStaticSite.zip archivo verá un segundo archivo zip dentro de nombre homepage_images.zip. Extraiga este archivo y coloque las imágenes que contiene en la carpeta "Pública" de su sitio.
Luego copie todo el código a continuación y péguelo en el archivo "index.txt" en la carpeta "Contenido" de su sitio.
Contenido > index.txt
:base¡Hola! Somos los nuevos niños del bloque y creamos sitios web y aplicaciones móviles increíbles..
TENEMOS HABILIDADES!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tiempo incididunt ut labore et dolore magna aliqua.
La primera línea de este archivo es la más significativa en cuanto a la integración de DropPages. Especifica en qué plantilla desea que se represente su contenido.
En este caso, queremos que este contenido se represente en la plantilla "base.html", por lo que la primera línea del archivo debe ser: :base Puede especificar que un archivo de contenido debe representarse en cualquier archivo de plantilla, una característica que usaremos más adelante.
Los archivos de contenido de DropPages pueden representar Markdown o HTML. Si está interesado en obtener más información acerca de la sintaxis de Markdown, consulte Markdown: The Ins and Outs.
Nota: Un "entendido" a tener en cuenta es que si envuelve una línea de Markdown en HTML, DropPages no la procesará. Otra es que si usa Markdown para texto, no hay sintaxis disponible para centrarlo.
Por ejemplo, en el código anterior hay cuatro imágenes colocadas, cada una envuelta en un div Con un estilo que los hará emplazarse lado a lado en columnas. Para agregar una imagen a través de Markdown usarías la sintaxis ![Texto alternativo] (/ path / to / img.jpg). Sin embargo, descubrí que cuando Markdown de la imagen estaba envuelto en los divs que usé anteriormente, no se procesaban, lo que generaba el código Markdown real en la página..
Entonces, dado que queremos que nuestra página de inicio tenga imágenes envueltas en divs, y queremos texto centrado, todo el contenido agregado al archivo "index.txt" está escrito en HTML.
Actualiza tu sitio y ahora debería verse así:
Ahora tenemos algunos contenidos de página de inicio personalizados, por lo que es hora de agregar algunas subpáginas adicionales. Comencemos con la ubicua página "Acerca de".
Para agregar páginas adicionales a su sitio de DropPages, todo lo que tiene que hacer es crear una nueva .TXT archivos en su carpeta de "Contenido". Los enlaces a ellos aparecerán automáticamente en el menú "Navegación principal".
El nombre que aparece en su menú se tomará directamente del nombre de su archivo de contenido, es decir,. Mi nombre de página.txt. Además, puede controlar el orden de los enlaces de sus menús al anteponer cada archivo de contenido con un número seguido de un punto.
Queremos que el segundo enlace de nuestro menú esté en nuestra página "Acerca de", por lo que en su carpeta "Contenido" cree un nuevo archivo de texto y asígnele un nombre: 2.Acerca de nuestro estudio.txt
Agregue el siguiente código a su nuevo archivo:
: base Acerca de nuestro estudio ======== (texto de marcador de posición de [http://notloremipsum.com/◆(http://notloremipsum.com/)) Somos un estudio de diseño bastante pequeño y flexible que diseñamos para impresión y web. Trabajamos con flexibilidad con los clientes para satisfacer sus necesidades de diseño. Ya sea que necesite crear una marca desde cero, incluyendo materiales de marketing y un sitio web bonito y funcional, o si está buscando una actualización de diseño, estamos seguros de que estará satisfecho con los resultados. Ofrecemos los siguientes servicios: - Marcas - Logos - Sitios web - Aplicaciones web - Desarrollo web - HTML5, CSS, jQuery - Sistemas de administración de contenido - Diseño web sensible - Ilustración - Tarjetas de presentación - Papel de carta y hojas de cortesía - Folletos - Envíos de correo - Tarjetas de citas
Esta vez no necesitamos ningún envoltorio div ni texto centrado, por lo que el código está escrito completamente en la sintaxis de Markdown.
Actualice el sitio y debería ver el enlace "Acerca de nuestro estudio" que acaba de agregar en su menú de navegación principal. Haga clic en ese enlace y lo llevarán a su nueva página, que debería verse así:
Agregar páginas para su sitio DropPages es tan simple como eso. Simplemente cree un nuevo archivo de texto, asígnele un nombre de acuerdo con lo que desea que aparezca en su menú, complételo con su contenido y listo..
DropPages también te da la posibilidad de crear subpáginas de segundo nivel. Por ejemplo, es posible que desee crear una página llamada "Meet the Team" que tenga enlaces a una subpágina para cada miembro del equipo. En esta sección te mostraré cómo.
Para nuestra página "Reunirse con el equipo" queremos mostrar enlaces a una subpágina para cada uno de los miembros de nuestro equipo, sin embargo, nuestra plantilla base no incluye un área para mostrar dichos enlaces. Como tal, vamos a crear una plantilla personalizada para manejar este requisito adicional.
Las plantillas de DropPages tienen la capacidad de cascada, lo que significa que una plantilla puede cargarse en el Cuerpo etiqueta de otra plantilla.
En nuestro caso, queremos agregar un área con enlaces a nuestras subpáginas, pero todavía queremos usar el HTML de la plantilla "base.html". Para que esto suceda, cree un nuevo archivo en la carpeta "Plantillas" y asígnele el nombre "withsubpages.html". Luego copie y pegue el siguiente código:
Plantillas > withsubpages.html
:baseCuerpoNuestra gente
SecondaryNavigation
Como se vio anteriormente en nuestro archivo de contenido "index.txt", esta plantilla también usa el :base Notación en la primera línea. Esto le permite al sistema saber que el HTML de esta plantilla debe cargarse en el Cuerpo etiqueta de la plantilla "base.html".
El contenido de la página real se cargará en el Cuerpo etiqueta de la plantilla "withsubpages.html".
En caso de que sea algo confuso, el proceso de carga puede resumirse como: base.html> Body> withsubpages.html> Body> contenido de la página.
En nuestro nuevo archivo "withsubpages.html", agregamos un div envoltorio alrededor del contenido de la página, y agregamos un cuadro que se colocará a la derecha y contiene la etiqueta de la plantilla: SecondaryNavigation. Esta etiqueta de plantilla crea una lista desordenada de cualquier hermano o página secundaria.
A continuación, veamos cómo crea realmente las subpáginas cuyos enlaces aparecerán en ese cuadro de "Navegación secundaria".
Cuando quiera que una página tenga subpáginas, en lugar de crear una .TXT archivo en la carpeta "Contenido", se crea un directorio. Ese directorio contendrá la página de nivel superior así como cualquiera de sus hijos..
Utiliza las mismas convenciones de nomenclatura para el directorio como lo haría para una .TXT archivo, es decir, comience con un número para indicar la posición del enlace de navegación principal, luego use el nombre que desee que aparezca en el menú.
Cree una carpeta en el directorio "Contenido" y asígnele el nombre "3.Conoce el equipo".
Dentro de esa carpeta cree un archivo llamado "index.txt". El código que agregue a este archivo formará el contenido de la página "Conozca al equipo" de su nivel superior.
Copia y pega en el siguiente código:
Contenido > 3.Conoce el equipo > index.txt
: withsubpages ## Conozca al equipo Antes de elegirnos para encargarnos de su proyecto, es probable que desee saber un poco más sobre nosotros, así que conozca al equipo: Ross tiene más de 10 años de experiencia en la industria. Es nuestro Director Creativo, diseñador digital, diseñador web y desarrollador de aplicaciones para usuario. También es bastante bueno con un cuaderno de bocetos. Antes de comenzar la empresa, Ross trabajó como diseñador y gerente de estudio para una casa de diseño que contaba con varios clientes de renombre. Ross ha traído su vasta experiencia de este papel al trabajo que hace ahora. Mónica es la hermana de Ross, nuestra directora de arte y se especializa en diseño gráfico y de impresión. También ha trabajado con algunos grandes nombres y sus diseños le han ganado varios premios de la industria. Rachel y Chandler son nuestros diseñadores junior. Rachel es una diseñadora web con conocimientos de HTML y CSS y es compatible con Ross en proyectos. Chandler acaba de terminar su licenciatura en Diseño Gráfico y disfruta continuar aprendiendo de Mónica y desarrollando su experiencia. Joey y Phoebe se enfocan en traer nuevos negocios a la compañía. Recientemente han ganado varios clientes importantes y ambos también tienen calificaciones en gestión de proyectos para garantizar que los proyectos se desarrollen sin problemas desde el principio hasta el final..
Nota: En la primera línea de este código ya no agregamos :base. En su lugar, añadimos : con sub-páginas ya que esto especifica que queremos que el contenido de la página se cargue en la plantilla "withsubpages.html".
Con el contenido principal de "Meet the Team" en su lugar en el archivo "index.txt", ya está listo para agregar subpáginas. El proceso de agregar archivos dentro de esta carpeta es el mismo que siguió para agregar la página "Acerca de" en la carpeta de nivel superior. Simplemente crea un nuevo .TXT Archivo, con un número para ordenar y un nombre para controlar su texto de enlace en el cuadro de navegación secundario.
Cree un archivo llamado "1.Ross and Monica.txt" y agregue este contenido en:
Contenido > 3.Conoce el equipo > 1.Ross y Monica.txt
: withsubpages ## Ross y Monica Ross tiene más de 10 años de experiencia en la industria. Es nuestro Director Creativo, diseñador digital, diseñador web y desarrollador de aplicaciones para usuario. También es bastante bueno con un cuaderno de bocetos. Antes de comenzar la empresa, Ross trabajó como diseñador y gerente de estudio para una casa de diseño que contaba con varios clientes de renombre. Ross ha traído su vasta experiencia de este papel al trabajo que hace ahora. Mónica es la hermana de Ross, nuestra directora de arte y se especializa en diseño gráfico y de impresión. También ha trabajado con algunos grandes nombres y sus diseños le han ganado varios premios de la industria..
De nuevo, usamos el : con sub-páginas notación para cargar esta página en la plantilla "withsubpages.html".
Crea un segundo archivo llamado "2.Juniors and Sales.txt"con este contenido dentro de:
Contenido > 3.Conoce el equipo > 2.Juniors y Sales.txt
: withsubpages ## Juniors and Sales Rachel y Chandler son nuestros diseñadores junior. Rachel es una diseñadora web con conocimientos de HTML y CSS y es compatible con Ross en proyectos. Chandler acaba de terminar su licenciatura en Diseño Gráfico y disfruta continuar aprendiendo de Mónica y desarrollando su experiencia. Joey y Phoebe se enfocan en traer nuevos negocios a la compañía. Recientemente han ganado varios clientes importantes y ambos también tienen calificaciones en gestión de proyectos para garantizar que los proyectos se desarrollen sin problemas desde el principio hasta el final..
Actualice su sitio y debería ver el nuevo enlace "Reunirse con el equipo" en la barra de navegación. Haga clic en él y su nueva página debería aparecer con un enlace a cada subpágina en el cuadro de navegación secundario en el lado derecho. Cada una de sus subpáginas también debe tener el mismo diseño, así:
En términos generales, con los sitios estáticos, cinco parece ser el número mágico de páginas a tener (no tengo idea de por qué). Continuemos y agreguemos dos páginas más a su sitio para redondear ese número.
En su carpeta "Contenido", cree un archivo llamado "4.Markdown Illustrations.txt" y agregue el siguiente código:
Contenido > 4.Markdown Ejemplos.txt
