header y footer, Igual en código en todo el site

[g3kdigital]

Hola, como están?

Bueno mi duda ya ha sido posteada por otras personas en este foro mas de una vez, pero pregunto por una opción más actual y menos compleja para una persona que ya domina html, css y ha dado pinitos en js (ja como no, como mucho jquery). No soy programador, no me asusta la idea de aprender, pero ahora solo me considero diseñador con pinitos en maquetación front-end.

Estrictamente lo que deseo saber:

¿Que recomiendan hoy para mantener un sitio creado sin frameworks, para hacer que el header y el footer sean fáciles de actualizar, cambiando un solo archivo embes de cada html por separado?

No es que tenga algo en contra de los framework (más bien lo contrario), pero estoy en redescubrimientos personales y aprendiendo las bases que en mi carrera (comunicación visual) nunca me dieron, pues porque reitero no estudie nada que tenga que ver con programación. (Aunque sí me enseñaron a copiar y pegar action scripts y a entender estilos css). En fin.

Les presento heippi.com un proyecto que estoy llevando con unos amigos, ingenieros muy buenos en java y .net, pero no con mucha experiencia en la web y mi tarea es el desarollo del front-end y ellos con el back-end.

Este es prácticamente un experimento de mi parte de ver hasta donde soy capaz de "codear" por mi cuenta, el html y css es completamente "mio" a excepción del "normalizer.css", pero aun no esta ni comprimido, ni bien estructurado, o bien comentado, es más cometí un error al pensar que podía prescindir casi del todo de clases, pero al menos sé que ya "domino" el tema responsive (delirios míos). De hecho si pueden probar en diferentes resoluciones o navegadores y me avisan de cualquier bug, se los agradecería mucho (..y algún día si vienen a Colombia me mando las birras).

Tengo una breve idea de como hacerlo, ya sea con jquery o php, lenguajes que apenas conosco y "leo", pero que ya no me dan miedo (por lo menos no como antes) por ejemplo:

Creando una variable "H34DER" que contenga el archivo "header.php" y que pueda inscrustarla en la etiqueta <header> en un archivo index.html, etc.

Voy bien? Voy mal? Que me recomiendan hoy en día?

o Mejor escojo un framework y dejo de matarme tanto? Cual y por qué?

Muchas gracias de antemano por sus respuestas.

Éxitos a todos y que tengan un feliz día!

[Pelipe]

Siempre digo todo depende de que lo se quiera hacer, de los conocimientos y tiempo que dispongas...

- si quieres editar facilmente lo mejor es un miniCMS que tu mismo fabriques y edites, con la finalidad de que te sea facil editar tus contenidos.
- si no quieres editarlo con CMS entonces a codigo limpio editando pagina por pagina, no hay otra forma posible (esa es la forma mas simple)
- pero si el sitio require de muchas actualizaciones de contenido, el CMS propio o ajeno es mejor porque te ahorra tiempo.


Yo he perdido tiempo armando un propio CMS para una tienda digital, pero es que no habia forma porque ningun CMS se adaptaba a mis objetivos y todo se me quedaban cortos.

Pero me ha servido mucho porque he visto tantas cosas que me he mareado, aprendi javascript a lo puro y odiaba mucho jquery a ratos, pero al final todo esto me sirvio de mucho... el tiempo que crei perdido mas bien fue una inversion y ahora aprovecho con Librerias ajenas que me ayudan mucho con el tiempo mas que todo. Bootstrap en el tema de Diseño adaptable es una de ellas esta tan bien aramdo que es facil aprender y editarlo.

Tu pagina se ve bien en diseño adaptable aunque los iconos de tu menu se ven distorsionados en pantallas pequeñas(Firefox) y evita el abuso del color naranja en demasia (opinion mia nada mas).

[g3kdigital]

Sí el tema de los cms, como con frameworks es que los considero para proyectos y clientes reales.

Pero en este caso, es más como un experimento que me permita trabajar en algo más propio y controlado y en el cual tengo asignado la meta de aprender algo más de lo que ya sé.

Gracias por el review del sitio y sí a partir del 480px "para abajo" se me desajusta todo (en esas ando ahora mismo precisamente). También me da un poco de pena que me digas que hay mucho naranja, ya que tienes razón y yo mismo pienso igual :(, pero el logo ni los colores los plantee yo, sino otro diseñador y en este caso, me quiero concentrar más en el desarrollo que en el diseño (Como diseñador me demoro más fabricando imágenes o setiando identidad corporativa casi el doble de tiempo que cuando pienso en el código).

1 - Con respecto a crear mi propio miniCMS ni idea de como empezar, no se programar xP.
2 - Editar página a página es la forma que uso actualmente y me parece impresionante que hoy día sea lo único que haya.
3 - Muy de acuerdo, pero no en este proyecto, porque reitero, mi meta es lograr aprender algo nuevo y no pretendo ahorrar ni escatimar tiempos.

Por cierto he usado bootstrap (hay ago de boilerplate y de bootstrap en el css) pero no es el objetivo y como que aveces le faltan cosillas o tiene otras que lastimosamente están en ingles y no logro comprender del todo.

Muchas gracias por responder.

[pitufoweb]

Iniciado por g3kdigital

Estrictamente lo que deseo saber:

¿Que recomiendan hoy para mantener un sitio creado sin frameworks, para hacer que el header y el footer sean fáciles de actualizar, cambiando un solo archivo embes de cada html por separado?

Busca información sobre "includes" de php.

Básicamente pones el código del footer en un archivo y después lo llamas desde las distintas paginas.





Saludos!

[Pelipe]

Con lo de los iconos puedes usar la librerias de iconos fuente de:

http://fontawesome.io/

Fácil de implementar y note preocupas por los iconos


Con Bootstrap no hubieras tenido problemas con tu menu en pantallas pequeñas...

la funcion include de PHP es buena solucion sin saber programar el menu y el pie de pagina lo manejas en un solo archivo, pero elcontenido deberia variar segun el menu y el contenido.

[pitufoweb]

Iniciado por Pelipe

Con Bootstrap no hubieras tenido problemas con tu menu en pantallas pequeñas...

Y si no tiene esos problemas no aprendería a hacerlo por si mismo y cada vez que quiera hacer algo similar estará "atado" bootstrap. Digo, de los errores se aprende no?



saludos!

[g3kdigital]

Gracias a todos y exactamente a eso me refería pitufoweb, es por aprender algo más que simplemente copiar y pegar código sin saber como funciona, precisamente la opción "include" de PHP, la acabo de buscar y me parece que era lo que estaba buscando.

Por cierto, algun consejo o buena practica con respecto a su uso?

Muy buena recomendación la de fontawesome

Voy a probarlo y cuando pueda armo una demo y se las muestro.

[Pelipe]

Iniciado por pitufoweb

Y si no tiene esos problemas no aprendería a hacerlo por si mismo y cada vez que quiera hacer algo similar estará "atado" bootstrap. Digo, de los errores se aprende no?
saludos!

Exactamente, Si claro porsupuesto, lo de estar atado, eso depende ya de cada uno, el usar una libreria CSS debe liberarte de estar atado mucho tiempo con rutinas repetidas, con un flujo que te puedes ahorrar y si dominas CSS desde lo bajo mucho mejor.

[Pelipe]

Iniciado por g3kdigital

Por cierto, algun consejo o buena practica con respecto a su uso?

¿dices a la del include de PHP? es tan sencillo como incluir un archivo CSS.
¿si dices de CSS? Si aprende Bootstrap aparte de dominar las grillas te familiarizaras con las buenas practicas de las clases, id, padre>hijo, etc.

[pzin]

Yo te aconsejo que no uses Bootstrap.

Obviamente casi nadie edita páginas una a una a mano. Hay herramientas, lenguajes, servicios, etc para aburrir.

En general todas esas cosas lo que hacen es ayudarte a crear código HTML, ya sea un lenguaje de lado servidor, un framework, un lenguaje de preprocesado, etc. Al final va un poco todo a lo mismo. Obviamente hay cosas para CSS, para JavaScript, imágenes, esto, lo otro y aquello.

Si quieres aprender, ni un CMS, ni Bootstrap, ni jQuery ni cosas por el estilo te van a hacer ningún favor. Más adelante te pueden ahorrar trabajo, pero si estás empezando te van a quitar conocimientos, experiencia y hostias que TIENES que darte; la letra con sangre entra mejor decían por ahí.